dynamic-childlist-002.html (5340B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Dynamic childlist of MathML elements</title> 6 <script src="/mathml/support/mathml-fragments.js"></script> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> 9 <meta name="assert" content="Dynamically modify DOM tree of some MathML elements by adding or removing children."> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/mathml/support/feature-detection.js"></script> 13 <script src="/mathml/support/layout-comparison.js"></script> 14 <script> 15 function generateMathForTag(tag, childCount) { 16 let math = FragmentHelper.createElement("math"); 17 let element = FragmentHelper.createElement(tag); 18 // Add the children with different sizes at odd positions and OOF 19 // mrow at even position. 20 for (let i = 0; i < childCount; i++) { 21 if (i % 2) { 22 let mspace = FragmentHelper.createElement("mspace"); 23 mspace.setAttribute("width", `10px`); 24 mspace.setAttribute("height", `${10*(i+1)}px`); 25 mspace.setAttribute("style", `background: black;`); 26 element.appendChild(mspace); 27 } else { 28 let mrow = FragmentHelper.createElement("mrow"); 29 mrow.setAttribute("style", "position: absolute"); 30 element.appendChild(mrow); 31 } 32 } 33 if (FragmentHelper.isValidChildOfMrow(tag)) { 34 math.appendChild(element); 35 } else if (tag === "mtd") { 36 let mtr = FragmentHelper.createElement("mtr"); 37 mtr.appendChild(element); 38 let mtable = FragmentHelper.createElement("mtable"); 39 mtable.appendChild(mtr); 40 math.appendChild(mtable); 41 } else { 42 throw `Invalid argument: ${tag}`; 43 } 44 return math; 45 } 46 47 setup({ explicit_done: true }); 48 window.addEventListener("load", function() { 49 50 for (tag in MathMLFragments) { 51 if (!FragmentHelper.isValidChildOfMrow(tag) || tag === "mtd") 52 continue; 53 54 document.body.insertAdjacentHTML("beforeend", `<div style='display: none; background: pink;'>${tag}: <div></div><div></div><div></div></div>`); 55 56 let container = document.body.lastElementChild; 57 let referenceDiv = container.children[0]; 58 const maxChild = 10; 59 const epsilon = 1; 60 61 // Create the references for different number of children as well 62 // as the element that will get the children added / removed. 63 for (let i = 0; i <= maxChild; i++) 64 referenceDiv.append(generateMathForTag(tag, i)); 65 let fullReferenceMath = referenceDiv.lastElementChild; 66 let fullReferenceTag = fullReferenceMath.firstElementChild; 67 68 let removeChildrenMath = generateMathForTag(tag, maxChild); 69 container.children[1].append(removeChildrenMath); 70 let removeChildrenTag = removeChildrenMath.firstElementChild; 71 72 let appendChildrenMath = generateMathForTag(tag, 0); 73 container.children[2].append(appendChildrenMath); 74 let appendChildrenTag = appendChildrenMath.firstElementChild; 75 76 // Make content visible after the DOM is ready so that the layout 77 // only happens now. 78 container.style.display = "block"; 79 80 test(function() { 81 assert_true(MathMLFeatureDetection.has_mspace()); 82 assert_true(MathMLFeatureDetection[`has_${tag}`]()); 83 84 for (let i = 0; i < maxChild; i++) { 85 // append and remove children. 86 appendChildrenTag.append(fullReferenceTag.children[i].cloneNode(true)); 87 removeChildrenTag.removeChild(removeChildrenTag.lastElementChild); 88 89 // force layout so we're sure what we're testing against 90 container.getBoundingClientRect(); 91 92 let appendCount = appendChildrenTag.children.length; 93 let removeCount = removeChildrenTag.children.length; 94 if (tag == "mspace") { 95 compareSize(appendChildrenTag, referenceDiv.children[appendCount].firstElementChild, epsilon); 96 childrenHaveEmptyBoundingClientRects(appendChildrenTag); 97 childrenHaveEmptyBoundingClientRects(referenceDiv.children[appendCount].firstElementChild); 98 childrenHaveEmptyBoundingClientRects(removeChildrenTag); 99 childrenHaveEmptyBoundingClientRects(referenceDiv.children[removeCount].firstElementChild); 100 } else { 101 compareLayout(appendChildrenTag, referenceDiv.children[appendCount].firstElementChild, epsilon, `appending ${appendCount}-th child`); 102 compareLayout(removeChildrenTag, referenceDiv.children[removeCount].firstElementChild, epsilon, `removing ${appendCount + 1}-th child`); 103 } 104 } 105 106 // Hide back the div after successful testing. 107 container.style.display = "none"; 108 109 }, `Appending and removing children to ${tag}`); 110 } 111 112 done(); 113 }); 114 </script> 115 </head> 116 <body> 117 <div id="log"></div> 118 </body> 119 </html>