<!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>
Codebase Browser
chromium