testing/web-platform/tests/css/css-variables/variable-transitions-to-no-value.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>CSS Variables - Transitions - From value to no value</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         #target
  15         {
  16             transition-property: --value;
  17             transition-duration: 1s;
  18         }
  19         #target
  20         {
  21             color: var(--value);
  22         }
  23     </style>
  24 </head>
  25 <body>
  26
  27     <div id="target" style="--value: green">This text should transition from green to black over a period of 1 second.</div>
  28
  29 <script type="text/javascript">
  30     "use strict";
  31
  32     // Force an initial layout pass
  33     document.documentElement.offsetHeight;
  34
  35     test(function() {
  36         assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green before transition runs");
  37         }, "Verify CSS variable value before transition");
  38
  39     test(function() {
  40         // Different browsers generate interpolated colors differently, so check multiple valid forms.
  41         assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(),
  42             ["rgb(0, 128, 0)", "rgba(0, 128, 0, 1)"],
  43             "color is green before transition runs");
  44         }, "Verify substituted color value before transition");
  45
  46     var afterAnimationVariableTest = async_test("Verify CSS variable value after transition");
  47     document.getElementById("target").addEventListener("transitionend", afterAnimationVariableTest.step_func_done(function() {
  48         assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "", "--value has no value after transition runs")
  49         }));
  50
  51     var afterAnimationColorTest = async_test("Verify substituted color value after transition");
  52     document.getElementById("target").addEventListener("transitionend", afterAnimationColorTest.step_func_done(function() {
  53         assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(),
  54             ["rgb(0, 0, 0)", "rgba(0, 0, 0, 1)"],
  55             "color is black after transition runs")
  56         }));
  57
  58     // Trigger transition
  59     document.getElementById("target").removeAttribute("style");
  60
  61     // Force another layout pass
  62     document.documentElement.offsetHeight;
  63 </script>
  64
  65 </body>
  66 </html>