Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/scroll-animations/css/view-timeline-inset-animation.html
parent: Initial commit. (diff)
download: firefox-upstream.tar.xz
firefox-upstream.zip
1 files changed, 768 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-inset-animation.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-inset-animation.html
new file mode 100644
index 0000000000..a95086b62b
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-inset-animation.html
@@ -0,0 +1,768 @@
+<!DOCTYPE html>
+<title>Animations using view-timeline-inset</title>
+<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#propdef-view-timeline-inset">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script src="support/testcommon.js"></script>
+<style>
+  @keyframes anim {
+    from { z-index: 0; }
+    to { z-index: 100; }
+  }
+  #scroller {
+    overflow: hidden;
+    width: 80px;
+    height: 100px;
+  }
+  #target {
+    margin: 150px;
+    width: 50px;
+    height: 50px;
+    z-index: -1;
+  }
+</style>
+<main id=main></main>
+<script>
+  setup(assert_implements_animation_timeline);
+
+  function inflate(t, template) {
+    t.add_cleanup(() => main.replaceChildren());
+    main.append(template.content.cloneNode(true));
+  }
+  async function scrollTop(e, value) {
+    e.scrollTop = value;
+    await waitForNextFrame();
+  }
+  async function scrollLeft(e, value) {
+    e.scrollLeft = value;
+    await waitForNextFrame();
+  }
+  async function assertValueAt(scroller, target, args) {
+    if (args.scrollTop !== undefined)
+      await scrollTop(scroller, args.scrollTop);
+    if (args.scrollLeft !== undefined)
+      await scrollLeft(scroller, args.scrollLeft);
+    assert_equals(getComputedStyle(target).zIndex, args.expected.toString());
+  }
+</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.
+-->
+
+<template id=test_one_value>
+  <style>
+    #target {
+      view-timeline: t1;
+      view-timeline-inset: 10px;
+      animation: anim 1s linear;
+      animation-timeline: t1;
+    }
+  </style>
+  <div id=scroller class=vertical>
+    <div id=target></div>
+  </div>
+</template>
+<script>
+  promise_test(async (t) => {
+    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:200 - 10, expected:100 }); // 100%
+    await assertValueAt(scroller, target, { scrollTop:200, expected:-1 });
+  }, 'view-timeline-inset with one value');
+</script>
+
+<template id=test_two_values>
+  <style>
+    #target {
+      view-timeline: t1;
+      view-timeline-inset: 10px 20px;
+      animation: anim 1s linear;
+      animation-timeline: t1;
+    }
+  </style>
+  <div id=scroller class=vertical>
+    <div id=target></div>
+  </div>
+</template>
+<script>
+  promise_test(async (t) => {
+    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:200 - 10, expected:100 }); // 100%
+    await assertValueAt(scroller, target, { scrollTop:200, expected:-1 });
+  }, 'view-timeline-inset with two values');
+</script>
+
+<template id=test_em_values>
+  <style>
+    #target {
+      font-size: 10px;
+      view-timeline: t1;
+      view-timeline-inset: 10px 2em;
+      animation: anim 1s linear;
+      animation-timeline: t1;
+    }
+  </style>
+  <div id=scroller class=vertical>
+    <div id=target></div>
+  </div>
+</template>
+<script>
+  promise_test(async (t) => {
+    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:200 - 10, expected:100 }); // 100%
+    await assertValueAt(scroller, target, { scrollTop:200, expected:-1 });
+  }, 'view-timeline-inset with em values');
+</script>
+
+<template id=test_percentage_values>
+  <style>
+    #target {
+      font-size: 10px;
+      view-timeline: t1;
+      view-timeline-inset: calc(5px + max(1%, 5%)) 20%;
+      animation: anim 1s linear;
+      animation-timeline: t1;
+    }
+  </style>
+  <div id=scroller class=vertical>
+    <div id=target></div>
+  </div>
+</template>
+<script>
+  promise_test(async (t) => {
+    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:200 - 10, expected:100 }); // 100%
+    await assertValueAt(scroller, target, { scrollTop:200, expected:-1 });
+  }, 'view-timeline-inset with percentage values');
+</script>
+
+<template id=test_outset>
+  <style>
+    #target {
+      view-timeline: t1;
+      view-timeline-inset: -10px -20px;
+      animation: anim 1s linear;
+      animation-timeline: t1;
+    }
+  </style>
+  <div id=scroller class=vertical>
+    <div id=target></div>
+  </div>
+</template>
+<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:200 + 10, expected:100 }); // 100%
+    await assertValueAt(scroller, target, { scrollTop:220, expected:-1 });
+  }, 'view-timeline-inset with negative values');
+</script>
+
+<template id=test_horizontal>
+  <style>
+    #target {
+      view-timeline: t1 horizontal;
+      view-timeline-inset: 10px 20px;
+      animation: anim 1s linear;
+      animation-timeline: t1;
+    }
+  </style>
+  <div id=scroller>
+    <div id=target></div>
+  </div>
+</template>
+<script>
+  promise_test(async (t) => {
+    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:200 - 10, expected:100 }); // 100%
+    await assertValueAt(scroller, target, { scrollLeft:200, expected:-1 });
+  }, 'view-timeline-inset with horizontal scroller');
+</script>
+
+<template id=test_block>
+  <style>
+    #target {
+      view-timeline: t1 block;
+      view-timeline-inset: 10px 20px;
+      animation: anim 1s linear;
+      animation-timeline: t1;
+    }
+  </style>
+  <div id=scroller>
+    <div id=target></div>
+  </div>
+</template>
+<script>
+  promise_test(async (t) => {
+    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:200 - 10, expected:100 }); // 100%
+    await assertValueAt(scroller, target, { scrollTop:200, expected:-1 });
+  }, 'view-timeline-inset with block scroller');
+</script>
+
+<template id=test_inline>
+  <style>
+    #target {
+      view-timeline: t1 inline;
+      view-timeline-inset: 10px 20px;
+      animation: anim 1s linear;
+      animation-timeline: t1;
+    }
+  </style>
+  <div id=scroller>
+    <div id=target></div>
+  </div>
+</template>
+<script>
+  promise_test(async (t) => {
+    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: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;
+      animation-timeline: 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;
+      animation-timeline: 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;
+      animation-timeline: 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;
+      animation-timeline: 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;
+      animation-timeline: 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;
+      animation-timeline: 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;
+      animation-timeline: 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;
+      animation-timeline: 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;
+      animation-timeline: 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;
+      animation-timeline: 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;
+      animation-timeline: 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;
+      animation-timeline: 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;
+      animation-timeline: 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;
+      animation-timeline: 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;
+      animation-timeline: 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;
+      animation-timeline: 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;
+      animation-timeline: 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
+-->
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/scroll-animations/css/view-timeline-inset-animation.html
parent	Initial commit. (diff)
download	firefox-upstream.tar.xz firefox-upstream.zip