Bug 1637245 [wpt PR 23530] - Update some scriptlevel tests to match the new syntax., a=testonly
☠☠ backed out by 267cd03f6f5c ☠ ☠
authorFrédéric Wang <fwang@igalia.com>
Wed, 13 May 2020 10:01:45 +0000
changeset 530143 3c4aacfb190a25639074c930310e7d2299a2e88e
parent 530142 525bb6234d13d458de36dabc34d34e2bcd6f8f55
child 530144 abc7724f7d2464b4def075c8c4c297cbdcc1ee5d
push id116003
push userwptsync@mozilla.com
push dateThu, 14 May 2020 19:04:08 +0000
treeherderautoland@7baa72e0d62c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1637245, 23530
milestone78.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1637245 [wpt PR 23530] - Update some scriptlevel tests to match the new syntax., a=testonly Automatic update from web-platform-tests Update some scriptlevel tests to match the new syntax. (#23530) 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 -- wpt-commits: fa5b7ba3fee5536abd64b7064320c8fd8da62dd6 wpt-pr: 23530
testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-001.tentative.html
testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-002.tentative.html
testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative.html
testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-004.tentative.html
testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-005.tentative-ref.html
testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-005.tentative.html
deleted file mode 100644
--- a/testing/web-platform/tests/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>
--- 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
@@ -1,40 +1,43 @@
 <!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="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" />
     <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"), 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);
                   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);
@@ -73,119 +76,119 @@
     </script>
   </head>
   <body>
     <div id="log"></div>
     <div>
       <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>
     </div>
   </body>
 </html>
deleted file mode 100644
--- a/testing/web-platform/tests/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>
--- 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
@@ -32,46 +32,41 @@
           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 { 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;
       const small = 150;
       setup({ explicit_done: true });
       window.addEventListener("load", function() {
         // 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]);
       }
       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_equals(mathScriptLevel(divs[i]), level);
                   assert_approx_equals(fontSize(divs[i]), sizes[level], 1, `Wrong font-size (id=${id} ; level=${level} ; i=${i})`);
               }
           }
       }
       function runTests() {
 
           test(function() {
               CheckFontSizes("scale80-40-scaledown", {
@@ -161,241 +156,257 @@
 
           done();
       }
     </script>
   </head>
   <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>
         </div>
       </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>
         </div>
       </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>
         </div>
       </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>
         </div>
       </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>
         </div>
       </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>
         </div>
       </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>
         </div>
       </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>
         </div>
       </div>
     </div>
 
   </body>
deleted file mode 100644
--- a/testing/web-platform/tests/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>
deleted file mode 100644
--- a/testing/web-platform/tests/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>