not-participating-to-parent-layout.html (3245B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Elements not participating to the layout of their parent</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> 7 <meta name="assert" content="Verify that display: none and out-of-flow positioned elements do not participate to layout of their parent."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/mathml/support/feature-detection.js"></script> 11 <script src="/mathml/support/layout-comparison.js"></script> 12 <script src="/mathml/support/mathml-fragments.js"></script> 13 <script> 14 var epsilon = 1; 15 16 setup({ explicit_done: true }); 17 window.addEventListener("load", runTests); 18 19 function runTests() { 20 21 for (tag in MathMLFragments) { 22 if (!FragmentHelper.isValidChildOfMrow(tag) || 23 FragmentHelper.isEmpty(tag)) 24 continue; 25 ["display: none", 26 "display: contents", 27 "position: absolute", 28 "position: fixed" 29 ].forEach(style => { 30 document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\ 31 <div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\ 32 <div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\ 33 </div>`); 34 var div = document.body.lastElementChild; 35 36 var elementContainer = div.firstElementChild; 37 var elementContainerWidth = elementContainer.getBoundingClientRect().width; 38 var element = FragmentHelper.element(elementContainer); 39 if (style === "display: contents" && 40 !element.classList.contains("mathml-container")) { 41 // A "display: contents" MathML child is not participating to 42 // parent layout because its computed style is "display: none". 43 // If we cannot append a MathML child then skip that test. 44 return; 45 } 46 FragmentHelper.forceNonEmptyElement(element); 47 var allowInvalid = true; 48 var child = FragmentHelper.appendChild(element, allowInvalid); 49 child.setAttribute("style", style); 50 51 var referenceContainer = div.lastElementChild; 52 var referenceContainerWidth = referenceContainer.getBoundingClientRect().width; 53 var reference = FragmentHelper.element(referenceContainer); 54 FragmentHelper.forceNonEmptyElement(reference); 55 56 test(function() { 57 assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); 58 assert_approx_equals(elementContainerWidth, referenceContainerWidth, epsilon); 59 }, `${tag} preferred width calculation is not affected by children with "${style}" style`); 60 61 test(function() { 62 assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); 63 compareLayout(element, reference, epsilon); 64 }, `${tag} layout is not affected by children with "${style}" style`); 65 66 div.style = "display: none;"; // Hide the div after measurement. 67 }); 68 } 69 70 done(); 71 } 72 </script> 73 </head> 74 <body> 75 <div id="log"></div> 76 </body> 77 </html>