width-height-004.html (4989B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>content position with width/height</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> 8 <meta name="assert" content="Verify the inline-start of the children of the munder, mover, munderover and mfrac layout algorithms."/> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 12 <script src="/mathml/support/fonts.js"></script> 13 <style> 14 .test, math { 15 font: 25px/1 Ahem; 16 color: black; 17 } 18 .test { 19 margin: .5em; 20 } 21 [data-name] { 22 width: 7em; 23 border: 1px solid blue; 24 } 25 </style> 26 <script> 27 var epsilon = 1; 28 29 function getMiddle(aElement) { 30 let box = aElement.getBoundingClientRect(); 31 return (box.left + box.right) / 2; 32 } 33 34 setup({ explicit_done: true }); 35 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 36 37 function runTests() { 38 Array.from(document.querySelectorAll("[data-name]")).forEach(element => { 39 test(() => { 40 let elementMiddle = getMiddle(element); 41 Array.from(element.children).forEach(child => { 42 assert_approx_equals(getMiddle(child), elementMiddle, epsilon); 43 }); 44 }, element.dataset.name); 45 }); 46 done(); 47 } 48 </script> 49 </head> 50 <body> 51 <div id="log"></div> 52 53 <div class="test"> 54 <math> 55 <mfrac data-name="mfrac"> 56 <mtext>X</mtext> 57 <mtext>X</mtext> 58 </mfrac> 59 </math> 60 <math dir="rtl"> 61 <mfrac data-name="RTL mfrac"> 62 <mtext>X</mtext> 63 <mtext>X</mtext> 64 </mfrac> 65 </math> 66 <math> 67 <mfrac data-name="mfrac (horizontal overflow)"> 68 <mtext>XXXXXXXXXXXX</mtext> 69 <mtext>XXXXXXXXXXXX</mtext> 70 </mfrac> 71 </math> 72 <math dir="rtl"> 73 <mfrac data-name="RTL mfrac (horizontal overflow)"> 74 <mtext>XXXXXXXXXXXX</mtext> 75 <mtext>XXXXXXXXXXXX</mtext> 76 </mfrac> 77 </math> 78 </div> 79 80 <div class="test"> 81 <math> 82 <mfrac linethickness="0" data-name="mfrac without bar"> 83 <mtext>X</mtext> 84 <mtext>X</mtext> 85 </mfrac> 86 </math> 87 <math dir="rtl"> 88 <mfrac linethickness="0" data-name="RTL mfrac without bar"> 89 <mtext>X</mtext> 90 <mtext>X</mtext> 91 </mfrac> 92 </math> 93 <math> 94 <mfrac linethickness="0" data-name="mfrac without bar (horizontal overflow)"> 95 <mtext>XXXXXXXXXXXX</mtext> 96 <mtext>XXXXXXXXXXXX</mtext> 97 </mfrac> 98 </math> 99 <math dir="rtl"> 100 <mfrac linethickness="0" data-name="RTL mfrac without bar (horizontal overflow)"> 101 <mtext>XXXXXXXXXXXX</mtext> 102 <mtext>XXXXXXXXXXXX</mtext> 103 </mfrac> 104 </math> 105 </div> 106 107 <div class="test"> 108 <math> 109 <munder data-name="munder"> 110 <mtext>X</mtext> 111 <mtext>X</mtext> 112 </munder> 113 </math> 114 <math dir="rtl"> 115 <munder data-name="RTL munder"> 116 <mtext>X</mtext> 117 <mtext>X</mtext> 118 </munder> 119 </math> 120 <math> 121 <munder data-name="munder (horizontal overflow)"> 122 <mtext>XXXXXXXXXXXX</mtext> 123 <mtext>XXXXXXXXXXXX</mtext> 124 </munder> 125 </math> 126 <math dir="rtl"> 127 <munder data-name="RTL munder (horizontal overflow)"> 128 <mtext>XXXXXXXXXXXX</mtext> 129 <mtext>XXXXXXXXXXXX</mtext> 130 </munder> 131 </math> 132 </div> 133 134 <div class="test"> 135 <math> 136 <mover data-name="mover"> 137 <mtext>X</mtext> 138 <mtext>X</mtext> 139 </mover> 140 </math> 141 <math dir="rtl"> 142 <mover data-name="RTL mover"> 143 <mtext>X</mtext> 144 <mtext>X</mtext> 145 </mover> 146 </math> 147 <math> 148 <mover data-name="mover (horizontal overflow)"> 149 <mtext>XXXXXXXXXXXX</mtext> 150 <mtext>XXXXXXXXXXXX</mtext> 151 </mover> 152 </math> 153 <math dir="rtl"> 154 <mover data-name="RTL mover (horizontal overflow)"> 155 <mtext>XXXXXXXXXXXX</mtext> 156 <mtext>XXXXXXXXXXXX</mtext> 157 </mover> 158 </math> 159 </div> 160 161 <div class="test"> 162 <math> 163 <munderover data-name="munderover"> 164 <mtext>X</mtext> 165 <mtext>X</mtext> 166 <mtext>X</mtext> 167 </munderover> 168 </math> 169 <math dir="rtl"> 170 <munderover data-name="RTL munderover"> 171 <mtext>X</mtext> 172 <mtext>X</mtext> 173 <mtext>X</mtext> 174 </munderover> 175 </math> 176 <math> 177 <munderover data-name="munderover (horizontal overflow)"> 178 <mtext>XXXXXXXXXXXX</mtext> 179 <mtext>XXXXXXXXXXXX</mtext> 180 <mtext>XXXXXXXXXXXX</mtext> 181 </munderover> 182 </math> 183 <math dir="rtl"> 184 <munderover data-name="RTL munderover (horizontal overflow)"> 185 <mtext>XXXXXXXXXXXX</mtext> 186 <mtext>XXXXXXXXXXXX</mtext> 187 <mtext>XXXXXXXXXXXX</mtext> 188 </munderover> 189 </math> 190 </div> 191 192 </body> 193 </htmL>