Karl Dubost
7f5faf0455
Automatic update from web-platform-tests WebKit export of https://bugs.webkit.org/show_bug.cgi?id=316902 (#60894) -- wpt-commits: 5c9acf8fe78c7681517b2e5f729e723fd53aebff wpt-pr: 60894
53 lines
1.8 KiB
HTML
53 lines
1.8 KiB
HTML
<!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>
|
|
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollheight">
|
|
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable">
|
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/129">
|
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8660">
|
|
<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>
|