Web Inspector: Styles: Writing mode relative longhands specified by User Agent not shown crossed out when overwritten using absolute shorthand

• Component: Web Inspector
• Status: NEW ---

If the user overwrites properties using an absolute shorthand, which the User Agent style sheet set using writing mode relative longhand properties, then they are not correctly shown as ~~crossed out~~ in the Styles pane of the Web Inspector developer tools.

Currently, the only writing mode relative longhands used in the User Agent style sheet are `margin-*` and `padding-*` used on for example the `<p>` and the `<ul>` element.

Absolute longhands are shown correctly as crossed out when using the absolute shorthand, for example the `padding-*` and `border-*` on a `<button>` element. 

---

User style sheet

```html
<p>Hello World</p>
```

```css
p {
  display: flex;
  margin: 0;
}
```

User agent style sheet

```
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
```

SHOULD result in

```
p {
~~display: block;~~
~~margin-block-start: 1em;~~
~~margin-block-end: 1em;~~
~~margin-inline-start: 0px;~~
~~margin-inline-end: 0px;~~
}
```

INSTEAD results in

```
p {
~~display: block;~~
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
```

[Radar WebKit Bug Importer]

<rdar://problem/82287123>