testing/web-platform/tests/css/css-variables/variable-transitions-transition-property-all-before-value.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>CSS Variables - Transitions - Variable value specified before transition; 'all' keyword used</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
  14     <style>
  15         #target
  16         {
  17             transition-property: all;
  18             transition-duration: 1s;
  19         }
  20         #target
  21         {
  22             --value: blue;
  23             color: var(--value);
  24         }
  25         #target.changed
  26         {
  27             --value: green;
  28         }
  29     </style>
  30 </head>
  31 <body>
  32
  33     <div id="target">This text should transition from blue to green over a period of 1 second.</div>
  34
  35 <script type="text/javascript">
  36     "use strict";
  37
  38     // Force an initial layout pass
  39     document.documentElement.offsetHeight;
  40
  41     test(function() {
  42         assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "blue", "--value is blue before transition runs");
  43         }, "Verify CSS variable value before transition");
  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 transition runs");
  50         }, "Verify substituted color value before transition");
  51
  52     var afterAnimationVariableTest = async_test("Verify CSS variable value after transition");
  53     document.getElementById("target").addEventListener("transitionend", afterAnimationVariableTest.step_func_done(function() {
  54         assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after transition runs")
  55         }));
  56
  57     var afterAnimationColorTest = async_test("Verify substituted color value after transition");
  58     document.getElementById("target").addEventListener("transitionend", afterAnimationColorTest.step_func_done(function() {
  59         assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(),
  60             ["rgb(0, 128, 0)", "rgba(0, 128, 0, 1)"],
  61             "color is green after transition runs")
  62         }));
  63
  64     // Trigger transition
  65     document.getElementById("target").className = "changed";
  66
  67     // Force another layout pass
  68     document.documentElement.offsetHeight;
  69 </script>
  70
  71 </body>
  72 </html>