| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Variables - Transitions - Variable value specified before transition; 'all' keyword used</title> |
| |
| <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"> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <style> |
| #target |
| { |
| transition-property: all; |
| transition-duration: 1s; |
| } |
| #target |
| { |
| --value: blue; |
| color: var(--value); |
| } |
| #target.changed |
| { |
| --value: green; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div id="target">This text should transition from blue to green 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("--value").trim(), "blue", "--value is blue before transition runs"); |
| }, "Verify CSS variable value before transition"); |
| |
| test(function() { |
| // Different browsers generate interpolated colors differently, so check multiple valid forms. |
| assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), |
| ["rgb(0, 0, 255)", "rgba(0, 0, 255, 1)"], |
| "color is blue before transition runs"); |
| }, "Verify substituted color value before transition"); |
| |
| var afterAnimationVariableTest = async_test("Verify CSS variable value after transition"); |
| document.getElementById("target").addEventListener("transitionend", afterAnimationVariableTest.step_func_done(function() { |
| assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after transition runs") |
| })); |
| |
| var afterAnimationColorTest = async_test("Verify substituted color value after transition"); |
| document.getElementById("target").addEventListener("transitionend", afterAnimationColorTest.step_func_done(function() { |
| assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), |
| ["rgb(0, 128, 0)", "rgba(0, 128, 0, 1)"], |
| "color is green after transition runs") |
| })); |
| |
| // Trigger transition |
| document.getElementById("target").className = "changed"; |
| |
| // Force another layout pass |
| document.documentElement.offsetHeight; |
| </script> |
| |
| </body> |
| </html> |
