test_scrollbar_inline_size.html (1396B)
1 <!DOCTYPE HTML> 2 <meta charset="utf-8"> 3 <title>Test for env(scrollbar-inline-size)</title> 4 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 5 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> 6 <link rel="stylesheet" href="chrome://global/skin"/> 7 <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/> 8 <div id="scroller" style="width: 100px; height: 100px; overflow: scroll"></div> 9 <div id="ref" style="width: env(scrollbar-inline-size, 1000px)"></div> 10 <script> 11 SimpleTest.waitForExplicitFinish(); 12 async function runTest() { 13 // We need to disable overlay scrollbars to measure the real scrollbar 14 // size. 15 await SpecialPowers.pushPrefEnv({ 16 set: [["ui.useOverlayScrollbars", 0]], 17 }); 18 runOnce(); 19 20 info("with full zoom"); 21 SpecialPowers.setFullZoom(window, 2.0); 22 23 runOnce(); 24 } 25 26 function runOnce() { 27 let scroller = document.getElementById("scroller"); 28 let ref = document.getElementById("ref"); 29 let scrollbarSize = scroller.getBoundingClientRect().width - scroller.clientWidth; 30 ok(scrollbarSize > 0, "Should have a scrollbar"); 31 // clientWidth rounds, so we might see a bit of rounding error 32 isfuzzy(ref.getBoundingClientRect().width, scrollbarSize, 1, "env() should match the scrollbar size"); 33 } 34 35 runTest().then(SimpleTest.finish); 36 </script>