tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

variable-transitions-value-before-transition-property-all.html (2779B)

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