blob: 2ae2998f6ae0a5a3ec6c0c71bfe3de7502396c1a [file] [log] [blame]
<!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=false ] -->
<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>