1 files changed, 104 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-used-values.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-used-values.html
new file mode 100644
index 0000000000..1bd6f0468c
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-used-values.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<title>Used values of view-timeline properties</title>
+<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timeline-axis">
+<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timeline-name">
+<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: 100px;
+    height: 100px;
+  }
+  .scroller > div {
+    width: 300px;
+    height: 300px;
+    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();
+  }
+</script>
+
+<template id=omitted_axis>
+  <style>
+    #target {
+      view-timeline-name: --t1, --t2; /* Two items */
+      view-timeline-axis: inline; /* One item */
+      animation: anim 1s linear;
+      animation-timeline: --t2;
+    }
+  </style>
+  <div id=scroller class=scroller>
+    <div id=target></div>
+  </div>
+</template>
+<script>
+  promise_test(async (t) => {
+    inflate(t, omitted_axis);
+    assert_equals(getComputedStyle(target).zIndex, '-1');
+
+    // enter 0% is at scrollTop/Left = -100
+    // exit 100% is at scrollTop/Left = 300
+    // This means that at scrollTop/Left=0, the animation is at 25%.
+
+    await scrollTop(scroller, 0);
+    await scrollLeft(scroller, 0);
+    assert_equals(getComputedStyle(target).zIndex, '25');
+
+    // The timeline should be inline-axis:
+    await scrollTop(scroller, 100); // 50%
+    await scrollLeft(scroller, 40); // 35%
+    assert_equals(getComputedStyle(target).zIndex, '35');
+  }, 'Use the last value from view-timeline-axis if omitted');
+</script>
+
+<template id=omitted_inset>
+  <style>
+    #target {
+      view-timeline-name: --t1, --t2; /* Two items */
+      view-timeline-inset: 100px; /* One item */
+      animation: anim 1s linear;
+      animation-timeline: --t2;
+    }
+  </style>
+  <div id=scroller class=scroller>
+    <div id=target></div>
+  </div>
+</template>
+<script>
+  promise_test(async (t) => {
+    inflate(t, omitted_inset);
+    assert_equals(getComputedStyle(target).zIndex, '-1');
+
+    // 0% is normally at at scrollTop = -100
+    // 100% is normally at scrollTop/Left = 300
+    // However, we have a 100px inset in both ends, which makes the
+    // range [0, 200].
+
+    await scrollTop(scroller, 0);
+    assert_equals(getComputedStyle(target).zIndex, '0');
+    await scrollTop(scroller, 100); // 50%
+    assert_equals(getComputedStyle(target).zIndex, '50');
+  }, 'Use the last value from view-timeline-inset if omitted');
+</script>