Bug 279172 – List marker incorrectly positioned when list child has inline margin

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Robin Whittleton]

Created attachment 472459 [details]
Reduced testcase

When a list item has an child with an inline margin in the direction of the list marker (typically margin-left), the marker will position itself in relation to the child as if the margin wasn’t there, and out of order with the other markers.

This is possibly a stylistic choice, but I couldn’t find anything in the specs to back this up and it doesn’t match Gecko or Chromium. I’ve attached a testcase and will attach screenshots from current Safari, Edge and Firefox.

[Robin Whittleton]

Created attachment 472460 [details]
Marker position testcase result in Edge

[Robin Whittleton]

Created attachment 472461 [details]
Marker position testcase result in Firefox

[Robin Whittleton]

Created attachment 472462 [details]
Marker position testcase result in Safari

[Karl Dubost]

Created attachment 472463 [details]
rendering in safari, firefox, chrome

Tested with:
Safari Technology Preview  202           20620.1.4.8
Firefox Nightly            132.0a1       13224.9.4
Google Chrome Canary       130.0.6699.0  6699.0


Adding outlines to visualize the boxes. 

What a strange bug. :)

[Radar WebKit Bug Importer]

<rdar://problem/135332538>

[Karl Dubost]

fwiw the number also slides out of view with a negative margin, while the number is overlapping with the text for other browsers. 

Also this is not happening with a child element which has 
display: inline or inline-* or table

but happening for all kind of block elements
display: block, flex, grid, etc.

[zalan]

I think it's just an unfortunate side effect of us trying to find a place for the (inline) list marker renderer when <li> has a block child.

<ol><li><div>text

OL RenderBlock
  LI RenderListItem
    DIV RenderBlock
      RenderListMarker (::marker)
      #text RenderText

vs. 
<ol><li>text

OL RenderBlock
  LI RenderListItem
    RenderListMarker (::marker)
    #text RenderText

[zalan]

Created attachment 472478 [details]
Patch

[Antti Koivisto]

Comment on attachment 472478 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=472478&action=review

> Source/WebCore/layout/integration/inline/LayoutIntegrationBoxGeometryUpdater.cpp:85
> +            auto hasAccountedForMargin = false;

This is never set to any other value than false?

[zalan]

(In reply to Antti Koivisto from comment #9)
> Comment on attachment 472478 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=472478&action=review
> 
> > Source/WebCore/layout/integration/inline/LayoutIntegrationBoxGeometryUpdater.cpp:85
> > +            auto hasAccountedForMargin = false;
> 
> This is never set to any other value than false?
git amend fail

[zalan]

Created attachment 472479 [details]
Patch

[zalan]

Created attachment 472480 [details]
Patch

[zalan]

Created attachment 472485 [details]
[fast-cq]Patch

[EWS]

Committed 283289@main (1ef26a308328): <https://commits.webkit.org/283289@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 472485 [details].