| <!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> |
