wpt/css/css-variables/revert-layer-in-fallback.html at master · web-platform-tests/wpt · GitHub

Name: wpt/css/css-variables/revert-layer-in-fallback.html at master · web-platform-tests/wpt · GitHub
Rating: 4.9 (3358 reviews)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<title>CSS Custom Properties: Using revert-layer in fallbacks</title>
<linkrel="help" href="https://drafts.csswg.org/css-variables/#substitute-a-var">
<scriptsrc="/resources/testharness.js"></script>
<scriptsrc="/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>
<divid=parent>
<divid=child>
</div>
</div>
<preid=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>