| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>AnimationEffectTiming.direction</title> |
| <link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffecttiming-direction"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="../../testcommon.js"></script> |
| <body> |
| <div id="log"></div> |
| <script> |
| 'use strict'; |
| |
| test(t => { |
| const anim = createDiv(t).animate(null); |
| assert_equals(anim.effect.timing.direction, 'normal'); |
| }, 'Has the default value \'normal\''); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate({ opacity: [ 0, 1 ] }, 2000); |
| |
| const directions = ['normal', 'reverse', 'alternate', 'alternate-reverse']; |
| for (const direction of directions) { |
| anim.effect.timing.direction = direction; |
| assert_equals(anim.effect.timing.direction, direction, |
| `set direction to ${direction}`); |
| } |
| }, 'Can be set to each of the possible keywords'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate(null, { duration: 10000, direction: 'normal' }); |
| anim.currentTime = 7000; |
| assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.7, |
| 'progress before updating direction'); |
| |
| anim.effect.timing.direction = 'reverse'; |
| |
| assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.3, |
| 'progress after updating direction'); |
| }, 'Can be changed from \'normal\' to \'reverse\' while in progress'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate({ opacity: [ 0, 1 ] }, |
| { duration: 10000, |
| direction: 'normal' }); |
| assert_equals(anim.effect.getComputedTiming().progress, 0, |
| 'progress before updating direction'); |
| |
| anim.effect.timing.direction = 'reverse'; |
| |
| assert_equals(anim.effect.getComputedTiming().progress, 1, |
| 'progress after updating direction'); |
| }, 'Can be changed from \'normal\' to \'reverse\' while at start of active' |
| + ' interval'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate({ opacity: [ 0, 1 ] }, |
| { fill: 'backwards', |
| duration: 10000, |
| delay: 10000, |
| direction: 'normal' }); |
| assert_equals(anim.effect.getComputedTiming().progress, 0, |
| 'progress before updating direction'); |
| |
| anim.effect.timing.direction = 'reverse'; |
| |
| assert_equals(anim.effect.getComputedTiming().progress, 1, |
| 'progress after updating direction'); |
| }, 'Can be changed from \'normal\' to \'reverse\' while filling backwards'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate({ opacity: [ 0, 1 ] }, |
| { iterations: 2, |
| duration: 10000, |
| direction: 'normal' }); |
| anim.currentTime = 17000; |
| assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.7, |
| 'progress before updating direction'); |
| |
| anim.effect.timing.direction = 'alternate'; |
| |
| assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.3, |
| 'progress after updating direction'); |
| }, 'Can be changed from \'normal\' to \'alternate\' while in progress'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate({ opacity: [ 0, 1 ] }, |
| { iterations: 2, |
| duration: 10000, |
| direction: 'alternate' }); |
| anim.currentTime = 17000; |
| assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.3, |
| 'progress before updating direction'); |
| |
| anim.effect.timing.direction = 'alternate-reverse'; |
| |
| assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.7, |
| 'progress after updating direction'); |
| }, 'Can be changed from \'alternate\' to \'alternate-reverse\' while in' |
| + ' progress'); |
| |
| </script> |
| </body> |
