Bug 183029 – WebKit's intrinsic inline-size calculations don't account for whitespace before empty child with nonzero margins (which causes unnecessary wrapping in intrinsically-sized element)

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Daniel Holbert]

STR: Load https://jsfiddle.net/sjap2xxw/

EXPECTED RESULTS: No space between "aaa" and its bottom border.

ACTUAL RESULTS: There's a blank line between "aaa" and its bottom border.

Note: Compare to the second "bbb" example in the testcase (which does not wrap) -- that example only differs from the first example in that we've added some text inside the span. So, this seems to be an issue where Safari is incorrectly disregarding the (nonzero) width of empty children's margin-boxes when it computes the intrinsic inline-size of a container.

Firefox 60 and Edge 16 produce "EXPECTED RESULTS" on that testcase, BTW.
Chrome 66 and Safari 11 produce "ACTUAL RESULTS".

Chrome version of this bug: https://bugs.chromium.org/p/chromium/issues/detail?id=814610

[Daniel Holbert]

Actually, sorry -- Safari and Chrome *do* account for the margins!  The thing they're not accounting for is the *whitespace character* just before the empty element.

Here's a testcase that demonstrates that (comparing an inline-block *with* whitespace before an empty element with a margin, vs. an inline-block *without* that whitespace character): https://jsfiddle.net/u1Lbz9oz/

[Daniel Holbert]

Oops, sorry -- looks like the testcases that I linked in comment 0 and 1 actually work correctly in Safari! :D   I *started* with a testcase that was broken in both Chrome & Safari, and then I reduced it with Chrome (I'm on Linux) and I assumed it was still the same in Safari.... that'll teach me to make assumptions.

Anyway -- here's an earlier version of my testcase that *IS* broken in Safari:
  https://jsfiddle.net/xwxsfLpv/

Firefox and Edge render that correctly (with the black line being 1 line tall).  Safari and Chrome render it 2 lines tall, for no good reason.

[Ahmad Saleem]

I am able to reproduce this bug in Safari Technology Preview 154 using the test case from "URL" field and it renders the information in two lines while other browsers (Chrome Canary 108 and Firefox Nightly 107) match each other and render it in just one line. Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/122586712>

[alan]

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

[EWS]

Committed 276875@main (82de10d6c30c): <https://commits.webkit.org/276875@main>

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