Revert "[scroll-animations] Support view-timeline-inset:auto"
This reverts commit 43da846cd22a38845011b6c4003f9617217a90b7.
Reason for revert: Seeing a consistent failure on Mac bots for the modified test after this merged in. For first failure see: https://ci.chromium.org/ui/p/chromium/builders/ci/Mac12%20Tests/2430/overview
Original change's description:
> [scroll-animations] Support view-timeline-inset:auto
>
> When the author specifies view-timeline-inset:auto, it is supposed to
> use the value from the corresponding scroll-padding property. This CL
> implements that behavior.
>
> Since some length utils expect LayoutUnit rather than double, it made
> sense to keep values as LayoutUnits where possible to avoid converting
> too much back and forth.
>
> Also, it turns out that the default Length() constructor is effectively
> "auto", so I had to change the default insets to Length::Fixed(), which
> is "0".
>
> Bug: 1317765
> Change-Id: I45a07a228df90210db2d4f649071a4b1a482676b
> Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3898672
> Reviewed-by: Kevin Ellis <kevers@chromium.org>
> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
> Cr-Commit-Position: refs/heads/main@{#1053733}
Bug: 1317765
Change-Id: I733491e2c92a9a9ba020619814254d3c47fa7852
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3930735
Owners-Override: Tim Judkins <tjudkins@google.com>
Commit-Queue: Tim <tjudkins@chromium.org>
Bot-Commit: Rubber Stamper <rubber-stamper@appspot.gserviceaccount.com>
Cr-Commit-Position: refs/heads/main@{#1053846}
diff --git a/scroll-animations/css/view-timeline-inset-animation.html b/scroll-animations/css/view-timeline-inset-animation.html
index a02e31b..82bfb93 100644
--- a/scroll-animations/css/view-timeline-inset-animation.html
+++ b/scroll-animations/css/view-timeline-inset-animation.html
@@ -45,43 +45,8 @@
</script>
<!--
- Explanation of scroll positions
- ===============================
-
- Please note the following:
-
- - The scroller has a width x height of 80x100px.
- - The content is 50x50px with a 150px margin on all sides.
- In other words, the size of the scroller content is 200x200px.
-
- This means that, for vertical direction scrolling, assuming no insets:
-
- - The start offset is 50px (scroller height + 50px is 150px, which consumes
- exactly the margin of the content).
- - The end offset is 200px (this is where the bottom edge of the scroller has
- just cleared the content).
- - The halfway point is (50px + 200px) / 2 = 125px.
-
- For horizontal direction scrolling, assuming no insets:
-
- - The start offset is 70px (scroller width + 70px is 150px, which consumes
- exactly the margin of the content).
- - The end offset is 200px (this is where the left edge of the scroller has
- just cleared the content).
- - The halfway point is (70px + 200px) / 2 = 135px.
-
- The start and end insets will adjust the start and end offsets accordingly,
- and the expectations in this file explicitly write out those adjustments.
- For example, if the start offset is normally 50px, but there's an inset of
- 10px, we'll expect 50px + 10px rather than 60px.
-
- Halfway-point expectations write out the adjustment from the "normal"
- halfway-point, e.g. for start-inset:10px and end-inset:20px, we expect
- "125px + 5px" since (20-10)/2 == 5.
-
- Finally, note that for right-to-left and bottom-to-top scrolling directions
- scroll offsets go the in the negative direction. This is why some expectations
- negate all the offsets.
+ The scroller is 80x100px.
+ The target is 50x50px with a 150px margin.
-->
<template id=test_one_value>
@@ -101,7 +66,7 @@
inflate(t, test_one_value);
await assertValueAt(scroller, target, { scrollTop:50, expected:-1 });
await assertValueAt(scroller, target, { scrollTop:50 + 10, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollTop:125 + 0, expected:50 }); // 50%
+ await assertValueAt(scroller, target, { scrollTop:125, expected:50 }); // 50%
await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100%
await assertValueAt(scroller, target, { scrollTop:200, expected:-1 });
}, 'view-timeline-inset with one value');
@@ -124,7 +89,7 @@
inflate(t, test_two_values);
await assertValueAt(scroller, target, { scrollTop:50, expected:-1 });
await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50%
+ await assertValueAt(scroller, target, { scrollTop:130, expected:50 }); // 50%
await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100%
await assertValueAt(scroller, target, { scrollTop:200, expected:-1 });
}, 'view-timeline-inset with two values');
@@ -148,7 +113,7 @@
inflate(t, test_em_values);
await assertValueAt(scroller, target, { scrollTop:50, expected:-1 });
await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50%
+ await assertValueAt(scroller, target, { scrollTop:130, expected:50 }); // 50%
await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100%
await assertValueAt(scroller, target, { scrollTop:200, expected:-1 });
}, 'view-timeline-inset with em values');
@@ -172,7 +137,7 @@
inflate(t, test_percentage_values);
await assertValueAt(scroller, target, { scrollTop:50, expected:-1 });
await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50%
+ await assertValueAt(scroller, target, { scrollTop:130, expected:50 }); // 50%
await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100%
await assertValueAt(scroller, target, { scrollTop:200, expected:-1 });
}, 'view-timeline-inset with percentage values');
@@ -193,10 +158,9 @@
<script>
promise_test(async (t) => {
inflate(t, test_outset);
-
await assertValueAt(scroller, target, { scrollTop:20, expected:-1 });
await assertValueAt(scroller, target, { scrollTop:50 - 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollTop:125 - 5, expected:50 }); // 50%
+ await assertValueAt(scroller, target, { scrollTop:120, expected:50 }); // 50%
await assertValueAt(scroller, target, { scrollTop:200 + 10, expected:100 }); // 100%
await assertValueAt(scroller, target, { scrollTop:220, expected:-1 });
}, 'view-timeline-inset with negative values');
@@ -219,7 +183,7 @@
inflate(t, test_horizontal);
await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 });
await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50%
+ await assertValueAt(scroller, target, { scrollLeft:140, expected:50 }); // 50%
await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100%
await assertValueAt(scroller, target, { scrollLeft:200, expected:-1 });
}, 'view-timeline-inset with horizontal scroller');
@@ -242,7 +206,7 @@
inflate(t, test_block);
await assertValueAt(scroller, target, { scrollTop:50, expected:-1 });
await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50%
+ await assertValueAt(scroller, target, { scrollTop:130, expected:50 }); // 50%
await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100%
await assertValueAt(scroller, target, { scrollTop:200, expected:-1 });
}, 'view-timeline-inset with block scroller');
@@ -265,477 +229,8 @@
inflate(t, test_inline);
await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 });
await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50%
+ await assertValueAt(scroller, target, { scrollLeft:140, expected:50 }); // 50%
await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100%
await assertValueAt(scroller, target, { scrollLeft:200, expected:-1 });
}, 'view-timeline-inset with inline scroller');
</script>
-
-<template id=test_auto_block>
- <style>
- #scroller {
- scroll-padding-block: 10px 20px;
- }
- #target {
- view-timeline: t1 block;
- view-timeline-inset: auto auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_block);
- await assertValueAt(scroller, target, { scrollTop:50, expected:-1 });
- await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollTop:200, expected:-1 });
- }, 'view-timeline-inset:auto, block');
-</script>
-
-<template id=test_auto_block_vertical_lr>
- <style>
- #scroller {
- scroll-padding-block: 10px 20px;
- writing-mode: vertical-lr;
- }
- #target {
- view-timeline: t1 block;
- view-timeline-inset: auto auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_block_vertical_lr);
- await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 });
- await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollLeft:200, expected:-1 });
- }, 'view-timeline-inset:auto, block, vertical-lr');
-</script>
-
-<template id=test_auto_block_vertical_rl>
- <style>
- #scroller {
- scroll-padding-block: 10px 20px;
- writing-mode: vertical-rl;
- }
- #target {
- view-timeline: t1 block;
- view-timeline-inset: auto auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_block_vertical_rl);
- // Note: this represents horizontal scrolling from right to left.
- await assertValueAt(scroller, target, { scrollLeft:-20, expected:-1 });
- await assertValueAt(scroller, target, { scrollLeft:-(70 + 20), expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollLeft:-(135 + 5), expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollLeft:-(200 - 10), expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollLeft:-200, expected:-1 });
- }, 'view-timeline-inset:auto, block, vertical-rl');
-</script>
-
-<template id=test_auto_inline>
- <style>
- #scroller {
- scroll-padding-inline: 10px 20px;
- }
- #target {
- view-timeline: t1 inline;
- view-timeline-inset: auto auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_inline);
- await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 });
- await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollLeft:200, expected:-1 });
- }, 'view-timeline-inset:auto, inline');
-</script>
-
-<template id=test_auto_inline_vertical_rl>
- <style>
- #scroller {
- scroll-padding-inline: 10px 20px;
- writing-mode: vertical-rl;
- }
- #target {
- view-timeline: t1 inline;
- view-timeline-inset: auto auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_inline_vertical_rl);
- await assertValueAt(scroller, target, { scrollTop:50, expected:-1 });
- await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollTop:200, expected:-1 });
- }, 'view-timeline-inset:auto, inline, vertical-rl');
-</script>
-
-<template id=test_auto_inline_vertical_lr>
- <style>
- #scroller {
- scroll-padding-inline: 10px 20px;
- writing-mode: vertical-lr;
- }
- #target {
- view-timeline: t1 inline;
- view-timeline-inset: auto auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_inline_vertical_lr);
- await assertValueAt(scroller, target, { scrollTop:50, expected:-1 });
- await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollTop:200, expected:-1 });
- }, 'view-timeline-inset:auto, inline, vertical-lr');
-</script>
-
-<template id=test_auto_inline_rtl>
- <style>
- #scroller {
- scroll-padding-inline: 10px 20px;
- direction: rtl;
- }
- #target {
- view-timeline: t1 inline;
- view-timeline-inset: auto auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_inline_rtl);
- await assertValueAt(scroller, target, { scrollLeft:-20, expected:-1 });
- await assertValueAt(scroller, target, { scrollLeft:-(70 + 20), expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollLeft:-(135 + 5), expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollLeft:-(200 - 10), expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollLeft:-200, expected:-1 });
- }, 'view-timeline-inset:auto, inline, rtl');
-</script>
-
-<template id=test_auto_inline_vertical_rl_rtl>
- <style>
- #scroller {
- scroll-padding-inline: 10px 20px;
- writing-mode: vertical-rl;
- direction: rtl;
- }
- #target {
- view-timeline: t1 inline;
- view-timeline-inset: auto auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_inline_vertical_rl_rtl);
- await assertValueAt(scroller, target, { scrollTop:-50, expected:-1 });
- await assertValueAt(scroller, target, { scrollTop:-(50 + 20), expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollTop:-(125 + 5), expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollTop:-(200 - 10), expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollTop:-200, expected:-1 });
- }, 'view-timeline-inset:auto, inline, vertical-rl, rtl');
-</script>
-
-<template id=test_auto_inline_vertical_lr_rtl>
- <style>
- #scroller {
- scroll-padding-inline: 10px 20px;
- writing-mode: vertical-lr;
- direction: rtl;
- }
- #target {
- view-timeline: t1 inline;
- view-timeline-inset: auto auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_inline_vertical_lr_rtl);
- await assertValueAt(scroller, target, { scrollTop:-50, expected:-1 });
- await assertValueAt(scroller, target, { scrollTop:-(50 + 20), expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollTop:-(125 + 5), expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollTop:-(200 - 10), expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollTop:-200, expected:-1 });
- }, 'view-timeline-inset:auto, inline, vertical-lr, rtl');
-</script>
-
-<template id=test_auto_vertical>
- <style>
- #scroller {
- scroll-padding-block: 10px 20px;
- }
- #target {
- view-timeline: t1 vertical;
- view-timeline-inset: auto auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_vertical);
- await assertValueAt(scroller, target, { scrollTop:50, expected:-1 });
- await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollTop:200, expected:-1 });
- }, 'view-timeline-inset:auto, vertical');
-</script>
-
-<template id=test_auto_vertical_vertical_rl>
- <style>
- #scroller {
- scroll-padding-inline: 10px 20px;
- writing-mode: vertical-rl;
- }
- #target {
- view-timeline: t1 vertical;
- view-timeline-inset: auto auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_vertical_vertical_rl);
- await assertValueAt(scroller, target, { scrollTop:50, expected:-1 });
- await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollTop:200, expected:-1 });
- }, 'view-timeline-inset:auto, vertical, vertical-rl');
-</script>
-
-<template id=test_auto_vertical_vertical_rl_rtl>
- <style>
- #scroller {
- scroll-padding-inline: 10px 20px;
- writing-mode: vertical-rl;
- direction: rtl;
- }
- #target {
- view-timeline: t1 vertical;
- view-timeline-inset: auto auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_vertical_vertical_rl_rtl);
- await assertValueAt(scroller, target, { scrollTop:-50, expected:-1 });
- await assertValueAt(scroller, target, { scrollTop:-(50 + 20), expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollTop:-(125 + 5), expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollTop:-(200 - 10), expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollTop:-200, expected:-1 });
- }, 'view-timeline-inset:auto, vertical, vertical-rl, rtl');
-</script>
-
-<template id=test_auto_horizontal>
- <style>
- #scroller {
- scroll-padding-inline: 10px 20px;
- }
- #target {
- view-timeline: t1 horizontal;
- view-timeline-inset: auto auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_horizontal);
- await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 });
- await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollLeft:200, expected:-1 });
- }, 'view-timeline-inset:auto, horizontal');
-</script>
-
-<template id=test_auto_horizontal_rtl>
- <style>
- #scroller {
- scroll-padding-inline: 10px 20px;
- direction: rtl;
- }
- #target {
- view-timeline: t1 horizontal;
- view-timeline-inset: auto auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_horizontal_rtl);
- await assertValueAt(scroller, target, { scrollLeft:-20, expected:-1 });
- await assertValueAt(scroller, target, { scrollLeft:-(70 + 20), expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollLeft:-(135 + 5), expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollLeft:-(200 - 10), expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollLeft:-200, expected:-1 });
- }, 'view-timeline-inset:auto, horizontal, rtl');
-</script>
-
-<template id=test_auto_horizontal_vertical_lr>
- <style>
- #scroller {
- scroll-padding-block: 10px 20px;
- writing-mode: vertical-lr;
- }
- #target {
- view-timeline: t1 horizontal;
- view-timeline-inset: auto auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_horizontal_vertical_lr);
- await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 });
- await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollLeft:200, expected:-1 });
- }, 'view-timeline-inset:auto, horizontal, vertical-lr');
-</script>
-
-<template id=test_auto_horizontal_vertical_rl>
- <style>
- #scroller {
- scroll-padding-block: 10px 20px;
- writing-mode: vertical-rl;
- }
- #target {
- view-timeline: t1 horizontal;
- view-timeline-inset: auto auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_horizontal_vertical_rl);
- await assertValueAt(scroller, target, { scrollLeft:-20, expected:-1 });
- await assertValueAt(scroller, target, { scrollLeft:-(70 + 20), expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollLeft:-(135 + 5), expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollLeft:-(200 - 10), expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollLeft:-200, expected:-1 });
- }, 'view-timeline-inset:auto, horizontal, vertical-rl');
-</script>
-
-<template id=test_auto_mix>
- <style>
- #scroller {
- font-size: 10px;
- scroll-padding-block: 50px calc(10% + 1em);
- }
- #target {
- view-timeline: t1;
- view-timeline-inset: 10% auto;
- animation: anim 1s linear t1;
- }
- </style>
- <div id=scroller>
- <div id=target></div>
- </div>
-</template>
-<script>
- promise_test(async (t) => {
- inflate(t, test_auto_mix);
- // Note: 10% of scroller height 100px is 10px, and 1em with font-size:10px
- // is also 10px. Hence we expect the end inset specified as calc(10% + 1em)
- // to be 20px.
- await assertValueAt(scroller, target, { scrollTop:50, expected:-1 });
- await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0%
- await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50%
- await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100%
- await assertValueAt(scroller, target, { scrollTop:200, expected:-1 });
- }, 'view-timeline-inset:auto, mix');
-</script>
-
-<!--
- TODO: How to test view-timeline:auto + scroll-padding:auto? The UA may
- in theory use any value in that case.
-
- https://drafts.csswg.org/css-scroll-snap-1/#valdef-scroll-padding-auto
--->
