size-containment-001.tentative.html (2622B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>MathML and size containment</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/mathml/support/feature-detection.js"></script> 10 <script src="/mathml/support/mathml-fragments.js"></script> 11 <style> 12 /* Revert style specified in the UA style sheet that changes box size. */ 13 merror { border: 0; } 14 mfrac { padding: 0; } 15 </style> 16 <script> 17 setup({ explicit_done: true }); 18 window.addEventListener("load", runTests); 19 20 function runTests() { 21 22 for (tag in MathMLFragments) { 23 if (!FragmentHelper.isValidChildOfMrow(tag) || 24 FragmentHelper.isEmpty(tag)) 25 continue; 26 27 // TODO(https://github.com/w3c/mathml-core/issues/199): Check/decide how 28 // size containment behave for these cases: 29 // - table layout. 30 // - radical layout. 31 // - contain-intrinsic-block-size. 32 // - operators width special drawing (stretchy/largop). 33 if (tag == "mroot" || tag == "msqrt" || tag == "mtable") { 34 continue; 35 } 36 37 document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\ 38 <div style="display: inline-block;"><math>${MathMLFragments[tag]}</math></div>\ 39 </div>`); 40 let div = document.body.lastElementChild; 41 42 let elementContainer = div.firstElementChild; 43 let element = FragmentHelper.element(elementContainer); 44 FragmentHelper.forceNonEmptyDescendants(element); 45 46 const style = `contain: size; contain-intrinsic-inline-size: 111px;`; 47 element.setAttribute("style", style) 48 49 if (tag === "mo") { 50 element.setAttribute("lspace", "0"); 51 element.setAttribute("rspace", "0"); 52 } 53 54 const elementContainerWidth = elementContainer.getBoundingClientRect().width; 55 const elementBox = element.getBoundingClientRect(); 56 57 test(function() { 58 assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); 59 assert_equals(elementContainerWidth, 111); 60 }, `intrinsic size of ${tag} with ${style}`); 61 62 test(function() { 63 assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); 64 assert_equals(elementBox.width, 111); 65 }, `inline-size of ${tag} with ${style}`); 66 67 div.style = "display: none;"; // Hide the div after measurement. 68 } 69 70 done(); 71 } 72 </script> 73 </head> 74 <body> 75 <div id="log"></div> 76 </body> 77 </html>