[csswg-drafts] [css-lists] Are outside markers out-of-flow? (#4574)

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

== [css-lists] Are outside markers out-of-flow? ==
The spec used to explain outside markers using `position: marker`, which counted as absolutely positioned, and thus out-of-flow.

Then `position: marker` was removed, and in #3771 @MatsPalmgren claims that abspos may not be web compatible. But maybe we can agree on whether they are out-of-flow or not?

This matters for example when propagating [text decorations](https://drafts.csswg.org/css-text-decor-4/#line-decoration):

> the decorations are propagated to all in-flow children

Consider this [testcase](https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0Adiv%20%7B%20display%3A%20list-item%3B%20margin-left%3A%2040px%3B%20white-space%3A%20pre%20%7D%0Adiv%3Anth-child(1)%20%7B%20list-style-type%3A%20decimal%20%7D%0Adiv%3Anth-child(2)%20%7B%20list-style-type%3A%20%221.%20%22%20%7D%0Adiv%3Anth-child(3)%3A%3Amarker%20%7B%20content%3A%20%221.%20%22%20%7D%0A%3C%2Fstyle%3E%0A%3Ca%20href%3D%22%22%3E%0A%20%20%3Cdiv%3Eitem%3C%2Fdiv%3E%0A%20%20%3Cdiv%3Eitem%3C%2Fdiv%3E%0A%20%20%3Cdiv%3Eitem%3C%2Fdiv%3E%0A%3C%2Fa%3E):

```html
<a href="">
  <div>item</div>
  <div>item</div>
  <div>item</div>
</a>
```
```css
div { display: list-item; margin-left: 40px; white-space: pre }
div:nth-child(1) { list-style-type: decimal }
div:nth-child(2) { list-style-type: "1. " }
div:nth-child(3)::marker { content: "1. " }
```

| Firefox | Chromium LayoutNG | Chromium legacy |
| ------------- | ------------- | ------------- |
| ![firefox](https://user-images.githubusercontent.com/7477678/70396352-80221800-1a08-11ea-8a16-0a1b19dddf2f.png)  | ![layoutng](https://user-images.githubusercontent.com/7477678/70396354-87492600-1a08-11ea-9892-6ab412a368d3.png)  | ![legacy](https://user-images.githubusercontent.com/7477678/70396358-8d3f0700-1a08-11ea-9bd4-a84b12472244.png) |

Should the markers be underlined or not? I think taking them out-of-flow (and thus not underlining them) looks better. I guess they could then be painted at step 5 with "non-positioned floating descendants" https://drafts.csswg.org/css2/zindex.html#painting-order





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

Received on Sunday, 8 December 2019 21:40:30 UTC