Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/cssom-view/scrollWidthHeight-flex-column-padding-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>scrollHeight on a flex column scroll container includes block-axis padding when items overflow the content edge</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.scroller {
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow-y: auto;
width: 100px;
height: 206px;
padding: 100px 0;
}
.scroller > .item {
flex-shrink: 0;
height: 38px;
background: blue;
}
</style>
<div class="scroller" id="column">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="scroller" id="column-reverse" style="flex-direction: column-reverse">
<div class="item"></div>
<div class="item"></div>
</div>
<script>
// box-sizing:border-box + height:206 + padding:100px 0 => content-box height = 6.
// Two 38px flex items (76px total) overflow the content edge. The scrollable
// overflow area is the union of the items' margin boxes with the container's
// content area, then extended by the container's block-axis padding.
// Expected scrollHeight: 100 (padding-top) + 38 + 38 + 100 (padding-bottom) = 276.
// Expected clientHeight: padding-box height = 206.
for (const id of ["column", "column-reverse"]) {
test(() => {
const el = document.getElementById(id);
assert_equals(el.clientHeight, 206, "clientHeight");
assert_equals(el.scrollHeight, 276, "scrollHeight");
}, `flex-direction:${id} scrollHeight includes block-axis padding around overflowing items`);
}
</script>