Bug 1908069 - Extend and tweak MathML padding/border/margin tests. r=…

…emilio

This patch adds reftests to verify how padding/border/margin values on
an msqrt, mroot and mfrac elements affect the offsets of their painted
bars and radicals.

In addition, it includes a couple of tweaks:

* padding-border-margin-003.html: Wrap the stretchy op in an mrow to
  work around Firefox's bug 236963.

* margin-003.html: Use backstick characters for template literals.

* border-002, padding-002, margin-003.html: These tests rely on
  compareSpaceWithAndWithoutStyle. Use `<math display="block">` to work
  around Firefox's bug 1908913. To get more reliable sizes, force empty
  mrow and token elements to contain some text and use ahem fonts. Use
  mtext instead of mi so they are not transformed to unicode italic.
  Finally, relax a bit the error tolerance.

Differential Revision: https://phabricator.services.mozilla.com/D216684

testing/web-platform/meta/mathml/relations/css-styling/padding-border-margin/border-002.html.ini

@@ -56,9 +56,6 @@
   [Border properties on munderover]
     expected: FAIL
 
-  [Border properties on mtable]
-    expected: FAIL
-
   [Border properties on semantics]
     expected: FAIL
 
@@ -122,9 +119,6 @@
   [Border properties on semantics (rtl)]
     expected: FAIL
 
-  [Border properties on mtable (rtl)]
-    expected: FAIL
-
   [Border properties on menclose (rtl)]
     expected: FAIL
 

testing/web-platform/meta/mathml/relations/css-styling/padding-border-margin/padding-002.html.ini

@@ -47,9 +47,6 @@
   [Padding properties on msubsup]
     expected: FAIL
 
-  [Padding properties on mtable]
-    expected: FAIL
-
   [Padding properties on msub]
     expected: FAIL
 
@@ -131,9 +128,6 @@
   [Padding properties on mphantom (rtl)]
     expected: FAIL
 
-  [Padding properties on mtable (rtl)]
-    expected: FAIL
-
   [Padding properties on mfrac (rtl)]
     expected: FAIL
 

testing/web-platform/meta/mathml/relations/css-styling/padding-border-margin/padding-border-margin-005.html.ini

@@ -0,0 +1,2 @@
+[padding-border-margin-005.html]
+  expected: FAIL

testing/web-platform/meta/mathml/relations/css-styling/padding-border-margin/padding-border-margin-006.html.ini

@@ -0,0 +1,2 @@
+[padding-border-margin-006.html]
+  expected: FAIL

testing/web-platform/meta/mathml/relations/css-styling/padding-border-margin/padding-border-margin-007.html.ini

@@ -0,0 +1,2 @@
+[padding-border-margin-007.html]
+  expected: FAIL

testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-002.html

@@ -5,16 +5,23 @@
 <title>border</title>
 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
 <meta name="assert" content="Verify that border is taken into account.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  math {
+    font: 25px/1 Ahem;
+  }
+</style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/mathml/support/feature-detection.js"></script>
 <script src="/mathml/support/mathml-fragments.js"></script>
 <script src="/mathml/support/box-comparison.js"></script>
+<script src="/mathml/support/fonts.js"></script>
 <script>
-  var epsilon = 1;
+  var epsilon = 2;
 
   setup({ explicit_done: true });
-  window.addEventListener("load", runTests);
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
 
   function runTests() {
 

testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-002.html

@@ -5,16 +5,23 @@
 <title>margin</title>
 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
 <meta name="assert" content="Verify that margin is taken into account.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  math {
+    font: 25px/1 Ahem;
+  }
+</style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/mathml/support/feature-detection.js"></script>
 <script src="/mathml/support/mathml-fragments.js"></script>
 <script src="/mathml/support/box-comparison.js"></script>
+<script src="/mathml/support/fonts.js"></script>
 <script>
-  var epsilon = 1;
+  var epsilon = 2;
 
   setup({ explicit_done: true });
-  window.addEventListener("load", runTests);
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
 
   function runTests() {
 

testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-003.html

@@ -64,8 +64,8 @@
             for (var i = 0; i < element.children.length; i++) {
                 var childBox = element.children[i].getBoundingClientRect();
                 var referenceChildBox = reference.children[i].getBoundingClientRect();
-                assert_approx_equals(childBox.width + marginLeft + marginRight, referenceChildBox.width, epsilon, "inline size (child ${i})");
-                assert_approx_equals(childBox.height + marginTop + marginBottom, referenceChildBox.height, epsilon, "block size (child ${i})");
+                assert_approx_equals(childBox.width + marginLeft + marginRight, referenceChildBox.width, epsilon, `inline size (child ${i})`);
+                assert_approx_equals(childBox.height + marginTop + marginBottom, referenceChildBox.height, epsilon, `block size (child ${i})`);
 
                 assert_approx_equals(childBox.left - marginLeft - elementBox.left,
                                      referenceChildBox.left - referenceBox.left,

testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-002.html

@@ -5,16 +5,23 @@
 <title>padding</title>
 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
 <meta name="assert" content="Verify that padding is taken into account.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  math {
+    font: 25px/1 Ahem;
+  }
+</style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/mathml/support/feature-detection.js"></script>
 <script src="/mathml/support/mathml-fragments.js"></script>
 <script src="/mathml/support/box-comparison.js"></script>
+<script src="/mathml/support/fonts.js"></script>
 <script>
-  var epsilon = 1;
+  var epsilon = 2;
 
   setup({ explicit_done: true });
-  window.addEventListener("load", runTests);
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
 
   function runTests() {
 

testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003.html

@@ -25,8 +25,10 @@
     surrounded by a 10px pink margin.</p>
   <div style="background: pink; position: absolute; left: 10px; top: 4em;">
     <math>
-      <mspace height="750px" depth="750px"/>
-      <mo lspace="0" rspace="0" style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px; color: cyan;">⥜</mo>
+      <mrow>
+        <mspace height="750px" depth="750px"/>
+        <mo lspace="0" rspace="0" style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px; color: cyan;">⥜</mo>
+      </mrow>
     </math>
   </div>
 </body>

testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-005-ref.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8"/>
+<title>Padding/border/margin on msqrt (reference)</title>
+<style>
+  @font-face {
+    font-family: RadicalFont;
+    src: url("/fonts/math/radical-kernafterdegreeminus5000-rulethickness1000.woff");
+  }
+  msqrt {
+    font-family: RadicalFont;
+  }
+</style>
+<math>
+  <mrow style="border: 30px solid blue; padding: 20px;">
+    <msqrt style="color: gray">
+      <mspace width="120px" height="60px" depth="60px"></mspace>
+    </msqrt>
+  </mrow>
+</math>

testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-005.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8"/>
+<title>Padding/border/margin on msqrt</title>
+<link rel="match" href="padding-border-margin-005-ref.html"/>
+<meta name="assert" content="Verify visual how padding/border/margin on an msqrt element affect the position of the painted radical symbol.">
+<style>
+  @font-face {
+    font-family: RadicalFont;
+    src: url("/fonts/math/radical-kernafterdegreeminus5000-rulethickness1000.woff");
+  }
+  msqrt {
+    font-family: RadicalFont;
+  }
+</style>
+<math>
+  <mrow>
+    <msqrt style="border: 30px solid blue; padding: 20px; color: gray">
+      <mspace width="100px" height="50px" depth="50px" style="margin: 10px"></mspace>
+    </msqrt>
+  </mrow>
+</math>

testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-006-ref.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8"/>
+<title>Padding/border/margin on mroot (reference)</title>
+<style>
+  @font-face {
+    font-family: RadicalFont;
+    src: url("/fonts/math/radical-kernafterdegreeminus5000-rulethickness1000.woff");
+  }
+  mroot {
+    font-family: RadicalFont;
+  }
+</style>
+<math>
+  <mrow style="border: 30px solid blue; padding: 20px;">
+    <mroot style="color: gray">
+      <mspace width="120px" height="60px" depth="60px"></mspace>
+      <mspace width="30px" height="15px" depth="15px"></mspace>
+    </mroot>
+  </mrow>
+</math>

testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-006.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8"/>
+<title>Padding/border/margin on mroot</title>
+<link rel="match" href="padding-border-margin-006-ref.html"/>
+<meta name="assert" content="Verify visual how padding/border/margin on an mroot element affect the position of the painted radical symbol.">
+<style>
+  @font-face {
+    font-family: RadicalFont;
+    src: url("/fonts/math/radical-kernafterdegreeminus5000-rulethickness1000.woff");
+  }
+  mroot {
+    font-family: RadicalFont;
+  }
+</style>
+<math>
+  <mrow>
+    <mroot style="border: 30px solid blue; padding: 20px; color: gray">
+      <mspace width="100px" height="50px" depth="50px" style="margin: 10px"></mspace>
+      <mspace width="20px" height="10px" depth="10px" style="margin: 5px"></mspace>
+    </mroot>
+  </mrow>
+</math>

testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-007-ref.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8"/>
+<title>Padding/border/margin on mfrac (reference)</title>
+<style>
+  @font-face {
+    font-family: FractionFont;
+    src: url("/fonts/math/fraction-rulethickness10000.woff");
+  }
+  mfrac {
+    font-family: FractionFont;
+  }
+</style>
+<math>
+  <mrow style="border: 30px solid blue; padding: 20px;">
+    <mfrac style="padding: 0; color: gray">
+      <mspace width="120px" height="60px" depth="60px"></mspace>
+      <mspace width="120px" height="60px" depth="60px"></mspace>
+    </mfrac>
+  </mrow>
+</math>

testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-007.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8"/>
+<title>Padding/border/margin on mfrac</title>
+<link rel="match" href="padding-border-margin-007-ref.html"/>
+<meta name="assert" content="Verify visual how padding/border/margin on an mfrac element affect the position of the painted fraction bar.">
+<style>
+  @font-face {
+    font-family: FractionFont;
+    src: url("/fonts/math/fraction-rulethickness10000.woff");
+  }
+  mfrac {
+    font-family: FractionFont;
+  }
+</style>
+<math>
+  <mrow>
+    <mfrac style="border: 30px solid blue; padding: 20px; color: gray">
+      <mspace width="100px" height="50px" depth="50px" style="margin: 10px"></mspace>
+      <mspace width="100px" height="50px" depth="50px" style="margin: 10px"></mspace>
+    </mfrac>
+  </mrow>
+</math>

testing/web-platform/tests/mathml/support/box-comparison.js

@@ -23,8 +23,8 @@ function compareSpaceWithAndWithoutStyle(tag, style, parentStyle, direction) {
     if (!direction)
       direction = "ltr";
     document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\
-<div style="display: inline-block"><math><mrow dir="${direction}">${MathMLFragments[tag]}</mrow></math></div>\
-<div style="display: inline-block"><math><mrow dir="${direction}">${MathMLFragments[tag]}</mrow></math></div>\
+<div style="display: inline-block"><math display="block"><mrow dir="${direction}">${MathMLFragments[tag]}</mrow></math></div>\
+<div style="display: inline-block"><math display="block"><mrow dir="${direction}">${MathMLFragments[tag]}</mrow></math></div>\
 </div>`);
     var div = document.body.lastElementChild;
 
@@ -36,6 +36,7 @@ function compareSpaceWithAndWithoutStyle(tag, style, parentStyle, direction) {
     var styleElement = FragmentHelper.element(styleMath);
     styleElement.setAttribute("style", style);
     var styleChild = FragmentHelper.forceNonEmptyElement(styleElement);
+    FragmentHelper.forceNonEmptyDescendants(styleElement);
     var styleMathBox = styleMath.getBoundingClientRect();
     var styleElementBox = styleElement.getBoundingClientRect();
     var styleChildBox = styleChild.getBoundingClientRect();
@@ -45,6 +46,7 @@ function compareSpaceWithAndWithoutStyle(tag, style, parentStyle, direction) {
     var noStyleMath = noStyleDiv.firstElementChild;
     var noStyleElement = FragmentHelper.element(noStyleMath);
     var noStyleChild = FragmentHelper.forceNonEmptyElement(noStyleElement);
+    FragmentHelper.forceNonEmptyDescendants(noStyleElement);
     var noStyleMathBox = noStyleMath.getBoundingClientRect();
     var noStyleElementBox = noStyleElement.getBoundingClientRect();
     var noStyleChildBox = noStyleChild.getBoundingClientRect();

testing/web-platform/tests/mathml/support/mathml-fragments.js

@@ -156,7 +156,7 @@ var FragmentHelper = {
             return element.appendChild(el);
         }
         if (element.classList.contains("mathml-container") || allowInvalid) {
-            var el = this.createElement("mi");
+            var el = this.createElement("mtext");
             el.textContent = "a";
             return element.appendChild(el);
         }