| <!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.animationName, 'none'); |
| assert_equals(computedStyle.webkitAnimationName, 'none'); |
| |
| style.animationName = "none"; |
| assert_not_equals(Object.keys(style).indexOf('animationName'), -1); |
| assert_not_equals(Object.keys(style).indexOf('webkitAnimationName'), -1); |
| assert_equals(style.animationName, 'none'); |
| assert_equals(computedStyle.animationName, 'none'); |
| assert_equals(style.webkitAnimationName, 'none'); |
| assert_equals(computedStyle.webkitAnimationName, 'none'); |
| |
| style.animationName = "none, none"; |
| assert_equals(style.animationName, 'none, none'); |
| assert_equals(computedStyle.animationName, 'none, none'); |
| assert_equals(style.webkitAnimationName, 'none, none'); |
| assert_equals(computedStyle.webkitAnimationName, 'none, none'); |
| |
| style.animationName = "myAnim"; |
| assert_equals(style.animationName, 'myAnim'); |
| assert_equals(computedStyle.animationName, 'myAnim'); |
| assert_equals(style.webkitAnimationName, 'myAnim'); |
| assert_equals(computedStyle.webkitAnimationName, 'myAnim'); |
| |
| style.animationName = "background-position, font-size"; |
| assert_equals(style.animationName, 'background-position, font-size'); |
| assert_equals(computedStyle.animationName, 'background-position, font-size'); |
| assert_equals(style.webkitAnimationName, 'background-position, font-size'); |
| assert_equals(computedStyle.webkitAnimationName, 'background-position, font-size'); |
| |
| style.animationName = "background-position, font-size, color"; |
| assert_equals(style.animationName, 'background-position, font-size, color'); |
| assert_equals(computedStyle.animationName, 'background-position, font-size, color'); |
| assert_equals(style.webkitAnimationName, 'background-position, font-size, color'); |
| assert_equals(computedStyle.webkitAnimationName, 'background-position, font-size, color'); |
| |
| style.animationName = "all, font-size, color"; |
| assert_equals(style.animationName, 'all, font-size, color'); |
| assert_equals(computedStyle.animationName, 'all, font-size, color'); |
| assert_equals(style.webkitAnimationName, 'all, font-size, color'); |
| assert_equals(computedStyle.webkitAnimationName, 'all, font-size, color'); |
| |
| style.animationName = "inherit"; |
| assert_equals(style.animationName, 'inherit'); |
| assert_equals(computedStyle.animationName, 'none'); |
| assert_equals(style.webkitAnimationName, 'inherit'); |
| assert_equals(computedStyle.webkitAnimationName, 'none'); |
| |
| style.animationName = "initial"; |
| assert_equals(style.animationName, 'initial'); |
| assert_equals(computedStyle.animationName, 'none'); |
| assert_equals(style.webkitAnimationName, 'initial'); |
| assert_equals(computedStyle.webkitAnimationName, 'none'); |
| }, "Valid animation-name values."); |
| |
| test(() => { |
| style.animationName = ""; |
| |
| style.animationName = "0"; |
| assert_equals(style.animationName, ''); |
| assert_equals(computedStyle.animationName, 'none'); |
| assert_equals(style.webkitAnimationName, ''); |
| assert_equals(computedStyle.webkitAnimationName, 'none'); |
| |
| style.animationName = "all none"; |
| assert_equals(style.animationName, ''); |
| assert_equals(computedStyle.animationName, 'none'); |
| assert_equals(style.webkitAnimationName, ''); |
| assert_equals(computedStyle.webkitAnimationName, 'none'); |
| |
| style.animationName = "opacity width"; |
| assert_equals(style.animationName, ''); |
| assert_equals(computedStyle.animationName, 'none'); |
| assert_equals(style.webkitAnimationName, ''); |
| assert_equals(computedStyle.webkitAnimationName, 'none'); |
| |
| style.animationName = ""; |
| }, "Invalid animation-name values."); |
| |
| test(() => { |
| // Test initial value. |
| assert_equals(computedStyle.animationDuration, '0s'); |
| assert_equals(computedStyle.webkitAnimationDuration, '0s'); |
| |
| style.animationDuration = "0s"; |
| assert_not_equals(Object.keys(style).indexOf('animationDuration'), -1); |
| assert_not_equals(Object.keys(style).indexOf('webkitAnimationDuration'), -1); |
| assert_equals(style.animationDuration, '0s'); |
| assert_equals(computedStyle.animationDuration, '0s'); |
| assert_equals(style.webkitAnimationDuration, '0s'); |
| assert_equals(computedStyle.webkitAnimationDuration, '0s'); |
| |
| style.animationDuration = "5s"; |
| assert_equals(style.animationDuration, '5s'); |
| assert_equals(computedStyle.animationDuration, '5s'); |
| assert_equals(style.webkitAnimationDuration, '5s'); |
| assert_equals(computedStyle.webkitAnimationDuration, '5s'); |
| |
| style.animationDuration = "10ms"; |
| assert_equals(style.animationDuration, '10ms'); |
| assert_equals(computedStyle.animationDuration, '0.01s'); |
| assert_equals(style.webkitAnimationDuration, '10ms'); |
| assert_equals(computedStyle.webkitAnimationDuration, '0.01s'); |
| |
| style.animationDuration = "10ms, 20s"; |
| assert_equals(style.animationDuration, '10ms, 20s'); |
| assert_equals(computedStyle.animationDuration, '0.01s, 20s'); |
| assert_equals(style.webkitAnimationDuration, '10ms, 20s'); |
| assert_equals(computedStyle.webkitAnimationDuration, '0.01s, 20s'); |
| }, "Valid animation-duration values."); |
| |
| test(() => { |
| style.animationDuration = ""; |
| |
| // Negative values are invalid. |
| style.animationDuration = "-10ms"; |
| assert_equals(style.animationDuration, ''); |
| assert_equals(computedStyle.animationDuration, '0s'); |
| assert_equals(style.webkitAnimationDuration, ''); |
| assert_equals(computedStyle.webkitAnimationDuration, '0s'); |
| |
| style.animationDuration = "'5ms'"; |
| assert_equals(style.animationDuration, ''); |
| assert_equals(computedStyle.animationDuration, '0s'); |
| assert_equals(style.webkitAnimationDuration, ''); |
| assert_equals(computedStyle.webkitAnimationDuration, '0s'); |
| |
| style.animationDuration = "30px"; |
| assert_equals(style.animationDuration, ''); |
| assert_equals(computedStyle.animationDuration, '0s'); |
| assert_equals(style.webkitAnimationDuration, ''); |
| assert_equals(computedStyle.webkitAnimationDuration, '0s'); |
| |
| style.animationDuration = "solid"; |
| assert_equals(style.animationDuration, ''); |
| assert_equals(computedStyle.animationDuration, '0s'); |
| assert_equals(style.webkitAnimationDuration, ''); |
| assert_equals(computedStyle.webkitAnimationDuration, '0s'); |
| |
| style.animationDuration = "20"; |
| assert_equals(style.animationDuration, ''); |
| assert_equals(computedStyle.animationDuration, '0s'); |
| assert_equals(style.webkitAnimationDuration, ''); |
| assert_equals(computedStyle.webkitAnimationDuration, '0s'); |
| |
| style.animationDuration = "20%"; |
| assert_equals(style.animationDuration, ''); |
| assert_equals(computedStyle.animationDuration, '0s'); |
| assert_equals(style.webkitAnimationDuration, ''); |
| assert_equals(computedStyle.webkitAnimationDuration, '0s'); |
| |
| style.animationDuration = "0s, 20px"; |
| assert_equals(style.animationDuration, ''); |
| assert_equals(computedStyle.animationDuration, '0s'); |
| assert_equals(style.webkitAnimationDuration, ''); |
| assert_equals(computedStyle.webkitAnimationDuration, '0s'); |
| }, "Invalid animation-duration values."); |
| </script> |
| </body> |
| </html> |
