[view-timeline] Support range(Start|End) as strings in animation options.
This patch also extends length support to handle style dependent units.
Remaining step: Update style-dependent lengths.
Bug: 1407923
Change-Id: Iad81e8caac695905538b8c63b6c80fe6203a473b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4198530
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1099413}
diff --git a/scroll-animations/css/view-timeline-range-animation.html b/scroll-animations/css/view-timeline-range-animation.html
index dc37850..9f66a5e 100644
--- a/scroll-animations/css/view-timeline-range-animation.html
+++ b/scroll-animations/css/view-timeline-range-animation.html
@@ -179,7 +179,7 @@
endOffset: 790
});
- test_animation_delay({
+ test_animation_delay({
rangeStart: 'exit 2em',
rangeEnd: 'exit 8em',
startOffset: 820,
diff --git a/scroll-animations/view-timelines/view-timeline-range.html b/scroll-animations/view-timelines/view-timeline-range.html
index 4123bda..f2a1b3f 100644
--- a/scroll-animations/view-timelines/view-timeline-range.html
+++ b/scroll-animations/view-timelines/view-timeline-range.html
@@ -31,6 +31,7 @@
height: 100px;
width: 100px;
display: inline-block;
+ font-size: 10px;
}
</style>
<body>
@@ -149,4 +150,37 @@
});
}, 'View timeline with range as <name> <percent+px> pair.' );
+
+ promise_test(async t => {
+ await runTimelineRangeTest(t, {
+ rangeStart: "contain -50%",
+ rangeEnd: "enter 200%",
+ startOffset: 650,
+ endOffset: 800
+ });
+
+ await runTimelineRangeTest(t, {
+ rangeStart: "contain 20px",
+ rangeEnd: "contain 100px",
+ startOffset: 720,
+ endOffset: 800
+ });
+
+ await runTimelineRangeTest(t, {
+ rangeStart: "contain calc(0% + 20px)",
+ rangeEnd: "contain calc(100% - 10px)",
+ startOffset: 720,
+ endOffset: 790
+ });
+
+ await runTimelineRangeTest(t, {
+ rangeStart: "exit 2em",
+ rangeEnd: "exit 8em",
+ startOffset: 820,
+ endOffset: 880
+ });
+
+
+ }, 'View timeline with range as strings.');
+
</script>
