WPT test css-contain/contain-size-flexbox-002.html fails due to minor font/line-sizing issue (test bug)
Categories
(Core :: Layout, 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:
-
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)
-
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.
Reporter | ||
Updated•2 years ago
|
Updated•2 years ago
|
Description
•