1 files changed, 137 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/scroll-timelines/scroll-animation-effect-fill-modes.tentative.html b/testing/web-platform/tests/scroll-animations/scroll-timelines/scroll-animation-effect-fill-modes.tentative.html
new file mode 100644
index 0000000000..b9cc154676
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/scroll-timelines/scroll-animation-effect-fill-modes.tentative.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Verify applied effect output for all fill modes in all timeline states: before start, at start, in range, at end, after end while using various effect delay values</title>
+<meta name="timeout" content="long">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script src="testcommon.js"></script>
+<style>
+  .scroller {
+    overflow: hidden;
+    height: 200px;
+    width: 200px;
+  }
+  .contents {
+    /* Make scroll range 1000 to simplify the math and avoid rounding errors */
+    height: 1200px;
+    width: 100%;
+  }
+</style>
+<div id="log"></div>
+<script>
+  'use strict';
+
+  test(t => {
+    const effect = new KeyframeEffect(createDiv(t), { opacity: [0.3, 0.7] });
+    const animation = new Animation(effect, createScrollTimeline(t));
+
+    assert_equals(effect.getTiming().fill, "auto");
+    assert_equals(effect.getComputedTiming().fill, "none");
+  }, "Scroll based animation effect fill mode should return 'auto' for" +
+     " getTiming() and should return 'none' for getComputedTiming().")
+
+  /* All interesting transitions:
+      before start delay
+      at start delay
+      within active phase
+      at effect end
+      after effect end
+
+      test_case data structure:
+      fill_mode: {
+        scroll_percentage: ["state description", expected applied effect value]
+      }
+  */
+  const test_cases = {
+    "none": {
+      0.10: ["before start delay", 1],
+      0.25: ["at start delay", 0.3],
+      0.50: ["at midpoint", 0.5],
+      0.75: ["at effect end", 1],
+      0.90: ["after effect end", 1]
+    },
+    "backwards": {
+      0.10: ["before start delay", 0.3],
+      0.25: ["at start delay", 0.3],
+      0.50: ["at midpoint", 0.5],
+      0.75: ["at effect end", 1],
+      0.90: ["after effect end", 1]
+    },
+    "forwards": {
+      0.10: ["before timeline start", 1],
+      0.25: ["at timeline start", 0.3],
+      0.50: ["in timeline range", 0.5],
+      0.75: ["at timeline end", 0.7],
+      0.90: ["after timeline end", 0.7]
+    },
+    "both": {
+      0.10: ["before timeline start", 0.3],
+      0.25: ["at timeline start", 0.3],
+      0.50: ["in timeline range", 0.5],
+      0.75: ["at timeline end", 0.7],
+      0.90: ["after timeline end", 0.7]
+    },
+    "auto": {
+      0.10: ["before timeline start", 1],
+      0.25: ["at timeline start", 0.3],
+      0.50: ["in timeline range", 0.5],
+      0.75: ["at timeline end", 1],
+      0.90: ["after timeline end", 1]
+    }
+  }
+
+  for (const fill_mode in test_cases) {
+    const scroll_percents = test_cases[fill_mode]
+
+    for (const scroll_percentage in scroll_percents) {
+      const expectation = scroll_percents[scroll_percentage];
+
+      const [test_name, expected_value] = expectation;
+
+      const description =
+          `Applied effect value ${test_name} with fill: ${fill_mode}`
+      promise_test(
+          create_scroll_timeline_fill_test(
+              fill_mode, scroll_percentage, expected_value),
+          description);
+    }
+  }
+
+  function create_scroll_timeline_fill_test(
+      fill_mode, scroll_percentage, expected){
+    return async t => {
+      const target = createDiv(t);
+
+      const timeline = createScrollTimeline(t);
+      const effect =
+          new KeyframeEffect(target,
+                             { opacity: [0.3, 0.7] },
+                             {
+                               fill: fill_mode,
+                               /* Animation times normalized to fill scroll
+                                  range */
+                               duration: 2000,
+                               delay: 1000,
+                               endDelay: 1000
+                             });
+      const animation = new Animation(effect, timeline);
+      const scroller = timeline.source;
+      const maxScroll = scroller.scrollHeight - scroller.clientHeight;
+
+      animation.play();
+
+      await animation.ready;
+
+      scroller.scrollTop = scroll_percentage * maxScroll;
+
+      // Wait for new animation frame which allows the timeline to compute
+      // new current time.
+      await waitForNextFrame();
+
+      assert_equals(parseFloat(window.getComputedStyle(target).opacity),
+                    expected,
+                    "animation effect applied property value");
+    }
+  }
+</script>