Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-values/viewport-units-scroll-no-cycles-001.tentative.html - WPT Dashboard Interop Dashboard
<!doctype html>
<html>
<title>CSS Values and Units Test: Viewport units and scrollbars</title>
<meta name="assert" content="Ensure that a viewport unit cycle in an if() condition causes the if() to be invalid at computed value time.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
iframe {
width: 100px;
height: 100px;
}
</style>
<iframe id="iframe" srcdoc="<!doctype html>
<style>
@property --vw-tracker {
syntax: '<length>';
initial-value: 0px;
inherits: false;
}
:root {
--vw-tracker: 100vw;
overflow: if(
style(--vw-tracker = 100px): scroll;
else: hidden;
);
}
</style>
"></iframe>
<script>
function waitForLoad(w) {
return new Promise(resolve => w.addEventListener('load', resolve));
}
promise_test(async () => {
await waitForLoad(window);
const root = iframe.contentDocument.documentElement;
const win = iframe.contentWindow;
const style = win.getComputedStyle(root);
// overflow should be its default value of 'visible'.
assert_equals(style.overflow, 'visible');
});
</script>