display-2.html (6161B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Verify that one can override the layout of MathML elements with the CSS display property</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> 7 <meta name="assert" content="Verify that one can override the display of a MathML element."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/mathml/support/layout-comparison.js"></script> 11 <script src="/mathml/support/mathml-fragments.js"></script> 12 <script src="/mathml/support/fonts.js"></script> 13 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 14 <style> 15 math { 16 font-family: inherit; 17 } 18 mfrac { 19 padding: 0; 20 } 21 </style> 22 <script> 23 const Xsize = 25; 24 const templates = { 25 "block display": `<math style="display: block;">XXX</math>`, 26 "block display with contrained width": `<math style="display: block; width: ${2*Xsize}px;">XXX</math>`, 27 "list display inside display block": `<math style="display: block">\ 28 <mmultiscripts style="display: list-item;">X</mmultiscripts>\ 29 <maction style="display: list-item;">X</maction>\ 30 <mpadded style="display: list-item;">X</mpadded>\ 31 <msqrt style="display: list-item;">X</msqrt>\ 32 <mroot style="display: list-item;">X</mroot>\ 33 <mtext style="display: list-item;">X</mtext>\ 34 </math>`, 35 "inline display": `<math style="display: inline;">XXX</math>`, 36 "inline-block display": `<math style="display: inline-block">XXX</math>`, 37 "table display (math)": `<math style="display: table">\ 38 <mfrac style='display: table-row'>\ 39 <msub style='display: table-cell'>X</msub>\ 40 <msup style='display: table-cell'>X</msup>\ 41 <msubsup style='display: table-cell'>X</msubsup>\ 42 </mfrac>\ 43 <mtable style='display: table-row'>\ 44 <munder style='display: table-cell'>X</munder>\ 45 <mover style='display: table-cell'>X</mover>\ 46 <munderover style='display: table-cell'>X</munderover>\ 47 </mtable>\ 48 </math>`, 49 "table display (mrow)": `<math display="block">\ 50 <mrow style="display: table">\ 51 <mfrac style='display: table-row'>\ 52 <msub style='display: table-cell'>X</msub>\ 53 <msup style='display: table-cell'>X</msup>\ 54 <msubsup style='display: table-cell'>X</msubsup>\ 55 </mfrac>\ 56 <mtable style='display: table-row'>\ 57 <munder style='display: table-cell'>X</munder>\ 58 <mover style='display: table-cell'>X</mover>\ 59 <munderover style='display: table-cell'>X</munderover>\ 60 </mtable>\ 61 </mrow></math>`, 62 "inline-table display (math)": `<math style="display: inline-table">\ 63 <mfrac style='display: table-row'>\ 64 <msub style='display: table-cell'>X</msub>\ 65 <msup style='display: table-cell'>X</msup>\ 66 <msubsup style='display: table-cell'>X</msubsup>\ 67 </mfrac>\ 68 <mtable style='display: table-row'>\ 69 <munder style='display: table-cell'>X</munder>\ 70 <mover style='display: table-cell'>X</mover>\ 71 <munderover style='display: table-cell'>X</munderover>\ 72 </mtable>\ 73 </math>`, 74 "inline-table display (mrow)": `<math display="block">\ 75 <mrow style="display: inline-table">\ 76 <mfrac style='display: table-row'>\ 77 <msub style='display: table-cell'>X</msub>\ 78 <msup style='display: table-cell'>X</msup>\ 79 <msubsup style='display: table-cell'>X</msubsup>\ 80 </mfrac>\ 81 <mtable style='display: table-row'>\ 82 <munder style='display: table-cell'>X</munder>\ 83 <mover style='display: table-cell'>X</mover>\ 84 <munderover style='display: table-cell'>X</munderover>\ 85 </mtable>\ 86 </mrow></math>`, 87 "flexbox display (math)": `<math style="display: flex; flex-direction: column;">XXX</math>`, 88 "flexbox display (mrow)": `<math display="block"><mrow style="display: flex; flex-direction: column;">XXX</mrow></math>`, 89 "grid display (math)": `<math style="display: grid; grid-gap: 2px; grid-template-columns: ${Xsize}px ${Xsize}px ${Xsize}px;>">XXXXXXXXX</math>`, 90 "grid display (mrow)": `<math display="block"><mrow style="display: grid; grid-gap: 2px; grid-template-columns: ${Xsize}px ${Xsize}px ${Xsize}px;>">XXXXXXXXX</mrow></math>`, 91 "ruby display (math)": `<math style="display: ruby;">\ 92 <mrow style="display: ruby-base;">X</mrow>\ 93 <mrow style="display: ruby-text">XX</mrow>\ 94 </math>`, 95 "ruby display (mrow)": `<math display="block"><mrow style="display: ruby;">\ 96 <mrow style="display: ruby-base;">X</mrow>\ 97 <mrow style="display: ruby-text">XX</mrow>\ 98 </mrow></math>`, 99 "block display with column width (math)": `<math style="display: block; column-width: ${2*Xsize}px">\ 100 <mrow>XXXX</mrow><mrow>XXXX</mrow><mrow>XXXX</mrow>\ 101 </math>`, 102 "block display with column width (mrow)": `<math style="display: block"><mrow style="display: block; column-width: ${2*Xsize}px">\ 103 <mrow>XXXX</mrow><mrow>XXXX</mrow><mrow>XXXX</mrow>\ 104 </mrow></math>`, 105 }; 106 107 setup({ explicit_done: true }); 108 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 109 110 function runTests() { 111 112 for (let key in templates) { 113 if (!templates.hasOwnProperty(key)) 114 continue; 115 let mathtest = templates[key]. 116 replace(/X/g, `<mspace style="display: inline-block; width: ${Xsize}px; height: ${Xsize}px; background: black"></mspace>`); 117 let reference = mathtest. 118 replace(/maction|math|mfrac|mmultiscripts|mover|mover|mpadded|mrow|mspace|msubsup|msub|msup|mtable|munderover|munder|msqrt|mroot|mtext/g, "div"); 119 document.body.insertAdjacentHTML("beforeend", `<div style="font: 20px/1 Ahem; position: absolute;">\ 120 <div><span>${key}:</span>${mathtest}</div>\ 121 <div><span>${key}:</span>${reference}</div>\ 122 </div>`); 123 let div = document.body.lastElementChild; 124 let elementDiv = div.firstElementChild; 125 let referenceDiv = div.lastElementChild; 126 127 test(function() { 128 const epsilon = 1; 129 compareLayout(elementDiv, referenceDiv, epsilon); 130 }, `${key}`); 131 132 div.style = "display: none;"; // Hide the div after measurement. 133 } 134 135 done(); 136 } 137 </script> 138 </head> 139 <body> 140 <div id="log"></div> 141 </body> 142 </html>