diff options
Diffstat (limited to 'testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-002.html')
-rw-r--r-- | testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-002.html | 119 |
1 files changed, 119 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-002.html b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-002.html new file mode 100644 index 0000000000..099401eacc --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-002.html @@ -0,0 +1,119 @@ +<!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://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> +<link rel="help" href="https://w3c.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 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); + } + } + if (FragmentHelper.isValidChildOfMrow(tag)) { + math.appendChild(element); + } else if (tag === "mtd") { + let mtr = FragmentHelper.createElement("mtr"); + mtr.appendChild(element); + let mtable = FragmentHelper.createElement("mtable"); + mtable.appendChild(mtr); + math.appendChild(mtable); + } else { + throw `Invalid argument: ${tag}`; + } + return math; + } + + setup({ explicit_done: true }); + window.addEventListener("load", function() { + + for (tag in MathMLFragments) { + if (!FragmentHelper.isValidChildOfMrow(tag) || tag === "mtd") + 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; + let removeCount = removeChildrenTag.children.length; + 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. + container.style.display = "none"; + + }, `Appending and removing children to ${tag}`); + } + + done(); + }); +</script> +</head> +<body> + <div id="log"></div> +</body> +</html> |