[css-lists] position:marker as layout model for list-style-position:outside list item markers

[MatsPalmgren]

https://drafts.csswg.org/css-lists-3/#position-marker

An element with position:marker counts as absolutely positioned.

Given the above quote, I have some doubt regarding using position:marker as a description of how layout works for list-style-position:outside list item markers. Making it positioned changes the stacking level in which it is painted. Given how prevalent <li> is on the web, I strongly doubt this would be web-compatible. Non-positioned content that happens to overlap a ::marker must paint on top of it.

FYI, Gecko has implemented ::marker and we made the following tweaks for it to make it compatible with the legacy rendering:

1. when the list item has list-style-position:outside, the display value of the ::marker pseudo-element is blockified
2. the ::marker box inline-size shrink-wraps by default
3. the ::marker box inline-axis margins are not calculated per the CSS2 block-level algorithm (because that would typically make the inline-end margin very large and thus misposition the ::marker)

I think those tweaks are non-controversial since I think they would fall out from making it absolutely positioned anyway, as the spec suggests, so I think it's within the intent of the spec regarding the layout result. But, we do not treat it as absolutely positioned in our box tree.

[fantasai]

Random thought: maybe marker should be a display value rather than a position value.

[jonjohnjohnson]

I still think this might emerge as a go-to outside marker solution, regardless of all this spec scheming: #2361 (comment)

[MatsPalmgren]

Random thought: maybe marker should be a display value rather than a position value.

It should be a new <display-outside> value, or an additional keyword, in that case. I think it would ruin this feature if you can't specify the marker's internal layout to be grid etc. Compare table-caption/cell, which has severely limited layout because you can't specify a <display-inside> value.

::marker, table-caption, <legend> and <summary> have a lot in common in this respect. They are in-flow by default, but not quite, since they aren't flowed normally together with other children in the layout context. Semantically, they're like a third variation of "flow" (besides in-flow, out-of-flow). I wonder if we should model them in the same way for that reason. Either through <display-outside> or a new property. E.g.

<display-outside> = block | inline | run-in | marker | caption | cell | legend | summary

This would add a lot more power to authors to control the layout without having to add wrapper elements. E.g. <caption> would have display: caption flow-root by default, but you could also specify <caption style="display: caption grid"> to display its children using Grid layout.
legend | summary allows an arbitrary child to be displayed as the rendered legend/summary in a fieldset/details element.

(FYI, It would be trivial to support table captions/cells with internal grid/flex/table layout in Gecko. The only thing missing is some way to specify it in CSS.)

[fantasai]

@MatsPalmgren So I totally agree with your comment above, but it's like a lot of issues in one. :) Gonna try to split them out and keep this tagged against css-lists-4 since the OP is about marker styling.

• Allow table-caption to combine with <display-inside> values is [css-display] Make table-caption and table-cell <display-outside> values #3940
• Add legend as a display type is [css-display] Define legend as a <display-outside> value #3941

[Loirooriol]

Random thought: maybe marker should be a display value rather than a position value.

BTW, it seems this was the case in CSS 2.0 https://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#propdef-display