| <!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.animationDelay, '0s'); |
| assert_equals(computedStyle.webkitAnimationDelay, '0s'); |
| |
| style.animationDelay = "0s"; |
| assert_not_equals(Object.keys(style).indexOf('animationDelay'), -1); |
| assert_not_equals(Object.keys(style).indexOf('webkitAnimationDelay'), -1); |
| assert_equals(style.animationDelay, '0s'); |
| assert_equals(computedStyle.animationDelay, '0s'); |
| assert_equals(style.webkitAnimationDelay, '0s'); |
| assert_equals(computedStyle.webkitAnimationDelay, '0s'); |
| |
| style.animationDelay = "5s"; |
| assert_equals(style.animationDelay, '5s'); |
| assert_equals(computedStyle.animationDelay, '5s'); |
| assert_equals(style.webkitAnimationDelay, '5s'); |
| assert_equals(computedStyle.webkitAnimationDelay, '5s'); |
| |
| style.animationDelay = "10ms"; |
| assert_equals(style.animationDelay, '10ms'); |
| assert_equals(computedStyle.animationDelay, '0.01s'); |
| assert_equals(style.webkitAnimationDelay, '10ms'); |
| assert_equals(computedStyle.webkitAnimationDelay, '0.01s'); |
| |
| style.animationDelay = "-10ms"; |
| assert_equals(style.animationDelay, '-10ms'); |
| assert_equals(computedStyle.animationDelay, '-0.01s'); |
| assert_equals(style.webkitAnimationDelay, '-10ms'); |
| assert_equals(computedStyle.webkitAnimationDelay, '-0.01s'); |
| |
| style.transitionProperty = "opacity, width"; |
| |
| style.animationDelay = "-10ms, 20s"; |
| assert_equals(style.animationDelay, '-10ms, 20s'); |
| assert_equals(computedStyle.animationDelay, '-0.01s, 20s'); |
| assert_equals(style.webkitAnimationDelay, '-10ms, 20s'); |
| assert_equals(computedStyle.webkitAnimationDelay, '-0.01s, 20s'); |
| }, "Valid animation-delay values."); |
| |
| test(() => { |
| style.transitionProperty = "opacity"; |
| style.animationDelay = ""; |
| |
| style.animationDelay = "'5ms'"; |
| assert_equals(style.animationDelay, ''); |
| assert_equals(computedStyle.animationDelay, '0s'); |
| assert_equals(style.webkitAnimationDelay, ''); |
| assert_equals(computedStyle.webkitAnimationDelay, '0s'); |
| |
| style.animationDelay = "30px"; |
| assert_equals(style.animationDelay, ''); |
| assert_equals(computedStyle.animationDelay, '0s'); |
| assert_equals(style.webkitAnimationDelay, ''); |
| assert_equals(computedStyle.webkitAnimationDelay, '0s'); |
| |
| style.animationDelay = "solid"; |
| assert_equals(style.animationDelay, ''); |
| assert_equals(computedStyle.animationDelay, '0s'); |
| assert_equals(style.webkitAnimationDelay, ''); |
| assert_equals(computedStyle.webkitAnimationDelay, '0s'); |
| |
| style.animationDelay = "20"; |
| assert_equals(style.animationDelay, ''); |
| assert_equals(computedStyle.animationDelay, '0s'); |
| assert_equals(style.webkitAnimationDelay, ''); |
| assert_equals(computedStyle.webkitAnimationDelay, '0s'); |
| |
| style.animationDelay = "20%"; |
| assert_equals(style.animationDelay, ''); |
| assert_equals(computedStyle.animationDelay, '0s'); |
| assert_equals(style.webkitAnimationDelay, ''); |
| assert_equals(computedStyle.webkitAnimationDelay, '0s'); |
| |
| style.animationDelay = "0s, 20px"; |
| assert_equals(style.animationDelay, ''); |
| assert_equals(computedStyle.animationDelay, '0s'); |
| assert_equals(style.webkitAnimationDelay, ''); |
| assert_equals(computedStyle.webkitAnimationDelay, '0s'); |
| }, "Invalid animation-delay values."); |
| |
| test(() => { |
| // Test initial value. |
| assert_equals(computedStyle.animationIterationCount, '1'); |
| assert_equals(computedStyle.webkitAnimationIterationCount, '1'); |
| |
| style.animationIterationCount = "4"; |
| assert_not_equals(Object.keys(style).indexOf('animationIterationCount'), -1); |
| assert_not_equals(Object.keys(style).indexOf('webkitAnimationIterationCount'), -1); |
| assert_equals(style.animationIterationCount, '4'); |
| assert_equals(computedStyle.animationIterationCount, '4'); |
| assert_equals(style.webkitAnimationIterationCount, '4'); |
| assert_equals(computedStyle.webkitAnimationIterationCount, '4'); |
| |
| style.animationIterationCount = "2.5"; |
| assert_equals(style.animationIterationCount, '2.5'); |
| assert_equals(computedStyle.animationIterationCount, '2.5'); |
| assert_equals(style.webkitAnimationIterationCount, '2.5'); |
| assert_equals(computedStyle.webkitAnimationIterationCount, '2.5'); |
| |
| style.animationIterationCount = "infinite"; |
| assert_equals(style.animationIterationCount, 'infinite'); |
| assert_equals(computedStyle.animationIterationCount, 'infinite'); |
| assert_equals(style.webkitAnimationIterationCount, 'infinite'); |
| assert_equals(computedStyle.webkitAnimationIterationCount, 'infinite'); |
| |
| style.animationIterationCount = "infinite, 3"; |
| assert_equals(style.animationIterationCount, 'infinite, 3'); |
| assert_equals(computedStyle.animationIterationCount, 'infinite, 3'); |
| assert_equals(style.webkitAnimationIterationCount, 'infinite, 3'); |
| assert_equals(computedStyle.webkitAnimationIterationCount, 'infinite, 3'); |
| |
| style.animationIterationCount = "0"; |
| assert_equals(style.animationIterationCount, '0'); |
| assert_equals(computedStyle.animationIterationCount, '0'); |
| assert_equals(style.webkitAnimationIterationCount, '0'); |
| assert_equals(computedStyle.webkitAnimationIterationCount, '0'); |
| |
| style.animationIterationCount = "infinite, infinite"; |
| assert_equals(style.animationIterationCount, 'infinite, infinite'); |
| assert_equals(computedStyle.animationIterationCount, 'infinite, infinite'); |
| assert_equals(style.webkitAnimationIterationCount, 'infinite, infinite'); |
| assert_equals(computedStyle.webkitAnimationIterationCount, 'infinite, infinite'); |
| }, "Valid animation-iteration-count values."); |
| |
| test(() => { |
| style.animationIterationCount = ""; |
| |
| style.animationIterationCount = "none"; |
| assert_equals(style.animationIterationCount, ''); |
| assert_equals(computedStyle.animationIterationCount, '1'); |
| assert_equals(style.webkitAnimationIterationCount, ''); |
| assert_equals(computedStyle.webkitAnimationIterationCount, '1'); |
| |
| style.animationIterationCount = "-3"; |
| assert_equals(style.animationIterationCount, ''); |
| assert_equals(computedStyle.animationIterationCount, '1'); |
| assert_equals(style.webkitAnimationIterationCount, ''); |
| assert_equals(computedStyle.webkitAnimationIterationCount, '1'); |
| |
| style.animationIterationCount = "infinite, -3"; |
| assert_equals(style.animationIterationCount, ''); |
| assert_equals(computedStyle.animationIterationCount, '1'); |
| assert_equals(style.webkitAnimationIterationCount, ''); |
| assert_equals(computedStyle.webkitAnimationIterationCount, '1'); |
| |
| style.animationIterationCount = "solid"; |
| assert_equals(style.animationIterationCount, ''); |
| assert_equals(computedStyle.animationIterationCount, '1'); |
| assert_equals(style.webkitAnimationIterationCount, ''); |
| assert_equals(computedStyle.webkitAnimationIterationCount, '1'); |
| |
| style.animationIterationCount = "-1, infinite"; |
| assert_equals(style.animationIterationCount, ''); |
| assert_equals(computedStyle.animationIterationCount, '1'); |
| assert_equals(style.webkitAnimationIterationCount, ''); |
| assert_equals(computedStyle.webkitAnimationIterationCount, '1'); |
| |
| style.animationIterationCount = "-1, 3"; |
| assert_equals(style.animationIterationCount, ''); |
| assert_equals(computedStyle.animationIterationCount, '1'); |
| assert_equals(style.webkitAnimationIterationCount, ''); |
| assert_equals(computedStyle.webkitAnimationIterationCount, '1'); |
| }, "Invalid animation-iteration-count values."); |
| </script> |
| </body> |
| </html> |
