| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Variables - Animation - Substitute Into Keyframe - transform property</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <meta rel="author" title="Kevin Babbitt"> |
| <meta rel="author" title="Greg Whitworth"> |
| <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" /> |
| <link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> |
| |
| <style> |
| @keyframes transformanim |
| { |
| from { transform: scale(0.5); } |
| to { transform: scale(var(--finalScale)); } |
| } |
| |
| /* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */ |
| #target |
| { |
| animation-name: transformanim; |
| animation-duration: 1s; |
| animation-play-state: paused; |
| animation-fill-mode: both; |
| transform-origin: 0 0; |
| --finalScale: 2; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div id="target">This text should scale from half size to double size over a period of 1 second.</div> |
| |
| <script type="text/javascript"> |
| "use strict"; |
| |
| // Force an initial layout pass |
| document.documentElement.offsetHeight; |
| |
| test(function() { |
| assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("transform").trim(), |
| "matrix(0.5, 0, 0, 0.5, 0, 0)", |
| "scale is 0.5 before animation runs"); |
| }, "Verify transform before animation"); |
| |
| var animationTest = async_test("Verify transform after animation"); |
| |
| animationTest.step(function() { |
| // Set event handler |
| document.getElementById("target").addEventListener("animationend", animationTest.step_func(function() { |
| assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("transform").trim(), |
| "matrix(2, 0, 0, 2, 0, 0)", |
| "scale is 2 after animation runs") |
| animationTest.done(); |
| })); |
| |
| // Trigger animation |
| document.getElementById("target").style.animationPlayState = "running"; |
| }); |
| </script> |
| |
| </body> |
| </html> |
