Bug 1647337 [wpt PR 24287] - [mathml] Improve mathml/relations/html5-tree/dynamic-childlist-00*.html results, a=testonly

Automatic update from web-platform-tests
[mathml] Improve mathml/relations/html5-tree/dynamic-childlist-00*.html results

These tests add children to mspace, but mspace does not allow children. Nevertheless the internal framework, using Element.getBoundingClientRect, assert based on these disallowed children which get bounding boxes that are empty rects.
To fix this, special case mspace and only check size and that the children are empty and positioned at (0, 0).

Bug: 6606
Change-Id: Ic78720547f7e4909cf63ceeb92b3bfbf22d7e15b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2256212
Commit-Queue: Rob Buis <rbuis@igalia.com>
Reviewed-by: Frédéric Wang <fwang@igalia.com>
Cr-Commit-Position: refs/heads/master@{#781296}

--

wpt-commits: a3c3821c5083d2fda1d00fa2a2fc577a2e2ec66e
wpt-pr: 24287

testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-001.html

@@ -47,7 +47,13 @@
               let reference = document.getElementById(`${element.getAttribute("data-reference")}`);
               forceNumberOfChildren(element, reference.children.length);
               const epsilon = 1;
-              compareLayout(element, reference, epsilon);
+              if (element.tagName == "mspace") {
+                  compareSize(element, reference, epsilon);
+                  childrenHaveEmptyBoundingClientRects(element);
+                  childrenHaveEmptyBoundingClientRects(reference);
+              } else {
+                  compareLayout(element, reference, epsilon);
+              }
           }, `${element.getAttribute("data-title")}`);
       });
       done();

testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-002.html

@@ -15,7 +15,7 @@
   function generateMathForTag(tag, childCount) {
       let math = FragmentHelper.createElement("math");
       let element = FragmentHelper.createElement(tag);
-      // Add the children with sizes of different sizes at odd positions and OOF
+      // Add the children with different sizes at odd positions and OOF
       // mrow at even position.
       for (let i = 0; i < childCount; i++) {
           if (i % 2) {
@@ -80,10 +80,17 @@
                   container.getBoundingClientRect();
 
                   let appendCount = appendChildrenTag.children.length;
-                  compareLayout(appendChildrenTag, referenceDiv.children[appendCount].firstElementChild, epsilon, `appending ${appendCount}-th child`);
-
                   let removeCount = removeChildrenTag.children.length;
-                  compareLayout(removeChildrenTag, referenceDiv.children[removeCount].firstElementChild, epsilon, `removing ${appendCount + 1}-th child`);
+                  if (tag == "mspace") {
+                      compareSize(appendChildrenTag, referenceDiv.children[appendCount].firstElementChild, epsilon);
+                      childrenHaveEmptyBoundingClientRects(appendChildrenTag);
+                      childrenHaveEmptyBoundingClientRects(referenceDiv.children[appendCount].firstElementChild);
+                      childrenHaveEmptyBoundingClientRects(removeChildrenTag);
+                      childrenHaveEmptyBoundingClientRects(referenceDiv.children[removeCount].firstElementChild);
+                  } else {
+                      compareLayout(appendChildrenTag, referenceDiv.children[appendCount].firstElementChild, epsilon, `appending ${appendCount}-th child`);
+                      compareLayout(removeChildrenTag, referenceDiv.children[removeCount].firstElementChild, epsilon, `removing ${appendCount + 1}-th child`);
+                  }
               }
 
               // Hide back the div after successful testing.

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

@@ -37,6 +37,13 @@ function compareSize(element, reference, epsilon) {
     }
 }
 
+function childrenHaveEmptyBoundingClientRects(element) {
+    Array.from(element.children).forEach(child => {
+        var childBox = child.getBoundingClientRect();
+        assert_true(childBox.left == 0 && childBox.right == 0 && childBox.top == 0 && childBox.bottom == 0);
+    })
+}
+
 function participateToParentLayout(child) {
     var style = window.getComputedStyle(child);
     return style.getPropertyValue("display") !== "none" &&