1 files changed, 84 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-fonts/variations/font-weight-interpolation.html b/testing/web-platform/tests/css/css-fonts/variations/font-weight-interpolation.html
new file mode 100644
index 0000000000..745be060ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/variations/font-weight-interpolation.html
@@ -0,0 +1,84 @@
+<!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>