8000 Bug 1945138 [wpt PR 50409] - Parse animation-trigger shorthand, a=tes… · jwidar/LatencyZeroGithub@50aebe4 · GitHub
[go: up one dir, main page]

Skip to content

Commit 50aebe4

Browse files
David Awogbemilamoz-wptsync-bot
authored andcommitted
Bug 1945138 [wpt PR 50409] - Parse animation-trigger shorthand, a=testonly
Automatic update from web-platform-tests Parse animation-trigger shorthand For reference: 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: I3b273f4565efddd2fd48d407102f9f1376d816dd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6207949 Commit-Queue: David Awogbemila <awogbemila@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/main@{#1414034} -- wpt-commits: 52bce37bd96221c1fc5a60da383faef154724895 wpt-pr: 50409
1 parent 5eebeee commit 50aebe4

File tree

1 file changed

+147
-0
lines changed

1 file changed

+147
-0
lines changed
Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<title>animation-trigger 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_shorthand_value('animation-trigger',
13+
'view() once contain 0% contain 100% cover 0% cover 100%',
14+
{
15+
'animation-trigger-type': 'once',
16+
'animation-trigger-timeline': 'view()',
17+
'animation-trigger-range-start': 'contain',
18+
'animation-trigger-range-end': 'contain',
19+
'animation-trigger-exit-range-start': 'cover',
20+
'animation-trigger-exit-range-end': 'cover',
21+
});
22+
test_shorthand_value('animation-trigger',
23+
'view() once contain 20% contain 80% cover 10% cover 90%',
24+
{
25+
'animation-trigger-type': 'once',
26+
'animation-trigger-timeline': 'view()',
27+
'animation-trigger-range-start': 'contain 20%',
28+
'animation-trigger-range-end': 'contain 80%',
29+
'animation-trigger-exit-range-start': 'cover 10%',
30+
'animation-trigger-exit-range-end': 'cover 90%',
31+
});
32+
test_shorthand_value('animation-trigger',
33+
'view() once contain 0% contain 100% cover 0%',
34+
{
35+
'animation-trigger-type': 'once',
36+
'animation-trigger-timeline': 'view()',
37+
'animation-trigger-range-start': 'contain',
38+
'animation-trigger-range-end': 'contain',
39+
'animation-trigger-exit-range-start': 'cover',
40+
'animation-trigger-exit-range-end': 'cover',
41+
});
42+
test_shorthand_value('animation-trigger',
43+
'view() once contain 20% contain 80% cover 10%',
44+
{
45+
'animation-trigger-type': 'once',
46+
'animation-trigger-timeline': 'view()',
47+
'animation-trigger-range-start': 'contain 20%',
48+
'animation-trigger-range-end': 'contain 80%',
49+
'animation-trigger-exit-range-start': 'cover 10%',
50+
'animation-trigger-exit-range-end': 'cover',
51+
});
52+
test_shorthand_value('animation-trigger',
53+
'view() once contain 0% contain 100% cover',
54+
{
55+
'animation-trigger-type': 'once',
56+
'animation-trigger-timeline': 'view()',
57+
'animation-trigger-range-start': 'contain',
58+
'animation-trigger-range-end': 'contain',
59+
'animation-trigger-exit-range-start': 'cover',
60+
'animation-trigger-exit-range-end': 'cover',
61+
});
62+
test_shorthand_value('animation-trigger',
63+
'view() alternate contain 0% contain 100%',
64+
{
65+
'animation-trigger-type': 'alternate',
66+
'animation-trigger-timeline': 'view()',
67+
'animation-trigger-range-start': 'contain',
68+
'animation-trigger-range-end': 'contain',
69+
'animation-trigger-exit-range-start': 'normal',
70+
'animation-trigger-exit-range-end': 'normal',
71+
});
72+
test_shorthand_value('animation-trigger',
73+
'view() alternate contain 20% contain 80%',
74+
{
75+
'animation-trigger-type': 'alternate',
76+
'animation-trigger-timeline': 'view()',
77+
'animation-trigger-range-start': 'contain 20%',
78+
'animation-trigger-range-end': 'contain 80%',
79+
'animation-trigger-exit-range-start': 'normal',
80+
'animation-trigger-exit-range-end': 'normal',
81+
});
82+
test_shorthand_value('animation-trigger',
83+
'view() alternate contain 0%',
84+
{
85+
'animation-trigger-type': 'alternate',
86+
'animation-trigger-timeline': 'view()',
87+
'animation-trigger-range-start': 'contain',
88+
'animation-trigger-range-end': 'contain',
89+
'animation-trigger-exit-range-start': 'normal',
90+
'animation-trigger-exit-range-end': 'normal',
91+
});
92+
test_shorthand_value('animation-trigger',
93+
'view() alternate contain 10%',
94+
{
95+
'animation-trigger-type': 'alternate',
96+
'animation-trigger-timeline': 'view()',
97+
'animation-trigger-range-start': 'contain 10%',
98+
'animation-trigger-range-end': 'contain',
99+
'animation-trigger-exit-range-start': 'normal',
100+
'animation-trigger-exit-range-end': 'normal',
101+
});
102+
test_shorthand_value('animation-trigger',
103+
'view() alternate contain',
104+
{
105+
'animation-trigger-type': 'alternate',
106+
'animation-trigger-timeline': 'view()',
107+
'animation-trigger-range-start': 'contain',
108+
'animation-trigger-range-end': 'contain',
109+
'animation-trigger-exit-range-start': 'normal',
110+
'animation-trigger-exit-range-end': 'normal',
111+
});
112+
test_shorthand_value('animation-trigger', 'view() alternate',
113+
{
114+
'animation-trigger-type': 'alternate',
115+
'animation-trigger-timeline': 'view()',
116+
'animation-trigger-range-start': 'normal',
117+
'animation-trigger-range-end': 'normal',
118+
'animation-trigger-exit-range-start': 'normal',
119+
'animation-trigger-exit-range-end': 'normal',
120+
});
121+
test_shorthand_value('animation-trigger', 'repeat',
122+
{
123+
'animation-trigger-type': 'repeat',
124+
'animation-trigger-timeline': 'auto',
125+
'animation-trigger-range-start': 'normal',
126+
'animation-trigger-range-end': 'normal',
127+
'animation-trigger-exit-range-start': 'normal',
128+
'animation-trigger-exit-range-end': 'normal',
129+
});
130+
test_computed_value('animation-trigger',
131+
'view() once contain 0% contain 100% cover 0% cover 100%',
132+
'view() once contain contain cover cover');
133+
test_computed_value('animation-trigger',
134+
'view() once contain 20% contain 80% cover 10% cover 90%');
135+
test_computed_value('animation-trigger',
136+
'view() once contain 20% contain 80% cover 0%',
137+
'view() once contain 20% contain 80% cover cover');
138+
test_computed_value('animation-trigger',
139+
'view() once contain 20% contain 80% cover 10%',
140+
'view() once contain 20% contain 80% cover 10% cover');
141+
test_computed_value('animation-trigger',
142+
'view() once contain 0% contain 100%',
143+
'view() once contain contain normal normal');
144+
test_computed_value('animation-trigger',
145+
'view() once',
146+
'view() once normal normal normal normal');
147+
</script>

0 commit comments

Comments
 (0)
0