[scroll-timeline] List-valued scroll-timeline properties
This CL makes it possible to specify more than one scroll timeline
on the same element (like view timelines). This largely means
generalizing some view-timeline-specific code, and re-using that
for scroll-timeline.
Fixed: 1357795
Change-Id: I91f46bffb22b81811ffaad562c9df6ebf86e9402
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4177115
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1096134}
diff --git a/scroll-animations/css/scroll-timeline-shorthand.tentative.html b/scroll-animations/css/scroll-timeline-shorthand.tentative.html
index c76ee9e..b74113a 100644
--- a/scroll-animations/css/scroll-timeline-shorthand.tentative.html
+++ b/scroll-animations/css/scroll-timeline-shorthand.tentative.html
@@ -17,9 +17,13 @@
test_valid_value('scroll-timeline', 'inline inline');
test_valid_value('scroll-timeline', 'abc');
test_valid_value('scroll-timeline', 'inline');
+test_valid_value('view-timeline', 'a, b, c');
+test_valid_value('view-timeline', 'a inline, b block, c vertical', 'a inline, b, c vertical');
test_invalid_value('scroll-timeline', '');
test_invalid_value('scroll-timeline', 'abc abc');
+test_invalid_value('view-timeline', ',');
+test_invalid_value('view-timeline', ',,block,,');
test_computed_value('scroll-timeline', 'none block', 'none');
test_computed_value('scroll-timeline', 'abc inline');
@@ -27,6 +31,8 @@
test_computed_value('scroll-timeline', 'abc horizontal');
test_computed_value('scroll-timeline', 'vertical vertical');
test_computed_value('scroll-timeline', 'abc');
+test_computed_value('view-timeline', 'a, b, c');
+test_computed_value('view-timeline', 'a inline, b block, c vertical', 'a inline, b, c vertical');
test_shorthand_value('scroll-timeline', 'abc vertical',
{
@@ -38,4 +44,14 @@
'scroll-timeline-name': 'inline',
'scroll-timeline-axis': 'horizontal',
});
+test_shorthand_value('scroll-timeline', 'abc vertical, def',
+{
+ 'scroll-timeline-name': 'abc, def',
+ 'scroll-timeline-axis': 'vertical, block',
+});
+test_shorthand_value('scroll-timeline', 'abc, def',
+{
+ 'scroll-timeline-name': 'abc, def',
+ 'scroll-timeline-axis': 'block, block',
+});
</script>