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