1 files changed, 410 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-004.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-004.tentative.html
new file mode 100644
index 0000000000..a46c478596
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-004.tentative.html
@@ -0,0 +1,410 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-script-level</title>
+    <meta charset="utf-8">
+    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746">
+    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property">
+    <meta name="assert" content="Check the resolved value of math-script-level">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      @font-face {
+        font-family: scriptpercentscaledown80-scriptscriptpercentscaledown40;
+        src: url("/fonts/math/scriptpercentscaledown80-scriptscriptpercentscaledown40.woff");
+      }
+      @font-face {
+        font-family: scriptpercentscaledown0-scriptscriptpercentscaledown40;
+        src: url("/fonts/math/scriptpercentscaledown0-scriptscriptpercentscaledown40.woff");
+      }
+      @font-face {
+        font-family: scriptpercentscaledown80-scriptscriptpercentscaledown0;
+        src: url("/fonts/math/scriptpercentscaledown80-scriptscriptpercentscaledown0.woff");
+      }
+      #scale80-40-scaledown, #scale80-40-scaleup {
+          font-family: scriptpercentscaledown80-scriptscriptpercentscaledown40;
+      }
+      #scale0-40-scaledown, #scale0-40-scaleup {
+          font-family: scriptpercentscaledown0-scriptscriptpercentscaledown40;
+      }
+      #scale80-0-scaledown, #scale80-0-scaleup {
+          font-family: scriptpercentscaledown80-scriptscriptpercentscaledown0;
+      }
+      #default-scaledown, #default-scaleup {
+          /* Ahem font does not have any MATH table, so uses default scale. */
+          font-family: Ahem;
+      }
+      .big { font-size: 3000px; }
+      .small { font-size: 150px; }
+      .level-3 { font-size: math; math-depth: -3; }
+      .level-1 { font-size: math; math-depth: -1; }
+      .level0 { font-size: math; math-depth: 0; }
+      .level1 { font-size: math; math-depth: 1; }
+      .level2 { font-size: math; math-depth: 2; }
+      .level3 { font-size: math; math-depth: 3; }
+      .level5 { font-size: math; math-depth: 5; }
+    </style>
+    <script>
+      const big = 3000;
+      const small = 150;
+      setup({ explicit_done: true });
+      function fontSize(element) {
+          return parseFloat((/(.+)px/).exec(getComputedStyle(element).
+                                            getPropertyValue("font-size"))[1]);
+      }
+      function CheckFontSizes(id, sizes) {
+          var container = document.getElementById(id);
+          for (var level in sizes) {
+              var divs = container.getElementsByClassName(`level${level}`);
+              for (var i = 0; i < divs.length; i++) {
+                  assert_approx_equals(fontSize(divs[i]), sizes[level], 1, `Wrong font-size (id=${id} ; level=${level} ; i=${i})`);
+              }
+          }
+      }
+      window.addEventListener("load", function() {
+          document.fonts.ready.then(function() {
+              test(function() {
+                  CheckFontSizes("scale80-40-scaledown", {
+                      "-3": big,
+                      "-1": big * .71 * .71,
+                      "0": big * .71 * .71 * .71,
+                      "1": big * .71 * .71 * .71 * .8,
+                      "2": big * .71 * .71 * .71 * .4,
+                      "3": big * .71 * .71 * .71 * .4 * .71,
+                      "5": big * .71 * .71 * .71 * .4 * .71 * .71 * .71
+                  });
+                  CheckFontSizes("scale80-40-scaleup", {
+                      "5": small,
+                      "3": small / (.71 * .71),
+                      "2": small / (.71 * .71 * .71),
+                      "1": small / (.71 * .71 * .71 * (.4 / .8)),
+                      "0": small  / (.71 * .71 * .71 * .4),
+                      "-1": small / (.71 * .71 * .71 * .4 * .71),
+                      "-3": small / (.71 * .71 * .71 * .4 * .71 * .71 * .71)
+                  });
+              }, "scriptPercentScaleDown=80, scriptScriptPercentScaleDown=40");
+
+              test(function() {
+                  var scriptPercentScaleDown = .71;
+                  CheckFontSizes("scale0-40-scaledown", {
+                      "-3": big,
+                      "-1": big * .71 * .71,
+                      "0": big * .71 * .71 * .71,
+                      "1": big * .71 * .71 * .71 * scriptPercentScaleDown,
+                      "2": big * .71 * .71 * .71 * .4,
+                      "3": big * .71 * .71 * .71 * .4 * .71,
+                      "5": big * .71 * .71 * .71 * .4 * .71 * .71 * .71
+                  });
+                  CheckFontSizes("scale0-40-scaleup", {
+                      "5": small,
+                      "3": small / (.71 * .71),
+                      "2": small / (.71 * .71 * .71),
+                      "1": small / (.71 * .71 * .71 * (.4 / scriptPercentScaleDown)),
+                      "0": small  / (.71 * .71 * .71 * .4),
+                      "-1": small / (.71 * .71 * .71 * .4 * .71),
+                      "-3": small / (.71 * .71 * .71 * .4 * .71 * .71 * .71)
+                  });
+              }, "scriptPercentScaleDown=0, scriptScriptPercentScaleDown=40");
+
+              test(function() {
+                  var scriptScriptPercentScaleDown = 0.5041;
+                  CheckFontSizes("scale80-0-scaledown", {
+                      "-3": big,
+                      "-1": big * .71 * .71,
+                      "0": big * .71 * .71 * .71,
+                      "1": big * .71 * .71 * .71 * .8,
+                      "2": big * .71 * .71 * .71 * scriptScriptPercentScaleDown,
+                      "3": big * .71 * .71 * .71 * scriptScriptPercentScaleDown * .71,
+                      "5": big * .71 * .71 * .71 * scriptScriptPercentScaleDown * .71 * .71 * .71
+                  });
+                  CheckFontSizes("scale80-0-scaleup", {
+                      "5": small,
+                      "3": small / (.71 * .71),
+                      "2": small / (.71 * .71 * .71),
+                      "1": small / (.71 * .71 * .71 * (scriptScriptPercentScaleDown / .8)),
+                      "0": small  / (.71 * .71 * .71 * scriptScriptPercentScaleDown),
+                      "-1": small / (.71 * .71 * .71 * scriptScriptPercentScaleDown * .71),
+                      "-3": small / (.71 * .71 * .71 * scriptScriptPercentScaleDown * .71 * .71 * .71)
+                  });
+              }, "scriptPercentScaleDown=80, scriptScriptPercentScaleDown=0");
+
+              test(function() {
+                  CheckFontSizes("default-scaledown", {
+                      "-3": big,
+                      "-1": big * .71 * .71,
+                      "0": big * .71 * .71 * .71,
+                      "1": big * .71 * .71 * .71 * .71,
+                      "2": big * .71 * .71 * .71 * .71 * .71,
+                      "3": big * .71 * .71 * .71 * .71 * .71 * .71,
+                      "5": big * .71 * .71 * .71 * .71 * .71 * .71 * .71 * .71
+                  });
+                  CheckFontSizes("default-scaleup", {
+                      "5": small,
+                      "3": small / (.71 * .71),
+                      "2": small / (.71 * .71 * .71),
+                      "1": small / (.71 * .71 * .71 * .71),
+                      "0": small  / (.71 * .71 * .71 * .71 * .71),
+                      "-1": small / (.71 * .71 * .71 * .71 * .71 * .71),
+                      "-3": small / (.71 * .71 * .71 * .71 * .71 * .71 * .71 * .71)
+                  });
+              }, "No MATH table");
+
+              done();
+          });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="log"></div>
+
+    <div class="level-3" id="scale80-40-scaledown">
+      <div class="big">
+        <div class="level5"><!-- -3 to 5 --></div>
+        <div class="level3"><!-- -3 to 3 --></div>
+        <div class="level2"><!-- -3 to 2 --></div>
+        <div class="level1"><!-- -3 to 1 --></div>
+        <div class="level0"><!-- -3 to 0 --></div>
+        <div class="level-1"><!-- -3 to -1 -->
+          <div class="level5"><!-- -1 to 5 --></div>
+          <div class="level3"><!-- -1 to 3 --></div>
+          <div class="level2"><!-- -1 to 2 --></div>
+          <div class="level1"><!-- -1 to 1 --></div>
+          <div class="level0"><!-- -1 to 0 -->
+            <div class="level5"><!-- 0 to 5 --></div>
+            <div class="level3"><!-- 0 to 3 --></div>
+            <div class="level2"><!-- 0 to 2 --></div>
+            <div class="level1"><!-- 0 to 1 -->
+              <div class="level5"><!-- 1 to 5 --></div>
+              <div class="level3"><!-- 1 to 3 --></div>
+              <div class="level2"><!-- 1 to 2 -->
+                <div class="level5"><!-- 2 to 5 --></div>
+                <div class="level3"><!-- 2 to 3 -->
+                  <div class="level5"><!-- 3 to 5 --></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="level5" id="scale80-40-scaleup">
+      <div class="small">
+        <div class="level-3"><!-- 5 to -3 --></div>
+        <div class="level-1"><!-- 5 to -1 --></div>
+        <div class="level0"><!-- 5 to 0 --></div>
+        <div class="level1"><!-- 5 to 1 --></div>
+        <div class="level2"><!-- 5 to 2 --></div>
+        <div class="level3"><!-- 5 to 3 -->
+          <div class="level-3"><!-- 3 to -3 --></div>
+          <div class="level-1"><!-- 3 to -1 --></div>
+          <div class="level0"><!-- 3 to 0 --></div>
+          <div class="level1"><!-- 3 to 1 --></div>
+          <div class="level2"><!-- 3 to 2 -->
+            <div class="level-3"><!-- 2 to -3 --></div>
+            <div class="level-1"><!-- 2 to -1 --></div>
+            <div class="level0"><!-- 2 to 0 --></div>
+            <div class="level1"><!-- 2 to 1 -->
+              <div class="level-3"><!-- 1 to -3 --></div>
+              <div class="level-1"><!-- 1 to -1 --></div>
+              <div class="level0"><!-- 1 to 0 -->
+                <div class="level-3"><!-- 0 to -3 --></div>
+                <div class="level-1"><!-- 0 to -1 -->
+                  <div class="level-3"><!-- -1 to -3 --></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="level-3" id="scale0-40-scaledown">
+      <div class="big">
+        <div class="level5"><!-- -3 to 5 --></div>
+        <div class="level3"><!-- -3 to 3 --></div>
+        <div class="level2"><!-- -3 to 2 --></div>
+        <div class="level1"><!-- -3 to 1 --></div>
+        <div class="level0"><!-- -3 to 0 --></div>
+        <div class="level-1"><!-- -3 to -1 -->
+          <div class="level5"><!-- -1 to 5 --></div>
+          <div class="level3"><!-- -1 to 3 --></div>
+          <div class="level2"><!-- -1 to 2 --></div>
+          <div class="level1"><!-- -1 to 1 --></div>
+          <div class="level0"><!-- -1 to 0 -->
+            <div class="level5"><!-- 0 to 5 --></div>
+            <div class="level3"><!-- 0 to 3 --></div>
+            <div class="level2"><!-- 0 to 2 --></div>
+            <div class="level1"><!-- 0 to 1 -->
+              <div class="level5"><!-- 1 to 5 --></div>
+              <div class="level3"><!-- 1 to 3 --></div>
+              <div class="level2"><!-- 1 to 2 -->
+                <div class="level5"><!-- 2 to 5 --></div>
+                <div class="level3"><!-- 2 to 3 -->
+                  <div class="level5"><!-- 3 to 5 --></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="level5" id="scale0-40-scaleup">
+      <div class="small">
+        <div class="level-3"><!-- 5 to -3 --></div>
+        <div class="level-1"><!-- 5 to -1 --></div>
+        <div class="level0"><!-- 5 to 0 --></div>
+        <div class="level1"><!-- 5 to 1 --></div>
+        <div class="level2"><!-- 5 to 2 --></div>
+        <div class="level3"><!-- 5 to 3 -->
+          <div class="level-3"><!-- 3 to -3 --></div>
+          <div class="level-1"><!-- 3 to -1 --></div>
+          <div class="level0"><!-- 3 to 0 --></div>
+          <div class="level1"><!-- 3 to 1 --></div>
+          <div class="level2"><!-- 3 to 2 -->
+            <div class="level-3"><!-- 2 to -3 --></div>
+            <div class="level-1"><!-- 2 to -1 --></div>
+            <div class="level0"><!-- 2 to 0 --></div>
+            <div class="level1"><!-- 2 to 1 -->
+              <div class="level-3"><!-- 1 to -3 --></div>
+              <div class="level-1"><!-- 1 to -1 --></div>
+              <div class="level0"><!-- 1 to 0 -->
+                <div class="level-3"><!-- 0 to -3 --></div>
+                <div class="level-1"><!-- 0 to -1 -->
+                  <div class="level-3"><!-- -1 to -3 --></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="level-3" id="scale80-0-scaledown">
+      <div class="big">
+        <div class="level5"><!-- -3 to 5 --></div>
+        <div class="level3"><!-- -3 to 3 --></div>
+        <div class="level2"><!-- -3 to 2 --></div>
+        <div class="level1"><!-- -3 to 1 --></div>
+        <div class="level0"><!-- -3 to 0 --></div>
+        <div class="level-1"><!-- -3 to -1 -->
+          <div class="level5"><!-- -1 to 5 --></div>
+          <div class="level3"><!-- -1 to 3 --></div>
+          <div class="level2"><!-- -1 to 2 --></div>
+          <div class="level1"><!-- -1 to 1 --></div>
+          <div class="level0"><!-- -1 to 0 -->
+            <div class="level5"><!-- 0 to 5 --></div>
+            <div class="level3"><!-- 0 to 3 --></div>
+            <div class="level2"><!-- 0 to 2 --></div>
+            <div class="level1"><!-- 0 to 1 -->
+              <div class="level5"><!-- 1 to 5 --></div>
+              <div class="level3"><!-- 1 to 3 --></div>
+              <div class="level2"><!-- 1 to 2 -->
+                <div class="level5"><!-- 2 to 5 --></div>
+                <div class="level3"><!-- 2 to 3 -->
+                  <div class="level5"><!-- 3 to 5 --></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="level5" id="scale80-0-scaleup">
+      <div class="small">
+        <div class="level-3"><!-- 5 to -3 --></div>
+        <div class="level-1"><!-- 5 to -1 --></div>
+        <div class="level0"><!-- 5 to 0 --></div>
+        <div class="level1"><!-- 5 to 1 --></div>
+        <div class="level2"><!-- 5 to 2 --></div>
+        <div class="level3"><!-- 5 to 3 -->
+          <div class="level-3"><!-- 3 to -3 --></div>
+          <div class="level-1"><!-- 3 to -1 --></div>
+          <div class="level0"><!-- 3 to 0 --></div>
+          <div class="level1"><!-- 3 to 1 --></div>
+          <div class="level2"><!-- 3 to 2 -->
+            <div class="level-3"><!-- 2 to -3 --></div>
+            <div class="level-1"><!-- 2 to -1 --></div>
+            <div class="level0"><!-- 2 to 0 --></div>
+            <div class="level1"><!-- 2 to 1 -->
+              <div class="level-3"><!-- 1 to -3 --></div>
+              <div class="level-1"><!-- 1 to -1 --></div>
+              <div class="level0"><!-- 1 to 0 -->
+                <div class="level-3"><!-- 0 to -3 --></div>
+                <div class="level-1"><!-- 0 to -1 -->
+                  <div class="level-3"><!-- -1 to -3 --></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="level-3" id="default-scaledown">
+      <div class="big">
+        <div class="level5"><!-- -3 to 5 --></div>
+        <div class="level3"><!-- -3 to 3 --></div>
+        <div class="level2"><!-- -3 to 2 --></div>
+        <div class="level1"><!-- -3 to 1 --></div>
+        <div class="level0"><!-- -3 to 0 --></div>
+        <div class="level-1"><!-- -3 to -1 -->
+          <div class="level5"><!-- -1 to 5 --></div>
+          <div class="level3"><!-- -1 to 3 --></div>
+          <div class="level2"><!-- -1 to 2 --></div>
+          <div class="level1"><!-- -1 to 1 --></div>
+          <div class="level0"><!-- -1 to 0 -->
+            <div class="level5"><!-- 0 to 5 --></div>
+            <div class="level3"><!-- 0 to 3 --></div>
+            <div class="level2"><!-- 0 to 2 --></div>
+            <div class="level1"><!-- 0 to 1 -->
+              <div class="level5"><!-- 1 to 5 --></div>
+              <div class="level3"><!-- 1 to 3 --></div>
+              <div class="level2"><!-- 1 to 2 -->
+                <div class="level5"><!-- 2 to 5 --></div>
+                <div class="level3"><!-- 2 to 3 -->
+                  <div class="level5"><!-- 3 to 5 --></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="level5" id="default-scaleup">
+      <div class="small">
+        <div class="level-3"><!-- 5 to -3 --></div>
+        <div class="level-1"><!-- 5 to -1 --></div>
+        <div class="level0"><!-- 5 to 0 --></div>
+        <div class="level1"><!-- 5 to 1 --></div>
+        <div class="level2"><!-- 5 to 2 --></div>
+        <div class="level3"><!-- 5 to 3 -->
+          <div class="level-3"><!-- 3 to -3 --></div>
+          <div class="level-1"><!-- 3 to -1 --></div>
+          <div class="level0"><!-- 3 to 0 --></div>
+          <div class="level1"><!-- 3 to 1 --></div>
+          <div class="level2"><!-- 3 to 2 -->
+            <div class="level-3"><!-- 2 to -3 --></div>
+            <div class="level-1"><!-- 2 to -1 --></div>
+            <div class="level0"><!-- 2 to 0 --></div>
+            <div class="level1"><!-- 2 to 1 -->
+              <div class="level-3"><!-- 1 to -3 --></div>
+              <div class="level-1"><!-- 1 to -1 --></div>
+              <div class="level0"><!-- 1 to 0 -->
+                <div class="level-3"><!-- 0 to -3 --></div>
+                <div class="level-1"><!-- 0 to -1 -->
+                  <div class="level-3"><!-- -1 to -3 --></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </body>
+</html>