Tweak some subsup tests to make them less strict (web-platform-tests#…

…25871)

These tests are sometimes failing on firefox locally, because they
depend on the font used. Also the rules when a MATH table is not
used are not clear yet and spec and implementations differ. This
commit tweaks subsup tests so that:

- They use Ahem rather than system fonts.
- Error is relaxed.
- position of sup/sup script is checked to be above/below the middle
  of the base than close to the top/bottom of the base.

mathml/presentation-markup/scripts/subsup-1.html

@@ -8,15 +8,15 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/mathml/support/feature-detection.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
 <style>
   math, mspace {
-    font-size: 10px;
+    font: 25px/1 Ahem;
   }
 </style>
 <script>
-  /* This test does not use any specific fonts and so the exact rules are not
-  specified precisely. We assume reasonable values for script shifts and
-  spacing. */
+  /* This test does not use a font with a MATH table and does not verify layout
+     rules in a very strict way. */
 
   function getBox(aId) {
     var box = document.getElementById(aId).getBoundingClientRect();
@@ -25,7 +25,7 @@
   }
 
   setup({ explicit_done: true });
-  window.addEventListener("load", runTests);
+  window.addEventListener("load", () => { document.fonts.ready.then(runTests); });
 
   function runTests() {
     test(function() {
@@ -57,17 +57,16 @@
     test(function() {
       assert_true(MathMLFeatureDetection.has_mspace());
 
-      var e = 3;
-      assert_approx_equals(getBox("msubSub").middle, getBox("msubBase").bottom, e, "msub: script is placed at the bottom of the base");
-      assert_approx_equals(getBox("msupSup").middle, getBox("msupBase").top, e, "msup: script is placed at the top of the base");
-      assert_approx_equals(getBox("msubsupSub").middle, getBox("msubsupBase").bottom, e, "msubsup: script is placed at the bottom of the base");
-      assert_approx_equals(getBox("msubsupSup").middle, getBox("msubsupBase").top, e, "msubsup: script is placed at the top of the base");
+      assert_greater_than(getBox("msubSub").middle, getBox("msubBase").middle, "msub: script is placed at the bottom of the base");
+      assert_less_than(getBox("msupSup").middle, getBox("msupBase").middle, "msup: script is placed at the top of the base");
+      assert_greater_than(getBox("msubsupSub").middle, getBox("msubsupBase").middle, "msubsup: script is placed at the bottom of the base");
+      assert_less_than(getBox("msubsupSup").middle, getBox("msubsupBase").middle, "msubsup: script is placed at the top of the base");
     }, "Vertical position of scripts");
 
     test(function() {
       assert_true(MathMLFeatureDetection.has_mspace());
 
-      var e = 3;
+      var e = 5;
       assert_approx_equals(getBox("msub").width, getBox("msubSub").right - getBox("msubBase").left, e, "msub: width is determined by the left/right sides of base/script (+ some space after script)");
       assert_approx_equals(getBox("msup").width, getBox("msupSup").right - getBox("msupBase").left, e, "msup: width is determined by the left/right sides of base/script (+ some space after script)");
       assert_approx_equals(getBox("msubsup").width, Math.max(getBox("msubsupSub").right, getBox("msubsupSup").right) - getBox("msubsupBase").left, e, "msubsup: width is determined by the left/right sides of base/scripts (+ some space after script)");
@@ -81,7 +80,6 @@
       assert_greater_than_equal(getBox("msup").height, getBox("msupBase").height, e, "msup: height is at least the one of the base");
       assert_greater_than_equal(getBox("msubsup").height, getBox("msubsupBase").height, e, "msubsup: height is at least the one of the base");
 
-      e = 3;
       assert_approx_equals(getBox("msub").height, Math.max(getBox("msubSub").bottom, getBox("msubBase").bottom) - getBox("msubBase").top, e, "msub: height is determined by the top/bottom sides of base/scripts");
       assert_approx_equals(getBox("msup").height, getBox("msupBase").bottom - Math.min(getBox("msupSup").top, getBox("msupBase").top), e, "msup: height is determined by the top/bottom sides of base/scripts");
       assert_approx_equals(getBox("msubsup").height, Math.max(getBox("msubSub").bottom, getBox("msubBase").bottom) - Math.min(getBox("msupSup").top, getBox("msupBase").top), e, "msubsup: height is determined by the top/bottom sides of base/scripts");

mathml/presentation-markup/scripts/subsup-2.html

@@ -8,15 +8,15 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/mathml/support/feature-detection.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
 <style>
   math, mspace {
-    font-size: 10px;
+    font: 25px/1 Ahem;
   }
 </style>
 <script>
-  /* This test does not use any specific fonts and so the exact rules are not
-  specified precisely. We assume reasonable values for script shifts and
-  spacing. */
+  /* This test does not use a font with a MATH table and does not verify layout
+     rules in a very strict way. */
 
   function getBox(aId) {
     var box = document.getElementById(aId).getBoundingClientRect();
@@ -25,7 +25,7 @@
   }
 
   setup({ explicit_done: true });
-  window.addEventListener("load", runTests);
+  window.addEventListener("load", () => { document.fonts.ready.then(runTests); });
 
   function runTests() {
     test(function() {
@@ -71,16 +71,15 @@
     test(function() {
       assert_true(MathMLFeatureDetection.has_mspace());
 
-      var e = 3;
-      assert_approx_equals(getBox("msubSub").middle, getBox("msubBase").bottom, e, "script is placed at the bottom of the base");
-      assert_approx_equals(getBox("msupSup").middle, getBox("msupBase").top, e, "script is placed at the top of the base");
-      assert_approx_equals(getBox("msubsupSub").middle, getBox("msubsupBase").bottom, e, "script is placed at the bottom of the base");
-      assert_approx_equals(getBox("msubsupSup").middle, getBox("msubsupBase").top, e, "script is placed at the top of the base");
-
-      assert_approx_equals(getBox("premsubSub").middle, getBox("premsubBase").bottom, e, "script is placed at the bottom of the base");
-      assert_approx_equals(getBox("premsupSup").middle, getBox("premsupBase").top, e, "script is placed at the top of the base");
-      assert_approx_equals(getBox("premsubsupSub").middle, getBox("premsubsupBase").bottom, e, "script is placed at the bottom of the base");
-      assert_approx_equals(getBox("premsubsupSup").middle, getBox("premsubsupBase").top, e, "script is placed at the top of the base");
+      assert_greater_than(getBox("msubSub").middle, getBox("msubBase").middle, "script is placed at the bottom of the base");
+      assert_less_than(getBox("msupSup").middle, getBox("msupBase").middle, "script is placed at the top of the base");
+      assert_greater_than(getBox("msubsupSub").middle, getBox("msubsupBase").middle, "script is placed at the bottom of the base");
+      assert_less_than(getBox("msubsupSup").middle, getBox("msubsupBase").middle, "script is placed at the top of the base");
+
+      assert_greater_than(getBox("premsubSub").middle, getBox("premsubBase").middle, "script is placed at the bottom of the base");
+      assert_less_than(getBox("premsupSup").middle, getBox("premsupBase").middle, "script is placed at the top of the base");
+      assert_greater_than(getBox("premsubsupSub").middle, getBox("premsubsupBase").middle, "script is placed at the bottom of the base");
+      assert_less_than(getBox("premsubsupSup").middle, getBox("premsubsupBase").middle, "script is placed at the top of the base");
     }, "Vertical position of scripts");
 
     test(function() {
@@ -99,15 +98,14 @@
     test(function() {
       assert_true(MathMLFeatureDetection.has_mspace());
 
-      var e = 1;
+      var e = 5;
       assert_greater_than_equal(getBox("msub").height, getBox("msubBase").height, e, "height is at least the one of the base");
       assert_greater_than_equal(getBox("msup").height, getBox("msupBase").height, e, "height is at least the one of the base");
       assert_greater_than_equal(getBox("msubsup").height, getBox("msubsupBase").height, e, "height is at least the one of the base");
       assert_greater_than_equal(getBox("premsub").height, getBox("premsubBase").height, e, "height is at least the one of the base");
       assert_greater_than_equal(getBox("premsup").height, getBox("premsupBase").height, e, "height is at least the one of the base");
   assert_greater_than_equal(getBox("premsubsup").height, getBox("premsubsupBase").height, e, "height is at least the one of the base");
 
-      e = 3;
       assert_approx_equals(getBox("msub").height, Math.max(getBox("msubSub").bottom, getBox("msubBase").bottom) - getBox("msubBase").top, e, "msub height is determined by the top/bottom sides of base/scripts");
       assert_approx_equals(getBox("msup").height, getBox("msupBase").bottom - Math.min(getBox("msupSup").top, getBox("msupBase").top), e, "msup height is determined by the top/bottom sides of base/scripts");
       assert_approx_equals(getBox("msubsup").height, Math.max(getBox("msubSub").bottom, getBox("msubBase").bottom) - Math.min(getBox("msupSup").top, getBox("msupBase").top), e, "msubsup height is determined by the top/bottom sides of base/scripts");

mathml/presentation-markup/scripts/subsup-3.html

@@ -8,15 +8,15 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/mathml/support/feature-detection.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
 <style>
   math, mspace {
-    font-size: 10px;
+    font: 25px/1 Ahem;
   }
 </style>
 <script>
-  /* This test does not use any specific fonts and so the exact rules are not
-  specified precisely. We assume reasonable values for script shifts and
-  spacing. */
+  /* This test does not use a font with a MATH table and does not verify layout
+     rules in a very strict way. */
 
   function getBox(aId) {
     var box = document.getElementById(aId).getBoundingClientRect();
@@ -25,7 +25,7 @@
   }
 
   setup({ explicit_done: true });
-  window.addEventListener("load", runTests);
+  window.addEventListener("load", () => { document.fonts.ready.then(runTests); });
 
   function runTests() {
     test(function() {