mrow-fallback-002.html (2349B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test mrow fallback for some MathML elements (preferred logical widths)</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#script-and-limit-schemata"> 7 <meta name="assert" content="Verify that invalid markup fallbacks to mrow behaviour when computing preferred logical widths."> 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/fonts.js"></script> 12 <script src="/mathml/support/layout-comparison.js"></script> 13 <script src="/mathml/support/mathml-fragments.js"></script> 14 <script src="/mathml/support/invalid-markup.js"></script> 15 <style> 16 /* Revert style specified in the UA style sheet that changes box size. */ 17 mfrac { padding-inline: 0; } 18 </style> 19 <script> 20 setup({ explicit_done: true }); 21 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 22 23 function wrapShrink(el) { 24 let wrapper = document.createElement("div"); 25 let math = FragmentHelper.createElement("math"); 26 wrapper.style.display = "inline-block"; 27 math.appendChild(el); 28 wrapper.appendChild(math); 29 return wrapper; 30 } 31 32 function runTests() { 33 let container = document.getElementById("container"); 34 let invalidMarkup = generateInvalidMarkup(); 35 const epsilon = 1; 36 37 for (let math of invalidMarkup.children) { 38 let element = math.firstElementChild; 39 let reference = element.nextElementSibling; 40 let description = element.dataset.description; 41 42 // generateInvalidMarkup() puts both the element and the reference in the same <math>. 43 // To test preferred logical widths, we need to separate them out under different divs. 44 let elementWrapper = wrapShrink(element); 45 let referenceWrapper = wrapShrink(reference); 46 container.append(elementWrapper, referenceWrapper); 47 test(function() { 48 assert_approx_equals(elementWrapper.getBoundingClientRect().width, referenceWrapper.getBoundingClientRect().width, epsilon); 49 }, `Invalid <${element.tagName}> should fallback to mrow behaviour when computing preferred logical widths (${description})`); 50 } 51 52 done(); 53 } 54 </script> 55 </head> 56 <body> 57 <div id="log"></div> 58 <div id="container"></div> 59 </body> 60 </html>