Bug 266801 – REGRESSION(264248@main): A floating element can cause a list item’s bullet to be orphaned on overconstrained lines

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Brad Andalman]

Created attachment 469167 [details]
HTML showing a bullet orphaned from its list item on Sonoma

In the attached HTML, I have a floating div followed by a single, bulleted list item. When rendered in Safari on Sonoma 14.2.1, the bullet appears within the floating element, and is orphaned from its list item.

The same (incorrect) behavior appears in 14.3b1 as well as the latest Safari Technology Preview.

I’ve attached a screenshot of the correct behavior in Chrome and Firefox, and Safari on Ventura renders this case correctly as well.

[Brad Andalman]

Created attachment 469168 [details]
Screenshot showing incorrect behavior in Safari (correct in Chrome and Firefox)

[Radar WebKit Bug Importer]

<rdar://problem/120022893>

[alan]

Thank you Brad! Looking into this...

[Brad Andalman]

Thanks, Alan!

Also, I wanted to clarify something I wrote in my initial description. I mentioned that “Safari on Ventura renders this case correctly.” That’s true, because I’m running Safari 16.6 on my Ventura install. However, Safari 17.2.1 on Ventura will also exhibit the bug.

[alan]

(In reply to Brad Andalman from comment #4)
> Thanks, Alan!
> 
> Also, I wanted to clarify something I wrote in my initial description. I
> mentioned that “Safari on Ventura renders this case correctly.” That’s true,
> because I’m running Safari 16.6 on my Ventura install. However, Safari
> 17.2.1 on Ventura will also exhibit the bug.
Make sense (btw, great bug reports with awesome test reductions!)

[alan]

regressed at https://commits.webkit.org/264248@main

[alan]

This seems to be happening on overconstrained lines where the list marker gets disconnected from the list item.

[alan]

from 264248@main: "Both Chrome and Firefox consider the position _after_ the list marker as a soft wrap opportunity..." previously there was no line breaking opportunity between list markers and the associated list items (no chance of separating them). I guess the negative start margin on the list marker makes it fit even on an overconstrained line.

[alan]

interestingly this works:

<div style="width: 100px;">
  <div style="float: left; width: 100px; height: 10px;"></div>
  <li>foobar</li>
</div>

while embedding <li> inside a <ul> triggers the bug 

<div style="width: 100px;">
  <div style="float: left; width: 100px; height: 10px;"></div>
  <ul>
    <li>foobar</li>
  <ul>
</div>

[alan]

(In reply to zalan from comment #9)
> interestingly this works:
> 
> <div style="width: 100px;">
>   <div style="float: left; width: 100px; height: 10px;"></div>
>   <li>foobar</li>
> </div>
> 
> while embedding <li> inside a <ul> triggers the bug 
> 
> <div style="width: 100px;">
>   <div style="float: left; width: 100px; height: 10px;"></div>
>   <ul>
>     <li>foobar</li>
>   <ul>
> </div>
yeah, so this is indeed about the negative horizontal margin on the list marker (8px wide content box and a -20px margin start produce a 0px wide box). This negative margin essentially makes the list marker a non-space-taking item. It'll fit any line including overconstrained ones. When the <li> is by itself, we don't put such margins on the list marker (there's no need to pull it in to the parent <ul>'s space)

<div style="outline: 1px solid red"><ul style="outline: 5px solid green"><li style="outline: 10px solid blue">list item

vs.

<div style="outline: 1px solid red"><li style="outline: 10px solid blue">list item

(notice how the list marker is pull into the <ul>)

[alan]

Created attachment 469170 [details]
Patch

[alan]

This may need some rebaselining. will see.

[alan]

(In reply to zalan from comment #12)
> This may need some rebaselining. will see.
yup, these 2 tests need new expectations

fast/lists/li-br.html
fast/replaced/ul-li-word-break-break-word.html

[alan]

Created attachment 469172 [details]
Patch

[alan]

(In reply to zalan from comment #13)
> (In reply to zalan from comment #12)
> > This may need some rebaselining. will see.
> yup, these 2 tests need new expectations
> 
> fast/lists/li-br.html
> fast/replaced/ul-li-word-break-break-word.html
or just quirk it more. :/

[alan]

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

[EWS]

Committed 272451@main (ba97ecf43187): <https://commits.webkit.org/272451@main>

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

[Brad Andalman]

Thanks so much for jumping on this fix!!

[alan]

(In reply to Brad Andalman from comment #18)
> Thanks so much for jumping on this fix!!
Thank you for filing it! Now we have a regression test on overconstrained lines with list items!