144 lines
4.1 KiB
HTML
144 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Shorthand animation name ordering test</title>
|
|
<style>
|
|
#box {
|
|
position: relative;
|
|
height: 100px;
|
|
width: 100px;
|
|
background-color: red;
|
|
margin: 5px;
|
|
}
|
|
|
|
@-webkit-keyframes test {
|
|
from { left: 0px; }
|
|
to { left: 100px; }
|
|
}
|
|
|
|
@-webkit-keyframes backwards {
|
|
from { left: 0px; }
|
|
to { left: 100px; }
|
|
}
|
|
|
|
@-webkit-keyframes alternate {
|
|
from { left: 0px; }
|
|
to { left: 100px; }
|
|
}
|
|
|
|
@-webkit-keyframes linear {
|
|
from { left: 0px; }
|
|
to { left: 100px; }
|
|
}
|
|
|
|
@-webkit-keyframes ease {
|
|
from { left: 0px; }
|
|
to { left: 100px; }
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
const PROPERTIES_TO_TEST = [
|
|
"webkitAnimationName",
|
|
"webkitAnimationDuration",
|
|
"webkitAnimationTimingFunction",
|
|
"webkitAnimationDelay",
|
|
"webkitAnimationIterationCount",
|
|
"webkitAnimationDirection",
|
|
"webkitAnimationFillMode"
|
|
];
|
|
|
|
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);
|
|
|
|
// Unfortunately need to force a style recalculation before testing.
|
|
setTimeout(function () {
|
|
element.style.webkitAnimation = TEST_INPUTS[testIndex];
|
|
|
|
// And another forced style recalculation.
|
|
setTimeout(function() {
|
|
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();
|
|
}
|
|
}, 0);
|
|
}, 0);
|
|
}
|
|
|
|
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>
|