transform-010.html (1310B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-break/#transforms"> 4 <div id="container" style="width:300px; overflow-x:scroll;"> 5 <div style="columns:3; column-gap:0; column-fill:auto; height:100px;"> 6 <div> 7 <div id="target" style="transform:translateX(0); width:100px; height:150px;"></div> 8 </div> 9 </div> 10 </div> 11 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 <script> 15 test(()=> { 16 // We have three columns. The column width is 100px. 17 // #target occurs in the first two columns. 18 assert_equals(container.scrollWidth, 300); 19 20 // This shouldn't affect the size of the scrollable area, since everything 21 // still fits within the scrollport. 22 target.style.transform = "translateX(100px)"; 23 assert_equals(container.scrollWidth, 300); 24 25 // #target should now overflow the scrollport. 26 target.style.transform = "translateX(200px)"; 27 assert_equals(container.scrollWidth, 400); 28 29 // Check that we're not stuck with the overflow. 30 target.style.transform = "translateX(100px)"; 31 assert_equals(container.scrollWidth, 300); 32 }, "Changing a transformed element should update overflow area."); 33 </script>