forked from mirrors/gecko-dev
Automatic update from web-platform-tests [css-variables] Support revert-[layer] in fallbacks Bug: 1105782 Change-Id: I45a903b1b81b411f17867fc6c311173bd755a7b7 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3934282 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/main@{#1057361} -- wpt-commits: ddd6b08982676d4adb24a41512793cdd4e52b7f4 wpt-pr: 36363
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>
|