Add support for inset auto and relative length units.
Bug: 1329159
Change-Id: I6435dfadffc266c9d0b8ca403dc1d5d5becaeb53
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4010320
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1069383}
diff --git a/scroll-animations/view-timelines/testcommon.js b/scroll-animations/view-timelines/testcommon.js
index fe4f92d..ba27576 100644
--- a/scroll-animations/view-timelines/testcommon.js
+++ b/scroll-animations/view-timelines/testcommon.js
@@ -14,10 +14,7 @@
const anim =
target.animate(
{ opacity: [0.3, 0.7] },
- {
- timeline: new ViewTimeline(viewTimelineOptions),
- fill: 'none'
- });
+ { timeline: new ViewTimeline(viewTimelineOptions) });
test.add_cleanup(() => {
anim.cancel();
});
@@ -38,7 +35,9 @@
container.scrollLeft = 0;
await waitForNextFrame();
- const anim = CreateViewTimelineOpacityAnimation(t, target, options.timeline);
+ const anim =
+ options.anim ||
+ CreateViewTimelineOpacityAnimation(t, target, options.timeline);
if (options.timing)
anim.effect.updateTiming(options.timing);
@@ -62,6 +61,9 @@
await waitForNextFrame();
assert_equals(getComputedStyle(target).opacity, '0.7',
`Effect is in the active phase at effect end time: ${message}`);
+
+ // Return the animation so that we can continue testing with the same object.
+ return anim;
}
// Sets the start and end delays for a view timeline and ensures that the
@@ -98,7 +100,7 @@
fill: 'both'
};
- await runTimelineRangeTest(t, options, range);
+ return runTimelineRangeTest(t, options, range);
}
// Sets the Inset for a view timeline and ensures that the range aligns with
@@ -122,5 +124,5 @@
}
const length = options.inset.length;
const range = options.inset.join(' ');
- await runTimelineRangeTest(t, options, range);
+ 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 045c5f0..45e21f7 100644
--- a/scroll-animations/view-timelines/view-timeline-inset.html
+++ b/scroll-animations/view-timelines/view-timeline-inset.html
@@ -31,6 +31,13 @@
height: 100px;
width: 100px;
display: inline-block;
+ font-size: 16px;
+ }
+ #target.big-font {
+ font-size: 20px;
+ }
+ #container.scroll-padded {
+ scroll-padding-inline: 10px 20px;
}
</style>
</style>
@@ -90,5 +97,53 @@
});
}, 'View timeline with percent based inset.');
- // Add tests for inset "auto".
+ promise_test(async t => {
+ t.add_cleanup(() => {
+ container.class = '';
+ });
+ const anim = await runTimelineInsetTest(t, {
+ inset: [ "auto", "auto" ],
+ rangeStart: 600,
+ rangeEnd: 900
+ });
+ container.classList.add('scroll-padded');
+ await runTimelineRangeTest(t, {
+ anim: anim,
+ rangeStart: 620,
+ rangeEnd: 890,
+ }, 'Adjust for scroll-padding');
+ }, 'view timeline with inset auto.');
+
+promise_test(async t => {
+ t.add_cleanup(() => {
+ target.class = '';
+ });
+ const anim = await runTimelineInsetTest(t, {
+ inset: [ CSS.em(1), CSS.em(2) ],
+ rangeStart: 632,
+ rangeEnd: 884
+ });
+ target.classList.add('big-font');
+ await runTimelineRangeTest(t, {
+ anim: anim,
+ rangeStart: 640,
+ rangeEnd: 880,
+ }, 'Adjust for font size increase');
+}, 'view timeline with font relative inset.');
+
+promise_test(async t => {
+ const vw = window.innerWidth;
+ const vh = window.innerHeight;
+ const vmin = Math.min(vw, vh);
+ await runTimelineInsetTest(t, {
+ inset: [ CSS.vw(10), CSS.vw(20) ],
+ rangeStart: 600 + 0.2 * vw,
+ rangeEnd: 900 - 0.1 * vw
+ });
+ await runTimelineInsetTest(t, {
+ inset: [ CSS.vmin(10), CSS.vmin(20) ],
+ rangeStart: 600 + 0.2 * vmin,
+ rangeEnd: 900 - 0.1 * vmin
+ });
+}, 'view timeline with viewport relative insets.');
</script>
