47 lines
No EOL
1.4 KiB
HTML
47 lines
No EOL
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Values and Units Test: if() media() condition invalidation</title>
|
|
<meta name="assert" content="Test if() media() condition invalidation">
|
|
<link rel="help" href="https://drafts.csswg.org/css-values-5/#if-notation">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
iframe {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
<iframe id="iframe" srcdoc="
|
|
<div id=target></div>
|
|
<style>
|
|
#target {
|
|
--actual: if(media((height < 100px) or ((height >= 200px) and (height < 300px))): true_value; else: false_value;);
|
|
}
|
|
</style>
|
|
"></iframe>
|
|
|
|
<script>
|
|
function waitForLoad(w) {
|
|
return new Promise(resolve => w.addEventListener('load', resolve));
|
|
}
|
|
|
|
promise_test(async () => {
|
|
await waitForLoad(window);
|
|
const target = iframe.contentDocument.querySelector('#target');
|
|
let actualValue = () => getComputedStyle(target).getPropertyValue('--actual');
|
|
|
|
assert_equals(actualValue(), 'true_value', '--actual before resize');
|
|
|
|
// [<height of frame>, <expected function result>]
|
|
let data = [
|
|
['100px', 'false_value'],
|
|
['200px', 'true_value'],
|
|
['300px', 'false_value']
|
|
];
|
|
|
|
for (let d of data) {
|
|
iframe.style.height = d[0];
|
|
let expected = d[1];
|
|
assert_equals(actualValue(), expected, `--actual after resize to ${d[0]}`);
|
|
}
|
|
});
|
|
</script> |