scrollbar-gutter-propagation-004.html (1230B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: scrollbar-gutter on the root with overflow:auto, scrolling</title> 4 <link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" /> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/css/support/parsing-testcommon.js"></script> 9 <style> 10 body, 11 html { 12 margin: 0; 13 padding: 0; 14 border: none; 15 } 16 17 :root { 18 scrollbar-gutter: stable; 19 overflow: auto; 20 } 21 22 #content { 23 background: green; 24 width: 100%; 25 /* force scrolling */ 26 height: 200vh; 27 } 28 </style> 29 30 <body> 31 32 <div id="content"></div> 33 34 <script type="text/javascript"> 35 setup({ explicit_done: true }); 36 37 test(function () { 38 let root = document.documentElement; 39 let body = document.body; 40 let content = document.getElementById('content'); 41 assert_equals(body.offsetWidth, root.offsetWidth, "root width"); 42 assert_equals(content.offsetWidth, body.offsetWidth, "content width"); 43 }, "root, body and content have the same width"); 44 45 done(); 46 47 </script> 48 </body>