at-property-viewport-units.html (3899B)
1 <!DOCTYPE html> 2 <title>@property: viewport units in initial value</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 @property --10vi { syntax: '<length>'; inherits: true; initial-value: 10vi} 17 @property --10vb { syntax: '<length>'; inherits: true; initial-value: 10vb} 18 @property --10vmin { syntax: '<length>'; inherits: true; initial-value: 10vmin} 19 @property --10vmax { syntax: '<length>'; inherits: true; initial-value: 10vmax} 20 21 @property --10svw { syntax: '<length>'; inherits: true; initial-value: 10svw} 22 @property --10svh { syntax: '<length>'; inherits: true; initial-value: 10svh} 23 @property --10svi { syntax: '<length>'; inherits: true; initial-value: 10svi} 24 @property --10svb { syntax: '<length>'; inherits: true; initial-value: 10svb} 25 @property --10svmin { syntax: '<length>'; inherits: true; initial-value: 10svmin} 26 @property --10svmax { syntax: '<length>'; inherits: true; initial-value: 10svmax} 27 28 @property --10lvw { syntax: '<length>'; inherits: true; initial-value: 10lvw} 29 @property --10lvh { syntax: '<length>'; inherits: true; initial-value: 10lvh} 30 @property --10lvi { syntax: '<length>'; inherits: true; initial-value: 10lvi} 31 @property --10lvb { syntax: '<length>'; inherits: true; initial-value: 10lvb} 32 @property --10lvmin { syntax: '<length>'; inherits: true; initial-value: 10lvmin} 33 @property --10lvmax { syntax: '<length>'; inherits: true; initial-value: 10lvmax} 34 35 @property --10dvw { syntax: '<length>'; inherits: true; initial-value: 10dvw} 36 @property --10dvh { syntax: '<length>'; inherits: true; initial-value: 10dvh} 37 @property --10dvi { syntax: '<length>'; inherits: true; initial-value: 10dvi} 38 @property --10dvb { syntax: '<length>'; inherits: true; initial-value: 10dvb} 39 @property --10dvmin { syntax: '<length>'; inherits: true; initial-value: 10dvmin} 40 @property --10dvmax { syntax: '<length>'; inherits: true; initial-value: 10dvmax} 41 </style> 42 <div></div> 43 "></iframe> 44 <script> 45 iframe.offsetTop; 46 47 function waitForLoad(w) { 48 return new Promise(resolve => { 49 if (w.document.readyState == 'complete') 50 resolve(); 51 else 52 w.addEventListener('load', resolve) 53 }); 54 } 55 56 function test_unit(element, actual, expected) { 57 promise_test(async (t) => { 58 await waitForLoad(window); 59 let element = iframe.contentDocument.querySelector('div'); 60 assert_equals(getComputedStyle(element).getPropertyValue(`--${actual}`), expected); 61 },`${actual} is ${expected}`); 62 } 63 64 test_unit(iframe, '10vw', '40px'); 65 test_unit(iframe, '10vh', '20px'); 66 test_unit(iframe, '10vi', '40px'); 67 test_unit(iframe, '10vb', '20px'); 68 test_unit(iframe, '10vmin', '20px'); 69 test_unit(iframe, '10vmax', '40px'); 70 71 test_unit(iframe, '10svw', '40px'); 72 test_unit(iframe, '10svh', '20px'); 73 test_unit(iframe, '10svi', '40px'); 74 test_unit(iframe, '10svb', '20px'); 75 test_unit(iframe, '10svmin', '20px'); 76 test_unit(iframe, '10svmax', '40px'); 77 78 test_unit(iframe, '10lvw', '40px'); 79 test_unit(iframe, '10lvh', '20px'); 80 test_unit(iframe, '10lvi', '40px'); 81 test_unit(iframe, '10lvb', '20px'); 82 test_unit(iframe, '10lvmin', '20px'); 83 test_unit(iframe, '10lvmax', '40px'); 84 85 test_unit(iframe, '10dvw', '40px'); 86 test_unit(iframe, '10dvh', '20px'); 87 test_unit(iframe, '10dvi', '40px'); 88 test_unit(iframe, '10dvb', '20px'); 89 test_unit(iframe, '10dvmin', '20px'); 90 test_unit(iframe, '10dvmax', '40px'); 91 </script>