| <!DOCTYPE html> |
| <title>@property: viewport units in initial value</title> |
| <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#initial-value-descriptor" /> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| iframe { |
| width: 400px; |
| height: 200px; |
| } |
| </style> |
| <iframe id=iframe srcdoc=" |
| <style> |
| @property --10vw { syntax: '<length>'; inherits: true; initial-value: 10vw} |
| @property --10vh { syntax: '<length>'; inherits: true; initial-value: 10vh} |
| @property --10vi { syntax: '<length>'; inherits: true; initial-value: 10vi} |
| @property --10vb { syntax: '<length>'; inherits: true; initial-value: 10vb} |
| @property --10vmin { syntax: '<length>'; inherits: true; initial-value: 10vmin} |
| @property --10vmax { syntax: '<length>'; inherits: true; initial-value: 10vmax} |
| |
| @property --10svw { syntax: '<length>'; inherits: true; initial-value: 10svw} |
| @property --10svh { syntax: '<length>'; inherits: true; initial-value: 10svh} |
| @property --10svi { syntax: '<length>'; inherits: true; initial-value: 10svi} |
| @property --10svb { syntax: '<length>'; inherits: true; initial-value: 10svb} |
| @property --10svmin { syntax: '<length>'; inherits: true; initial-value: 10svmin} |
| @property --10svmax { syntax: '<length>'; inherits: true; initial-value: 10svmax} |
| |
| @property --10lvw { syntax: '<length>'; inherits: true; initial-value: 10lvw} |
| @property --10lvh { syntax: '<length>'; inherits: true; initial-value: 10lvh} |
| @property --10lvi { syntax: '<length>'; inherits: true; initial-value: 10lvi} |
| @property --10lvb { syntax: '<length>'; inherits: true; initial-value: 10lvb} |
| @property --10lvmin { syntax: '<length>'; inherits: true; initial-value: 10lvmin} |
| @property --10lvmax { syntax: '<length>'; inherits: true; initial-value: 10lvmax} |
| |
| @property --10dvw { syntax: '<length>'; inherits: true; initial-value: 10dvw} |
| @property --10dvh { syntax: '<length>'; inherits: true; initial-value: 10dvh} |
| @property --10dvi { syntax: '<length>'; inherits: true; initial-value: 10dvi} |
| @property --10dvb { syntax: '<length>'; inherits: true; initial-value: 10dvb} |
| @property --10dvmin { syntax: '<length>'; inherits: true; initial-value: 10dvmin} |
| @property --10dvmax { syntax: '<length>'; inherits: true; initial-value: 10dvmax} |
| </style> |
| <div></div> |
| "></iframe> |
| <script> |
| iframe.offsetTop; |
| |
| function waitForLoad(w) { |
| return new Promise(resolve => { |
| if (w.document.readyState == 'complete') |
| resolve(); |
| else |
| w.addEventListener('load', resolve) |
| }); |
| } |
| |
| function test_unit(element, actual, expected) { |
| promise_test(async (t) => { |
| await waitForLoad(window); |
| let element = iframe.contentDocument.querySelector('div'); |
| assert_equals(getComputedStyle(element).getPropertyValue(`--${actual}`), expected); |
| },`${actual} is ${expected}`); |
| } |
| |
| test_unit(iframe, '10vw', '40px'); |
| test_unit(iframe, '10vh', '20px'); |
| test_unit(iframe, '10vi', '40px'); |
| test_unit(iframe, '10vb', '20px'); |
| test_unit(iframe, '10vmin', '20px'); |
| test_unit(iframe, '10vmax', '40px'); |
| |
| test_unit(iframe, '10svw', '40px'); |
| test_unit(iframe, '10svh', '20px'); |
| test_unit(iframe, '10svi', '40px'); |
| test_unit(iframe, '10svb', '20px'); |
| test_unit(iframe, '10svmin', '20px'); |
| test_unit(iframe, '10svmax', '40px'); |
| |
| test_unit(iframe, '10lvw', '40px'); |
| test_unit(iframe, '10lvh', '20px'); |
| test_unit(iframe, '10lvi', '40px'); |
| test_unit(iframe, '10lvb', '20px'); |
| test_unit(iframe, '10lvmin', '20px'); |
| test_unit(iframe, '10lvmax', '40px'); |
| |
| test_unit(iframe, '10dvw', '40px'); |
| test_unit(iframe, '10dvh', '20px'); |
| test_unit(iframe, '10dvi', '40px'); |
| test_unit(iframe, '10dvb', '20px'); |
| test_unit(iframe, '10dvmin', '20px'); |
| test_unit(iframe, '10dvmax', '40px'); |
| </script> |
