134 lines
4.5 KiB
HTML
134 lines
4.5 KiB
HTML
|
<!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 shorthand.");
|
||
|
|
|
||
|
|
// These have to be global for the test helpers to see them.
|
||
|
|
var stylesheet, animationStyle;
|
||
|
|
var styleElement = document.createElement("style");
|
||
|
|
document.head.appendChild(styleElement);
|
||
|
|
stylesheet = styleElement.sheet;
|
||
|
|
|
||
|
|
function testAnimationShorthand(value, expectedName, expectedDuration, expectedDelay, expectedTimingFunction, expectedIterationCount, expectedDirection, expectedFillMode)
|
||
|
|
{
|
||
|
|
debug("");
|
||
|
|
debug("Setting animation: " + value);
|
||
|
|
stylesheet.insertRule("body { animation: " + value + "; }", 0);
|
||
|
|
|
||
|
|
debug("Check animation-name");
|
||
|
|
animationStyle = window.getComputedStyle(document.body).getPropertyCSSValue("animation-name");
|
||
|
|
shouldBe("animationStyle.cssText", "'" + expectedName + "'");
|
||
|
|
|
||
|
|
debug("Check animation-duration");
|
||
|
|
animationStyle = window.getComputedStyle(document.body).getPropertyCSSValue("animation-duration");
|
||
|
|
shouldBe("animationStyle.cssText", "'" + expectedDuration + "'");
|
||
|
|
|
||
|
|
debug("Check animation-delay");
|
||
|
|
animationStyle = window.getComputedStyle(document.body).getPropertyCSSValue("animation-delay");
|
||
|
|
shouldBe("animationStyle.cssText", "'" + expectedDelay + "'");
|
||
|
|
|
||
|
|
debug("Check animation-timing-function");
|
||
|
|
animationStyle = window.getComputedStyle(document.body).getPropertyCSSValue("animation-timing-function");
|
||
|
|
shouldBe("animationStyle.cssText", "'" + expectedTimingFunction + "'");
|
||
|
|
|
||
|
|
debug("Check animation-iteration-count");
|
||
|
|
animationStyle = window.getComputedStyle(document.body).getPropertyCSSValue("animation-iteration-count");
|
||
|
|
shouldBe("animationStyle.cssText", "'" + expectedIterationCount + "'");
|
||
|
|
|
||
|
|
debug("Check animation-direction");
|
||
|
|
animationStyle = window.getComputedStyle(document.body).getPropertyCSSValue("animation-direction");
|
||
|
|
shouldBe("animationStyle.cssText", "'" + expectedDirection + "'");
|
||
|
|
|
||
|
|
debug("Check animation-fill-mode");
|
||
|
|
animationStyle = window.getComputedStyle(document.body).getPropertyCSSValue("animation-fill-mode");
|
||
|
|
shouldBe("animationStyle.cssText", "'" + expectedFillMode + "'");
|
||
|
|
|
||
|
|
stylesheet.deleteRule(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
testAnimationShorthand("waldo",
|
||
|
|
"waldo",
|
||
|
|
"0s",
|
||
|
|
"0s",
|
||
|
|
"ease",
|
||
|
|
"1",
|
||
|
|
"normal",
|
||
|
|
"none");
|
||
|
|
|
||
|
|
testAnimationShorthand("waldo 2s",
|
||
|
|
"waldo",
|
||
|
|
"2s",
|
||
|
|
"0s",
|
||
|
|
"ease",
|
||
|
|
"1",
|
||
|
|
"normal",
|
||
|
|
"none");
|
||
|
|
|
||
|
|
testAnimationShorthand("3s banana 500ms",
|
||
|
|
"banana",
|
||
|
|
"3s",
|
||
|
|
"0.5s",
|
||
|
|
"ease",
|
||
|
|
"1",
|
||
|
|
"normal",
|
||
|
|
"none");
|
||
|
|
|
||
|
|
testAnimationShorthand("infinite alternate eggs 5s",
|
||
|
|
"eggs",
|
||
|
|
"5s",
|
||
|
|
"0s",
|
||
|
|
"ease",
|
||
|
|
"infinite",
|
||
|
|
"alternate",
|
||
|
|
"none");
|
||
|
|
|
||
|
|
testAnimationShorthand("forwards normal ease-in-out bacon 1s 2s",
|
||
|
|
"bacon",
|
||
|
|
"1s",
|
||
|
|
"2s",
|
||
|
|
"ease-in-out",
|
||
|
|
"1",
|
||
|
|
"normal",
|
||
|
|
"forwards");
|
||
|
|
|
||
|
|
testAnimationShorthand("pastrami 100ms cubic-bezier(0, 0, 1, 1) alternate-reverse",
|
||
|
|
"pastrami",
|
||
|
|
"0.1s",
|
||
|
|
"0s",
|
||
|
|
"cubic-bezier(0, 0, 1, 1)",
|
||
|
|
"1",
|
||
|
|
"alternate-reverse",
|
||
|
|
"none");
|
||
|
|
|
||
|
|
testAnimationShorthand("slightly-invalid 2s a",
|
||
|
|
"none",
|
||
|
|
"0s",
|
||
|
|
"0s",
|
||
|
|
"ease",
|
||
|
|
"1",
|
||
|
|
"normal",
|
||
|
|
"none");
|
||
|
|
|
||
|
|
testAnimationShorthand("completely invalid",
|
||
|
|
"none",
|
||
|
|
"0s",
|
||
|
|
"0s",
|
||
|
|
"ease",
|
||
|
|
"1",
|
||
|
|
"normal",
|
||
|
|
"none");
|
||
|
|
|
||
|
|
successfullyParsed = true;
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<script src="../resources/js-test-post.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|