viewport-units-scrollbars-mq-001.html (744B)
1 <!doctype html> 2 <html style="overflow-y: scroll"> 3 <meta name="assert" content="width still equals 100vw after the unconditional root scrollbar changes the value of vw"> 4 <link rel="help" 5 href="https://drafts.csswg.org/css-values-4/#:~:text=and%20always%20in%20the%20case%20of%20media%20queries"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/check-layout-th.js"></script> 10 11 <style> 12 13 #square { 14 width: 100px; 15 background: green; 16 } 17 18 @media (width = 100vw) { 19 #square { 20 height: 100px; 21 } 22 } 23 24 </style> 25 26 <p> 27 Pass condition: 100x100 green square below. 28 </p> 29 30 <div id="square" data-expected-height="100"></div> 31 32 <script> 33 checkLayout("#square"); 34 </script>