| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Testing the interpolation of new font-weight values introduced in CSS Fonts level 4</title> |
| <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-weight-prop" /> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| @keyframes fontWeightAnimation { |
| from { font-weight: 100; } |
| to { font-weight: 900; } |
| } |
| |
| #animation-test.animate { |
| animation: fontWeightAnimation 1s infinite alternate; |
| } |
| |
| #transition-test { |
| font-weight: 100; |
| transition-property: font-weight; |
| transition-duration: 10s; |
| } |
| |
| #transition-test.animate { |
| font-weight: 900; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div style="font-family: 'CSSTest Weights Full';"> |
| <div id="animation-test">A</div> |
| <div id="transition-test">A</div> |
| </div> |
| |
| <script> |
| |
| async_test(function (test) { |
| var animationElement = document.getElementById("animation-test"); |
| |
| // Verify starting value |
| assert_equals(window.getComputedStyle(animationElement).fontWeight, "400", "Font weight before animation"); |
| |
| // Start animation |
| animationElement.classList.add("animate"); |
| |
| var waitForAnimationStep = test.step_func(function() { |
| var computedFontWeight = window.getComputedStyle(animationElement).fontWeight; |
| if (computedFontWeight[1] != "0" || computedFontWeight[2] != 0) { // the value should eventually not be a multiple of 100 |
| test.done(); |
| } |
| else { |
| window.requestAnimationFrame(waitForAnimationStep); |
| } |
| }); |
| waitForAnimationStep(); |
| |
| }, "font-weight animation"); |
| |
| async_test(function (test) { |
| var transitionElement = document.getElementById("transition-test"); |
| |
| // Verify starting value |
| assert_equals(window.getComputedStyle(transitionElement).fontWeight, "100", "Font weight before transition"); |
| |
| // Start transition |
| transitionElement.classList.add("animate"); |
| |
| var waitForTransitionStep = test.step_func(function() { |
| var computedFontWeight = window.getComputedStyle(transitionElement).fontWeight; |
| if (computedFontWeight[1] != "0" || computedFontWeight[2] != 0) { // the value should eventually not be a multiple of 100 |
| test.done(); |
| } |
| else { |
| window.requestAnimationFrame(waitForTransitionStep); |
| } |
| }); |
| waitForTransitionStep(); |
| |
| }, "font-weight transition"); |
| |
| </script> |
| </body> |
| </html> |
