[mathml] Update WPT tests that assume CSS width/height are ignored

Math WG decided that width/height should be taken into account on all
MathML elements [1]. This CL updates the following legacy tests that
assume the properties are actually ignored [2]:

* `ignored-properties-001.html`: This test was checking the properties
  are ignored. Remove these checks.

* `width-height-001.html`: This test was checking the elements keep the
  same dimension with or without specifying width, height, inline-size
  or block-size. Change it to actually verify it does take the specified
  dimensions.

* `display-1.html`: This test was checking that the content of a
   `<math display=block>` with a specified width is horizontally
   centered inside a parent div. Now that the width is no longer ignored,
   instead check that it is horizontally centered within the `math`
   element.

More tests will be added in follow-up CLs to further check the effect
of specifying width/height on elements.

[1] w3c/mathml-core#75
[2] web-platform-tests/interop#197 (comment)

Bug: 6606
Change-Id: I6ff46b7589f27cc16ba81db126a4ceaa3a31ef61

mathml/relations/css-styling/ignored-properties-001.html

@@ -29,9 +29,6 @@
               "align-content: end; justify-content: end;",
               "align-self: end; justify-self: end;",
           ];
-          if (tag !== "mtable") {
-              ignoredProperties.push("width: 100px !important; height: 200px !important;");
-          }
 
           ignoredProperties.forEach(ignoredStyle => {
               document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\

mathml/relations/css-styling/width-height-001.html

@@ -10,6 +10,11 @@
 <script src="/mathml/support/feature-detection.js"></script>
 <script src="/mathml/support/mathml-fragments.js"></script>
 <script src="/mathml/support/box-comparison.js"></script>
+<style>
+  /* Revert style specified in the UA style sheet that changes box size. */
+  merror { border: 0; }
+  mfrac { padding: 0; }
+</style>
 <script>
   var epsilon = 1;
 
@@ -22,25 +27,29 @@
         if (!FragmentHelper.isValidChildOfMrow(tag) || tag === "mtable")
             continue;
 
+        document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;"><math><mrow>${MathMLFragments[tag]}</mrow></math></div>`);
+        let div = document.body.lastElementChild;
+        let element = FragmentHelper.element(div.firstElementChild);
+
         test(function() {
             assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
-            var style = "width: 500px; height: 400px;";
-            var s = compareSizeWithAndWithoutStyle(tag, style);
-            assert_approx_equals(s.width_delta, 0, epsilon, "width");
-            assert_approx_equals(s.height_delta, 0, epsilon, "height");
-            assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
-            assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
+            var style = `width: 500px; height: 400px;`;
+            element.setAttribute("style", style);
+            let box = element.getBoundingClientRect();
+            assert_approx_equals(box.width, 500, epsilon, "width");
+            assert_approx_equals(box.height, 400, epsilon, "height");
         }, `width and height properties on ${tag}`);
 
         test(function() {
             assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
-            var style = "inline-size: 500px; block-size: 400px;";
-            var s = compareSizeWithAndWithoutStyle(tag, style);
-            assert_approx_equals(s.width_delta, 0, epsilon, "width");
-            assert_approx_equals(s.height_delta, 0, epsilon, "height");
-            assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
-            assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
+            var style = `inline-size: 600px; block-size: 700px;`;
+            element.setAttribute("style", style);
+            let box = element.getBoundingClientRect();
+            assert_approx_equals(box.width, 600, epsilon, "width");
+            assert_approx_equals(box.height, 700, epsilon, "height");
         }, `inline-size and block-size properties on ${tag}`);
+
+        div.style = "display: none;"; // Hide the div after measurement.
     }
 
     done();

mathml/relations/html5-tree/display-1.html

@@ -63,13 +63,16 @@
           var after_block_and_specified_width = getBox("after_block_and_specified_width");
           test(function() {
               assert_true(MathMLFeatureDetection.has_mspace());
-              assert_approx_equals(before_block_and_specified_width.left, content.left, 1,
+              let math = getBox("math_with_specified_width");
+              assert_approx_equals(before_block_and_specified_width.left, math.left, 1,
                                    "content before must be left aligned");
+              assert_approx_equals(math.width, 100, 1,
+                                   "math uses specified width.");
               assert_approx_equals((mspace_width.left + mspace_width.right) / 2,
-                                   (content.left + content.right) / 2,
+                                   (math.left + math.right) / 2,
                                    1,
                                    "math must be centered.");
-              assert_approx_equals(after_block_and_specified_width.left, content.left, 1,
+              assert_approx_equals(after_block_and_specified_width.left, math.left, 1,
                                    "content after must be left aligned");
               assert_less_than_equal(before_block_and_specified_width.bottom, mspace_width.top,
                                      "new line before math");
@@ -154,7 +157,7 @@
     <span id="after_inline" class="square"></span>
     <br/>
     <span id="before_block_and_specified_width" class="square"></span>
-    <math display="block" style="width:100px"><mspace id="mspace_width" width="50px" height="50px"/></math>
+    <math display="block" id="math_with_specified_width" style="background: pink; width:100px"><mspace id="mspace_width" width="50px" height="50px"/></math>
     <span id="after_block_and_specified_width" class="square"></span>
     <br/>
     <div>