[csswg-drafts] [css-lists][css-pseudo] Interaction of ::marker and ::first-line

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-lists][css-pseudo] Interaction of ::marker and ::first-line ==
CSS Lists defines [`::marker`](https://drafts.csswg.org/css-lists/#marker-pseudo-element) as

> Markers are placed at the beginning of their originating element’s content, before the [`::before`](https://drafts.csswg.org/css-pseudo-4/#selectordef-before) pseudo-element (if it exists). [`::marker`](https://drafts.csswg.org/css-lists/#selectordef-marker) pseudo-elements are inline by default, though certain values for [`list-style-position`](https://drafts.csswg.org/css-lists/#propdef-list-style-position) on the list item can make the marker box positioned, which can have an effect on the computed value of display.

This seems to imply that, as inline content, `::marker` is inside `::first-line` by default.

But I did a test (https://jsfiddle.net/x6416ote/) and browsers don't do this.

```
ul { color: red; list-style: inside }
li::first-line { color: green; background: yellow }
```

 - All Firefox, Chrome and Edge paint the marker with red color. It does not inherit green color from `li::first-line` despite theoretically being an inline content at the beginning of the `li`.
 - On Firefox, the yellow background starts after the bullet. So it seems what happens is that the bullet is always treated as out-of-flow, and thus is not inside `::first-line`.
 - On Chrome and Edge, the yellow background starts before the bullet. So it seems the bullet is inside `::first-line` despite not inheriting from it.
 - Interestingly, on Edge, the marker has green color when it has `list-style-position: outside`, despite theoretically being an out-of-flow content and the yellow background starting after the bullet.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1442 using your GitHub account

Received on Monday, 22 May 2017 19:29:35 UTC