forked from mirrors/gecko-dev
2733a8c0e6
In this WPT test, the testcase has an 'overflow:hidden' container, while the reference case does not. The test fails on some platforms because the "Y" character has some antialiased fringe that bleeds imperceptibly past the content-box, and gets clipped in the testcase but not in the reference case. (This behavior is entirely allowable, and it shouldn't result in a test failure. It's also unrelated to the behavior that the baseline-alignment behavior that the test is trying to exercise.) This patch addresses the issue by switching to the Ahem font, which is simpler and less likely to have antialiasing fringe that would be clipped in this way. I'm using the 25px/1 suggested styling from the documentation at https://web-platform-tests.org/writing-tests/ahem.html Differential Revision: https://phabricator.services.mozilla.com/D110510
33 lines
1 KiB
HTML
33 lines
1 KiB
HTML
<!DOCTYPE html>
|
|
<title>A block with 'overflow: hidden' should produce normal baseline</title>
|
|
<link rel="author" title="Koji Ishii" href="kojii@chromium.org">
|
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-baselines">
|
|
<link rel="match" href="reference/align-items-baseline-overflow-non-visible-ref.html">
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
|
<style>
|
|
.flex {
|
|
display: flex;
|
|
align-items: baseline;
|
|
font: 25px/1 Ahem;
|
|
}
|
|
.overflow {
|
|
overflow: hidden;
|
|
height: 2em;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<!--
|
|
CSS2 states that:
|
|
The baseline of an 'inline-block' is the baseline of its last line box in
|
|
the normal flow, unless it has either no in-flow line boxes or if its
|
|
'overflow' property has a computed value other than 'visible', in which case
|
|
the baseline is the bottom margin edge.
|
|
https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align
|
|
This rule should apply only to 'inline-block', and not to normal block.
|
|
-->
|
|
<div class="flex">
|
|
<span>XX</span>
|
|
<div><div class="overflow">YY</div></div>
|
|
</div>
|
|
</body>
|