mirror of
https://github.com/servo/servo.git
synced 2025-06-24 17:14:33 +01:00
49 lines
1.3 KiB
HTML
49 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Custom Properties: Using revert-layer in fallbacks</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-variables/#substitute-a-var">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
@layer {
|
|
#child {
|
|
--x:PASS;
|
|
margin: 1px;
|
|
padding-left: 1px;
|
|
}
|
|
}
|
|
@layer {
|
|
#parent {
|
|
--x:FAIL;
|
|
margin: -1px;
|
|
padding-left: -1px;
|
|
}
|
|
#child {
|
|
--x: var(--unknown, revert-layer);
|
|
margin: var(--unknown, revert-layer);
|
|
padding-left: var(--unknown, revert-layer);
|
|
}
|
|
}
|
|
</style>
|
|
<div id=parent>
|
|
<div id=child>
|
|
</div>
|
|
</div>
|
|
<pre id=out>
|
|
</pre>
|
|
<script>
|
|
test((x) => {
|
|
assert_equals(getComputedStyle(child).getPropertyValue('--x'), 'PASS');
|
|
}, 'var(--unknown, revert-layer) in custom property');
|
|
|
|
test((x) => {
|
|
assert_equals(getComputedStyle(child).getPropertyValue('margin'), '1px');
|
|
}, 'var(--unknown, revert-layer) in shorthand');
|
|
|
|
test((x) => {
|
|
assert_equals(getComputedStyle(child).getPropertyValue('margin-left'), '1px');
|
|
}, 'var(--unknown, revert-layer) in shorthand observed via longhand');
|
|
|
|
test((x) => {
|
|
assert_equals(getComputedStyle(child).getPropertyValue('padding-left'), '1px');
|
|
}, 'var(--unknown, revert-layer) in longhand');
|
|
</script>
|