1 files changed, 148 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/css/animation-timeline-scroll-functional-notation.tentative.html b/testing/web-platform/tests/scroll-animations/css/animation-timeline-scroll-functional-notation.tentative.html
new file mode 100644
index 0000000000..e28e85245e
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/css/animation-timeline-scroll-functional-notation.tentative.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<title>The animation-timeline: scroll() notation</title>
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-notation">
+<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/6674">
+<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 { translate: 50px; }
+    to { translate: 150px; }
+  }
+  html {
+    min-height: 100vh;
+    /* This makes the max scrollable ragne be 100px in root element */
+    padding-bottom: 100px;
+  }
+  #container {
+    width: 300px;
+    height: 300px;
+    overflow: scroll;
+  }
+  #target {
+    width: 100px;
+    /* This makes the max scrollable ragne be 100px in the block direction */
+    height: 100px;
+  }
+  /* large block content */
+  .block-content {
+    block-size: 100%;
+  }
+  /* large inline content */
+  .inline-content {
+    inline-size: 100%;
+    block-size: 5px;
+    /* This makes the max scrollable ragne be 100px in the inline direction */
+    padding-inline-end: 100px;
+  }
+</style>
+<body>
+<div id="log"></div>
+<script>
+"use strict";
+
+setup(assert_implements_animation_timeline);
+
+const root = document.scrollingElement;
+const createTargetWithStuff = function(t, contentClass) {
+  let container = document.createElement('div');
+  container.id = 'container';
+  let target = document.createElement('div');
+  target.id = 'target';
+  let content = document.createElement('div');
+  content.className = contentClass;
+
+  // <div id='container'>
+  //   <div id='target'></div>
+  //   <div class=contentClass></div>
+  // </div>
+  document.body.appendChild(container);
+  container.appendChild(target);
+  container.appendChild(content);
+
+  if (t && typeof t.add_cleanup === 'function') {
+    t.add_cleanup(() => {
+      content.remove();
+      target.remove();
+      container.remove();
+    });
+  }
+
+  return [container, target];
+};
+
+async function scrollLeft(element, value) {
+  element.scrollLeft = value;
+  await waitForNextFrame();
+}
+
+async function scrollTop(element, value) {
+  element.scrollTop = value;
+  await waitForNextFrame();
+}
+
+promise_test(async t => {
+  let [container, div] = createTargetWithStuff(t, 'block-content');
+  div.style.animation = "anim 10s linear";
+  div.style.animationTimeline = "scroll(nearest)";
+
+  await scrollTop(root, 50);
+  assert_equals(getComputedStyle(div).translate, '50px');
+
+  await scrollTop(container, 50);
+  assert_equals(getComputedStyle(div).translate, '100px');
+
+  await scrollTop(root, 0);
+}, 'animation-timeline: scroll(nearest)');
+
+promise_test(async t => {
+  let [container, div] = createTargetWithStuff(t, 'block-content');
+  div.style.animation = "anim 10s linear";
+  div.style.animationTimeline = "scroll(root)";
+
+  await scrollTop(container, 50);
+  assert_equals(getComputedStyle(div).translate, '50px');
+
+  await scrollTop(root, 50);
+  assert_equals(getComputedStyle(div).translate, '100px');
+
+  await scrollTop(root, 0);
+}, 'animation-timeline: scroll(root)');
+
+promise_test(async t => {
+  let [container, div] = createTargetWithStuff(t, 'inline-content');
+  div.style.animation = "anim 10s linear";
+  div.style.animationTimeline = "scroll(inline)";
+
+  await scrollLeft(container, 50);
+  assert_equals(getComputedStyle(div).translate, '100px');
+}, 'animation-timeline: scroll(inline)');
+
+promise_test(async t => {
+  let [container, div] = createTargetWithStuff(t, 'block-content');
+  container.style.writingMode = 'vertical-lr';
+  div.style.animation = "anim 10s linear";
+  div.style.animationTimeline = "scroll(horizontal)";
+
+  await scrollLeft(container, 50);
+  assert_equals(getComputedStyle(div).translate, '100px');
+}, 'animation-timeline: scroll(horizontal)');
+
+promise_test(async t => {
+  let [container, div] = createTargetWithStuff(t, 'inline-content');
+  container.style.writingMode = 'vertical-lr';
+  div.style.animation = "anim 10s linear";
+  div.style.animationTimeline = "scroll(vertical)";
+
+  await scrollTop(container, 50);
+  assert_equals(getComputedStyle(div).translate, '100px');
+}, 'animation-timeline: scroll(vertical)');
+
+// TODO: Add more tests which change the overflow property of the container for
+// scroll(nearest)
+
+</script>
+</body>