mrow-preferred-width.html (5581B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Preferred width of mrow-like elements</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#making-sub-expressions-invisible-mphantom"> 9 <link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element"> 10 <link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> 11 <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> 12 <meta name="assert" content="The preferred width of mrow-like elements is the sum of children's width, modulo extra spacing."> 13 <script src="/mathml/support/feature-detection.js"></script> 14 <script src="/resources/testharness.js"></script> 15 <script src="/resources/testharnessreport.js"></script> 16 <script type="text/javascript"> 17 setup({ explicit_done: true }); 18 window.addEventListener("load", runTests); 19 function runTests() 20 { 21 var epsilon = 1; 22 23 function MrowWidthFromChildren(mrow) { 24 var first = mrow.firstElementChild.getBoundingClientRect(); 25 var last = mrow.lastElementChild.getBoundingClientRect(); 26 return last.right - first.left; 27 } 28 29 test(function() { 30 assert_true(MathMLFeatureDetection.has_mspace()); 31 32 Array.from(document.getElementById("mspace-tests").getElementsByClassName("shrink-wrap")).forEach((container) => { 33 var containerWidth = container.getBoundingClientRect().width; 34 var mrow = container.getElementsByClassName("mrow-like")[0]; 35 var mrowWidth = MrowWidthFromChildren(mrow); 36 assert_approx_equals(containerWidth, mrowWidth, epsilon, mrow.tagName); 37 }); 38 }, "Preferred width of mrow with mspace children"); 39 40 test(function() { 41 assert_true(MathMLFeatureDetection.has_operator_spacing()); 42 43 Array.from(document.getElementById("tokens-tests").getElementsByClassName("shrink-wrap")).forEach((container) => { 44 var containerWidth = container.getBoundingClientRect().width; 45 var mrow = container.getElementsByClassName("mrow-like")[0]; 46 var mrowWidth = MrowWidthFromChildren(mrow); 47 assert_approx_equals(containerWidth, mrowWidth, epsilon, mrow.tagName); 48 }); 49 }, "Preferred width of mrow with mn and mo children"); 50 51 done(); 52 } 53 </script> 54 <style> 55 div.shrink-wrap { 56 background: yellow; 57 display: inline-block; 58 margin-top: 5px; 59 padding-top: 5px; 60 } 61 </style> 62 </head> 63 <body> 64 <div id="log"></div> 65 <div id="mspace-tests"> 66 <div><div class="shrink-wrap"> 67 <math><mrow class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></mrow></math> 68 </div></div> 69 <div> 70 <div class="shrink-wrap"> 71 <math><mstyle class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></mstyle></math> 72 </div> 73 </div> 74 <div> 75 <div class="shrink-wrap"> 76 <math><mphantom class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></mphantom></math> 77 </div> 78 </div> 79 <div> 80 <div class="shrink-wrap"> 81 <math class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></math> 82 </div> 83 </div> 84 <div> 85 <div class="shrink-wrap"> 86 <math><unknown class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></unknown></math> 87 </div> 88 </div> 89 <div> 90 </div> 91 </div> 92 <div id="tokens-tests"> 93 <div> 94 <div class="shrink-wrap"> 95 <math><mrow class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></mrow></math> 96 </div> 97 </div> 98 <div> 99 <div class="shrink-wrap"> 100 <math><mstyle class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></mstyle></math> 101 </div> 102 </div> 103 <div> 104 <div class="shrink-wrap"> 105 <math><mphantom class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></mphantom></math> 106 </div> 107 </div> 108 <div> 109 <div class="shrink-wrap"> 110 <math class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></math> 111 </div> 112 </div> 113 <div> 114 <div class="shrink-wrap"> 115 <math><unknown class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></unknown></math> 116 </div> 117 </div> 118 <div> 119 <div class="shrink-wrap"> 120 <math><mfenced class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></mfenced></math> 121 </div> 122 </div> 123 <div> 124 <div class="shrink-wrap"> 125 <math><a class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></a></math> 126 </div> 127 </div> 128 </div> 129 </p> 130 </body> 131 </html>