variable-animation-substitute-into-keyframe-shorthand.html (2484B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Variables - Animation - Substitute Into Keyframe with Shorthand</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 { border: 1px solid blue; } 17 to { border: 1px solid 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 border: 1px solid red; 31 --endColor: green; 32 } 33 </style> 34 </head> 35 <body> 36 37 <div id="target">The border around 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("border-bottom-color").trim(), 48 ["rgb(0, 0, 255)", "rgba(0, 0, 255, 1)"], 49 "border-bottom-color is blue before animation runs"); 50 }, "Verify border-bottom-color before animation"); 51 52 var animationTest = async_test("Verify border-bottom-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("border-bottom-color").trim(), 58 ["rgb(0, 128, 0)", "rgba(0, 128, 0, 1)"], 59 "border-bottom-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>