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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<!DOCTYPE html>
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#the-registerproperty-function" />
<meta name="assert" content="Verifies that registering a property does not affect the cascade" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#outer { color: rgb(1, 1, 1); }
#inner {
--my-color: rgb(2, 2, 2);
--my-color: url(not-a-color);
color: var(--my-color);
}
</style>
<div id=outer>
<div id=inner></div>
</div>
<script>
test(function(){
// Because var(--my-color) is invalid, our color declaration should behave
// like color:unset, i.e. it should compute to the inherited color.
assert_equals(getComputedStyle(inner).color, 'rgb(1, 1, 1)');
CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
initialValue: 'rgb(3, 3, 3)',
inherits: false
});
// After registering, var(--my-color) is still invalid. The important thing
// here is that the computed value of color is the initialValue of
// --my-color, and not rgb(2, 2, 2).
assert_equals(getComputedStyle(inner).color, 'rgb(3, 3, 3)');
}, 'Registering a property does not affect cascade');
test(function(){
CSS.registerProperty({
name: '--my-color-2',
syntax: '<color>',
initialValue: 'rgb(4, 4, 4)',
inherits: false
});
let element = document.createElement('div');
element.style = `
--my-color-2: rgb(2, 2, 2);
--my-color-2: url(not-a-color);
color: var(--my-color-2);
`;
outer.appendChild(element);
assert_equals(getComputedStyle(element).color, 'rgb(4, 4, 4)');
}, 'Registering a property does not affect parsing');
</script>
|
