From 6035b03add5e2a0dd29d24383f71490491260b4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= <fwang@igalia.com>
Date: Tue, 12 May 2020 15:54:04 +0200
Subject: [PATCH] Update some scriptlevel tests to match the new syntax.

math-script-level-001,003: No longer relevant since there is no computed
values of math-script-level (not a property anymore).

math-script-level-005: This does not correspond to anything in the spec.

math-script-level-002.tentative.html: tweak the test to work with the new syntax.

math-script-level-004.tentative.html: tweak the test to work with the new syntax. Remove the part about the computed values of math-script-level (not a property anymore)

https://github.com/mathml-refresh/mathml/issues/174
---
 .../math-script-level-001.tentative.html      |  65 ---
 .../math-script-level-002.tentative.html      | 113 ++---
 .../math-script-level-003.tentative.html      |  29 --
 .../math-script-level-004.tentative.html      | 387 +++++++++---------
 .../math-script-level-005.tentative-ref.html  |  19 -
 .../math-script-level-005.tentative.html      |  24 --
 6 files changed, 257 insertions(+), 380 deletions(-)
 delete mode 100644 css/css-fonts/math-script-level-and-math-style/math-script-level-001.tentative.html
 delete mode 100644 css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative.html
 delete mode 100644 css/css-fonts/math-script-level-and-math-style/math-script-level-005.tentative-ref.html
 delete mode 100644 css/css-fonts/math-script-level-and-math-style/math-script-level-005.tentative.html
diff --git a/css/css-fonts/math-script-level-and-math-style/math-script-level-001.tentative.html b/css/css-fonts/math-script-level-and-math-style/math-script-level-001.tentative.html
deleted file mode 100644
index 6a353a635b82d8..00000000000000
--- a/css/css-fonts/math-script-level-and-math-style/math-script-level-001.tentative.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!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>
-    <script>
-      function mathScriptLevel(id) {
-          return window.getComputedStyle(document.getElementById(id)).
-              getPropertyValue("math-script-level");
-      }
-      setup({ explicit_done: true });
-      window.addEventListener("load", function() {
-          test(function() {
-              assert_equals(mathScriptLevel("initial"), "0");
-              assert_equals(mathScriptLevel("initialFrom11"), "0");
-          }, "Initial value of math-script-level");
-          test(function() {
-              assert_equals(mathScriptLevel("inherited11"), "11");
-              assert_equals(mathScriptLevel("inherited-7"), "-7");
-          }, "Inherited values of math-script-level");
-          test(function() {
-              assert_equals(mathScriptLevel("inherited9specifiedAutoInline"), "10");
-              assert_equals(mathScriptLevel("inherited9specifiedAutoDisplay"), "9");
-          }, "Specified math-script-level: auto");
-          test(function() {
-              assert_equals(mathScriptLevel("specified11"), "11");
-              assert_equals(mathScriptLevel("specified-7"), "-7");
-          }, "Specified math-script-level: <integer>");
-          test(function() {
-              assert_equals(mathScriptLevel("specifiedAdd10From5"), "15");
-              assert_equals(mathScriptLevel("specifiedAdd-15From5"), "-10");
-          }, "Specified math-script-level: add(<integer>)");
-          done();
-      });
-    </script>
-  </head>
-  <body>
-    <div id="log"></div>
-    <div id="initial"></div>
-    <div id="specified11" style="math-script-level: 11">
-      <div id="initialFrom11" style="math-script-level: initial"></div>
-      <div id="inherited11"></div>
-    </div>
-    <div id="specified-7" style="math-script-level: -7">
-      <div id="inherited-7"></div>
-    </div>
-    <div style="math-script-level: 9">
-      <div style="math-style: inline">
-        <div id="inherited9specifiedAutoInline" style="math-script-level: auto" ></div>
-      </div>
-      <div style="math-style: display">
-        <div id="inherited9specifiedAutoDisplay" style="math-script-level: auto" ></div>
-      </div>
-    </div>
-    <div style="math-script-level: 5">
-      <div id="specifiedAdd10From5" style="math-script-level: add(10)"></div>
-      <div id="specifiedAdd-15From5" style="math-script-level: add(-15)"></div>
-    </div>
-  </body>
-</html>
diff --git a/css/css-fonts/math-script-level-and-math-style/math-script-level-002.tentative.html b/css/css-fonts/math-script-level-and-math-style/math-script-level-002.tentative.html
index 0abce02e72d368..1272f9559857f0 100644
--- a/css/css-fonts/math-script-level-and-math-style/math-script-level-002.tentative.html
+++ b/css/css-fonts/math-script-level-and-math-style/math-script-level-002.tentative.html
@@ -5,7 +5,8 @@
     <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="Verify effect of math-script-level auto | add(<integer>) | <integer>, starting from different values of math-script-level.">
+    <link rel="help" href="https://www.w3.org/TR/cssom-1/#serialize-a-css-component-value">
+    <meta name="assert" content="Verify effect of font-size: scriptlevel(auto) | scriptlevel(add(<integer>)) | scriptlevel(<integer>), starting from different values 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" />
@@ -17,6 +18,7 @@
       }
     </style>
     <script>
+      var epsilon = .1;
       function fontSize(id) {
           return parseFloat((/(.+)px/).exec(getComputedStyle(document.getElementById(id)).getPropertyValue("font-size"))[1]);
       }
@@ -25,11 +27,12 @@
           document.fonts.ready.then(function() {
               test(function() {
                   assert_equals(fontSize("autoDisplay"), 200);
-                  assert_equals(fontSize("autoInline"), 355);
+                  assert_equals(fontSize("autoInline"), 500 * .71);
               }, "auto");
               test(function() {
-                  assert_equals(fontSize("autoDisplayFrom7"), 200);
-                  assert_equals(fontSize("autoInlineFrom7"), 355);
+                  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);
@@ -78,111 +81,111 @@
       <div class="container">
         <div>
           <div style="font-size: 200px; math-style: display">
-            <div id="autoDisplay" style="math-script-level: auto"></div>
+            <div id="autoDisplay" style="font-size: scriptlevel(auto)"></div>
           </div>
           <div style="font-size: 500px; math-style: inline">
-            <div id="autoInline" style="math-script-level: auto"></div>
+            <div id="autoInline" style="font-size: scriptlevel(auto)"></div>
           </div>
         </div>
-        <div>
-          <div style="font-size: 200px; math-style: display; math-script-level: 7">
-            <div id="autoDisplayFrom7" style="math-script-level: auto"></div>
+        <div style="font-size: 2000px;">
+          <div style="math-style: display; font-size: scriptlevel(7)">
+            <div id="autoDisplayFrom7" style="font-size: scriptlevel(auto)"></div>
           </div>
-          <div style="font-size: 500px; math-style: inline; math-script-level: 7">
-            <div id="autoInlineFrom7" style="math-script-level: auto"></div>
+          <div style="math-style: inline; font-size: scriptlevel(7)">
+            <div id="autoInlineFrom7" style="font-size: scriptlevel(auto)"></div>
           </div>
         </div>
         <div>
           <div style="font-size: 200px">
-            <div id="add0" style="math-script-level: add(0)"></div>
+            <div id="add0" style="font-size: scriptlevel(add(0))"></div>
           </div>
           <div style="font-size: 71px">
-            <div id="add-1" style="math-script-level: add(-1)"></div>
+            <div id="add-1" style="font-size: scriptlevel(add(-1))"></div>
           </div>
           <div style="font-size: 500px">
-            <div id="add1" style="math-script-level: add(1)"></div>
+            <div id="add1" style="font-size: scriptlevel(add(1))"></div>
           </div>
           <div style="font-size: 200px">
-            <div id="add-2" style="math-script-level: add(-2)"></div>
+            <div id="add-2" style="font-size: scriptlevel(add(-2))"></div>
           </div>
           <div style="font-size: 1000px">
-            <div id="add2" style="math-script-level: add(2)"></div>
+            <div id="add2" style="font-size: scriptlevel(add(2))"></div>
           </div>
           <div style="font-size: 30px">
-            <div id="add-9" style="math-script-level: add(-9)"></div>
+            <div id="add-9" style="font-size: scriptlevel(add(-9))"></div>
           </div>
           <div style="font-size: 2000px">
-            <div id="add9" style="math-script-level: add(9)"></div>
+            <div id="add9" style="font-size: scriptlevel(add(9))"></div>
           </div>
         </div>
-        <div>
-          <div style="font-size: 200px; math-script-level: 3;">
-            <div id="add0from3" style="math-script-level: add(0)"></div>
+        <div style="font-size: scriptlevel(3);">
+          <div style="font-size: 200px;">
+            <div id="add0from3" style="font-size: scriptlevel(add(0))"></div>
           </div>
-          <div style="font-size: 71px; math-script-level: 3;">
-            <div id="add-1from3" style="math-script-level: add(-1)"></div>
+          <div style="font-size: 71px;">
+            <div id="add-1from3" style="font-size: scriptlevel(add(-1))"></div>
           </div>
-          <div style="font-size: 500px; math-script-level: 3;">
-            <div id="add1from3" style="math-script-level: add(1)"></div>
+          <div style="font-size: 500px;">
+            <div id="add1from3" style="font-size: scriptlevel(add(1))"></div>
           </div>
-          <div style="font-size: 200px; math-script-level: 3;">
-            <div id="add-2from3" style="math-script-level: add(-2)"></div>
+          <div style="font-size: 200px;">
+            <div id="add-2from3" style="font-size: scriptlevel(add(-2))"></div>
           </div>
-          <div style="font-size: 1000px; math-script-level: 3;">
-            <div id="add2from3" style="math-script-level: add(2)"></div>
+          <div style="font-size: 1000px;">
+            <div id="add2from3" style="font-size: scriptlevel(add(2))"></div>
           </div>
-          <div style="font-size: 30px; math-script-level: 3;">
-            <div id="add-9from3" style="math-script-level: add(-9)"></div>
+          <div style="font-size: 30px;">
+            <div id="add-9from3" style="font-size: scriptlevel(add(-9))"></div>
           </div>
-          <div style="font-size: 2000px; math-script-level: 3;">
-            <div id="add9from3" style="math-script-level: add(9)"></div>
+          <div style="font-size: 2000px;">
+            <div id="add9from3" style="font-size: scriptlevel(add(9))"></div>
           </div>
         </div>
         <div>
           <div style="font-size: 200px">
-            <div id="set0" style="math-script-level: 0"></div>
+            <div id="set0" style="font-size: scriptlevel(0)"></div>
           </div>
           <div style="font-size: 71px">
-            <div id="set-1" style="math-script-level: -1"></div>
+            <div id="set-1" style="font-size: scriptlevel(-1)"></div>
           </div>
           <div style="font-size: 500px">
-            <div id="set1" style="math-script-level: 1"></div>
+            <div id="set1" style="font-size: scriptlevel(1)"></div>
           </div>
           <div style="font-size: 200px">
-            <div id="set-2" style="math-script-level: -2"></div>
+            <div id="set-2" style="font-size: scriptlevel(-2)"></div>
           </div>
           <div style="font-size: 1000px">
-            <div id="set2" style="math-script-level: 2"></div>
+            <div id="set2" style="font-size: scriptlevel(2)"></div>
           </div>
           <div style="font-size: 30px">
-            <div id="set-9" style="math-script-level: -9"></div>
+            <div id="set-9" style="font-size: scriptlevel(-9)"></div>
           </div>
           <div style="font-size: 2000px">
-            <div id="set9" style="math-script-level: 9"></div>
+            <div id="set9" style="font-size: scriptlevel(9)"></div>
           </div>
         </div>
       </div>
-        <div>
-          <div style="font-size: 200px; math-script-level: 50">
-            <div id="set50" style="math-script-level: 50"></div>
+        <div style="font-size: scriptlevel(50)">
+          <div style="font-size: 200px;">
+            <div id="set50" style="font-size: scriptlevel(50)"></div>
           </div>
-          <div style="font-size: 71px; math-script-level: 50">
-            <div id="set49" style="math-script-level: 49"></div>
+          <div style="font-size: 71px;">
+            <div id="set49" style="font-size: scriptlevel(49)"></div>
           </div>
-          <div style="font-size: 500px; math-script-level: 50">
-            <div id="set51" style="math-script-level: 51"></div>
+          <div style="font-size: 500px;">
+            <div id="set51" style="font-size: scriptlevel(51)"></div>
           </div>
-          <div style="font-size: 200px; math-script-level: 50">
-            <div id="set48" style="math-script-level: 48"></div>
+          <div style="font-size: 200px;">
+            <div id="set48" style="font-size: scriptlevel(48)"></div>
           </div>
-          <div style="font-size: 1000px; math-script-level: 50">
-            <div id="set52" style="math-script-level: 52"></div>
+          <div style="font-size: 1000px;">
+            <div id="set52" style="font-size: scriptlevel(52)"></div>
           </div>
-          <div style="font-size: 30px; math-script-level: 50">
-            <div id="set41" style="math-script-level: 41"></div>
+          <div style="font-size: 30px;">
+            <div id="set41" style="font-size: scriptlevel(41)"></div>
           </div>
-          <div style="font-size: 2000px; math-script-level: 50">
-            <div id="set59" style="math-script-level: 59"></div>
+          <div style="font-size: 2000px;">
+            <div id="set59" style="font-size: scriptlevel(59)"></div>
           </div>
         </div>
       </div>
diff --git a/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative.html b/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative.html
deleted file mode 100644
index f5bf9982e27f0f..00000000000000
--- a/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!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="If font-size is specified or if the specified value of math-script-level is initial then math-script-level 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" style="math-script-level: 3;">
-      <div style="math-script-level: 9; font-size: 100px;">X</div>
-    </div>
-    <br/>
-    <div class="container" style="math-script-level: 3;">
-      <div style="math-script-level: initial;">X</div>
-    </div>
-  </body>
-</html>
diff --git a/css/css-fonts/math-script-level-and-math-style/math-script-level-004.tentative.html b/css/css-fonts/math-script-level-and-math-style/math-script-level-004.tentative.html
index cb82472a0c0af7..a938bd4d01194a 100644
--- a/css/css-fonts/math-script-level-and-math-style/math-script-level-004.tentative.html
+++ b/css/css-fonts/math-script-level-and-math-style/math-script-level-004.tentative.html
@@ -37,13 +37,13 @@
       }
       .big { font-size: 3000px; }
       .small { font-size: 150px; }
-      .level-3 { math-script-level: -3; }
-      .level-1 { math-script-level: -1; }
-      .level0 { math-script-level: 0; }
-      .level1 { math-script-level: 1; }
-      .level2 { math-script-level: 2; }
-      .level3 { math-script-level: 3; }
-      .level5 { math-script-level: 5; }
+      .level-3 { font-size: scriptlevel(-3); }
+      .level-1 { font-size: scriptlevel(-1); }
+      .level0 { font-size: scriptlevel(0); }
+      .level1 { font-size: scriptlevel(1); }
+      .level2 { font-size: scriptlevel(2); }
+      .level3 { font-size: scriptlevel(3); }
+      .level5 { font-size: scriptlevel(5); }
     </style>
     <script>
       const big = 3000;
@@ -53,10 +53,6 @@
         // Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
         requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
       });
-      function mathScriptLevel(element) {
-          return window.getComputedStyle(element).
-              getPropertyValue("math-script-level");
-      }
       function fontSize(element) {
           return parseFloat((/(.+)px/).exec(getComputedStyle(element).
                                             getPropertyValue("font-size"))[1]);
@@ -66,7 +62,6 @@
           for (var level in sizes) {
               var divs = container.getElementsByClassName(`level${level}`);
               for (var i = 0; i < divs.length; i++) {
-                  assert_equals(mathScriptLevel(divs[i]), level);
                   assert_approx_equals(fontSize(divs[i]), sizes[level], 1, `Wrong font-size (id=${id} ; level=${level} ; i=${i})`);
               }
           }
@@ -166,28 +161,30 @@
   <body>
     <div id="log"></div>
 
-    <div class="level-3 big" id="scale80-40-scaledown">
-      <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 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>
@@ -195,28 +192,30 @@
       </div>
     </div>
 
-    <div class="level5 small" id="scale80-40-scaleup">
-      <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 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>
@@ -224,28 +223,30 @@
       </div>
     </div>
 
-    <div class="level-3 big" id="scale0-40-scaledown">
-      <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 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>
@@ -253,28 +254,30 @@
       </div>
     </div>
 
-    <div class="level5 small" id="scale0-40-scaleup">
-      <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 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>
@@ -282,28 +285,30 @@
       </div>
     </div>
 
-    <div class="level-3 big" id="scale80-0-scaledown">
-      <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 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>
@@ -311,28 +316,30 @@
       </div>
     </div>
 
-    <div class="level5 small" id="scale80-0-scaleup">
-      <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 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>
@@ -340,28 +347,30 @@
       </div>
     </div>
 
-    <div class="level-3 big" id="default-scaledown">
-      <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 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>
@@ -369,28 +378,30 @@
       </div>
     </div>
 
-    <div class="level5 small" id="default-scaleup">
-      <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 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>
diff --git a/css/css-fonts/math-script-level-and-math-style/math-script-level-005.tentative-ref.html b/css/css-fonts/math-script-level-and-math-style/math-script-level-005.tentative-ref.html
deleted file mode 100644
index f0538695a9f5eb..00000000000000
--- a/css/css-fonts/math-script-level-and-math-style/math-script-level-005.tentative-ref.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>math-script-level</title>
-    <meta charset="utf-8">
-  </head>
-  </head>
-  <body>
-    <p>Test passes if you see two lines of monospace text rendered with the same font-size:</p>
-    <div style="font-size: xx-large; font-family: serif">
-      <div style="font-family: monospace;">
-        <div>level 0</div>
-      </div>
-      <div style="font-family: monospace;">
-        <div>level 1</div>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/css/css-fonts/math-script-level-and-math-style/math-script-level-005.tentative.html b/css/css-fonts/math-script-level-and-math-style/math-script-level-005.tentative.html
deleted file mode 100644
index 34860d7a5c2734..00000000000000
--- a/css/css-fonts/math-script-level-and-math-style/math-script-level-005.tentative.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!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://github.com/w3c/csswg-drafts/issues/3906">
-    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property">
-    <meta name="assert" content="If the computed font-size is changed because of font-family change, math-script-level does not affect the computed value of font-size.">
-    <link rel="match" href="math-script-level-005.tentative-ref.html">
-  </head>
-  </head>
-  <body>
-    <p>Test passes if you see two lines of monospace text rendered with the same font-size:</p>
-    <div style="font-size: xx-large; font-family: serif">
-      <div style="font-family: monospace;">
-        <div>level 0</div>
-      </div>
-      <div style="math-script-level: 1; font-family: monospace;">
-        <div>level 1</div>
-      </div>
-    </div>
-  </body>
-</html>
