33 lines
1.3 KiB
HTML
33 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
|
<link rel="help" href="https://drafts.csswg.org/css-break/#transforms">
|
|
<div id="container" style="width:300px; overflow-x:scroll;">
|
|
<div style="columns:3; column-gap:0; column-fill:auto; height:100px;">
|
|
<div>
|
|
<div id="target" style="transform:translateX(0); width:100px; height:150px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script>
|
|
test(()=> {
|
|
// We have three columns. The column width is 100px.
|
|
// #target occurs in the first two columns.
|
|
assert_equals(container.scrollWidth, 300);
|
|
|
|
// This shouldn't affect the size of the scrollable area, since everything
|
|
// still fits within the scrollport.
|
|
target.style.transform = "translateX(100px)";
|
|
assert_equals(container.scrollWidth, 300);
|
|
|
|
// #target should now overflow the scrollport.
|
|
target.style.transform = "translateX(200px)";
|
|
assert_equals(container.scrollWidth, 400);
|
|
|
|
// Check that we're not stuck with the overflow.
|
|
target.style.transform = "translateX(100px)";
|
|
assert_equals(container.scrollWidth, 300);
|
|
}, "Changing a transformed element should update overflow area.");
|
|
</script>
|