| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>CSS Animations</title> |
| <style type="text/css" media="screen"> |
| |
| @keyframes animation { |
| from { left: 50px; } |
| to { left: 100px; } |
| } |
| |
| @keyframes animation-top { |
| from { top: 50px; } |
| to { top: 100px; } |
| } |
| |
| </style> |
| <body> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script> |
| |
| 'use strict'; |
| |
| function targetTest(testCallback, description) |
| { |
| test(() => { |
| const target = document.body.appendChild(document.createElement("div")); |
| testCallback(target); |
| target.remove(); |
| }, description); |
| } |
| |
| targetTest(target => { |
| assert_array_equals(target.getAnimations(), [], "An element should not have any animations initially."); |
| |
| target.style.animationDelay = "-3s"; |
| target.style.animationDuration = "2s"; |
| target.style.animationTimingFunction = "linear"; |
| target.style.animationFillMode = "forwards"; |
| target.style.animationDirection = "alternate"; |
| target.style.animationIterationCount = "2"; |
| target.style.animationName = "animation"; |
| |
| const animation = target.getAnimations()[0]; |
| assert_true(animation instanceof Animation, "The animation is an Animation."); |
| assert_true(animation instanceof CSSAnimation, "The animation is a CSSAnimation."); |
| assert_equals(animation.timeline, target.ownerDocument.timeline, "The animation's timeline is set to the element's document timeline."); |
| assert_equals(animation.playState, "running", "The animation is running as soon as it's created."); |
| assert_equals(animation.animationName, "animation", "The animation's animationName is set."); |
| |
| const effect = animation.effect; |
| assert_true(effect instanceof KeyframeEffect, "The animation's effect is a KeyframeEffect."); |
| assert_equals(effect.target, target, "The animation's effect is targeting the target."); |
| |
| const timing = animation.effect.getTiming(); |
| assert_equals(timing.fill, "forwards", "The animation's fill property matches the animation-fill-mode property."); |
| assert_equals(timing.delay, -3000, "The animation's delay property matches the animation-delay property."); |
| assert_equals(timing.duration, 2000, "The animation's duration property matches the animation-duration property."); |
| assert_equals(timing.iterations, 2, "The animation's iterations property matches the animation-iteration-count property."); |
| assert_equals(timing.direction, "alternate", "The animation's direction property matches the animation-direction property."); |
| |
| const computedTiming = animation.effect.getComputedTiming(); |
| assert_equals(computedTiming.activeDuration, 4000, "The animations's computed timing activeDuration property matches the properties set by CSS"); |
| assert_equals(computedTiming.currentIteration, 1, "The animations's computed timing currentIteration property matches the properties set by CSS"); |
| assert_equals(computedTiming.delay, -3000, "The animations's computed timing delay property matches the properties set by CSS"); |
| assert_equals(computedTiming.duration, 2000, "The animations's computed timing duration property matches the properties set by CSS"); |
| assert_equals(computedTiming.endDelay, 0, "The animations's computed timing endDelay property matches the properties set by CSS"); |
| assert_equals(computedTiming.endTime, 1000, "The animations's computed timing endTime property matches the properties set by CSS"); |
| assert_equals(computedTiming.iterationStart, 0, "The animations's computed timing iterationStart property matches the properties set by CSS"); |
| assert_equals(computedTiming.iterations, 2, "The animations's computed timing iterations property matches the properties set by CSS"); |
| assert_equals(computedTiming.localTime, 0, "The animations's computed timing localTime property matches the properties set by CSS"); |
| assert_equals(computedTiming.progress, 0.5, "The animations's computed timing progress property matches the properties set by CSS"); |
| assert_equals(computedTiming.fill, "forwards", "The animations's computed timing fill property matches the properties set by CSS"); |
| assert_equals(computedTiming.easing, "linear", "The animations's computed timing easing property matches the properties set by CSS"); |
| assert_equals(computedTiming.direction, "alternate", "The animations's computed timing direction property matches the properties set by CSS"); |
| |
| const keyframes = animation.effect.getKeyframes(); |
| assert_equals(keyframes.length, 2, "The animation's effect has two keyframes."); |
| assert_equals(keyframes[0].offset, 0, "The animation's effect's first keyframe has a 0 offset."); |
| assert_equals(keyframes[0].left, "50px", "The animation's effect's first keyframe has its left property set to 50px."); |
| assert_equals(keyframes[1].offset, 1, "The animation's effect's first keyframe has a 1 offset."); |
| assert_equals(keyframes[1].left, "100px", "The animation's effect's first keyframe has its left property set to 100px."); |
| |
| assert_equals(getComputedStyle(effect.target).left, "75px", "The animation's target's computed style reflects the animation state."); |
| }, "A CSS Animation should be reflected entirely as a CSSAnimation object on the timeline."); |
| |
| targetTest(target => { |
| target.style.animationDelay = "-1s"; |
| target.style.animationDuration = "2s"; |
| target.style.animationName = "animation"; |
| |
| assert_equals(target.getAnimations()[0].effect.getTiming().delay, -1000, "The animation's delay matches the initial animation-delay property."); |
| |
| target.style.animationDelay = "0s"; |
| assert_equals(target.getAnimations()[0].effect.getTiming().delay, 0, "The animation's delay matches the updated animation-delay property."); |
| }, "Web Animations should reflect the animation-delay property."); |
| |
| targetTest(target => { |
| target.style.animationDuration = "2s"; |
| target.style.animationName = "animation"; |
| |
| for (let direction of ["reverse", "alternate", "normal", "alternate-reverse"]) { |
| target.style.animationDirection = direction; |
| assert_equals(target.getAnimations()[0].effect.getTiming().direction, direction, `The animation's direction matches the "${direction}" CSS value.`); |
| } |
| |
| target.style.removeProperty("animation-direction"); |
| assert_equals(target.getAnimations()[0].effect.getTiming().direction, "normal", "The animation's easing matches the default animation-direction value when the property is not set."); |
| }, "Web Animations should reflect the animation-direction property."); |
| |
| targetTest(target => { |
| target.style.animationDuration = "2s"; |
| target.style.animationName = "animation"; |
| |
| assert_equals(target.getAnimations()[0].effect.getTiming().duration, 2000, "The animation's duration matches the initial animation-duration property."); |
| |
| target.style.animationDuration = "1s"; |
| assert_equals(target.getAnimations()[0].effect.getTiming().duration, 1000, "The animation's duration matches the updated animation-duration property."); |
| }, "Web Animations should reflect the animation-duration property."); |
| |
| targetTest(target => { |
| target.style.animationDuration = "2s"; |
| target.style.animationName = "animation"; |
| |
| for (let fillMode of ["forwards", "backwards", "none", "both"]) { |
| target.style.animationFillMode = fillMode; |
| assert_equals(target.getAnimations()[0].effect.getTiming().fill, fillMode, `The animation's fill mode matches the "${fillMode}" CSS value.`); |
| } |
| |
| target.style.removeProperty("animation-fill-mode"); |
| assert_equals(target.getAnimations()[0].effect.getTiming().fill, "none", "The animation's easing matches the default animation-fill-mode value when the property is not set."); |
| }, "Web Animations should reflect the animation-fill-mode property."); |
| |
| targetTest(target => { |
| target.style.animationDuration = "2s"; |
| target.style.animationName = "animation"; |
| |
| target.style.animationIterationCount = 2; |
| const initialAnimation = target.getAnimations()[0]; |
| assert_equals(target.getAnimations()[0].effect.getTiming().iterations, 2, "The animation's duration matches the initial animation-iteration-count property."); |
| |
| target.style.animationIterationCount = 1; |
| assert_equals(target.getAnimations()[0].effect.getTiming().iterations, 1, "The animation's duration matches the updated animation-iteration-count property."); |
| |
| assert_equals(target.getAnimations()[0], initialAnimation, "The animation object remained the same instance throughout the test."); |
| }, "Web Animations should reflect the animation-iteration-count property."); |
| |
| targetTest(target => { |
| target.style.animationDuration = "2s"; |
| target.style.animationName = "animation"; |
| |
| const initialAnimation = target.getAnimations()[0]; |
| assert_equals(target.getAnimations()[0].animationName, "animation", "The animation's name matches the initial animation-name CSS property."); |
| |
| const initialKeyframes = initialAnimation.effect.getKeyframes(); |
| assert_equals(initialKeyframes.length, 2); |
| assert_equals(initialKeyframes[0].offset, 0); |
| assert_equals(initialKeyframes[0].left, "50px"); |
| assert_equals(initialKeyframes[1].offset, 1); |
| assert_equals(initialKeyframes[1].left, "100px"); |
| |
| target.style.animationName = "animation-top"; |
| const updatedAnimation = target.getAnimations()[0]; |
| assert_not_equals(updatedAnimation, initialAnimation, "Changing the animation-name property generates a different CSSAnimation object."); |
| assert_equals(updatedAnimation.animationName, "animation-top", "The animation's name matches the updated animation-name CSS property."); |
| |
| const updatedKeyframes = updatedAnimation.effect.getKeyframes(); |
| assert_equals(updatedKeyframes.length, 2); |
| assert_equals(updatedKeyframes[0].offset, 0); |
| assert_equals(updatedKeyframes[0].top, "50px"); |
| assert_equals(updatedKeyframes[1].offset, 1); |
| assert_equals(updatedKeyframes[1].top, "100px"); |
| }, "Web Animations should reflect the animation-name property."); |
| |
| targetTest(target => { |
| target.style.animationDelay = "-1s"; |
| target.style.animationDuration = "2s"; |
| target.style.animationName = "animation"; |
| |
| const initialAnimation = target.getAnimations()[0]; |
| assert_equals(target.getAnimations()[0].playState, "running", "Setting animation-play-state to running should resume the animation."); |
| |
| target.style.animationPlayState = "paused"; |
| assert_equals(target.getAnimations()[0].playState, "paused", "Setting animation-play-state back to paused should pause the animation."); |
| |
| target.style.removeProperty("animation-play-state"); |
| assert_equals(target.getAnimations()[0].playState, "running", "Removing the animation-play-state property should resume the animation."); |
| |
| assert_equals(target.getAnimations()[0], initialAnimation, "The animation object remained the same instance throughout the test."); |
| }, "Web Animations should reflect the animation-play-state property."); |
| |
| targetTest(target => { |
| target.style.animationDuration = "2s"; |
| target.style.animationTimingFunction = "ease-out"; |
| target.style.animationName = "animation"; |
| |
| assert_equals(target.getAnimations()[0].effect.getTiming().easing, "linear", "The animation's easing does not match the initial animation-timing-function property."); |
| |
| target.style.animationTimingFunction = "ease-in"; |
| assert_equals(target.getAnimations()[0].effect.getTiming().easing, "linear", "The animation's easing does not match the updated animation-timing-function property."); |
| |
| target.style.removeProperty("animation-timing-function"); |
| assert_equals(target.getAnimations()[0].effect.getTiming().easing, "linear", "The animation's easing does not match the default animation-timing-function value when the property is not set."); |
| }, "Web Animations should not reflect the animation-timing-function property on the effect's timing."); |
| |
| function runAnimationCompletionTest(finalAssertionCallback, description) |
| { |
| targetTest(target => { |
| target.style.animationName = "animation"; |
| assert_array_equals(target.getAnimations(), [], "Seting the animation-name property alone does not yield a CSSAnimation."); |
| |
| target.style.animationDuration = "1s"; |
| assert_equals(target.getAnimations().length, 1, "Seting the animation-duration property on top of the animation-name yields a CSSAnimation."); |
| assert_equals(target.getAnimations()[0].playState, "running", "Seting the animation-duration property on top of the animation-name yields a running CSSAnimation."); |
| |
| finalAssertionCallback(target.getAnimations()[0]); |
| assert_array_equals(target.getAnimations(), [], `${description} no longer lists the animation.`); |
| }, `${description} no longer lists the animation after it has been running.`); |
| } |
| |
| runAnimationCompletionTest(animation => animation.finish(), "Calling finish() on the animation"); |
| runAnimationCompletionTest(animation => animation.currentTime = animation.effect.getTiming().duration, "Seeking the animation to its end time"); |
| runAnimationCompletionTest(animation => animation.effect.target.style.animationName = "none", "Setting the target's animation-name to none"); |
| runAnimationCompletionTest(animation => animation.effect.target.style.animationDuration = "0s", "Setting the target's animation-duration to 0s"); |
| |
| </script> |
| </body> |
