[css-lists] Outside marker positioning with floats

[kojiishi]

Positioning markers in CSS Lists defines that the marker is positioned at the border edge of the ancestor list item. I understand this section is not ready, but to share our findings.

When there're floats, it looks like:

• Trident/Edge still positions the marker at the border edge of <li>.
• Blink/Gecko/WebKit shifts the position by the amount of floats.

Test@codepen

A test in WebKit/Blink fast/lists/003.html indicates this was intentionally done.

/cc @FremyCompany @cathiechen

[kojiishi]

This doesn't look correct:

Blink/Gecko/WebKit shifts the position by the amount of floats.

fast/lists/001.html indicates that the position is at the edge of the line box, plus border and padding of the list item.

[upsuper]

It seems to me Edge/Trident's approach looks more reasonable.

[cathiechen]

Blink/Gecko/WebKit shifts the position by the amount of floats.

This seems right.
fast/lists/001.html: The left-top bullet is the marker of float div. The markers of other three div are positioned at the same place which is at right: original position + intrude width by float.
Change 001.html a bit to make it less confusing. https://jsbin.com/hobakobiba/edit?html,css,output

From the perspective of a reader, I think the approach of Blink/Gecko/WebKit could make the bullet and content more related, especially for the case WebKit/Blink fast/lists/003.html

[kojiishi]

I agree with @cathiechen that it is a bit better in some cases, but I also agree with @upsuper that Edge/Trident approach is easier to define and to predict, and I prefer the latter for the hope to define the marker positioning better. The question though is how much this is web-compatible.

[FremyCompany]

I don't think Edge's behavior is web compatible. We have a fair amount of issues due to it.

Chrome behavior also has problems though. I think the bullet should be offset to the right by the floats that intrude the list-item, but not by floats that start in the list item.

[jonjohnjohnson]

Personally, I am looking forward to exploring the use of display:grid on all my ul an ol tags then setting all li tags as display:subgrid, with either a ::before or ::marker selector to populate the "gutter" as a responsive grid column to solve what I imagine as any possible problems with current list styling implementations, and maybe bypassing most of this spec.

Similar to Eric Meyer's Grid Powered Drop Quotes, but requiring subgrid for consistent ::marker layout across list items. If it works well enough, I'll probably use it as a reset for all my projects list styling.