Open Bug 1820050 Opened 2 years ago Updated 2 years ago

WPT test css-contain/contain-size-flexbox-002.html fails due to minor font/line-sizing issue (test bug)

Categories

(Core :: Layout, defect)

defect

Tracking

()

People

(Reporter: dholbert, Unassigned)

References

(Blocks 1 open bug)

Details

https://wpt.fyi/results/css/css-contain/contain-size-flexbox-002.html shows us failing that test.

STR:

  1. In Firefox preferences, search for "scroll" and be sure "Always show scrollbars" is checked. (If it's unchecked, you'll hit a different sort of test-failure, unrelated to the wpt.fyi failure; see bug 1560420 for that other one)

  2. Visit https://wpt.live/css/css-contain/contain-size-flexbox-002.html and compare to reference https://wpt.live/css/css-contain/reference/contain-size-flexbox-002-ref.html

ACTUAL RESULTS:
Both files show two squares. They're snugly smooshed together in the testcase, vs. separated a bit in the reference case.

I think this is a bug in the test's expectations. I can reproduce the same rendering difference in Chrome if I adjust the files to use a larger font-size (e.g. setting font-size: 30px on the body element).

It looks like the test is expecting that a contain:size; overflow:scroll div will be at least 1em tall (tall enough that, as an inline-block, it will fill the one-line-height div ancestor). But I think the size comes from scrollbars; and in Firefox, our scrollbars are thinner than Chrome's, that contained div ends up a bit smaller, so it doesn't quite fill the div.

In the testcase, the first div is a flex container, so it shrinkwraps its child's height; but in the reference case, the first div is a block container, so it shrinkwraps the line-height which is a bit taller than the child (in Firefox at least; and in Chrome too, if you use a larger font-size). That's where the extra space comes from.

Severity: -- → S3
You need to log in before you can comment on or make changes to this bug.