at-property-viewport-units-dynamic.html (1352B)
1 <!DOCTYPE html> 2 <title>@property: viewport units in initial value (dynamic)</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#initial-value-descriptor" /> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 iframe { 8 width: 400px; 9 height: 200px; 10 } 11 </style> 12 <iframe id=iframe srcdoc=" 13 <style> 14 @property --10vw { syntax: '<length>'; inherits: true; initial-value: 10vw} 15 @property --10vh { syntax: '<length>'; inherits: true; initial-value: 10vh} 16 div { 17 background: green; 18 width: var(--10vw); 19 height: var(--10vh); 20 } 21 </style> 22 <div style='width:10vw'></div> 23 "></iframe> 24 <script> 25 iframe.offsetTop; 26 27 function waitForLoad(w) { 28 return new Promise(resolve => w.addEventListener('load', resolve)); 29 } 30 31 promise_test(async (t) => { 32 await waitForLoad(window); 33 let element = iframe.contentDocument.querySelector('div'); 34 assert_equals(getComputedStyle(element).getPropertyValue('--10vw'), '40px'); 35 assert_equals(getComputedStyle(element).getPropertyValue('--10vh'), '20px'); 36 37 iframe.style.width = '100px'; 38 assert_equals(getComputedStyle(element).getPropertyValue('--10vw'), '10px'); 39 assert_equals(getComputedStyle(element).getPropertyValue('--10vh'), '20px'); 40 }); 41 </script>