tor-browser

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

variable-animation-substitute-within-keyframe-fallback.html (2576B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4    <title>CSS Variables - Animation - Substitute Within Keyframe - Fallback</title>
      5    <script src="/resources/testharness.js"></script>
      6    <script src="/resources/testharnessreport.js"></script>
      7 
      8    <meta rel="author" title="Kevin Babbitt">
      9    <meta rel="author" title="Greg Whitworth">
     10    <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
     11    <link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
     12    <link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
     13    <meta name="assert" content='The --endColor does the 50% flip and supports the fallback syntax'>
     14 
     15    <style>
     16        @keyframes coloranim
     17        {
     18            from { color: blue; }
     19            to { --endColor: var(--nonexistent, green); color: var(--endColor); }
     20        }
     21 
     22        /* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */
     23        #target
     24        {
     25            animation-name: coloranim;
     26            animation-duration: 1s;
     27            animation-play-state: paused;
     28            animation-fill-mode: both;
     29        }
     30        #target
     31        {
     32            color: red;
     33            --endColor: red;
     34        }
     35    </style>
     36 </head>
     37 <body>
     38 
     39    <div id="target">This text should animate from blue to green over a period of 1 second.</div>
     40 
     41 <script type="text/javascript">
     42    "use strict";
     43 
     44    // Force an initial layout pass
     45    document.documentElement.offsetHeight;
     46 
     47    test(function() {
     48        // Different browsers generate interpolated colors differently, so check multiple valid forms.
     49        assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(),
     50            ["rgb(0, 0, 255)", "rgba(0, 0, 255, 1)"],
     51            "color is blue before animation runs");
     52        }, "Verify color before animation");
     53 
     54    var animationTest = async_test("Verify color after animation");
     55 
     56    animationTest.step(function() {
     57        // Set event handler
     58        document.getElementById("target").addEventListener("animationend", animationTest.step_func(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 animation runs")
     62            animationTest.done();
     63            }));
     64 
     65        // Trigger animation
     66        document.getElementById("target").style.animationPlayState = "running";
     67    });
     68 </script>
     69 
     70 </body>
     71 </html>