| <!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 src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script> |
| var test = async_test("Shorthand animation name ordering test"); |
| |
| 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 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]]; |
| assert_equals(value, EXPECTED_VALUES[testIndex][i], "Test " + (numTestsComplete + 1) + ": " + PROPERTIES_TO_TEST[i] + " was " + value + " should be " + EXPECTED_VALUES[testIndex][i]); |
| } |
| |
| numTestsComplete++; |
| if (numTestsComplete < TEST_INPUTS.length) |
| runIndividualTest(numTestsComplete); |
| else { |
| test.done(); |
| } |
| } |
| |
| window.addEventListener("load", test.step_func(runTests), false); |
| </script> |
| </head> |
| <body> |
| <div id="box"></div> |
| </body> |
| </html> |