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

• Status: NEW
• Component: Web Inspector

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>