tor-browser

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

font-style-interpolation.html (3037B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4    <title>Testing the interpolation of new font-style values introduced in CSS Fonts level 4</title>
      5    <meta name="timeout" content="long">
      6    <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-style-prop" />
      7    <script src="/resources/testharness.js"></script>
      8    <script src="/resources/testharnessreport.js"></script>
      9    <style>
     10        @keyframes fontStyleAnimation {
     11            from { font-style: oblique -12deg; }
     12            to   { font-style: oblique  12deg; }
     13        }
     14 
     15        #animation-test.animate {
     16            animation: fontStyleAnimation 1s infinite alternate;
     17        }
     18 
     19        #transition-test {
     20            font-style: oblique -12deg;
     21            transition-property: font-style;
     22            transition-duration: 10s;
     23        }
     24 
     25        #transition-test.animate {
     26            font-style: oblique 12deg;
     27        }
     28 
     29    </style>
     30 </head>
     31 <body>
     32    <div style="font-family: serif;">
     33        <div id="animation-test">Animation test</div>
     34        <div id="transition-test">Transition test</div>
     35    </div>
     36 
     37    <script>
     38 
     39        async_test(function (test) {
     40            var animationElement = document.getElementById("animation-test");
     41 
     42            // Verify starting value
     43            assert_equals(window.getComputedStyle(animationElement).fontStyle, "normal", "Font style before animation");
     44 
     45            // Start animation
     46            animationElement.classList.add("animate");
     47 
     48            var waitForAnimationStep = test.step_func(function() {
     49                var computedFontStyle = window.getComputedStyle(animationElement).fontStyle;
     50                if (computedFontStyle != "normal" &&
     51                    computedFontStyle != "oblique -12deg" &&
     52                    computedFontStyle != "oblique 12deg") {
     53                    test.done();
     54                }
     55                else {
     56                    window.requestAnimationFrame(waitForAnimationStep);
     57                }
     58            });
     59            waitForAnimationStep();
     60 
     61        }, "font-style animation");
     62 
     63        async_test(function (test) {
     64            var transitionElement = document.getElementById("transition-test");
     65 
     66            // Verify starting value
     67            assert_equals(window.getComputedStyle(transitionElement).fontStyle, "oblique -12deg", "Font style before transition");
     68 
     69            // Start transition
     70            transitionElement.classList.add("animate");
     71 
     72            var waitForTransitionStep = test.step_func(function() {
     73                var computedFontStyle = window.getComputedStyle(transitionElement).fontStyle;
     74                if (computedFontStyle != "normal" &&
     75                    computedFontStyle != "oblique -12deg" &&
     76                    computedFontStyle != "oblique 12deg") {
     77                    test.done();
     78                }
     79                else {
     80                    window.requestAnimationFrame(waitForTransitionStep);
     81                }
     82            });
     83            waitForTransitionStep();
     84 
     85        }, "font-style transition");
     86 
     87    </script>
     88 </body>
     89 </html>