From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../math-depth-001-crash.html                      |  44 +++
 .../math-script-level-001.tentative.html           |  87 +++++
 .../math-script-level-002.tentative.html           | 194 ++++++++++
 .../math-script-level-003.tentative-ref.html       |  25 ++
 .../math-script-level-003.tentative.html           |  31 ++
 .../math-script-level-004.tentative.html           | 410 +++++++++++++++++++++
 ...evel-auto-and-math-style-001.tentative-ref.html |  21 ++
 ...pt-level-auto-and-math-style-001.tentative.html |  26 ++
 ...evel-auto-and-math-style-002.tentative-ref.html |  21 ++
 ...pt-level-auto-and-math-style-002.tentative.html |  26 ++
 ...evel-auto-and-math-style-003.tentative-ref.html |  21 ++
 ...pt-level-auto-and-math-style-003.tentative.html |  26 ++
 ...evel-auto-and-math-style-004.tentative-ref.html |  25 ++
 ...pt-level-auto-and-math-style-004.tentative.html |  30 ++
 ...evel-auto-and-math-style-005.tentative-ref.html |  27 ++
 ...pt-level-auto-and-math-style-005.tentative.html |  32 ++
 ...level-font-size-clamping-001.tentative-ref.html |  23 ++
 ...ipt-level-font-size-clamping-001.tentative.html |  27 ++
 .../math-style-001.tentative.html                  |  43 +++
 19 files changed, 1139 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-depth-001-crash.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-001.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-002.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative-ref.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-004.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-001.tentative-ref.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-001.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-002.tentative-ref.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-002.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-003.tentative-ref.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-003.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-004.tentative-ref.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-004.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-005.tentative-ref.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-005.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-font-size-clamping-001.tentative-ref.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-font-size-clamping-001.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-style-001.tentative.html

(limited to 'testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style')

diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-depth-001-crash.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-depth-001-crash.html
new file mode 100644
index 0000000000..00e0c62772
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-depth-001-crash.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-depth limits</title>
+    <meta charset="utf-8">
+    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property">
+    <meta name="assert" content="Check change between possible limits or overflowing values of an integer math-depth do not cause any crash">
+    <style>
+      @font-face {
+        font-family: scriptpercentscaledown80-scriptscriptpercentscaledown40;
+        src: url("/fonts/math/scriptpercentscaledown80-scriptscriptpercentscaledown40.woff");
+      }
+      body {
+        font-family: scriptpercentscaledown80-scriptscriptpercentscaledown40;
+      }
+    </style>
+  </head>
+  <body>
+    <div style="math-depth: -128">
+      <div style="font-size: math; math-depth: 127">
+        <div style="font-size: math; math-depth: -128">
+        </div>
+      </div>
+    </div>
+    <div style="math-depth: -32768">
+      <div style="font-size: math; math-depth: 32767">
+        <div style="font-size: math; math-depth: -32768">
+        </div>
+      </div>
+    </div>
+    <div style="math-depth: -2147483648">
+      <div style="font-size: math; math-depth: 2147483647">
+        <div style="font-size: math; math-depth: -2147483648">
+        </div>
+      </div>
+    </div>
+    <div style="math-depth: -9223372036854775808">
+      <div style="font-size: math; math-depth: 9223372036854775807">
+        <div style="font-size: math; math-depth: -9223372036854775808">
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-001.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-001.tentative.html
new file mode 100644
index 0000000000..9dff79025a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-001.tentative.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-depth</title>
+    <meta charset="utf-8">
+    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property">
+    <meta name="assert" content="Check the computed value of math-depth">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script>
+      function mathDepth(id) {
+          return window.getComputedStyle(document.getElementById(id)).
+              getPropertyValue("math-depth");
+      }
+      setup({ explicit_done: true });
+      window.addEventListener("load", function() {
+          test(function() {
+              assert_equals(mathDepth("initial"), "0");
+              assert_equals(mathDepth("initialFrom11"), "0");
+          }, "Initial value of math-depth");
+          test(function() {
+              assert_equals(mathDepth("inherited11"), "11");
+              assert_equals(mathDepth("inherited-7"), "-7");
+          }, "Inherited values of math-depth");
+          test(function() {
+              assert_equals(mathDepth("inherited9specifiedAutoInline"), "10");
+              assert_equals(mathDepth("inherited9specifiedAutoDisplay"), "9");
+          }, "Specified math-depth: auto-add");
+          test(function() {
+              assert_equals(mathDepth("specified11"), "11");
+              assert_equals(mathDepth("specified-7"), "-7");
+          }, "Specified math-depth: <integer>");
+          test(function() {
+              assert_equals(mathDepth("specifiedAdd10From5"), "15");
+              assert_equals(mathDepth("specifiedAdd-15From5"), "-10");
+          }, "Specified math-depth: add(<integer>)");
+          test(function() {
+              assert_equals(mathDepth("invalidKeywordFrom3"), "3");
+              assert_equals(mathDepth("invalidFloatFrom3"), "3");
+              assert_equals(mathDepth("invalidCalcFrom3"), "3");
+              assert_equals(mathDepth("invalidAddCalcFrom3"), "3");
+              assert_equals(mathDepth("invalidAddFloatFrom3"), "3");
+          }, "Specified math-depth: invalid expressions");
+          test(function() {
+              const cssVariable = 3;
+              assert_equals(mathDepth("specifiedCalcFrom9"), `${Math.round(cssVariable/2)+10}`);
+              assert_equals(mathDepth("specifiedAddCalcFrom9"), `${9+(3*4-5)}`);
+          }, "Specified math-depth: calc() expressions");
+          done();
+      });
+    </script>
+  </head>
+  <body>
+    <div id="log"></div>
+    <div id="initial"></div>
+    <div id="specified11" style="math-depth: 11">
+      <div id="initialFrom11" style="math-depth: initial"></div>
+      <div id="inherited11"></div>
+    </div>
+    <div id="specified-7" style="math-depth: -7">
+      <div id="inherited-7"></div>
+    </div>
+    <div style="math-depth: 9">
+      <div style="math-style: compact">
+        <div id="inherited9specifiedAutoInline" style="math-depth: auto-add" ></div>
+      </div>
+      <div style="math-style: normal">
+        <div id="inherited9specifiedAutoDisplay" style="math-depth: auto-add" ></div>
+      </div>
+    </div>
+    <div style="math-depth: 5">
+      <div id="specifiedAdd10From5" style="math-depth: add(10)"></div>
+      <div id="specifiedAdd-15From5" style="math-depth: add(-15)"></div>
+    </div>
+    <div style="math-depth: 3;">
+      <div id="invalidKeywordFrom3" style="math-depth: auto"></div>
+      <div id="invalidFloatFrom3" style="math-depth: 3.14"></div>
+      <div id="invalidCalcFrom3" style="math-depth: 1,2"></div>
+      <div id="invalidAddCalcFrom3" style="math-depth: add(3,4)"></div>
+      <div id="invalidAddFloatFrom3" style="math-depth: add(3.14)"></div>
+    </div>
+    <div style="math-depth: 9;">
+      <div id="specifiedCalcFrom9" style="--css-variable: 3; math-depth: calc(var(--css-variable)/2 + 10)"></div>
+      <div id="specifiedAddCalcFrom9" style="math-depth: add(calc(3*4 - 5))"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-002.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-002.tentative.html
new file mode 100644
index 0000000000..ab0f8fa955
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-002.tentative.html
@@ -0,0 +1,194 @@
+<!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">
+    <link rel="help" href="https://www.w3.org/TR/cssom-1/#serialize-a-css-component-value">
+    <meta name="assert" content="Verify effect of math-depth: auto-add | add(<integer) | (<integer>, starting from different values of math-depth.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      .container {
+          /* Ahem font does not have a MATH table so the font-size scale factor
+             is always 0.71^{computed - inherited math script level} */
+          font: 20px/1 Ahem;
+      }
+    </style>
+    <script>
+      var epsilon = .1;
+      function fontSize(id) {
+          return parseFloat((/(.+)px/).exec(getComputedStyle(document.getElementById(id)).getPropertyValue("font-size"))[1]);
+      }
+      setup({ explicit_done: true });
+      window.addEventListener("load", function() {
+          document.fonts.ready.then(function() {
+              test(function() {
+                  assert_equals(fontSize("autoDisplay"), 200);
+                  assert_equals(fontSize("autoInline"), 500 * .71);
+              }, "auto");
+              test(function() {
+                  var initialSize = 2000 * Math.pow(.71, 7);
+                  assert_approx_equals(fontSize("autoDisplayFrom7"), initialSize, epsilon);
+                  assert_approx_equals(fontSize("autoInlineFrom7"), initialSize * .71, epsilon);
+              }, "auto ; starting from level 7");
+              test(function() {
+                  assert_equals(fontSize("add0"), 200);
+                  assert_equals(fontSize("add-1"), 100);
+                  assert_equals(fontSize("add1"), 355);
+                  assert_approx_equals(fontSize("add-2"), 397, 1);
+                  assert_approx_equals(fontSize("add2"), 504, 1);
+                  assert_approx_equals(fontSize("add-9"), 654, 1);
+                  assert_approx_equals(fontSize("add9"), 92, 1);
+              }, "add(<integer>)");
+              test(function() {
+                  assert_equals(fontSize("add0from3"), 200);
+                  assert_equals(fontSize("add-1from3"), 100);
+                  assert_equals(fontSize("add1from3"), 355);
+                  assert_approx_equals(fontSize("add-2from3"), 397, 1);
+                  assert_approx_equals(fontSize("add2from3"), 504, 1);
+                  assert_approx_equals(fontSize("add-9from3"), 654, 1);
+                  assert_approx_equals(fontSize("add9from3"), 92, 1);
+              }, "add(<integer>) ; starting from level 3");
+              test(function() {
+                  assert_equals(fontSize("set0"), 200);
+                  assert_equals(fontSize("set-1"), 100);
+                  assert_equals(fontSize("set1"), 355);
+                  assert_approx_equals(fontSize("set-2"), 397, 1);
+                  assert_approx_equals(fontSize("set2"), 504, 1);
+                  assert_approx_equals(fontSize("set-9"), 654, 1);
+                  assert_approx_equals(fontSize("set9"), 92, 1);
+              }, "<integer>");
+              test(function() {
+                  assert_equals(fontSize("set50"), 200);
+                  assert_equals(fontSize("set49"), 100);
+                  assert_equals(fontSize("set51"), 355);
+                  assert_approx_equals(fontSize("set48"), 397, 1);
+                  assert_approx_equals(fontSize("set52"), 504, 1);
+                  assert_approx_equals(fontSize("set41"), 654, 1);
+                  assert_approx_equals(fontSize("set59"), 92, 1);
+              }, "<integer> ; starting from level 50");
+              done();
+          });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="log"></div>
+    <div>
+      <div class="container">
+        <div>
+          <div style="font-size: 200px; math-style: normal">
+            <div id="autoDisplay" style="font-size: math; math-depth: auto-add"></div>
+          </div>
+          <div style="font-size: 500px; math-style: compact">
+            <div id="autoInline" style="font-size: math; math-depth: auto-add"></div>
+          </div>
+        </div>
+        <div style="font-size: 2000px;">
+          <div style="math-style: normal; font-size: math; math-depth: 7">
+            <div id="autoDisplayFrom7" style="font-size: math; math-depth: auto-add"></div>
+          </div>
+          <div style="math-style: compact; font-size: math; math-depth: 7">
+            <div id="autoInlineFrom7" style="font-size: math; math-depth: auto-add"></div>
+          </div>
+        </div>
+        <div>
+          <div style="font-size: 200px">
+            <div id="add0" style="font-size: math; math-depth: add(0)"></div>
+          </div>
+          <div style="font-size: 71px">
+            <div id="add-1" style="font-size: math; math-depth: add(-1)"></div>
+          </div>
+          <div style="font-size: 500px">
+            <div id="add1" style="font-size: math; math-depth: add(1)"></div>
+          </div>
+          <div style="font-size: 200px">
+            <div id="add-2" style="font-size: math; math-depth: add(-2)"></div>
+          </div>
+          <div style="font-size: 1000px">
+            <div id="add2" style="font-size: math; math-depth: add(2)"></div>
+          </div>
+          <div style="font-size: 30px">
+            <div id="add-9" style="font-size: math; math-depth: add(-9)"></div>
+          </div>
+          <div style="font-size: 2000px">
+            <div id="add9" style="font-size: math; math-depth: add(9)"></div>
+          </div>
+        </div>
+        <div style="math-depth: 3;">
+          <div style="font-size: 200px;">
+            <div id="add0from3" style="font-size: math; math-depth: add(0)"></div>
+          </div>
+          <div style="font-size: 71px;">
+            <div id="add-1from3" style="font-size: math; math-depth: add(-1)"></div>
+          </div>
+          <div style="font-size: 500px;">
+            <div id="add1from3" style="font-size: math; math-depth: add(1)"></div>
+          </div>
+          <div style="font-size: 200px;">
+            <div id="add-2from3" style="font-size: math; math-depth: add(-2)"></div>
+          </div>
+          <div style="font-size: 1000px;">
+            <div id="add2from3" style="font-size: math; math-depth: add(2)"></div>
+          </div>
+          <div style="font-size: 30px;">
+            <div id="add-9from3" style="font-size: math; math-depth: add(-9)"></div>
+          </div>
+          <div style="font-size: 2000px;">
+            <div id="add9from3" style="font-size: math; math-depth: add(9)"></div>
+          </div>
+        </div>
+        <div>
+          <div style="font-size: 200px">
+            <div id="set0" style="font-size: math; math-depth: 0"></div>
+          </div>
+          <div style="font-size: 71px">
+            <div id="set-1" style="font-size: math; math-depth: -1"></div>
+          </div>
+          <div style="font-size: 500px">
+            <div id="set1" style="font-size: math; math-depth: 1"></div>
+          </div>
+          <div style="font-size: 200px">
+            <div id="set-2" style="font-size: math; math-depth: -2"></div>
+          </div>
+          <div style="font-size: 1000px">
+            <div id="set2" style="font-size: math; math-depth: 2"></div>
+          </div>
+          <div style="font-size: 30px">
+            <div id="set-9" style="font-size: math; math-depth: -9"></div>
+          </div>
+          <div style="font-size: 2000px">
+            <div id="set9" style="font-size: math; math-depth: 9"></div>
+          </div>
+        </div>
+      </div>
+        <div style="math-depth: 50">
+          <div style="font-size: 200px;">
+            <div id="set50" style="font-size: math; math-depth: 50"></div>
+          </div>
+          <div style="font-size: 71px;">
+            <div id="set49" style="font-size: math; math-depth: 49"></div>
+          </div>
+          <div style="font-size: 500px;">
+            <div id="set51" style="font-size: math; math-depth: 51"></div>
+          </div>
+          <div style="font-size: 200px;">
+            <div id="set48" style="font-size: math; math-depth: 48"></div>
+          </div>
+          <div style="font-size: 1000px;">
+            <div id="set52" style="font-size: math; math-depth: 52"></div>
+          </div>
+          <div style="font-size: 30px;">
+            <div id="set41" style="font-size: math; math-depth: 41"></div>
+          </div>
+          <div style="font-size: 2000px;">
+            <div id="set59" style="font-size: math; math-depth: 59"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative-ref.html
new file mode 100644
index 0000000000..d73e71f41c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-depth</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      .container {
+          /* Ahem font does not have a MATH table so the font-size scale factor
+             is always 0.71^{computed - inherited math script level} */
+          font: 100px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see two squares of side 100px.</p>
+    <div class="container">
+      <div>X</div>
+    </div>
+    <br/>
+    <div class="container">
+      <div>X</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative.html
new file mode 100644
index 0000000000..47b67aa8a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-depth</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="If specified font-size is not 'math' then math-depth does not affect the computed value of font-size.">
+    <link rel="match" href="math-script-level-003.tentative-ref.html">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      .container {
+          /* Ahem font does not have a MATH table so the font-size scale factor
+             is always 0.71^{computed - inherited math script level} */
+          font: 100px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see two squares of side 100px.</p>
+    <div class="container">
+      <!-- font-size: <length> -->
+      <div style="math-depth: 1; font-size: 100px;">X</div>
+    </div>
+    <br/>
+    <div class="container">
+      <!-- inherited font-size -->
+      <div style="math-depth: 1;">X</div>
+    </div>
+  </body>
+</html>
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>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-001.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-001.tentative-ref.html
new file mode 100644
index 0000000000..8540de4194
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-001.tentative-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-script-level: auto and math-style (reference)</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      .container {
+          /* Ahem font does not have a MATH table so the font-size scale factor
+             is always 0.71^{computed - inherited math script level} */
+          font: 100px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see a square of side 100 × 0.71^(0 − 0) = 100px.</p>
+    <div class="container">
+      <div style="font-size: 100px">X</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-001.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-001.tentative.html
new file mode 100644
index 0000000000..bb59dfdd17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-001.tentative.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-script-level: auto and math-style</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">
+    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property">
+    <meta name="assert" content="If specified font-size is math and specified math-depth is 'auto-add' and the inherited value of math-style is 'normal' then the computed math-depth is the one of its parent.">
+    <link rel="match" href="math-script-level-auto-and-math-style-001.tentative-ref.html">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      .container {
+          /* Ahem font does not have a MATH table so the font-size scale factor
+             is always 0.71^{computed - inherited math script level} */
+          font: 100px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see a square of side 100 × 0.71^(0 − 0) = 100px.</p>
+    <div class="container" style="math-style: normal;">
+      <div style="font-size: math; math-depth: auto-add">X</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-002.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-002.tentative-ref.html
new file mode 100644
index 0000000000..f3ddde49f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-002.tentative-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-script-level: auto and math-style (reference)</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      .container {
+          /* Ahem font does not have a MATH table so the font-size scale factor
+             is always 0.71^{computed - inherited math script level} */
+          font: 500px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see a square of side 500 × 0.71^(1 − 0) = 355px.</p>
+    <div class="container">
+      <div style="font-size: 355px">X</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-002.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-002.tentative.html
new file mode 100644
index 0000000000..21c912528a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-002.tentative.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-script-level: auto and math-style</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">
+    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property">
+    <meta name="assert" content="If the specified font-size is 'math' and specified math-depth is 'auto-add' and the inherited value of math-style is 'compact' then the computed math-depth is the one of its parent.">
+    <link rel="match" href="math-script-level-auto-and-math-style-002.tentative-ref.html">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      .container {
+          /* Ahem font does not have a MATH table so the font-size scale factor
+             is always 0.71^{computed - inherited math script level} */
+          font: 500px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see a square of side 500 × 0.71^(1 − 0) = 355px.</p>
+    <div class="container" style="math-style: compact;">
+      <div style="font-size: math; math-depth: auto-add">X</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-003.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-003.tentative-ref.html
new file mode 100644
index 0000000000..741da4f75c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-003.tentative-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-script-level: auto and math-style (reference)</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      .container {
+          /* Ahem font does not have a MATH table so the font-size scale factor
+             is always 0.71^{computed - inherited math script level} */
+          font: 500px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see a square of side 500px.</p>
+    <div class="container">
+      <div style="font-size: 500px">X</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-003.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-003.tentative.html
new file mode 100644
index 0000000000..5739a12bb5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-003.tentative.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-script-level: auto and math-style</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">
+    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property">
+    <meta name="assert" content="Initial value of math-style is 'normal'">
+    <link rel="match" href="math-script-level-auto-and-math-style-003.tentative-ref.html">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      .container {
+          /* Ahem font does not have a MATH table so the font-size scale factor
+             is always 0.71^{computed - inherited math script level} */
+          font: 500px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see a square of side 500px.</p>
+    <div class="container">
+      <div style="font-size: math; math-depth: auto-add">X</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-004.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-004.tentative-ref.html
new file mode 100644
index 0000000000..edda57e25e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-004.tentative-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-script-level: auto and math-style (reference)</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      .container {
+          /* Ahem font does not have a MATH table so the font-size scale factor
+             is always 0.71^{computed - inherited math script level} */
+          font: 500px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see a square of side 500px.</p>
+    <div class="container">
+      <div>
+        <div>
+          <div style="font-size: 500px">X</div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-004.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-004.tentative.html
new file mode 100644
index 0000000000..aed3bf9142
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-004.tentative.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-script-level: auto and math-style</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">
+    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property">
+    <meta name="assert" content="Initial value of math-style is 'normal'">
+    <link rel="match" href="math-script-level-auto-and-math-style-004.tentative-ref.html">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      .container {
+          /* Ahem font does not have a MATH table so the font-size scale factor
+             is always 0.71^{computed - inherited math script level} */
+          font: 500px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see a square of side 500px.</p>
+    <div class="container">
+      <div style="math-style: compact">
+        <div style="math-style: initial">
+          <div style="font-size: math; math-depth: auto-add">X</div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-005.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-005.tentative-ref.html
new file mode 100644
index 0000000000..3f1641e4a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-005.tentative-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-script-level: auto and math-style (reference)</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      .container {
+          /* Ahem font does not have a MATH table so the font-size scale factor
+             is always 0.71^{computed - inherited math script level} */
+          font: 100px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see a square of side 100 × 0.71^(0 − 0) = 100px.</p>
+    <div class="container">
+      <div>
+        <div>
+          <div>
+            <div style="font-size: 100px">X</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-005.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-005.tentative.html
new file mode 100644
index 0000000000..01b876b515
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-005.tentative.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-script-level: auto and math-style</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">
+    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property">
+    <meta name="assert" content="math-style is inherited">
+    <link rel="match" href="math-script-level-auto-and-math-style-005.tentative-ref.html">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      .container {
+          /* Ahem font does not have a MATH table so the font-size scale factor
+             is always 0.71^{computed - inherited math script level} */
+          font: 100px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see a square of side 100 × 0.71^(0 − 0) = 100px.</p>
+    <div class="container">
+      <div style="math-style: normal;">
+        <div>
+          <div>
+            <div style="font-size: math; math-depth: auto-add">X</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-font-size-clamping-001.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-font-size-clamping-001.tentative-ref.html
new file mode 100644
index 0000000000..cb5326ad71
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-font-size-clamping-001.tentative-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-script-level (reference)</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      .container {
+          /* Ahem font does not have a MATH table so the font-size scale factor
+             is always 0.71^{computed - inherited math script level} */
+          font: 12px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see a square of side 12px.</p>
+    <div class="container">
+      <div>
+        <div>X</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-font-size-clamping-001.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-font-size-clamping-001.tentative.html
new file mode 100644
index 0000000000..36b477aa32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-font-size-clamping-001.tentative.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-script-level clamping</title>
+    <meta charset="utf-8">
+    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3739">
+    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property">
+    <meta name="assert" content="Clamping due to browser's min font size only affects the used size.">
+    <link rel="match" href="math-script-level-font-size-clamping-001.tentative-ref.html">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      .container {
+          /* Ahem font does not have a MATH table so the font-size scale factor
+             is always 0.71^{computed - inherited math script level} */
+          font: 12px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see a square of side 12px.</p>
+    <div class="container"><!-- Initial size is 12px. -->
+      <div style="font-size: math; math-depth: add(8);"><!-- Size is 12*.71^8 = 0.7749042374949131 < 1px. -->
+        <div style="font-size: math; math-depth: add(-8);">X</div><!-- back to 12px. -->
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-style-001.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-style-001.tentative.html
new file mode 100644
index 0000000000..e63f28b191
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-style-001.tentative.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>math-style</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-style-property">
+    <meta name="assert" content="Check the resolved value of math-style">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script>
+      function mathStyle(id) {
+          return window.getComputedStyle(document.getElementById(id)).
+              getPropertyValue("math-style");
+      }
+      setup({ explicit_done: true });
+      window.addEventListener("load", function() {
+          test(function() {
+              assert_equals(mathStyle("initial"), "normal");
+          }, "Initial value of math-style");
+          test(function() {
+              assert_equals(mathStyle("specifiedInline"), "compact");
+              assert_equals(mathStyle("specifiedDisplay"), "normal");
+          }, "Specified values of math-style");
+          test(function() {
+              assert_equals(mathStyle("inheritedInline"), "compact");
+              assert_equals(mathStyle("inheritedDisplay"), "normal");
+          }, "Inherited values of math-style");
+          done();
+      });
+    </script>
+  </head>
+  <body>
+    <div id="log"></div>
+    <div id="initial"></div>
+    <div id="specifiedInline" style="math-style: compact">
+      <div id="inheritedInline"></div>
+    </div>
+    <div id="specifiedDisplay" style="math-style: normal">
+      <div id="inheritedDisplay"></div>
+    </div>
+  </body>
+</html>
-- 
cgit v1.2.3