[view-timeline]: support CSS string inset
Bug: 1329159
Change-Id: Ice3d87216e7c2ad30f363f12c6ca3eba3d0553eb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4071125
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1078386}
diff --git a/scroll-animations/view-timelines/testcommon.js b/scroll-animations/view-timelines/testcommon.js
index 41341cf..969f282 100644
--- a/scroll-animations/view-timelines/testcommon.js
+++ b/scroll-animations/view-timelines/testcommon.js
@@ -130,6 +130,8 @@
fill: 'both'
}
const length = options.inset.length;
- const range = options.inset.join(' ');
+ const range =
+ (options.inset instanceof Array) ? options.inset.join(' ')
+ : options.inset;
return runTimelineRangeTest(t, options, range);
}
diff --git a/scroll-animations/view-timelines/view-timeline-inset.html b/scroll-animations/view-timelines/view-timeline-inset.html
index 0dcce6d..72480ea 100644
--- a/scroll-animations/view-timelines/view-timeline-inset.html
+++ b/scroll-animations/view-timelines/view-timeline-inset.html
@@ -106,7 +106,7 @@
promise_test(async t => {
t.add_cleanup(() => {
- container.class = '';
+ container.classList.remove('scroll-padded');
});
const anim = await runTimelineInsetTest(t, {
inset: [ "auto", "auto" ],
@@ -125,13 +125,13 @@
promise_test(async t => {
t.add_cleanup(() => {
- target.class = '';
+ target.classList.remove('big-font');
});
const anim = await runTimelineInsetTest(t, {
inset: [ CSS.em(1), CSS.em(2) ],
rangeStart: 632,
rangeEnd: 884
- })
+ });
verifyTimelineOffsets(anim, 632, 884);
target.classList.add('big-font');
await runTimelineRangeTest(t, {
@@ -158,13 +158,69 @@
});
}, 'view timeline with viewport relative insets.');
+promise_test(async t => {
+ await runTimelineInsetTest(t, {
+ inset: "10px",
+ rangeStart: 610,
+ rangeEnd: 890
+ });
+ await runTimelineInsetTest(t, {
+ inset: "10px 20px",
+ rangeStart: 620,
+ rangeEnd: 890
+ });
+ await runTimelineInsetTest(t, {
+ inset: "10%",
+ rangeStart: 620,
+ rangeEnd: 880
+ });
+ await runTimelineInsetTest(t, {
+ inset: "10% 20%",
+ rangeStart: 640,
+ rangeEnd: 880
+ });
+ await runTimelineInsetTest(t, {
+ inset: "auto",
+ rangeStart: 600,
+ rangeEnd: 900
+ });
+ await runTimelineInsetTest(t, {
+ inset: "1em 2em",
+ rangeStart: 632,
+ rangeEnd: 884
+ });
+ assert_throws_js(TypeError, () => {
+ new ViewTimeline({
+ subject: target,
+ inset: "go fish"
+ });
+ });
+
+ assert_throws_js(TypeError, () => {
+ new ViewTimeline({
+ subject: target,
+ inset: "1 2"
+ });
+ });
+
+}, 'view timeline inset as string');
promise_test(async t => {
- assert_throws_dom('NOT_SUPPORTED_ERR', () => {
+ assert_throws_js(TypeError, () => {
new ViewTimeline({
subject: target,
inset: [ CSS.rad(1) ]
});
});
+
+ assert_throws_js(TypeError, () => {
+ new ViewTimeline({
+ subject: target,
+ inset: [ CSS.px(10), CSS.px(10), CSS.px(10) ]
+ });
+ });
+
+
}, 'view timeline with invalid inset');
+
</script>
