commit 5eda13b23b4effcc3ae543c2e27ce0a6fa432611
parent 849f2bf3248d124d75f29c7cdfc6fd8d4783c9a0
Author: David Awogbemila <awogbemila@chromium.org>
Date: Wed, 3 Dec 2025 14:41:21 +0000
Bug 2003311 [wpt PR 56372] - [animation-trigger] Enforce timeline-trigger shorthand order, a=testonly
Automatic update from web-platform-tests
[animation-trigger] Enforce timeline-trigger shorthand order
The updated spec[1] for timeline-trigger indicates that the values
specified are to be parsed in specific order. This patch makes this
change and also adds the '/' convenience for disambiguating the enter
range values from the exit range values.
[1] https://drafts.csswg.org/css-animations-2/#:~:text=must%20be%20given
Bug: 390314945
Change-Id: I43d15699aaf3825dd9025889a59c84d76d61edfd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7206049
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: David Awogbemila <awogbemila@chromium.org>
Commit-Queue: David Awogbemila <awogbemila@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1552174}
--
wpt-commits: 0b29c0ffcb1fe6bc45ee380e1a9b755ca20a3630
wpt-pr: 56372
Diffstat:
2 files changed, 165 insertions(+), 31 deletions(-)
diff --git a/testing/web-platform/tests/scroll-animations/animation-trigger/animation-trigger-repeat.tentative.html b/testing/web-platform/tests/scroll-animations/animation-trigger/animation-trigger-repeat.tentative.html
@@ -25,18 +25,18 @@
#scroll_target {
animation-trigger: --scrolltrigger play-forwards reset;
- timeline-trigger: --scrolltrigger scroll() 250px 300px 200px 350px;
+ timeline-trigger: --scrolltrigger scroll() 250px 300px / 200px 350px;
}
#view_target {
animation-trigger: --viewtrigger play-forwards reset;
- timeline-trigger: --viewtrigger view() 250px 300px 200px 350px;
+ timeline-trigger: --viewtrigger view() 250px 300px / 200px 350px;
}
#deferred_target {
animation-trigger: --deferredtrigger play-forwards reset;
}
#deferred_subject {
view-timeline: --viewtimeline;
- timeline-trigger: --deferredtrigger --viewtimeline 250px 300px 200px 350px;
+ timeline-trigger: --deferredtrigger --viewtimeline 250px 300px / 200px 350px;
}
.scroller {
diff --git a/testing/web-platform/tests/scroll-animations/animation-trigger/parsing/timeline-trigger-shorthand.tentative.html b/testing/web-platform/tests/scroll-animations/animation-trigger/parsing/timeline-trigger-shorthand.tentative.html
@@ -9,7 +9,7 @@
<div id="target" style="font-size:10px"></div>
<script>
test_shorthand_value('timeline-trigger',
- '--my-trigger view() contain 0% contain 100% cover 0% cover 100%',
+ '--my-trigger view() contain 0% contain 100% / cover 0% cover 100%',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': 'view()',
@@ -19,7 +19,7 @@
'timeline-trigger-exit-range-end': 'cover',
});
test_shorthand_value('timeline-trigger',
- '--my-trigger view() contain 20% contain 80% cover 10% cover 90%',
+ '--my-trigger view() contain 20% contain 80% / cover 10% cover 90%',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': 'view()',
@@ -29,7 +29,7 @@
'timeline-trigger-exit-range-end': 'cover 90%',
});
test_shorthand_value('timeline-trigger',
- '--my-trigger view() contain 0% contain 100% cover 0%',
+ '--my-trigger view() contain 0% contain 100% / cover 0%',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': 'view()',
@@ -39,7 +39,7 @@
'timeline-trigger-exit-range-end': 'cover',
});
test_shorthand_value('timeline-trigger',
- '--my-trigger view() contain 20% contain 80% cover 10%',
+ '--my-trigger view() contain 20% contain 80% / cover 10%',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': 'view()',
@@ -49,7 +49,7 @@
'timeline-trigger-exit-range-end': 'cover',
});
test_shorthand_value('timeline-trigger',
- '--my-trigger view() contain 0% contain 100% cover',
+ '--my-trigger view() contain 0% contain 100% / cover',
{
'timeline-trigger-name': '--my-trigger',
'timeline-trigger-source': 'view()',
@@ -137,8 +137,8 @@
'timeline-trigger-exit-range-end': 'auto, auto',
});
test_shorthand_value('timeline-trigger',
- '--my-trigger1 --my-timeline1 contain cover normal exit, '+
- '--my-trigger2 --my-timeline2 entry exit contain normal',
+ '--my-trigger1 --my-timeline1 contain cover / normal exit, '+
+ '--my-trigger2 --my-timeline2 entry exit / contain normal',
{
'timeline-trigger-name': '--my-trigger1, --my-trigger2',
'timeline-trigger-source': '--my-timeline1, --my-timeline2',
@@ -147,38 +147,172 @@
'timeline-trigger-exit-range-start': 'normal, contain',
'timeline-trigger-exit-range-end': 'exit, normal',
});
+ test_shorthand_value('timeline-trigger',
+ '--my-trigger1 --my-timeline1 contain / cover',
+ {
+ 'timeline-trigger-name': '--my-trigger1',
+ 'timeline-trigger-source': '--my-timeline1',
+ 'timeline-trigger-range-start': 'contain',
+ 'timeline-trigger-range-end': 'contain',
+ 'timeline-trigger-exit-range-start': 'cover',
+ 'timeline-trigger-exit-range-end': 'cover',
+ });
+ test_shorthand_value('timeline-trigger',
+ '--my-trigger1 --my-timeline1 contain exit 0% / cover',
+ {
+ 'timeline-trigger-name': '--my-trigger1',
+ 'timeline-trigger-source': '--my-timeline1',
+ 'timeline-trigger-range-start': 'contain',
+ 'timeline-trigger-range-end': 'exit 0%',
+ 'timeline-trigger-exit-range-start': 'cover',
+ 'timeline-trigger-exit-range-end': 'cover',
+ });
+ test_shorthand_value('timeline-trigger',
+ '--my-trigger1 --my-timeline1 contain cover 100% / cover exit 100%',
+ {
+ 'timeline-trigger-name': '--my-trigger1',
+ 'timeline-trigger-source': '--my-timeline1',
+ 'timeline-trigger-range-start': 'contain',
+ 'timeline-trigger-range-end': 'cover',
+ 'timeline-trigger-exit-range-start': 'cover',
+ 'timeline-trigger-exit-range-end': 'exit',
+ });
+ test_shorthand_value('timeline-trigger',
+ '--my-trigger1 --my-timeline1 contain 50% / cover 50%',
+ {
+ 'timeline-trigger-name': '--my-trigger1',
+ 'timeline-trigger-source': '--my-timeline1',
+ 'timeline-trigger-range-start': 'contain 50%',
+ 'timeline-trigger-range-end': 'contain',
+ 'timeline-trigger-exit-range-start': 'cover 50%',
+ 'timeline-trigger-exit-range-end': 'cover',
+ });
+ test_shorthand_value('timeline-trigger',
+ '--my-trigger1 --my-timeline1 contain 50% contain 90% / cover 50% cover 90%',
+ {
+ 'timeline-trigger-name': '--my-trigger1',
+ 'timeline-trigger-source': '--my-timeline1',
+ 'timeline-trigger-range-start': 'contain 50%',
+ 'timeline-trigger-range-end': 'contain 90%',
+ 'timeline-trigger-exit-range-start': 'cover 50%',
+ 'timeline-trigger-exit-range-end': 'cover 90%',
+ });
+ test_shorthand_value('timeline-trigger',
+ '--my-trigger1 --my-timeline1 / cover ',
+ {
+ 'timeline-trigger-name': '--my-trigger1',
+ 'timeline-trigger-source': '--my-timeline1',
+ 'timeline-trigger-range-start': 'normal',
+ 'timeline-trigger-range-end': 'normal',
+ 'timeline-trigger-exit-range-start': 'cover',
+ 'timeline-trigger-exit-range-end': 'cover',
+ });
+ test_shorthand_value('timeline-trigger',
+ '--my-trigger1 --my-timeline1 / cover exit 100%',
+ {
+ 'timeline-trigger-name': '--my-trigger1',
+ 'timeline-trigger-source': '--my-timeline1',
+ 'timeline-trigger-range-start': 'normal',
+ 'timeline-trigger-range-end': 'normal',
+ 'timeline-trigger-exit-range-start': 'cover',
+ 'timeline-trigger-exit-range-end': 'exit',
+ });
test_computed_value('timeline-trigger',
- '--my-trigger view() contain 0% contain 100% cover 0% cover 100%',
- '--my-trigger view() contain contain cover cover');
+ '--my-trigger view() contain 0% contain 100% / cover 0% cover 100%',
+ '--my-trigger view() contain / cover');
test_computed_value('timeline-trigger',
- '--my-trigger view() contain 20% contain 80% cover 10% cover 90%');
+ '--my-trigger view() contain 20% contain 80% / cover 10% cover 90%');
test_computed_value('timeline-trigger',
- '--my-trigger view() contain 20% contain 80% cover 0%',
- '--my-trigger view() contain 20% contain 80% cover cover');
+ '--my-trigger view() contain 20% contain 80% / cover 0%',
+ '--my-trigger view() contain 20% contain 80% / cover');
test_computed_value('timeline-trigger',
- '--my-trigger view() contain 20% contain 80% cover 10%',
- '--my-trigger view() contain 20% contain 80% cover 10% cover');
+ '--my-trigger view() contain 20% contain 80% / cover 10%',
+ '--my-trigger view() contain 20% contain 80% / cover 10%');
test_computed_value('timeline-trigger',
'--my-trigger view() contain 0% contain 100%',
- '--my-trigger view() contain contain auto auto');
- test_computed_value('timeline-trigger',
- 'view()',
- 'none view() normal normal auto auto');
+ '--my-trigger view() contain');
+ test_computed_value('timeline-trigger', 'view()');
test_computed_value('timeline-trigger',
'--my-trigger --my-timeline',
- '--my-trigger --my-timeline normal normal auto auto');
- test_computed_value('timeline-trigger',
- 'contain 0% contain 100% --my-trigger --my-timeline',
- '--my-trigger --my-timeline contain contain auto auto');
+ '--my-trigger --my-timeline');
- test_computed_value('timeline-trigger',
- '--trigger1, --trigger2',
- '--trigger1 auto normal normal auto auto, ' +
- '--trigger2 auto normal normal auto auto');
+ test_computed_value('timeline-trigger', '--trigger1, --trigger2');
test_computed_value('timeline-trigger',
'--trigger1 view(), --trigger2 scroll()',
- '--trigger1 view() normal normal auto auto, ' +
- '--trigger2 scroll() normal normal auto auto');
+ '--trigger1 view(), --trigger2 scroll()');
+ test_computed_value('timeline-trigger',
+ '--my-trigger --my-timeline normal / contain',
+ '--my-trigger --my-timeline / contain');
+ test_computed_value('timeline-trigger',
+ '--my-trigger --my-timeline / contain');
+
+ test_valid_value('timeline-trigger',
+ '--my-trigger view() contain 0% contain 100% / cover 0% cover 100%',
+ '--my-trigger view() contain / cover');
+ test_valid_value('timeline-trigger',
+ '--my-trigger view() contain 20% contain 80% / cover 10% cover 90%');
+ test_valid_value('timeline-trigger',
+ '--my-trigger view() contain 20% contain 80% / cover 0%',
+ '--my-trigger view() contain 20% contain 80% / cover');
+ test_valid_value('timeline-trigger',
+ '--my-trigger view() contain 20% contain 80% / cover 10%',
+ '--my-trigger view() contain 20% contain 80% / cover 10%');
+ test_valid_value('timeline-trigger',
+ '--my-trigger view() contain 0% contain 100%',
+ '--my-trigger view() contain');
+ test_valid_value('timeline-trigger', 'view()');
+ test_valid_value('timeline-trigger', '--my-trigger --my-timeline');
+
+ test_valid_value('timeline-trigger', '--trigger1, --trigger2');
+
+ test_valid_value('timeline-trigger',
+ '--trigger1 view(), --trigger2 scroll()',
+ '--trigger1 view(), --trigger2 scroll()');
+
+ test_valid_value('timeline-trigger',
+ '--my-trigger view() normal normal / auto auto',
+ '--my-trigger view()');
+
+ test_valid_value('timeline-trigger',
+ '--my-trigger view() normal normal / normal auto',
+ '--my-trigger view() / normal');
+
+ test_valid_value('timeline-trigger',
+ '--my-trigger view() normal normal / cover auto',
+ '--my-trigger view() / cover');
+
+ test_valid_value('timeline-trigger',
+ '--my-trigger view() normal normal / cover 10% auto',
+ '--my-trigger view() / cover 10%');
+
+ test_valid_value('timeline-trigger',
+ '--my-trigger --my-timeline normal / contain',
+ '--my-trigger --my-timeline / contain');
+ test_valid_value('timeline-trigger',
+ '--my-trigger --my-timeline / contain');
+ test_invalid_value('timeline-trigger',
+ '--my-trigger view() contain 0% contain 100% // cover 0% cover 100%');
+ test_invalid_value('timeline-trigger',
+ '--my-trigger view() contain 20% contain 80% contain / cover 10% cover 90%');
+ test_invalid_value('timeline-trigger',
+ '--my-trigger view() contain 20% contain 80% / cover 10% cover 90% cover 100%');
+ test_invalid_value('timeline-trigger',
+ '--my-trigger view() contain 20% contain 80% /');
+ test_invalid_value('timeline-trigger',
+ '--my-trigger view() contain 20% contain 80% / cover 10% /');
+ test_invalid_value('timeline-trigger',
+ '--my-trigger view() contain 20% contain 80% cover 10% cover 90% contan');
+ test_invalid_value('timeline-trigger', '--my-trigger view() /');
+ test_invalid_value('timeline-trigger',
+ '--my-trigger view() contain / cover, contain /');
+ test_invalid_value('timeline-trigger',
+ '--my-trigger view() contain / cover, contain contain /');
+ test_invalid_value('timeline-trigger',
+ '--my-trigger view() contain / cover, contain contain contain / cover');
+ test_invalid_value('timeline-trigger',
+ '--my-trigger view() contain contain cover cover');
+ test_invalid_value('timeline-trigger',
+ '--my-trigger view() contain contain cover');
</script>
