tor-browser

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

font-weight-interpolation.html (2876B)

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