Bug 1646312 [wpt PR 24185] - Add MathML tests for dynamically adding/removing children, including …, a=testonly
authorFrédéric Wang <fwang@igalia.com>
Mon, 22 Jun 2020 10:42:53 +0000
changeset 536829 b117ea72405e889a0e9ea4bf7232498085941bd0
parent 536828 44d8c7a40ac024bdbdfcbba3d8fd4e799cfd7615
child 536830 44e745f12a23b24f76307d635854f8d42cced469
push id37533
push userdluca@mozilla.com
push dateTue, 23 Jun 2020 21:38:40 +0000
treeherdermozilla-central@d48aa0f0aa0b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1646312, 24185
milestone79.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 1646312 [wpt PR 24185] - Add MathML tests for dynamically adding/removing children, including …, a=testonly Automatic update from web-platform-tests Add MathML tests for dynamically adding/removing children, including OOF. (#24185) https://github.com/mathml-refresh/mathml/issues/57 -- wpt-commits: 490e3894d4735b8f8771c3ead6c944e35659e901 wpt-pr: 24185
testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-002.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-002.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Dynamic childlist of MathML elements</title>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#adjust-space-around-content-mpadded">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#dom-and-javascript">
+<meta name="assert" content="Dynamically modify DOM tree of some MathML elements by adding or removing children.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script>
+  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
+      // mrow at even position.
+      for (let i = 0; i < childCount; i++) {
+          if (i % 2) {
+              let mspace = FragmentHelper.createElement("mspace");
+              mspace.setAttribute("width", `10px`);
+              mspace.setAttribute("height", `${10*(i+1)}px`);
+              mspace.setAttribute("style", `background: black;`);
+              element.appendChild(mspace);
+          } else {
+              let mrow = FragmentHelper.createElement("mrow");
+              mrow.setAttribute("style", "position: absolute");
+              element.appendChild(mrow);
+          }
+      }
+      math.appendChild(element);
+      return math;
+  }
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", function() {
+
+      for (tag in MathMLFragments) {
+          if (!FragmentHelper.isValidChildOfMrow(tag))
+              continue;
+
+          document.body.insertAdjacentHTML("beforeend", `<div style='display: none; background: pink;'>${tag}: <div></div><div></div><div></div></div>`);
+
+          let container = document.body.lastElementChild;
+          let referenceDiv = container.children[0];
+          const maxChild = 10;
+          const epsilon = 1;
+
+          // Create the references for different number of children as well
+          // as the element that will get the children added / removed.
+          for (let i = 0; i <= maxChild; i++)
+              referenceDiv.append(generateMathForTag(tag, i));
+          let fullReferenceMath = referenceDiv.lastElementChild;
+          let fullReferenceTag = fullReferenceMath.firstElementChild;
+
+          let removeChildrenMath = generateMathForTag(tag, maxChild);
+          container.children[1].append(removeChildrenMath);
+          let removeChildrenTag = removeChildrenMath.firstElementChild;
+
+          let appendChildrenMath = generateMathForTag(tag, 0);
+          container.children[2].append(appendChildrenMath);
+          let appendChildrenTag = appendChildrenMath.firstElementChild;
+
+          // Make content visible after the DOM is ready so that the layout
+          // only happens now.
+          container.style.display = "block";
+
+          test(function() {
+              assert_true(MathMLFeatureDetection.has_mspace());
+              assert_true(MathMLFeatureDetection[`has_${tag}`]());
+
+              for (let i = 0; i < maxChild; i++) {
+                  // append and remove children.
+                  appendChildrenTag.append(fullReferenceTag.children[i].cloneNode(true));
+                  removeChildrenTag.removeChild(removeChildrenTag.lastElementChild);
+
+                  // force layout so we're sure what we're testing against
+                  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`);
+              }
+
+              // Hide back the div after successful testing.
+              container.style.display = "none";
+
+          }, `Appending and removing children to ${tag}`);
+      }
+
+      done();
+  });
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>