Bug 229184 - Web Inspector: Styles: Writing mode relative longhands specified by User Agent not shown crossed out when overwritten using absolute shorthand
Summary: Web Inspector: Styles: Writing mode relative longhands specified by User Agen...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-08-17 04:54 PDT by bugmenot
Modified: 2021-08-24 04:55 PDT (History)
5 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description bugmenot 2021-08-17 04:54:58 PDT
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;
}
```
Comment 1 Radar WebKit Bug Importer 2021-08-24 04:55:19 PDT
<rdar://problem/82287123>