<!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>
