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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<!DOCTYPE html>
<title>CSS Values and Units Test: sibling-index() changing registered custom property values during @keyframes animation</title>
<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@property --time { syntax: "<time>"; initial-value: 0s; inherits: false; }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --resolution { syntax: "<resolution>"; initial-value: 1dppx; inherits: false; }
@property --percentage { syntax: "<percentage>"; initial-value: 0%; inherits: false; }
@property --number { syntax: "<number>"; initial-value: 0; inherits: false; }
@property --integer { syntax: "<integer>"; initial-value: 0; inherits: false; }
@property --length { syntax: "<length>"; initial-value: 0px; inherits: false; }
@property --length-percentage { syntax: "<length-percentage>"; initial-value: 0px; inherits: false; }
@property --color { syntax: "<color>"; initial-value: black; inherits: false; }
@property --list { syntax: "<integer>+"; initial-value: 0; inherits: false; }
@keyframes --anim {
from {
--time: calc(2s * sibling-index());
--angle: calc(30deg * sibling-index());
--resolution: calc(1dppx * sibling-index());
--percentage: calc(50% * sibling-index());
--number: sibling-index();
--integer: sibling-index();
--length: calc(sibling-index() * 7px);
--length-percentage: calc((sibling-index() * 8px) + (sibling-count() * 5%));
--color: color(srgb 0 calc(0.2 * sibling-index()) 0);
--list: 13 sibling-index();
}
to {
--time: 13s;
--angle: 13deg;
--resolution: 1dppx;
--percentage: 13%;
--number: 13;
--integer: 13;
--length: 13px;
--length-percentage: calc(13px + 7%);
--color: red;
--list: 29 sibling-index();
}
}
#target {
animation: --anim 1000s step-end;
}
</style>
<div>
<div id="rm"></div>
<div></div>
<div id="target"></div>
</div>
<script>
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--time"), "6s");
}, "Initially, the sibling-index() is 3 for --time");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--angle"), "90deg");
}, "Initially, the sibling-index() is 3 for --angle");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--resolution"), "3dppx");
}, "Initially, the sibling-index() is 3 for --resolution");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--percentage"), "150%");
}, "Initially, the sibling-index() is 3 for --percentage");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--number"), "3");
}, "Initially, the sibling-index() is 3 for --number");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--integer"), "3");
}, "Initially, the sibling-index() is 3 for --integer");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--length"), "21px");
}, "Initially, the sibling-index() is 3 for --length");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--length-percentage"), "calc(15% + 24px)");
}, "Initially, the sibling-index() is 3 for --length-percentage");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--color"), "color(srgb 0 0.6 0)");
}, "Initially, the sibling-index() is 3 for --color");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--list"), "13 3");
}, "Initially, the sibling-index() is 3 for --list");
rm.remove();
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--time"), "4s");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --time");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--angle"), "60deg");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --angle");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--resolution"), "2dppx");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --resolution");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--percentage"), "100%");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --percentage");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--number"), "2");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --number");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--integer"), "2");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --integer");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--length"), "14px");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --length");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--length-percentage"), "calc(10% + 16px)");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --length-percentage");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--color"), "color(srgb 0 0.4 0)");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --color");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--list"), "13 2");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --list");
</script>
|
