scroll-animations/scroll-timelines/scroll-animation-effect-phases.tentative.html - external/github.com/web-platform-tests/wpt - Git at Google

 <!DOCTYPE html>
 <meta charset=utf-8>
 <title>Verify timeline time, animation time, effect time, and effect progress for 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';
  // Note: effects are scaled to fill the timeline.

   // Each entry is [[test input], [test expectations]]
   // test input = ["description", delay, end_delay, scroll percent]
   // test expectations = [timeline time, animation current time,
   //                      effect local time, effect progress, effect phase,
   //                      opacity]

   /* All interesting transitions:
       at timeline start
       before effect delay
       at effect start
       in active range
       at effect end
       after effect end
       at timeline end
   */
   const test_cases = [
     // Case 1: No delays.
     // Boundary at end of active phase is inclusive.
     [
       ["at start", 0, 0, 0],
       [0, 0, 0, 0, "active", 0.3]
     ],
     [
       ["in active range", 0, 0, 0.50],
       [50, 50, 50, 0.5, "active", 0.5]
     ],
     [
       ["at effect end time", 0, 0, 1.0],
       [100, 100, 100, 1.0, "active", 0.7]
     ],

     // Case 2: Positive start delay and no end delay.
     // Boundary at end of active phase is inclusive.
     [
       ["at timeline start", 500, 0, 0],
       [0, 0, 0, null, "before", 1]
     ],
     [
       ["before start delay", 500, 0, 0.25],
       [25, 25, 25, null, "before", 1]
     ],
     [
       ["at start delay", 500, 0, 0.5],
       [50, 50, 50, 0, "active", 0.3]
     ],
     [
       ["in active range", 500, 0, 0.75],
       [75, 75, 75, 0.5, "active", 0.5]
     ],
     [
       ["at effect end time", 500, 0, 1.0],
       [100, 100, 100, 1.0, "active", 0.7]
     ],

     // case 3: No start delay, Positive end delay.
     // Boundary at end of active phase is exclusive.
     [
       ["at timeline start", 0, 500, 0],
       [0, 0, 0, 0, "active", 0.3]
     ],
     [
       ["in active range", 0, 500, 0.25],
       [25, 25, 25, 0.5, "active", 0.5]
     ],
     [
       ["at effect end time", 0, 500, 0.5],
       [50, 50, 50, null, "after", 1.0]
     ],
     [
       ["after effect end time", 0, 500, 0.75],
       [75, 75, 75, null, "after", 1.0]
     ],
     [
       ["at timeline boundary", 0, 500, 1.0],
       [100, 100, 100, null, "after", 1.0]
     ],

     // case 4: Positive start and end delays.
     // Boundary at end of active phase is exclusive.
     [
       ["at timeline start", 250, 250, 0],
       [0, 0, 0, null, "before", 1]
     ],
     [
       ["before start delay", 250, 250, 0.1],
       [10, 10, 10, null, "before", 1]
     ],
     [
       ["at start delay", 250, 250, 0.25],
       [25, 25, 25, 0, "active", 0.3]
     ],
     [
       ["in active range", 250, 250, 0.5],
       [50, 50, 50, 0.5, "active", 0.5]
     ],
     [
       ["at effect end time", 250, 250, 0.75],
       [75, 75, 75, null, "after", 1.0]
     ],
     [
       ["after effect end time", 250, 250, 0.9],
       [90, 90, 90, null, "after", 1.0]
     ],
     [
       ["at timeline boundary", 250, 250, 1.0],
       [100, 100, 100, null, "after", 1.0]
     ],

     // Case 5: Negative start and end delays.
     // Effect boundaries are not reachable.
     [
       ["at timeline start", -125, -125, 0],
       [0, 0, 0, 0.25, "active", 0.4]
     ],
     [
       ["in active range", -125, -125, 0.5],
       [50, 50, 50, 0.5, "active", 0.5]
     ],
     [
       ["at timeline end", -125, -125, 1.0],
       [100, 100, 100, 0.75, "active", 0.6]
     ]
   ];

   for (const test_case of test_cases) {
     const [inputs, expected] = test_case;
     const [test_name, delay, end_delay, scroll_percentage] = inputs;

     const description = `Current times and effect phase ${test_name} when` +
       ` delay = ${delay} and endDelay = ${end_delay} |`;

     promise_test(
         create_scroll_timeline_delay_test(
             delay, end_delay, scroll_percentage, expected),
         description);
   }

   function create_scroll_timeline_delay_test(
       delay, end_delay, scroll_percentage, expected){
     return async t => {
       const target = createDiv(t);
       const timeline = createScrollTimeline(t);
       const effect = new KeyframeEffect(
         target,
         {
           opacity: [0.3, 0.7]
         },
         {
           duration: 500,
           delay: delay,
           endDelay: end_delay
         }
       );
       const animation = new Animation(effect, timeline);
       t.add_cleanup(() => {
         animation.cancel();
       });
       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();

       const [expected_timeline_current_time,
           expected_animation_current_time,
           expected_effect_local_time,
           expected_effect_progress,
           expected_effect_phase,
           expected_opacity] = expected;

       assert_percents_equal(
           animation.timeline.currentTime,
           expected_timeline_current_time,
           "timeline current time");
       assert_percents_equal(
           animation.currentTime,
           expected_animation_current_time,
           "animation current time");
       assert_percents_equal(
           animation.effect.getComputedTiming().localTime,
           expected_effect_local_time,
           "animation effect local time");
       assert_approx_equals_or_null(
           animation.effect.getComputedTiming().progress,
           expected_effect_progress,
           0.001,
           "animation effect progress");
       assert_phase(
           animation, expected_effect_phase);
       assert_approx_equals(
           parseFloat(getComputedStyle(target).opacity), expected_opacity,
           0.001,
           'target opacity');
     }
   }

   function createKeyframeEffectOpacity(test){
     return new KeyframeEffect(
       createDiv(test),
       {
         opacity: [0.3, 0.7]
       },
       {
         duration: 1000
       }
     );
   }

   function verifyEffectBeforePhase(animation) {
     // If currentTime is null, we are either idle, or running with an
     // inactive timeline. Either way, the animation is not in effect and cannot
     // be in the before phase.
     assert_true(animation.currentTime != null,
                 'Animation is not in effect');

     const fillMode = animation.effect.getTiming().fill;
     animation.effect.updateTiming({ fill: 'none' });

     // progress == null AND opacity == 1 implies we are in the effect before
     // or after phase.
     assert_equals(animation.effect.getComputedTiming().progress, null);
     assert_equals(
         window.getComputedStyle(animation.effect.target)
             .getPropertyValue("opacity"),
         "1");

     // If the progress is no longer null after adding fill: backwards, then we
     // are in the before phase.
     animation.effect.updateTiming({ fill: 'backwards' });
     assert_true(animation.effect.getComputedTiming().progress != null);
     assert_equals(
         window.getComputedStyle(animation.effect.target)
             .getPropertyValue("opacity"),
         "0.3");

     // Reset fill mode to avoid side-effects.
     animation.effect.updateTiming({ fill: fillMode });
   }

   function createScrollLinkedOpacityAnimationWithDelays(t) {
     const animation = new Animation(
       createKeyframeEffectOpacity(t),
       createScrollTimeline(t)
     );
     t.add_cleanup(() => {
       animation.cancel();
     });
     animation.effect.updateTiming({
        duration: 1000,
        delay: 500,
        endDelay: 500
     });
     return animation;
   }


   promise_test(async t => {
     const animation = createScrollLinkedOpacityAnimationWithDelays(t);
     const scroller = animation.timeline.source;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;

     // scroll pos
     // current time
     // start time
     // |
     // |---- 25% before ----|----  50% active ----|---- 25% after ----|
     animation.play();
     await animation.ready;
     assert_percents_equal(animation.startTime, 0);
     assert_phase(animation, 'before');

     // start time                 scroll pos
     // |                          current time
     // |                              |
     // |---- 25% before ----|----  50% active ----|---- 25% after ----|
     scroller.scrollTop = 0.5 * maxScroll;
     await waitForNextFrame();
     assert_phase(animation, 'active');

     // start time                scroll pos                      current time
     // |                              |                               |
     // |---- 25% before ----|----  50% active ----|---- 25% after ----|
     animation.playbackRate = 2;
     assert_phase(animation, 'after');

     // start time                scroll pos                      current time
     // |                              |                                |
     // |---- 33.3% before ----|----  66.7% active ---------------------|
     animation.effect.updateTiming({ endDelay: 0 });
     assert_phase(animation, 'active');

     //                           scroll pos                        start time
     //                           current time                           |
     //                                |                                 |
     // |---- 33.3% before ----|----  66.7% active ----------------------|
     animation.playbackRate = -1;
     assert_percents_equal(animation.startTime, 100);
     assert_phase(animation, 'active');

     //                                                             start time
     //                             scroll pos                     current time
     // |                               |                                  |
     // |---- 33.3% before  ----|----  66.7% active -----------------------|
     animation.playbackRate = -2;
     assert_phase(animation, 'active');

     // current time                                                  start time
     // |                                                             scroll pos
     // |                                                                  |
     // |---- 33.3% before  ----|----  66.7% active -----------------------|
     scroller.scrollTop = maxScroll;
     await waitForNextFrame();
     assert_phase(animation, 'before');

     // current time                                                  start time
     // |                                                             scroll pos
     // |                                                                  |
     // |---------------------  100% active -------------------------------|
     animation.effect.updateTiming({ delay: 0 });
     assert_phase(animation, 'active');

     // Finally, switch to a document timeline.  The before-active boundary
     // becomes exclusive.
     animation.timeline = document.timeline;
     animation.currentTime = 0;
     await waitForNextFrame();
     assert_phase(animation, 'before');

   }, 'Playback rate affects whether active phase boundary is inclusive.');

   promise_test(async t => {
     const animation = createScrollLinkedOpacityAnimationWithDelays(t);
     const scroller = animation.timeline.source;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;

     animation.play();
     await animation.ready;
     verifyEffectBeforePhase(animation);

     animation.pause();
     await waitForNextFrame();
     verifyEffectBeforePhase(animation);

     animation.play();
     await waitForNextFrame();

     verifyEffectBeforePhase(animation);
   }, 'Verify that (play -> pause -> play) doesn\'t change phase/progress.');

   promise_test(async t => {
     const animation = createScrollLinkedOpacityAnimationWithDelays(t);
     const scroller = animation.timeline.source;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;

     animation.play();
     await animation.ready;
     verifyEffectBeforePhase(animation);

     animation.pause();
     await animation.ready;
     verifyEffectBeforePhase(animation);

     // Scrolling should not cause the animation effect to change.
     scroller.scrollTop = 0.5 * maxScroll;
     await waitForNextFrame();

     // Check timeline phase
     assert_percents_equal(animation.timeline.currentTime, 50);
     assert_percents_equal(animation.currentTime, 0);
     assert_percents_equal(animation.effect.getComputedTiming().localTime, 0,
         "effect local time");

     // Make sure the effect is still in the before phase even though the
     // timeline is not.
     verifyEffectBeforePhase(animation);
   }, 'Pause in before phase, scroll timeline into active phase, animation ' +
      'should remain in the before phase');

   promise_test(async t => {
     const animation = createScrollLinkedOpacityAnimationWithDelays(t);
     const scroller = animation.timeline.source;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;

     animation.play();
     await animation.ready;
     verifyEffectBeforePhase(animation);

     animation.pause();
     await waitForNextFrame();
     verifyEffectBeforePhase(animation);

     // Setting the current time should force the animation into effect.
     const expected_time = 50;
     animation.currentTime = CSS.percent(expected_time);
     await waitForNextFrame();
     assert_percents_equal(animation.timeline.currentTime, 0);
     assert_percents_equal(animation.currentTime, expected_time,
                           'Current time matches set value');
     assert_percents_equal(
         animation.effect.getComputedTiming().localTime,
         expected_time, "Effect local time after setting animation.currentTime");
     assert_equals(animation.effect.getComputedTiming().progress, 0.5,
                   "Progress after setting animation.currentTime");
     assert_equals(
         window.getComputedStyle(animation.effect.target)
             .getPropertyValue("opacity"),
         "0.5", "Opacity after setting animation.currentTime");

     // Scrolling should not cause the animation effect to change since
     // paused.
     scroller.scrollTop = 0.75 * maxScroll; // scroll so that timeline is 75%
     await waitForNextFrame();
     assert_percents_equal(animation.timeline.currentTime, 75);

     // animation and effect timings are unchanged.
     assert_percents_equal(animation.currentTime, expected_time,
                           "Current time after scrolling while paused");
     assert_percents_equal(
         animation.effect.getComputedTiming().localTime,
         expected_time,
         "Effect local time after scrolling while paused");
     assert_equals(animation.effect.getComputedTiming().progress, 0.5,
                   "Progress after scrolling while paused");
     assert_equals(
         window.getComputedStyle(animation.effect.target)
             .getPropertyValue("opacity"),
         "0.5", "Opacity after scrolling while paused");
   }, 'Pause in before phase, set animation current time to be in active ' +
      'range, animation should become active. Scrolling should have no effect.');

   promise_test(async t => {
     const animation = createScrollLinkedOpacityAnimationWithDelays(t);
     const scroller = animation.timeline.source;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;

     animation.play();
     await animation.ready;

     // Causes the timeline to be inactive
     scroller.style.overflow = "visible";
     await waitForNextFrame();
     await waitForNextFrame();

     // Verify that he timeline is inactive
     assert_equals(animation.timeline.currentTime, null,
                   "Timeline is inactive");
     assert_equals(
         animation.currentTime, null,
         "Current time for running animation with an inactive timeline");
     assert_equals(animation.effect.getComputedTiming().localTime, null,
         "effect local time with inactive timeline");

     // Setting the current time while timeline is inactive should pause the
     // animation at the specified time.
     animation.currentTime = CSS.percent(50);
     await waitForNextFrame();
     await waitForNextFrame();

     // Verify that animation currentTime is properly set despite the inactive
     // timeline.
     assert_equals(animation.timeline.currentTime, null);
     assert_percents_equal(animation.currentTime, 50);
     assert_percents_equal(animation.effect.getComputedTiming().localTime, 50,
         "effect local time after setting animation current time");

     // Check effect phase
     // progress == 0.5 AND opacity == 0.5 shows we are in the effect active
     // phase.
     assert_equals(animation.effect.getComputedTiming().progress, 0.5,
                   "effect progress");
     assert_equals(
         window.getComputedStyle(animation.effect.target)
             .getPropertyValue("opacity"),
         "0.5",
         "effect opacity after setting animation current time");
   }, 'Make scroller inactive, then set current time to an in range time');

   promise_test(async t => {
     const animation = createScrollLinkedOpacityAnimationWithDelays(t);
     const scroller = animation.timeline.source;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;
     scroller.scrollTop = 0.5 * maxScroll;
     // Update timeline.currentTime.
     await waitForNextFrame();

     animation.pause();
     await animation.ready;
     // verify effect is applied.
     const expected_progress = 0.5;
     assert_equals(
         animation.effect.getComputedTiming().progress,
         expected_progress,
         "Verify effect progress after pausing.");

     // cause the timeline to become inactive
     scroller.style.overflow = 'visible';
     await waitForAnimationFrames(2);
     assert_equals(animation.timeline.currentTime, null,
         'Sanity check the timeline is inactive.');
     assert_equals(
         animation.effect.getComputedTiming().progress,
         expected_progress,
         "Verify effect progress after the timeline goes inactive.");
   }, 'Animation effect is still applied after pausing and making timeline ' +
      'inactive.');

   promise_test(async t => {
     const animation = createScrollLinkedOpacityAnimationWithDelays(t);
     const scroller = animation.timeline.source;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;

     animation.play();
     await animation.ready;

     // cause the timeline to become inactive
     scroller.style.overflow = 'visible';

     scroller.scrollTop;

     animation.pause();
   }, 'Make timeline inactive, force style update then pause the animation. ' +
      'No crashing indicates test success.');
 </script>
	<!DOCTYPE html>
	<meta charset=utf-8>
	<title>Verify timeline time, animation time, effect time, and effect progress for 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';
	// Note: effects are scaled to fill the timeline.

	// Each entry is [[test input], [test expectations]]
	// test input = ["description", delay, end_delay, scroll percent]
	// test expectations = [timeline time, animation current time,
	// effect local time, effect progress, effect phase,
	// opacity]

	/* All interesting transitions:
	at timeline start
	before effect delay
	at effect start
	in active range
	at effect end
	after effect end
	at timeline end
	*/
	const test_cases = [
	// Case 1: No delays.
	// Boundary at end of active phase is inclusive.
	[
	["at start", 0, 0, 0],
	[0, 0, 0, 0, "active", 0.3]
	],
	[
	["in active range", 0, 0, 0.50],
	[50, 50, 50, 0.5, "active", 0.5]
	],
	[
	["at effect end time", 0, 0, 1.0],
	[100, 100, 100, 1.0, "active", 0.7]
	],

	// Case 2: Positive start delay and no end delay.
	// Boundary at end of active phase is inclusive.
	[
	["at timeline start", 500, 0, 0],
	[0, 0, 0, null, "before", 1]
	],
	[
	["before start delay", 500, 0, 0.25],
	[25, 25, 25, null, "before", 1]
	],
	[
	["at start delay", 500, 0, 0.5],
	[50, 50, 50, 0, "active", 0.3]
	],
	[
	["in active range", 500, 0, 0.75],
	[75, 75, 75, 0.5, "active", 0.5]
	],
	[
	["at effect end time", 500, 0, 1.0],
	[100, 100, 100, 1.0, "active", 0.7]
	],

	// case 3: No start delay, Positive end delay.
	// Boundary at end of active phase is exclusive.
	[
	["at timeline start", 0, 500, 0],
	[0, 0, 0, 0, "active", 0.3]
	],
	[
	["in active range", 0, 500, 0.25],
	[25, 25, 25, 0.5, "active", 0.5]
	],
	[
	["at effect end time", 0, 500, 0.5],
	[50, 50, 50, null, "after", 1.0]
	],
	[
	["after effect end time", 0, 500, 0.75],
	[75, 75, 75, null, "after", 1.0]
	],
	[
	["at timeline boundary", 0, 500, 1.0],
	[100, 100, 100, null, "after", 1.0]
	],

	// case 4: Positive start and end delays.
	// Boundary at end of active phase is exclusive.
	[
	["at timeline start", 250, 250, 0],
	[0, 0, 0, null, "before", 1]
	],
	[
	["before start delay", 250, 250, 0.1],
	[10, 10, 10, null, "before", 1]
	],
	[
	["at start delay", 250, 250, 0.25],
	[25, 25, 25, 0, "active", 0.3]
	],
	[
	["in active range", 250, 250, 0.5],
	[50, 50, 50, 0.5, "active", 0.5]
	],
	[
	["at effect end time", 250, 250, 0.75],
	[75, 75, 75, null, "after", 1.0]
	],
	[
	["after effect end time", 250, 250, 0.9],
	[90, 90, 90, null, "after", 1.0]
	],
	[
	["at timeline boundary", 250, 250, 1.0],
	[100, 100, 100, null, "after", 1.0]
	],

	// Case 5: Negative start and end delays.
	// Effect boundaries are not reachable.
	[
	["at timeline start", -125, -125, 0],
	[0, 0, 0, 0.25, "active", 0.4]
	],
	[
	["in active range", -125, -125, 0.5],
	[50, 50, 50, 0.5, "active", 0.5]
	],
	[
	["at timeline end", -125, -125, 1.0],
	[100, 100, 100, 0.75, "active", 0.6]
	]
	];

	for (const test_case of test_cases) {
	const [inputs, expected] = test_case;
	const [test_name, delay, end_delay, scroll_percentage] = inputs;

	const description = `Current times and effect phase ${test_name} when` +
	` delay = ${delay} and endDelay = ${end_delay} \|`;

	promise_test(
	create_scroll_timeline_delay_test(
	delay, end_delay, scroll_percentage, expected),
	description);
	}

	function create_scroll_timeline_delay_test(
	delay, end_delay, scroll_percentage, expected){
	return async t => {
	const target = createDiv(t);
	const timeline = createScrollTimeline(t);
	const effect = new KeyframeEffect(
	target,
	{
	opacity: [0.3, 0.7]
	},
	{
	duration: 500,
	delay: delay,
	endDelay: end_delay
	}
	);
	const animation = new Animation(effect, timeline);
	t.add_cleanup(() => {
	animation.cancel();
	});
	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();

	const [expected_timeline_current_time,
	expected_animation_current_time,
	expected_effect_local_time,
	expected_effect_progress,
	expected_effect_phase,
	expected_opacity] = expected;

	assert_percents_equal(
	animation.timeline.currentTime,
	expected_timeline_current_time,
	"timeline current time");
	assert_percents_equal(
	animation.currentTime,
	expected_animation_current_time,
	"animation current time");
	assert_percents_equal(
	animation.effect.getComputedTiming().localTime,
	expected_effect_local_time,
	"animation effect local time");
	assert_approx_equals_or_null(
	animation.effect.getComputedTiming().progress,
	expected_effect_progress,
	0.001,
	"animation effect progress");
	assert_phase(
	animation, expected_effect_phase);
	assert_approx_equals(
	parseFloat(getComputedStyle(target).opacity), expected_opacity,
	0.001,
	'target opacity');
	}
	}

	function createKeyframeEffectOpacity(test){
	return new KeyframeEffect(
	createDiv(test),
	{
	opacity: [0.3, 0.7]
	},
	{
	duration: 1000
	}
	);
	}

	function verifyEffectBeforePhase(animation) {
	// If currentTime is null, we are either idle, or running with an
	// inactive timeline. Either way, the animation is not in effect and cannot
	// be in the before phase.
	assert_true(animation.currentTime != null,
	'Animation is not in effect');

	const fillMode = animation.effect.getTiming().fill;
	animation.effect.updateTiming({ fill: 'none' });

	// progress == null AND opacity == 1 implies we are in the effect before
	// or after phase.
	assert_equals(animation.effect.getComputedTiming().progress, null);
	assert_equals(
	window.getComputedStyle(animation.effect.target)
	.getPropertyValue("opacity"),
	"1");

	// If the progress is no longer null after adding fill: backwards, then we
	// are in the before phase.
	animation.effect.updateTiming({ fill: 'backwards' });
	assert_true(animation.effect.getComputedTiming().progress != null);
	assert_equals(
	window.getComputedStyle(animation.effect.target)
	.getPropertyValue("opacity"),
	"0.3");

	// Reset fill mode to avoid side-effects.
	animation.effect.updateTiming({ fill: fillMode });
	}

	function createScrollLinkedOpacityAnimationWithDelays(t) {
	const animation = new Animation(
	createKeyframeEffectOpacity(t),
	createScrollTimeline(t)
	);
	t.add_cleanup(() => {
	animation.cancel();
	});
	animation.effect.updateTiming({
	duration: 1000,
	delay: 500,
	endDelay: 500
	});
	return animation;
	}


	promise_test(async t => {
	const animation = createScrollLinkedOpacityAnimationWithDelays(t);
	const scroller = animation.timeline.source;
	const maxScroll = scroller.scrollHeight - scroller.clientHeight;

	// scroll pos
	// current time
	// start time
	// \|
	// \|---- 25% before ----\|---- 50% active ----\|---- 25% after ----\|
	animation.play();
	await animation.ready;
	assert_percents_equal(animation.startTime, 0);
	assert_phase(animation, 'before');

	// start time scroll pos
	// \| current time
	// \| \|
	// \|---- 25% before ----\|---- 50% active ----\|---- 25% after ----\|
	scroller.scrollTop = 0.5 * maxScroll;
	await waitForNextFrame();
	assert_phase(animation, 'active');

	// start time scroll pos current time
	// \| \| \|
	// \|---- 25% before ----\|---- 50% active ----\|---- 25% after ----\|
	animation.playbackRate = 2;
	assert_phase(animation, 'after');

	// start time scroll pos current time
	// \| \| \|
	// \|---- 33.3% before ----\|---- 66.7% active ---------------------\|
	animation.effect.updateTiming({ endDelay: 0 });
	assert_phase(animation, 'active');

	// scroll pos start time
	// current time \|
	// \| \|
	// \|---- 33.3% before ----\|---- 66.7% active ----------------------\|
	animation.playbackRate = -1;
	assert_percents_equal(animation.startTime, 100);
	assert_phase(animation, 'active');

	// start time
	// scroll pos current time
	// \| \| \|
	// \|---- 33.3% before ----\|---- 66.7% active -----------------------\|
	animation.playbackRate = -2;
	assert_phase(animation, 'active');

	// current time start time
	// \| scroll pos
	// \| \|
	// \|---- 33.3% before ----\|---- 66.7% active -----------------------\|
	scroller.scrollTop = maxScroll;
	await waitForNextFrame();
	assert_phase(animation, 'before');

	// current time start time
	// \| scroll pos
	// \| \|
	// \|--------------------- 100% active -------------------------------\|
	animation.effect.updateTiming({ delay: 0 });
	assert_phase(animation, 'active');

	// Finally, switch to a document timeline. The before-active boundary
	// becomes exclusive.
	animation.timeline = document.timeline;
	animation.currentTime = 0;
	await waitForNextFrame();
	assert_phase(animation, 'before');

	}, 'Playback rate affects whether active phase boundary is inclusive.');

	promise_test(async t => {
	const animation = createScrollLinkedOpacityAnimationWithDelays(t);
	const scroller = animation.timeline.source;
	const maxScroll = scroller.scrollHeight - scroller.clientHeight;

	animation.play();
	await animation.ready;
	verifyEffectBeforePhase(animation);

	animation.pause();
	await waitForNextFrame();
	verifyEffectBeforePhase(animation);

	animation.play();
	await waitForNextFrame();

	verifyEffectBeforePhase(animation);
	}, 'Verify that (play -> pause -> play) doesn\'t change phase/progress.');

	promise_test(async t => {
	const animation = createScrollLinkedOpacityAnimationWithDelays(t);
	const scroller = animation.timeline.source;
	const maxScroll = scroller.scrollHeight - scroller.clientHeight;

	animation.play();
	await animation.ready;
	verifyEffectBeforePhase(animation);

	animation.pause();
	await animation.ready;
	verifyEffectBeforePhase(animation);

	// Scrolling should not cause the animation effect to change.
	scroller.scrollTop = 0.5 * maxScroll;
	await waitForNextFrame();

	// Check timeline phase
	assert_percents_equal(animation.timeline.currentTime, 50);
	assert_percents_equal(animation.currentTime, 0);
	assert_percents_equal(animation.effect.getComputedTiming().localTime, 0,
	"effect local time");

	// Make sure the effect is still in the before phase even though the
	// timeline is not.
	verifyEffectBeforePhase(animation);
	}, 'Pause in before phase, scroll timeline into active phase, animation ' +
	'should remain in the before phase');

	promise_test(async t => {
	const animation = createScrollLinkedOpacityAnimationWithDelays(t);
	const scroller = animation.timeline.source;
	const maxScroll = scroller.scrollHeight - scroller.clientHeight;

	animation.play();
	await animation.ready;
	verifyEffectBeforePhase(animation);

	animation.pause();
	await waitForNextFrame();
	verifyEffectBeforePhase(animation);

	// Setting the current time should force the animation into effect.
	const expected_time = 50;
	animation.currentTime = CSS.percent(expected_time);
	await waitForNextFrame();
	assert_percents_equal(animation.timeline.currentTime, 0);
	assert_percents_equal(animation.currentTime, expected_time,
	'Current time matches set value');
	assert_percents_equal(
	animation.effect.getComputedTiming().localTime,
	expected_time, "Effect local time after setting animation.currentTime");
	assert_equals(animation.effect.getComputedTiming().progress, 0.5,
	"Progress after setting animation.currentTime");
	assert_equals(
	window.getComputedStyle(animation.effect.target)
	.getPropertyValue("opacity"),
	"0.5", "Opacity after setting animation.currentTime");

	// Scrolling should not cause the animation effect to change since
	// paused.
	scroller.scrollTop = 0.75 * maxScroll; // scroll so that timeline is 75%
	await waitForNextFrame();
	assert_percents_equal(animation.timeline.currentTime, 75);

	// animation and effect timings are unchanged.
	assert_percents_equal(animation.currentTime, expected_time,
	"Current time after scrolling while paused");
	assert_percents_equal(
	animation.effect.getComputedTiming().localTime,
	expected_time,
	"Effect local time after scrolling while paused");
	assert_equals(animation.effect.getComputedTiming().progress, 0.5,
	"Progress after scrolling while paused");
	assert_equals(
	window.getComputedStyle(animation.effect.target)
	.getPropertyValue("opacity"),
	"0.5", "Opacity after scrolling while paused");
	}, 'Pause in before phase, set animation current time to be in active ' +
	'range, animation should become active. Scrolling should have no effect.');

	promise_test(async t => {
	const animation = createScrollLinkedOpacityAnimationWithDelays(t);
	const scroller = animation.timeline.source;
	const maxScroll = scroller.scrollHeight - scroller.clientHeight;

	animation.play();
	await animation.ready;

	// Causes the timeline to be inactive
	scroller.style.overflow = "visible";
	await waitForNextFrame();
	await waitForNextFrame();

	// Verify that he timeline is inactive
	assert_equals(animation.timeline.currentTime, null,
	"Timeline is inactive");
	assert_equals(
	animation.currentTime, null,
	"Current time for running animation with an inactive timeline");
	assert_equals(animation.effect.getComputedTiming().localTime, null,
	"effect local time with inactive timeline");

	// Setting the current time while timeline is inactive should pause the
	// animation at the specified time.
	animation.currentTime = CSS.percent(50);
	await waitForNextFrame();
	await waitForNextFrame();

	// Verify that animation currentTime is properly set despite the inactive
	// timeline.
	assert_equals(animation.timeline.currentTime, null);
	assert_percents_equal(animation.currentTime, 50);
	assert_percents_equal(animation.effect.getComputedTiming().localTime, 50,
	"effect local time after setting animation current time");

	// Check effect phase
	// progress == 0.5 AND opacity == 0.5 shows we are in the effect active
	// phase.
	assert_equals(animation.effect.getComputedTiming().progress, 0.5,
	"effect progress");
	assert_equals(
	window.getComputedStyle(animation.effect.target)
	.getPropertyValue("opacity"),
	"0.5",
	"effect opacity after setting animation current time");
	}, 'Make scroller inactive, then set current time to an in range time');

	promise_test(async t => {
	const animation = createScrollLinkedOpacityAnimationWithDelays(t);
	const scroller = animation.timeline.source;
	const maxScroll = scroller.scrollHeight - scroller.clientHeight;
	scroller.scrollTop = 0.5 * maxScroll;
	// Update timeline.currentTime.
	await waitForNextFrame();

	animation.pause();
	await animation.ready;
	// verify effect is applied.
	const expected_progress = 0.5;
	assert_equals(
	animation.effect.getComputedTiming().progress,
	expected_progress,
	"Verify effect progress after pausing.");

	// cause the timeline to become inactive
	scroller.style.overflow = 'visible';
	await waitForAnimationFrames(2);
	assert_equals(animation.timeline.currentTime, null,
	'Sanity check the timeline is inactive.');
	assert_equals(
	animation.effect.getComputedTiming().progress,
	expected_progress,
	"Verify effect progress after the timeline goes inactive.");
	}, 'Animation effect is still applied after pausing and making timeline ' +
	'inactive.');

	promise_test(async t => {
	const animation = createScrollLinkedOpacityAnimationWithDelays(t);
	const scroller = animation.timeline.source;
	const maxScroll = scroller.scrollHeight - scroller.clientHeight;

	animation.play();
	await animation.ready;

	// cause the timeline to become inactive
	scroller.style.overflow = 'visible';

	scroller.scrollTop;

	animation.pause();
	}, 'Make timeline inactive, force style update then pause the animation. ' +
	'No crashing indicates test success.');
	</script>