Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-flexbox/flex-baseline-overflow-hidden.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Flex container baseline with overflow:hidden should be clamped to border edge</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
.container {
font: 10px/1 Ahem;
}
</style>
<!-- Test: inline-flex with overflow:hidden and a tall centered child -->
<div class="container" id="test-hidden">
<div style="display: inline-flex; overflow: hidden; height: 40px; align-items: center;">
<div style="width: 10px; height: 100px;"></div>
</div>
</div>
<!-- Reference: inline-block with overflow:hidden (baseline = bottom margin edge per CSS2) -->
<div class="container" id="ref-hidden">
<div style="display: inline-block; overflow: hidden; height: 40px;">
<div style="width: 10px; height: 100px;"></div>
</div>
</div>
<!-- Test: overflow:scroll should also synthesize baseline -->
<div class="container" id="test-scroll">
<div style="display: inline-flex; overflow: scroll; height: 40px; align-items: center;">
<div style="width: 10px; height: 100px;"></div>
</div>
</div>
<!-- Test: overflow:auto should also synthesize baseline -->
<div class="container" id="test-auto">
<div style="display: inline-flex; overflow: auto; height: 40px; align-items: center;">
<div style="width: 10px; height: 100px;"></div>
</div>
</div>
<!-- Test: block-level flex with overflow:hidden as a baseline-aligned flex item -->
<div style="display: flex; align-items: baseline; font: 10px/1 Ahem;" id="test-flex-block">
<div style="display: flex; overflow: hidden; height: 40px; align-items: center;">
<div style="width: 10px; height: 100px;"></div>
</div>
<div>x</div>
</div>
<!-- Test: block-level flex with overflow:scroll -->
<div style="display: flex; align-items: baseline; font: 10px/1 Ahem;" id="test-flex-block-scroll">
<div style="display: flex; overflow: scroll; height: 40px; align-items: center;">
<div style="width: 10px; height: 100px;"></div>
</div>
<div>x</div>
</div>
<!-- Test: block-level flex with overflow:auto -->
<div style="display: flex; align-items: baseline; font: 10px/1 Ahem;" id="test-flex-block-auto">
<div style="display: flex; overflow: auto; height: 40px; align-items: center;">
<div style="width: 10px; height: 100px;"></div>
</div>
<div>x</div>
</div>
<!-- Reference: same layout but without the overflowing child -->
<div style="display: flex; align-items: baseline; font: 10px/1 Ahem;" id="ref-flex-block">
<div style="display: flex; overflow: hidden; height: 40px; align-items: center;">
<div style="width: 10px; height: 40px;"></div>
</div>
<div>x</div>
</div>
<script>
test(function() {
assert_equals(
document.getElementById('test-hidden').offsetHeight,
document.getElementById('ref-hidden').offsetHeight,
"should match inline-block with overflow:hidden"
);
}, "inline-flex with overflow:hidden produces same line box height as inline-block");
test(function() {
assert_equals(
document.getElementById('test-scroll').offsetHeight,
document.getElementById('ref-hidden').offsetHeight,
"should match inline-block with overflow:hidden"
);
}, "inline-flex with overflow:scroll synthesizes baseline from container edges");
test(function() {
assert_equals(
document.getElementById('test-auto').offsetHeight,
document.getElementById('ref-hidden').offsetHeight,
"should match inline-block with overflow:hidden"
);
}, "inline-flex with overflow:auto synthesizes baseline from container edges");
test(function() {
assert_equals(
document.getElementById('test-flex-block').offsetHeight,
document.getElementById('ref-flex-block').offsetHeight,
"overflowing content should not affect baseline alignment"
);
}, "block-level flex with overflow:hidden clamps baseline for baseline alignment");
test(function() {
assert_equals(
document.getElementById('test-flex-block-scroll').offsetHeight,
document.getElementById('ref-flex-block').offsetHeight,
"overflowing content should not affect baseline alignment"
);
}, "block-level flex with overflow:scroll clamps baseline for baseline alignment");
test(function() {
assert_equals(
document.getElementById('test-flex-block-auto').offsetHeight,
document.getElementById('ref-flex-block').offsetHeight,
"overflowing content should not affect baseline alignment"
);
}, "block-level flex with overflow:auto clamps baseline for baseline alignment");
</script>