| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <p id="description"></p> |
| <div id="console"></div> |
| <script> |
| |
| description("Test the unprefixed animation properties."); |
| |
| // These have to be global for the test helpers to see them. |
| var stylesheet, cssRule, declaration, animationRule, subRule, animationStyle; |
| var styleElement = document.createElement("style"); |
| document.head.appendChild(styleElement); |
| stylesheet = styleElement.sheet; |
| |
| function testAnimationRule(description, property, value, expectedTexts) |
| { |
| debug(""); |
| debug("Parsing - " + description + " : " + value); |
| |
| stylesheet.insertRule("section { " + property + ": " + value + "; }", 0); |
| cssRule = stylesheet.cssRules.item(0); |
| |
| shouldBe("cssRule.type", "1"); |
| |
| declaration = cssRule.style; |
| shouldBe("declaration.length", "1"); |
| shouldBe("declaration.getPropertyValue('" + property + "')", "'" + value + "'"); |
| shouldBe("declaration.getPropertyValue('-webkit-" + property + "')", "'" + value + "'"); |
| |
| animationRule = declaration.getPropertyCSSValue(property); |
| |
| if (animationRule && animationRule.length > 1 && expectedTexts && expectedTexts.length > 1) { |
| for (var i = 0; i < expectedTexts.length; i++) { |
| subRule = animationRule[i]; |
| shouldBe("subRule.cssText", "'" + expectedTexts[i] + "'"); |
| } |
| } |
| |
| stylesheet.deleteRule(0); |
| } |
| |
| function testInvalidAnimationRule(description, property, value) |
| { |
| debug(""); |
| debug("Invalid - " + description + " : " + value); |
| |
| stylesheet.insertRule("section { " + property + ": " + value + "; }", 0); |
| cssRule = stylesheet.cssRules.item(0); |
| |
| shouldBe("cssRule.type", "1"); |
| |
| declaration = cssRule.style; |
| shouldBe("declaration.length", "0"); |
| shouldBeEqualToString("declaration.getPropertyValue('" + property + "')", ""); |
| |
| stylesheet.deleteRule(0); |
| } |
| |
| function testComputedAnimationRule(description, property, value, expectedTexts) |
| { |
| debug(""); |
| debug("Computed Style - " + description + " : " + value); |
| |
| stylesheet.insertRule("body { " + property + ": " + value + "; }", 0); |
| |
| animationStyle = window.getComputedStyle(document.body).getPropertyCSSValue(property); |
| |
| if (animationStyle && animationStyle.length > 1 && expectedTexts && expectedTexts.length > 1) { |
| for (var i = 0; i < expectedTexts.length; i++) { |
| subRule = animationStyle[i]; |
| shouldBe("subRule.cssText", "'" + expectedTexts[i] + "'"); |
| } |
| } else |
| shouldBe("animationStyle.cssText", "'" + value + "'"); |
| |
| stylesheet.deleteRule(0); |
| } |
| |
| |
| testAnimationRule("Basic animation-name", |
| "animation-name", "waldo"); |
| |
| testAnimationRule("Multiple animation-names", |
| "animation-name", "waldo, wally", |
| ["waldo", "wally"]); |
| |
| testAnimationRule("Basic animation-duration", |
| "animation-duration", "5s"); |
| |
| testAnimationRule("Multiple animation-durations", |
| "animation-duration", "10s, 20ms", |
| ["10s", "20ms"]); |
| |
| testAnimationRule("Basic animation-delay", |
| "animation-delay", "5s"); |
| |
| testAnimationRule("Multiple animation-delays", |
| "animation-delay", "10s, 20ms", |
| ["10s", "20ms"]); |
| |
| testAnimationRule("Basic animation-timing-function", |
| "animation-timing-function", "ease-in-out"); |
| |
| testAnimationRule("animation-timing-function with bezier", |
| "animation-timing-function", "cubic-bezier(0.2, 0.3, 0.4, 0.5)"); |
| |
| testAnimationRule("Multiple animation-timing-functions", |
| "animation-timing-function", "ease-in, ease-out", |
| ["ease-in", "ease-out"]); |
| |
| testAnimationRule("Basic animation-iteration-count", |
| "animation-iteration-count", "4"); |
| |
| testAnimationRule("animation-iteration-count with keyword", |
| "animation-iteration-count", "infinite"); |
| |
| testAnimationRule("Multiple animation-iteration-counts", |
| "animation-iteration-count", "2, infinite, 4", |
| ["2", "infinite", "4"]); |
| |
| testAnimationRule("Normal animation-direction", |
| "animation-direction", "normal"); |
| |
| testAnimationRule("Alternate animation-direction", |
| "animation-direction", "alternate"); |
| |
| testAnimationRule("Reverse animation-direction", |
| "animation-direction", "reverse"); |
| |
| testAnimationRule("Alternate Reverse animation-direction", |
| "animation-direction", "alternate-reverse"); |
| |
| testAnimationRule("Multiple animation-directions", |
| "animation-direction", "alternate, alternate, normal", |
| ["alternate", "alternate", "normal"]); |
| |
| testAnimationRule("None animation-fill-mode", |
| "animation-fill-mode", "none"); |
| |
| testAnimationRule("Forwards animation-fill-mode", |
| "animation-fill-mode", "forwards"); |
| |
| testAnimationRule("Backwards animation-fill-mode", |
| "animation-fill-mode", "backwards"); |
| |
| testAnimationRule("Both animation-fill-mode", |
| "animation-fill-mode", "both"); |
| |
| testAnimationRule("Multiple animation-fill-modes", |
| "animation-fill-mode", "none, forwards, backwards, both", |
| ["none", "forwards", "backwards", "both"]); |
| |
| testInvalidAnimationRule("duration - Bad value", "animation-duration", "10cm"); |
| testInvalidAnimationRule("duration - List with bad value", "animation-duration", "10ms, 10cm, 10s"); |
| |
| testInvalidAnimationRule("delay - Bad value", "animation-delay", "10cm"); |
| testInvalidAnimationRule("delay - List with bad value", "animation-delay", "10ms, 10cm, 10s"); |
| |
| testInvalidAnimationRule("timing-function - Wrong keyword parameter", "animation-timing-function", "egg"); |
| testInvalidAnimationRule("timing-function - List with wrong keyword parameter", "animation-timing-function", "ease-in, egg, ease-out"); |
| |
| testInvalidAnimationRule("iteration-count - Wrong keyword parameter", "animation-iteration-count", "banana"); |
| testInvalidAnimationRule("iteration-count - List with wrong keyword parameter", "animation-iteration-count", "infinite, 10, banana"); |
| |
| testInvalidAnimationRule("direction - Wrong keyword parameter", "animation-direction", "all"); |
| testInvalidAnimationRule("direction - List with wrong keyword parameter", "animation-direction", "normal, alternate, none"); |
| |
| testInvalidAnimationRule("fill-mode - Wrong keyword parameter", "animation-fill-mode", "all"); |
| testInvalidAnimationRule("fill-mode - List with wrong keyword parameter", "animation-fill-mode", "none, backwards, left, alternate, forwards"); |
| |
| testComputedAnimationRule("Basic animation-name", |
| "animation-name", "waldo"); |
| |
| testComputedAnimationRule("Multiple animation-names", |
| "animation-name", "waldo, wally", |
| ["waldo", "wally"]); |
| |
| testComputedAnimationRule("Basic animation-duration", |
| "animation-duration", "5s"); |
| |
| testComputedAnimationRule("Multiple animation-durations", |
| "animation-duration", "10s, 20ms", |
| ["10s", "0.02s"]); |
| |
| testComputedAnimationRule("Basic animation-delay", |
| "animation-delay", "5s"); |
| |
| testComputedAnimationRule("Multiple animation-delays", |
| "animation-delay", "10s, 20ms", |
| ["10s", "0.02s"]); |
| |
| testComputedAnimationRule("Basic animation-timing-function", |
| "animation-timing-function", "ease-in-out"); |
| |
| testComputedAnimationRule("animation-timing-function with bezier", |
| "animation-timing-function", "cubic-bezier(0.2, 0.3, 0.4, 0.5)"); |
| |
| testComputedAnimationRule("Multiple animation-timing-functions", |
| "animation-timing-function", "ease-in, ease-out", |
| ["ease-in", "ease-out"]); |
| |
| testComputedAnimationRule("Basic animation-iteration-count", |
| "animation-iteration-count", "4"); |
| |
| testComputedAnimationRule("animation-iteration-count with keyword", |
| "animation-iteration-count", "infinite"); |
| |
| testComputedAnimationRule("Multiple animation-iteration-counts", |
| "animation-iteration-count", "2, infinite, 4", |
| ["2", "infinite", "4"]); |
| |
| testComputedAnimationRule("Normal animation-direction", |
| "animation-direction", "normal"); |
| |
| testComputedAnimationRule("Alternate animation-direction", |
| "animation-direction", "alternate"); |
| |
| testComputedAnimationRule("Reverse animation-direction", |
| "animation-direction", "reverse"); |
| |
| testComputedAnimationRule("Alternate Reverse animation-direction", |
| "animation-direction", "alternate-reverse"); |
| |
| testComputedAnimationRule("Multiple animation-directions", |
| "animation-direction", "alternate, alternate, normal", |
| ["alternate", "alternate", "normal"]); |
| |
| testComputedAnimationRule("None animation-fill-mode", |
| "animation-fill-mode", "none"); |
| |
| testComputedAnimationRule("Forwards animation-fill-mode", |
| "animation-fill-mode", "forwards"); |
| |
| testComputedAnimationRule("Backwards animation-fill-mode", |
| "animation-fill-mode", "backwards"); |
| |
| testComputedAnimationRule("Both animation-fill-mode", |
| "animation-fill-mode", "both"); |
| |
| testComputedAnimationRule("Multiple animation-fill-modes", |
| "animation-fill-mode", "none, forwards, backwards, both", |
| ["none", "forwards", "backwards", "both"]); |
| |
| successfullyParsed = true; |
| |
| </script> |
| <script src="../resources/js-test-post.js"></script> |
| </body> |
| </html> |
