| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <div> |
| <div style="width:500px;height:500px"><div id="test">hello</div></div> |
| </div> |
| <script> |
| 'use strict'; |
| // Test the parsing and the computed style values of the animations properties. |
| |
| var e = document.getElementById('test'); |
| var style = e.style; |
| var computedStyle = window.getComputedStyle(e, null); |
| |
| test(() => { |
| // Test initial value. |
| assert_equals(computedStyle.animationDirection, 'normal'); |
| assert_equals(computedStyle.webkitAnimationDirection, 'normal'); |
| |
| style.animationDirection = "reverse"; |
| assert_not_equals(Object.keys(style).indexOf('animationDirection'), -1); |
| assert_not_equals(Object.keys(style).indexOf('webkitAnimationDirection'), -1); |
| assert_equals(style.animationDirection, 'reverse'); |
| assert_equals(computedStyle.animationDirection, 'reverse'); |
| assert_equals(style.webkitAnimationDirection, 'reverse'); |
| assert_equals(computedStyle.webkitAnimationDirection, 'reverse'); |
| |
| style.animationDirection = "normal"; |
| assert_equals(style.animationDirection, 'normal'); |
| assert_equals(computedStyle.animationDirection, 'normal'); |
| assert_equals(style.webkitAnimationDirection, 'normal'); |
| assert_equals(computedStyle.webkitAnimationDirection, 'normal'); |
| |
| style.animationDirection = "normal, alternate"; |
| assert_equals(style.animationDirection, 'normal, alternate'); |
| assert_equals(computedStyle.animationDirection, 'normal, alternate'); |
| assert_equals(style.webkitAnimationDirection, 'normal, alternate'); |
| assert_equals(computedStyle.webkitAnimationDirection, 'normal, alternate'); |
| |
| style.animationDirection = "alternate"; |
| assert_equals(style.animationDirection, 'alternate'); |
| assert_equals(computedStyle.animationDirection, 'alternate'); |
| assert_equals(style.webkitAnimationDirection, 'alternate'); |
| assert_equals(computedStyle.webkitAnimationDirection, 'alternate'); |
| |
| style.animationDirection = "alternate-reverse"; |
| assert_equals(style.animationDirection, 'alternate-reverse'); |
| assert_equals(computedStyle.animationDirection, 'alternate-reverse'); |
| assert_equals(style.webkitAnimationDirection, 'alternate-reverse'); |
| assert_equals(computedStyle.webkitAnimationDirection, 'alternate-reverse'); |
| }, "Valid animation-direction values."); |
| |
| test(() => { |
| style.animationDirection = ""; |
| |
| style.animationDirection = "solid"; |
| assert_equals(style.animationDirection, ''); |
| assert_equals(computedStyle.animationDirection, 'normal'); |
| assert_equals(style.webkitAnimationDirection, ''); |
| assert_equals(computedStyle.webkitAnimationDirection, 'normal'); |
| |
| style.animationDirection = "0"; |
| assert_equals(style.animationDirection, ''); |
| assert_equals(computedStyle.animationDirection, 'normal'); |
| assert_equals(style.webkitAnimationDirection, ''); |
| assert_equals(computedStyle.webkitAnimationDirection, 'normal'); |
| |
| style.animationDirection = "3px"; |
| assert_equals(style.animationDirection, ''); |
| assert_equals(computedStyle.animationDirection, 'normal'); |
| assert_equals(style.webkitAnimationDirection, ''); |
| assert_equals(computedStyle.webkitAnimationDirection, 'normal'); |
| |
| style.animationDirection = "alternate-normal"; |
| assert_equals(style.animationDirection, ''); |
| assert_equals(computedStyle.animationDirection, 'normal'); |
| assert_equals(style.webkitAnimationDirection, ''); |
| assert_equals(computedStyle.webkitAnimationDirection, 'normal'); |
| |
| style.animationDirection = "3.5"; |
| assert_equals(style.animationDirection, ''); |
| assert_equals(computedStyle.animationDirection, 'normal'); |
| assert_equals(style.webkitAnimationDirection, ''); |
| assert_equals(computedStyle.webkitAnimationDirection, 'normal'); |
| |
| style.animationDirection = "3.5, reverse"; |
| assert_equals(style.animationDirection, ''); |
| assert_equals(computedStyle.animationDirection, 'normal'); |
| assert_equals(style.webkitAnimationDirection, ''); |
| assert_equals(computedStyle.webkitAnimationDirection, 'normal'); |
| |
| style.animationDirection = "reverse, solid"; |
| assert_equals(style.animationDirection, ''); |
| assert_equals(computedStyle.animationDirection, 'normal'); |
| assert_equals(style.webkitAnimationDirection, ''); |
| assert_equals(computedStyle.webkitAnimationDirection, 'normal'); |
| }, "Invalid animation-direction values."); |
| |
| test(() => { |
| // Test initial value. |
| assert_equals(computedStyle.animationPlayState, 'running'); |
| assert_equals(computedStyle.webkitAnimationPlayState, 'running'); |
| |
| style.animationPlayState = "paused"; |
| assert_not_equals(Object.keys(style).indexOf('animationPlayState'), -1); |
| assert_not_equals(Object.keys(style).indexOf('webkitAnimationPlayState'), -1); |
| assert_equals(style.animationPlayState, 'paused'); |
| assert_equals(computedStyle.animationPlayState, 'paused'); |
| assert_equals(style.webkitAnimationPlayState, 'paused'); |
| assert_equals(computedStyle.webkitAnimationPlayState, 'paused'); |
| |
| style.animationPlayState = "running"; |
| assert_equals(style.animationPlayState, 'running'); |
| assert_equals(computedStyle.animationPlayState, 'running'); |
| assert_equals(style.webkitAnimationPlayState, 'running'); |
| assert_equals(computedStyle.webkitAnimationPlayState, 'running'); |
| |
| style.animationPlayState = "running, running"; |
| assert_equals(style.animationPlayState, 'running, running'); |
| assert_equals(computedStyle.animationPlayState, 'running, running'); |
| assert_equals(style.webkitAnimationPlayState, 'running, running'); |
| assert_equals(computedStyle.webkitAnimationPlayState, 'running, running'); |
| |
| style.animationPlayState = "paused, paused"; |
| assert_equals(style.animationPlayState, 'paused, paused'); |
| assert_equals(computedStyle.animationPlayState, 'paused, paused'); |
| assert_equals(style.webkitAnimationPlayState, 'paused, paused'); |
| assert_equals(computedStyle.webkitAnimationPlayState, 'paused, paused'); |
| |
| style.animationPlayState = "paused, running"; |
| assert_equals(style.animationPlayState, 'paused, running'); |
| assert_equals(computedStyle.animationPlayState, 'paused, running'); |
| assert_equals(style.webkitAnimationPlayState, 'paused, running'); |
| assert_equals(computedStyle.webkitAnimationPlayState, 'paused, running'); |
| }, "Valid animation-play-state values."); |
| |
| test(() => { |
| style.animationPlayState = ""; |
| |
| style.animationPlayState = "running3"; |
| assert_equals(style.animationPlayState, ''); |
| assert_equals(computedStyle.animationPlayState, 'running'); |
| assert_equals(style.webkitAnimationPlayState, ''); |
| assert_equals(computedStyle.webkitAnimationPlayState, 'running'); |
| |
| style.animationPlayState = "0"; |
| assert_equals(style.animationPlayState, ''); |
| assert_equals(computedStyle.animationPlayState, 'running'); |
| assert_equals(style.webkitAnimationPlayState, ''); |
| assert_equals(computedStyle.webkitAnimationPlayState, 'running'); |
| |
| style.animationPlayState = "solid"; |
| assert_equals(style.animationPlayState, ''); |
| assert_equals(computedStyle.animationPlayState, 'running'); |
| assert_equals(style.webkitAnimationPlayState, ''); |
| assert_equals(computedStyle.webkitAnimationPlayState, 'running'); |
| |
| style.animationPlayState = "20px"; |
| assert_equals(style.animationPlayState, ''); |
| assert_equals(computedStyle.animationPlayState, 'running'); |
| assert_equals(style.webkitAnimationPlayState, ''); |
| assert_equals(computedStyle.webkitAnimationPlayState, 'running'); |
| |
| style.animationPlayState = "all"; |
| assert_equals(style.animationPlayState, ''); |
| assert_equals(computedStyle.animationPlayState, 'running'); |
| assert_equals(style.webkitAnimationPlayState, ''); |
| assert_equals(computedStyle.webkitAnimationPlayState, 'running'); |
| |
| style.animationPlayState = "running, test"; |
| assert_equals(style.animationPlayState, ''); |
| assert_equals(computedStyle.animationPlayState, 'running'); |
| assert_equals(style.webkitAnimationPlayState, ''); |
| assert_equals(computedStyle.webkitAnimationPlayState, 'running'); |
| |
| style.animationPlayState = "all, paused"; |
| assert_equals(style.animationPlayState, ''); |
| assert_equals(computedStyle.animationPlayState, 'running'); |
| assert_equals(style.webkitAnimationPlayState, ''); |
| assert_equals(computedStyle.webkitAnimationPlayState, 'running'); |
| }, "Invalid animation-play-state values."); |
| |
| test(() => { |
| // Test initial value. |
| assert_equals(computedStyle.animationFillMode, 'none'); |
| assert_equals(computedStyle.webkitAnimationFillMode, 'none'); |
| |
| style.animationFillMode = "forwards"; |
| assert_not_equals(Object.keys(style).indexOf('animationFillMode'), -1); |
| assert_not_equals(Object.keys(style).indexOf('webkitAnimationFillMode'), -1); |
| assert_equals(style.animationFillMode, 'forwards'); |
| assert_equals(computedStyle.animationFillMode, 'forwards'); |
| assert_equals(style.webkitAnimationFillMode, 'forwards'); |
| assert_equals(computedStyle.webkitAnimationFillMode, 'forwards'); |
| |
| style.animationFillMode = "backwards"; |
| assert_equals(style.animationFillMode, 'backwards'); |
| assert_equals(computedStyle.animationFillMode, 'backwards'); |
| assert_equals(style.webkitAnimationFillMode, 'backwards'); |
| assert_equals(computedStyle.webkitAnimationFillMode, 'backwards'); |
| |
| style.animationFillMode = "both"; |
| assert_equals(style.animationFillMode, 'both'); |
| assert_equals(computedStyle.animationFillMode, 'both'); |
| assert_equals(style.webkitAnimationFillMode, 'both'); |
| assert_equals(computedStyle.webkitAnimationFillMode, 'both'); |
| |
| style.animationFillMode = "none"; |
| assert_equals(style.animationFillMode, 'none'); |
| assert_equals(computedStyle.animationFillMode, 'none'); |
| assert_equals(style.webkitAnimationFillMode, 'none'); |
| assert_equals(computedStyle.webkitAnimationFillMode, 'none'); |
| |
| style.animationFillMode = "none, both"; |
| assert_equals(style.animationFillMode, 'none, both'); |
| assert_equals(computedStyle.animationFillMode, 'none, both'); |
| assert_equals(style.webkitAnimationFillMode, 'none, both'); |
| assert_equals(computedStyle.webkitAnimationFillMode, 'none, both'); |
| |
| style.animationFillMode = "backwards, forwards"; |
| assert_equals(style.animationFillMode, 'backwards, forwards'); |
| assert_equals(computedStyle.animationFillMode, 'backwards, forwards'); |
| assert_equals(style.webkitAnimationFillMode, 'backwards, forwards'); |
| assert_equals(computedStyle.webkitAnimationFillMode, 'backwards, forwards'); |
| }, "Valid animation-fill-mode values."); |
| |
| test(() => { |
| style.animationFillMode = ""; |
| |
| style.animationFillMode = "foo"; |
| assert_equals(style.animationFillMode, ''); |
| assert_equals(computedStyle.animationFillMode, 'none'); |
| assert_equals(style.webkitAnimationFillMode, ''); |
| assert_equals(computedStyle.webkitAnimationFillMode, 'none'); |
| |
| style.animationFillMode = "0"; |
| assert_equals(style.animationFillMode, ''); |
| assert_equals(computedStyle.animationFillMode, 'none'); |
| assert_equals(style.webkitAnimationFillMode, ''); |
| assert_equals(computedStyle.webkitAnimationFillMode, 'none'); |
| |
| style.animationFillMode = "-"; |
| assert_equals(style.animationFillMode, ''); |
| assert_equals(computedStyle.animationFillMode, 'none'); |
| assert_equals(style.webkitAnimationFillMode, ''); |
| assert_equals(computedStyle.webkitAnimationFillMode, 'none'); |
| |
| style.animationFillMode = "3px"; |
| assert_equals(style.animationFillMode, ''); |
| assert_equals(computedStyle.animationFillMode, 'none'); |
| assert_equals(style.webkitAnimationFillMode, ''); |
| assert_equals(computedStyle.webkitAnimationFillMode, 'none'); |
| |
| style.animationFillMode = "backwards, test"; |
| assert_equals(style.animationFillMode, ''); |
| assert_equals(computedStyle.animationFillMode, 'none'); |
| assert_equals(style.webkitAnimationFillMode, ''); |
| assert_equals(computedStyle.webkitAnimationFillMode, 'none'); |
| |
| style.animationFillMode = "test, all"; |
| assert_equals(style.animationFillMode, ''); |
| assert_equals(computedStyle.animationFillMode, 'none'); |
| assert_equals(style.webkitAnimationFillMode, ''); |
| assert_equals(computedStyle.webkitAnimationFillMode, 'none'); |
| |
| style.animationFillMode = "test, none"; |
| assert_equals(style.animationFillMode, ''); |
| assert_equals(computedStyle.animationFillMode, 'none'); |
| assert_equals(style.webkitAnimationFillMode, ''); |
| assert_equals(computedStyle.webkitAnimationFillMode, 'none'); |
| |
| style.animationFillMode = "forwards,"; |
| assert_equals(style.animationFillMode, ''); |
| }, "Invalid animation-fill-mode values."); |
| </script> |
| </body> |
| </html> |
