8000 Implement parsing for animation-trigger-{exit-}range shorthands · web-platform-tests/wpt@5c480ee · GitHub
[go: up one dir, main page]
Skip to content

Commit 5c480ee

Browse files
David Awogbemilachromium-wpt-export-bot
David Awogbemila
authored and
chromium-wpt-export-bot
committed
Implement parsing for animation-trigger-{exit-}range shorthands
The spec is currently a work-in-progress[1] but this comment[2] describes the API. [1] w3c/csswg-drafts#10128 [2] w3c/csswg-drafts#8942 (comment) Bug: 390314945 Change-Id: I2c335d6be7b6e264fb1cbf4ae4cc3fa9aedc9136 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6187119 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Commit-Queue: David Awogbemila <awogbemila@chromium.org> Cr-Commit-Position: refs/heads/main@{#1409968}
1 parent bb5f835 commit 5c480ee

File tree

2 files changed

+360
-0
lines changed

2 files changed

+360
-0
lines changed

‎css/css-animations/parsing/animation-trigger-exit-range-shorthand.html‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
<!DOCTYPE html>
2+
<title>animation-trigger-exit-range shorthand</title>
3+
<!-- TODO(crbug.com/390314945): Replace with spec link when the spec lands. -->
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8942">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/css/support/shorthand-testcommon.js"></script>
8+
<script src="/css/support/parsing-testcommon.js"></script>
9+
<script src="/css/support/computed-testcommon.js"></script>
10+
<div id="target" style="font-size:10px"></div>
11+
<script>
12+
test_valid_value("animation-trigger-exit-range", "normal");
13+
test_valid_value("animation-trigger-exit-range", "normal normal", "normal");
14+
test_valid_value("animation-trigger-exit-range", "cover");
15+
test_valid_value("animation-trigger-exit-range", "contain");
16+
test_valid_value("animation-trigger-exit-range", "entry");
17+
test_valid_value("animation-trigger-exit-range", "entry-crossing");
18+
test_valid_value("animation-trigger-exit-range", "exit");
19+
test_valid_value("animation-trigger-exit-range", "exit-crossing");
20+
test_valid_value("animation-trigger-exit-range", "entry, exit");
21+
22+
test_valid_value("animation-trigger-exit-range", "entry 0% entry 100%", "entry");
23+
test_valid_value("animation-trigger-exit-range", "entry-crossing 0% entry-crossing 100%",
24+
"entry-crossing");
25+
test_valid_value("animation-trigger-exit-range", "exit 0% exit 100%", "exit");
26+
test_valid_value("animation-trigger-exit-range", "exit-crossing 0% exit-crossing 100%",
27+
"exit-crossing");
28+
test_valid_value("animation-trigger-exit-range", "cover 0% cover 100%", "cover");
29+
test_valid_value("animation-trigger-exit-range", "contain 0% contain 100%", "contain");
30+
test_valid_value("animation-trigger-exit-range",
31+
"entry calc(10% - 10%) entry calc(50% + 50%)", "entry");
32+
test_valid_value("animation-trigger-exit-range", "cover 50%");
33+
test_valid_value("animation-trigger-exit-range", "contain 50%");
34+
test_valid_value("animation-trigger-exit-range", "entry 50%");
35+
test_valid_value("animation-trigger-exit-range", "entry-crossing 50%");
36+
test_valid_value("animation-trigger-exit-range", "exit 50%");
37+
test_valid_value("animation-trigger-exit-range", "exit-crossing 50%");
38+
test_valid_value("animation-trigger-exit-range", "entry 50px exit 100px");
39+
test_valid_value("animation-trigger-exit-range", "exit calc(10% + 50px)");
40+
41+
test_valid_value("animation-trigger-exit-range", "entry 50% exit 50%");
42+
test_valid_value("animation-trigger-exit-range",
43+
"cover 50% entry 50%, contain 50% exit 50%");
44+
test_valid_value("animation-trigger-exit-range", "50% exit 50%");
45+
test_valid_value("animation-trigger-exit-range", "normal 100px");
46+
test_valid_value("animation-trigger-exit-range", "100px");
47+
test_valid_value("animation-trigger-exit-range", "100px normal", "100px");
48+
test_valid_value("animation-trigger-exit-range", "10% normal", "10%");
49+
50+
test_computed_value("animation-trigger-exit-range", "normal");
51+
test_computed_value("animation-trigger-exit-range", "normal normal", "normal");
52+
test_computed_value("animation-trigger-exit-range", "cover");
53+
test_computed_value("animation-trigger-exit-range", "contain");
54+
test_computed_value("animation-trigger-exit-range", "entry");
55+
test_computed_value("animation-trigger-exit-range", "entry-crossing");
56+
test_computed_value("animation-trigger-exit-range", "exit");
57+
test_computed_value("animation-trigger-exit-range", "exit-crossing");
58+
test_computed_value("animation-trigger-exit-range", "entry, exit");
59+
60+
test_computed_value("animation-trigger-exit-range", "entry 0% entry 100%", "entry");
61+
test_computed_value("animation-trigger-exit-range", "entry-crossing 0% entry-crossing 100%",
62+
"entry-crossing");
63+
test_computed_value("animation-trigger-exit-range", "exit 0% exit 100%", "exit");
64+
test_computed_value("animation-trigger-exit-range", "exit-crossing 0% exit-crossing 100%",
65+
"exit-crossing");
66+
test_computed_value("animation-trigger-exit-range", "cover 0% cover 100%", "cover");
67+
test_computed_value("animation-trigger-exit-range", "contain 0% contain 100%", "contain");
68+
test_computed_value("animation-trigger-exit-range",
69+
"entry calc(10% - 10%) entry calc(50% + 50%)", "entry");
70+
test_computed_value("animation-trigger-exit-range", "cover 50%");
71+
test_computed_value("animation-trigger-exit-range", "contain 50%");
72+
test_computed_value("animation-trigger-exit-range", "entry 50%");
73+
test_computed_value("animation-trigger-exit-range", "entry-crossing 50%");
74+
test_computed_value("animation-trigger-exit-range", "exit 50%");
75+
test_computed_value("animation-trigger-exit-range", "exit-crossing 50%");
76+
test_computed_value("animation-trigger-exit-range", "entry 50px exit 100px");
77+
test_computed_value("animation-trigger-exit-range", "exit calc(10% + 50px)");
78+
79+
test_computed_value("animation-trigger-exit-range", "entry 50% exit 50%");
80+
test_computed_value("animation-trigger-exit-range",
81+
"cover 50% entry 50%, contain 50% exit 50%");
82+
83+
test_computed_value("animation-trigger-exit-range", "entry 10em exit 20em", "entry 100px exit 200px");
84+
test_computed_value("animation-trigger-exit-range", "10em exit 20em", "100px exit 200px");
85+
test_computed_value("animation-trigger-exit-range", "normal 100px");
86+
test_computed_value("animation-trigger-exit-range", "100px");
87+
test_computed_value("animation-trigger-exit-range", "100px normal", "100px");
88+
test_computed_value("animation-trigger-exit-range", "10% normal", "10%");
89+
test_computed_value("animation-trigger-exit-range", "10% calc(70% + 10% * sign(100em - 1px))", "10% 80%");
90+
91+
test_invalid_value("animation-trigger-exit-range", "entry 50% 0s", "entry 50%");
92+
test_invalid_value("animation-trigger-exit-range", "0s entry 50%");
93+
test_invalid_value("animation-trigger-exit-range", "1s");
94+
test_invalid_value("animation-trigger-exit-range", "-1s");
95+
test_invalid_value("animation-trigger-exit-range", "1s 2s");
96+
test_invalid_value("animation-trigger-exit-range", "1s, 2s");
97+
test_invalid_value("animation-trigger-exit-range", "1s 2s, 3s");
98+
test_invalid_value("animation-trigger-exit-range", "1s, 2s 3s");
99+
test_invalid_value("animation-trigger-exit-range", "1s, 2s, 3s");
100+
test_invalid_value("animation-trigger-exit-range", "1s 2s 3s");
101+
test_invalid_value("animation-trigger-exit-range", "0s, 1s 2s 3s");
102+
test_invalid_value("animation-trigger-exit-range", "1s / 2s");
103+
test_invalid_value("animation-trigger-exit-range", "1s, 2px");
104+
test_invalid_value("animation-trigger-exit-range", "#ff0000");
105+
test_invalid_value("animation-trigger-exit-range", "red");
106+
test_invalid_value("animation-trigger-exit-range", "thing");
107+
test_invalid_value("animation-trigger-exit-range", "thing 0%");
108+
test_invalid_value("animation-trigger-exit-range", "thing 42%");
109+
test_invalid_value("animation-trigger-exit-range", "thing 100%");
110+
test_invalid_value("animation-trigger-exit-range", "thing 100px");
111+
test_invalid_value("animation-trigger-exit-range", "100% thing");
112+
113+
test_shorthand_value('animation-trigger-exit-range', 'normal', {
114+
'animation-trigger-exit-range-start': 'normal',
115+
'animation-trigger-exit-range-end': 'normal',
116+
});
117+
118+
test_shorthand_value('animation-trigger-exit-range', 'normal normal', {
119+
'animation-trigger-exit-range-start': 'normal',
120+
'animation-trigger-exit-range-end': 'normal',
121+
});
122+
123+
test_shorthand_value('animation-trigger-exit-range', 'normal entry 100%', {
124+
'animation-trigger-exit-range-start': 'normal',
125+
'animation-trigger-exit-range-end': 'entry',
126+
});
127+
128+
test_shorthand_value('animation-trigger-exit-range', 'normal entry 10%', {
129+
'animation-trigger-exit-range-start': 'normal',
130+
'animation-trigger-exit-range-end': 'entry 10%',
131+
});
132+
133+
test_shorthand_value('animation-trigger-exit-range', 'cover', {
134+
'animation-trigger-exit-range-start': 'cover',
135+
'animation-trigger-exit-range-end': 'cover',
136+
});
137+
138+
test_shorthand_value('animation-trigger-exit-range', 'contain', {
139+
'animation-trigger-exit-range-start': 'contain',
140+
'animation-trigger-exit-range-end': 'contain',
141+
});
142+
143+
test_shorthand_value('animation-trigger-exit-range', 'contain 100% contain 0%', {
144+
'animation-trigger-exit-range-start': 'contain 100%',
145+
'animation-trigger-exit-range-end': 'contain 0%',
146+
});
147+
148+
test_shorthand_value('animation-trigger-exit-range', 'entry 10% exit 20%', {
149+
'animation-trigger-exit-range-start': 'entry 10%',
150+
'animation-trigger-exit-range-end': 'exit 20%',
151+
});
152+
153+
test_shorthand_value('animation-trigger-exit-range', 'entry calc(10% + 10px) exit 20px', {
154+
'animation-trigger-exit-range-start': 'entry calc(10% + 10px)',
155+
'animation-trigger-exit-range-end': 'exit 20px',
156+
});
157+
158+
test_shorthand_value('animation-trigger-exit-range', 'entry, exit', {
159+
'animation-trigger-exit-range-start': 'entry, exit',
160+
'animation-trigger-exit-range-end': 'entry, exit',
161+
});
162+
163+
test_shorthand_value('animation-trigger-exit-range', 'entry 0%, exit', {
164+
'animation-trigger-exit-range-start': 'entry, exit',
165+
'animation-trigger-exit-range-end': 'entry, exit',
166+
});
167+
168+
test_shorthand_value('animation-trigger-exit-range', 'exit calc(10% + 50px)', {
169+
'animation-trigger-exit-range-start': 'exit calc(10% + 50px)',
170+
'animation-trigger-exit-range-end': 'exit',
171+
});
172+
test_shorthand_value('animation-trigger-exit-range', '100px', {
173+
'animation-trigger-exit-range-start': '100px',
174+
'animation-trigger-exit-range-end': 'normal',
175+
});
176+
test_shorthand_value('animation-trigger-exit-range', '10%', {
177+
'animation-trigger-exit-range-start': '10%',
178+
'animation-trigger-exit-range-end': 'normal',
179+
});
180+
</script>

‎css/css-animations/parsing/animation-trigger-range-shorthand.html‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
<!DOCTYPE html>
2+
<title>animation-trigger-range shorthand</title>
3+
<!-- TODO(crbug.com/390314945): Replace with spec link when the spec lands. -->
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8942">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/css/support/shorthand-testcommon.js"></script>
8+
<script src="/css/support/parsing-testcommon.js"></script>
9+
<script src="/css/support/computed-testcommon.js"></script>
10+
<div id="target" style="font-size:10px"></div>
11+
<script>
12+
test_valid_value("animation-trigger-range", "normal");
13+
test_valid_value("animation-trigger-range", "normal normal", "normal");
14+
test_valid_value("animation-trigger-range", "cover");
15+
test_valid_value("animation-trigger-range", "contain");
16+
test_valid_value("animation-trigger-range", "entry");
17+
test_valid_value("animation-trigger-range", "entry-crossing");
18+
test_valid_value("animation-trigger-range", "exit");
19+
test_valid_value("animation-trigger-r 3044 ange", "exit-crossing");
20+
test_valid_value("animation-trigger-range", "entry, exit");
21+
22+
test_valid_value("animation-trigger-range", "entry 0% entry 100%", "entry");
23+
test_valid_value("animation-trigger-range", "entry-crossing 0% entry-crossing 100%",
24+
"entry-crossing");
25+
test_valid_value("animation-trigger-range", "exit 0% exit 100%", "exit");
26+
test_valid_value("animation-trigger-range", "exit-crossing 0% exit-crossing 100%",
27+
"exit-crossing");
28+
test_valid_value("animation-trigger-range", "cover 0% cover 100%", "cover");
29+
test_valid_value("animation-trigger-range", "contain 0% contain 100%", "contain");
30+
test_valid_value("animation-trigger-range",
31+
"entry calc(10% - 10%) entry calc(50% + 50%)", "entry");
32+
test_valid_value("animation-trigger-range", "cover 50%");
33+
test_valid_value("animation-trigger-range", "contain 50%");
34+
test_valid_value("animation-trigger-range", "entry 50%");
35+
test_valid_value("animation-trigger-range", "entry-crossing 50%");
36+
test_valid_value("animation-trigger-range", "exit 50%");
37+
test_valid_value("animation-trigger-range", "exit-crossing 50%");
38+
test_valid_value("animation-trigger-range", "entry 50px exit 100px");
39+
test_valid_value("animation-trigger-range", "exit calc(10% + 50px)");
40+
41+
test_valid_value("animation-trigger-range", "entry 50% exit 50%");
42+
test_valid_value("animation-trigger-range",
43+
"cover 50% entry 50%, contain 50% exit 50%");
44+
test_valid_value("animation-trigger-range", "50% exit 50%");
45+
test_valid_value("animation-trigger-range", "normal 100px");
46+
test_valid_value("animation-trigger-range", "100px");
47+
test_valid_value("animation-trigger-range", "100px normal", "100px");
48+
test_valid_value("animation-trigger-range", "10% normal", "10%");
49+
50+
test_computed_value("animation-trigger-range", "normal");
51+
test_computed_value("animation-trigger-range", "normal normal", "normal");
52+
test_computed_value("animation-trigger-range", "cover");
53+
test_computed_value("animation-trigger-range", "contain");
54+
test_computed_value("animation-trigger-range", "entry");
55+
test_computed_value("animation-trigger-range", "entry-crossing");
56+
test_computed_value("animation-trigger-range", "exit");
57+
test_computed_value("animation-trigger-range", "exit-crossing");
58+
test_computed_value("animation-trigger-range", "entry, exit");
59+
60+
test_computed_value("animation-trigger-range", "entry 0% entry 100%", "entry");
61+
test_computed_value("animation-trigger-range", "entry-crossing 0% entry-crossing 100%",
62+
"entry-crossing");
63+
test_computed_value("animation-trigger-range", "exit 0% exit 100%", "exit");
64+
test_computed_value("animation-trigger-range", "exit-crossing 0% exit-crossing 100%",
65+
"exit-crossing");
66+
test_computed_value("animation-trigger-range", "cover 0% cover 100%", "cover");
67+
test_computed_value("animation-trigger-range", "contain 0% contain 100%", "contain");
68+
test_computed_value("animation-trigger-range",
69+
"entry calc(10% - 10%) entry calc(50% + 50%)", "entry");
70+
test_computed_value("animation-trigger-range", "cover 50%");
71+
test_computed_value("animation-trigger-range", "contain 50%");
72+
test_computed_value("animation-trigger-range", "entry 50%");
73+
test_computed_value("animation-trigger-range", "entry-crossing 50%");
74+
test_computed_value("animation-trigger-range", "exit 50%");
75+
test_computed_value("animation-trigger-range", "exit-crossing 50%");
76+
test_computed_value("animation-trigger-range", "entry 50px exit 100px");
77+
test_computed_value("animation-trigger-range", "exit calc(10% + 50px)");
78+
79+
test_computed_value("animation-trigger-range", "entry 50% exit 50%");
80+
test_computed_value("animation-trigger-range",
81+
"cover 50% entry 50%, contain 50% exit 50%");
82+
83+
test_computed_value("animation-trigger-range", "entry 10em exit 20em", "entry 100px exit 200px");
84+
test_computed_value("animation-trigger-range", "10em exit 20em", "100px exit 200px");
85+
test_computed_value("animation-trigger-range", "normal 100px");
86+
test_computed_value("animation-trigger-range", "100px");
87+
test_computed_value("animation-trigger-range", "100px normal", "100px");
88+
test_computed_value("animation-trigger-range", "10% normal", "10%");
89+
test_computed_value("animation-trigger-range", "10% calc(70% + 10% * sign(100em - 1px))", "10% 80%");
90+
91+
test_invalid_value("animation-trigger-range", "entry 50% 0s", "entry 50%");
92+
test_invalid_value("animation-trigger-range", "0s entry 50%");
93+
test_invalid_value("animation-trigger-range", "1s");
94+
test_invalid_value("animation-trigger-range", "-1s");
95+
test_invalid_value("animation-trigger-range", "1s 2s");
96+
test_invalid_value("animation-trigger-range", "1s, 2s");
97+
test_invalid_value("animation-trigger-range", "1s 2s, 3s");
98+
test_invalid_value("animation-trigger-range", "1s, 2s 3s");
99+
test_invalid_value("animation-trigger-range", "1s, 2s, 3s");
100+
test_invalid_value("animation-trigger-range", "1s 2s 3s");
101+
test_invalid_value("animation-trigger-range", "0s, 1s 2s 3s");
102+
test_invalid_value("animation-trigger-range", "1s / 2s");
103+
test_invalid_value("animation-trigger-range", "1s, 2px");
104+
test_invalid_value("animation-trigger-range", "#ff0000");
105+
test_invalid_value("animation-trigger-range", "red");
106+
test_invalid_value("animation-trigger-range", "thing");
107+
test_invalid_value("animation-trigger-range", "thing 0%");
108+
test_invalid_value("animation-trigger-range", "thing 42%");
109+
test_invalid_value("animation-trigger-range", "thing 100%");
110+
test_invalid_value("animation-trigger-range", "thing 100px");
111+
test_invalid_value("animation-trigger-range", "100% thing");
112+
113+
test_shorthand_value('animation-trigger-range', 'normal', {
114+
'animation-trigger-range-start': 'normal',
115+
'animation-trigger-range-end': 'normal',
116+
});
117+
118+
test_shorthand_value('animation-trigger-range', 'normal normal', {
119+
'animation-trigger-range-start': 'normal',
120+
'animation-trigger-range-end': 'normal',
121+
});
122+
123+
test_shorthand_value('animation-trigger-range', 'normal entry 100%', {
124+
'animation-trigger-range-start': 'normal',
125+
'animation-trigger-range-end': 'entry',
126+
});
127+
128+
test_shorthand_value('animation-trigger-range', 'normal entry 10%', {
129+
'animation-trigger-range-start': 'normal',
130+
'animation-trigger-range-end': 'entry 10%',
131+
});
132+
133+
test_shorthand_value('animation-trigger-range', 'cover', {
134+
'animation-trigger-range-start': 'cover',
135+
'animation-trigger-range-end': 'cover',
136+
});
137+
138+
test_shorthand_value('animation-trigger-range', 'contain', {
139+
'animation-trigger-range-start': 'contain',
140+
'animation-trigger-range-end': 'contain',
141+
});
142+
143+
test_shorthand_value('animation-trigger-range', 'contain 100% contain 0%', {
144+
'animation-trigger-range-start': 'contain 100%',
145+
'animation-trigger-range-end': 'contain 0%',
146+
});
147+
148+
test_shorthand_value('animation-trigger-range', 'entry 10% exit 20%', {
149+
'animation-trigger-range-start': 'entry 10%',
150+
'animation-trigger-range-end': 'exit 20%',
151+
});
152+
153+
test_shorthand_value('animation-trigger-range', 'entry calc(10% + 10px) exit 20px', {
154+
'animation-trigger-range-start': 'entry calc(10% + 10px)',
155+
'animation-trigger-range-end': 'exit 20px',
156+
});
157+
158+
test_shorthand_value('animation-trigger-range', 'entry, exit', {
159+
'animation-trigger-range-start': 'entry, exit',
160+
'animation-trigger-range-end': 'entry, exit',
161+
});
162+
163+
test_shorthand_value('animation-trigger-range', 'entry 0%, exit', {
164+
'animation-trigger-range-start': 'entry, exit',
165+
'animation-trigger-range-end': 'entry, exit',
166+
});
167+
168+
test_shorthand_value('animation-trigger-range', 'exit calc(10% + 50px)', {
169+
'animation-trigger-range-start': 'exit calc(10% + 50px)',
170+
'animation-trigger-range-end': 'exit',
171+
});
172+
test_shorthand_value('animation-trigger-range', '100px', {
173+
'animation-trigger-range-start': '100px',
174+
'animation-trigger-range-end': 'normal',
175+
});
176+
test_shorthand_value('animation-trigger-range', '10%', {
177+
'animation-trigger-range-start': '10%',
178+
'animation-trigger-range-end': 'normal',
179+
});
180+
</script>

0 commit comments

Comments
 (0)
0