blob: 5a465b2f6085cdf2271482469b5597e4a50492e5 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<title>Shorthand animation name ordering test</title>
<style>
#box {
position: relative;
height: 100px;
width: 100px;
background-color: red;
margin: 5px;
}
@keyframes test {
from { left: 0px; }
to { left: 100px; }
}
@keyframes backwards {
from { left: 0px; }
to { left: 100px; }
}
@keyframes alternate {
from { left: 0px; }
to { left: 100px; }
}
@keyframes linear {
from { left: 0px; }
to { left: 100px; }
}
@keyframes ease {
from { left: 0px; }
to { left: 100px; }
}
</style>
<script>
const PROPERTIES_TO_TEST = [
"animationName",
"animationDuration",
"animationTimingFunction",
"animationDelay",
"animationIterationCount",
"animationDirection",
"animationFillMode"
];
const DEFAULT_VALUES = [
"none",
"0",
"ease",
"0",
"1",
"normal",
"none"
];
const TEST_INPUTS = [
"test 3s",
"3s test", // name is not first
"3s test forwards", // includes fill mode
"3s forwards test", // fill mode will match before name
"3s linear forwards test", // both timing and fill mode will match first
"3s forwards test linear", // name in between two keywords
"3s 4s 5 forwards linear test", // name coming last
"3s 4s infinite alternate forwards linear test", // all keywords before name
"3s 4s infinite alternate none linear test", // none keyword for fill mode before none keyword for name
"3s 4s infinite alternate forwards ease linear", // a special case where the 'linear' animation name will actually work because the timing function already parsed
];
const EXPECTED_VALUES = [
["test", "3s", "ease", "0s", "1", "normal", "none"],
["test", "3s", "ease", "0s", "1", "normal", "none"],
["test", "3s", "ease", "0s", "1", "normal", "forwards"],
["test", "3s", "ease", "0s", "1", "normal", "forwards"],
["test", "3s", "linear", "0s", "1", "normal", "forwards"],
["test", "3s", "linear", "0s", "1", "normal", "forwards"],
["test", "3s", "linear", "4s", "5", "normal", "forwards"],
["test", "3s", "linear", "4s", "infinite", "alternate", "forwards"],
["test", "3s", "linear", "4s", "infinite", "alternate", "none"],
["linear", "3s", "ease", "4s", "infinite", "alternate", "forwards"],
];
var numTestsComplete = 0;
function runTests() {
runIndividualTest(0);
}
function clearElementAnimationStyle(element) {
for (var i=0; i < PROPERTIES_TO_TEST.length; i++)
element.style[PROPERTIES_TO_TEST[i]] = DEFAULT_VALUES[i];
}
function runIndividualTest(testIndex) {
var result = document.getElementById("result");
var element = document.getElementById("box");
clearElementAnimationStyle(element);
element.offsetTop; // force style recalc
element.style.animation = TEST_INPUTS[testIndex];
element.offsetTop; // force another style recalc
var computedStyle = window.getComputedStyle(element);
for (var i=0; i < PROPERTIES_TO_TEST.length; i++) {
var value = computedStyle[PROPERTIES_TO_TEST[i]];
if (value == EXPECTED_VALUES[testIndex][i])
result.innerHTML += "PASS Test " + (numTestsComplete + 1) + ": " + PROPERTIES_TO_TEST[i] + " was " + value + "<br>";
else
result.innerHTML += "FAIL Test " + (numTestsComplete + 1) + ": " + PROPERTIES_TO_TEST[i] + " was " + value + " should be " + EXPECTED_VALUES[testIndex][i] + "<br>";
}
numTestsComplete++;
if (numTestsComplete < TEST_INPUTS.length)
runIndividualTest(numTestsComplete);
else {
if (window.testRunner)
testRunner.notifyDone();
}
}
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
window.addEventListener("load", runTests, false);
</script>
</head>
<body>
<div id="box"></div>
<div id="result"></div>
</body>
</html>