variable-animation-substitute-into-keyframe.html (2342B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Variables - Animation - Substitute Into Keyframe</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <meta rel="author" title="Kevin Babbitt"> 9 <meta rel="author" title="Greg Whitworth"> 10 <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" /> 11 <link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> 12 13 <style> 14 @keyframes coloranim 15 { 16 from { color: blue; } 17 to { color: var(--endColor); } 18 } 19 20 /* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */ 21 #target 22 { 23 animation-name: coloranim; 24 animation-duration: 1s; 25 animation-play-state: paused; 26 animation-fill-mode: both; 27 } 28 #target 29 { 30 color: red; 31 --endColor: green; 32 } 33 </style> 34 </head> 35 <body> 36 37 <div id="target">This text should animate from blue to green over a period of 1 second.</div> 38 39 <script type="text/javascript"> 40 "use strict"; 41 42 // Force an initial layout pass 43 document.documentElement.offsetHeight; 44 45 test(function() { 46 // Different browsers generate interpolated colors differently, so check multiple valid forms. 47 assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), 48 ["rgb(0, 0, 255)", "rgba(0, 0, 255, 1)"], 49 "color is blue before animation runs"); 50 }, "Verify color before animation"); 51 52 var animationTest = async_test("Verify color after animation"); 53 54 animationTest.step(function() { 55 // Set event handler 56 document.getElementById("target").addEventListener("animationend", animationTest.step_func(function() { 57 assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), 58 ["rgb(0, 128, 0)", "rgba(0, 128, 0, 1)"], 59 "color is green after animation runs") 60 animationTest.done(); 61 })); 62 63 // Trigger animation 64 document.getElementById("target").style.animationPlayState = "running"; 65 }); 66 </script> 67 68 </body> 69 </html>