lengths-2.html (14733B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 6 <title>MathML lengths</title> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#types-for-mathml-attribute-values"> 9 <link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> 10 <link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace"> 11 <link rel="help" href="https://www.w3.org/TR/css-values-4/#relative-lengths"> 12 <meta name="assert" content="Verify various cases of the MathML length syntax."> 13 <script src="/resources/testharness.js"></script> 14 <script src="/resources/testharnessreport.js"></script> 15 <script src="/mathml/support/feature-detection.js"></script> 16 <script src="/mathml/support/fonts.js"></script> 17 <style> 18 @font-face { 19 font-family: TestFont; 20 src: url("/fonts/math/css-units.woff"); 21 } 22 math { 23 font-family: TestFont; 24 font-size: 10px; 25 } 26 /* For rlh. */ 27 html { 28 line-height: 17px; 29 } 30 </style> 31 <script> 32 // Omitted units: vi, vb 33 34 var epsilon = .5; 35 36 function getBox(aId) { 37 return document.getElementById(aId).getBoundingClientRect(); 38 } 39 40 setup({ explicit_done: true }); 41 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 42 43 function runTests() { 44 test(function() { 45 assert_true(MathMLFeatureDetection.has_mspace()); 46 assert_equals(getBox("unitCm").width, 96, "cm"); 47 assert_equals(getBox("unitEm").width, 120, "em"); 48 assert_equals(getBox("unitEx").width, 500, "ex"); 49 assert_equals(getBox("unitIn").width, 288, "in"); 50 assert_equals(getBox("unitMm").width, 576, "mm"); 51 assert_equals(getBox("unitPc").width, 96, "pc"); 52 assert_equals(getBox("unitPercentage").width, 60, "%"); 53 assert_equals(getBox("unitPt").width, 96, "pt"); 54 assert_equals(getBox("unitPx").width, 123, "px"); 55 assert_equals(getBox("unitQ").width, 192, "q"); 56 assert_equals(getBox("unitCh").width, 100, "ch"); 57 assert_equals(getBox("unitCap").width, 140, "cap"); 58 assert_equals(getBox("unitIc").width, 90, "ic"); 59 assert_approx_equals(getBox("unitVw").width, window.innerWidth*0.35, epsilon, "vw"); 60 assert_approx_equals(getBox("unitVh").width, window.innerHeight*0.54, epsilon, "vh"); 61 assert_approx_equals(getBox("unitVmin").width, Math.min(window.innerWidth, window.innerHeight)*0.27, epsilon, "vmin"); 62 assert_approx_equals(getBox("unitVmax").width, Math.max(window.innerWidth, window.innerHeight)*0.34, epsilon, "vmax"); 63 assert_equals(getBox("unitRem").width, 128, "rem"); 64 assert_equals(getBox("unitLh").width, 60, "lh"); 65 assert_equals(getBox("unitRlh").width, 102, "rlh"); 66 }, "Units"); 67 68 test(function() { 69 assert_true(MathMLFeatureDetection.has_mspace()); 70 assert_equals(getBox("spaceCm").width, 96, "cm"); 71 assert_equals(getBox("spaceEm").width, 120, "em"); 72 assert_equals(getBox("spaceEx").width, 500, "ex"); 73 assert_equals(getBox("spaceIn").width, 288, "in"); 74 assert_equals(getBox("spaceMm").width, 576, "mm"); 75 assert_equals(getBox("spacePc").width, 96, "pc"); 76 assert_equals(getBox("spacePercentage").width, 60, "%"); 77 assert_equals(getBox("spacePt").width, 96, "pt"); 78 assert_equals(getBox("spacePx").width, 123, "px"); 79 assert_equals(getBox("spaceQ").width, 192, "q"); 80 assert_equals(getBox("spaceCh").width, 100, "ch"); 81 assert_equals(getBox("spaceCap").width, 140, "cap"); 82 assert_equals(getBox("spaceIc").width, 90, "ic"); 83 assert_approx_equals(getBox("spaceVw").width, window.innerWidth*0.35, epsilon, "vw"); 84 assert_approx_equals(getBox("spaceVh").width, window.innerHeight*0.54, epsilon, "vh"); 85 assert_approx_equals(getBox("spaceVmin").width, Math.min(window.innerWidth, window.innerHeight)*0.27, epsilon, "vmin"); 86 assert_approx_equals(getBox("spaceVmax").width, Math.max(window.innerWidth, window.innerHeight)*0.34, epsilon, "vmax"); 87 assert_equals(getBox("spaceRem").width, 128, "rem"); 88 assert_equals(getBox("spaceLh").width, 60, "lh"); 89 assert_equals(getBox("spaceRlh").width, 102, "rlh"); 90 }, "Trimming of space"); 91 92 test(function() { 93 assert_true(MathMLFeatureDetection.has_mspace()); 94 assert_approx_equals(getBox("n0").width, 0, epsilon, "n0"); 95 assert_approx_equals(getBox("n1").width, 90, epsilon, "n1"); 96 assert_approx_equals(getBox("n2").width, 8, epsilon, "n2"); 97 assert_approx_equals(getBox("n4").width, 650, epsilon, "n4"); 98 assert_approx_equals(getBox("n5").width, 4320, epsilon, "n5"); 99 assert_approx_equals(getBox("n6").width, 1, epsilon, "n6"); 100 assert_approx_equals(getBox("n7").width, 8, epsilon, "n7"); 101 assert_approx_equals(getBox("n8").width, 65, epsilon, "n8"); 102 assert_approx_equals(getBox("n9").width, 432, epsilon, "n9"); 103 assert_approx_equals(getBox("n10").width, 123, epsilon, "n10"); 104 }, "Non-negative numbers"); 105 106 test(function() { 107 assert_true(MathMLFeatureDetection.has_mspace()); 108 var topRef = getBox("ref").top; 109 assert_approx_equals(getBox("N0").top - topRef, -0, epsilon, "N0"); 110 assert_approx_equals(topRef - getBox("N1").top, -90, epsilon, "N1"); 111 assert_approx_equals(topRef - getBox("N2").top, -8, epsilon, "N2"); 112 assert_approx_equals(topRef - getBox("N4").top, -650, epsilon, "N4"); 113 assert_approx_equals(topRef - getBox("N5").top, -4320, epsilon, "N5"); 114 assert_approx_equals(topRef - getBox("N6").top, -1, epsilon, "N6"); 115 assert_approx_equals(topRef - getBox("N7").top, -8, epsilon, "N7"); 116 assert_approx_equals(topRef - getBox("N8").top, -65, epsilon, "N8"); 117 assert_approx_equals(topRef - getBox("N9").top, -432, epsilon, "N9"); 118 assert_approx_equals(topRef - getBox("N10").top, -123, epsilon, "N10"); 119 }, "Non-positive numbers"); 120 121 test(function() { 122 assert_true(MathMLFeatureDetection.has_mspace()); 123 // Namedspace values are invalid in MathML Core. 124 ["veryverythinmathspace", 125 "verythinmathspace", 126 "thinmathspace", 127 "mediummathspace", 128 "thickmathspace", 129 "verythickmathspace", 130 "veryverythickmathspace", 131 "negativeveryverythinmathspace", 132 "negativeverythinmathspace", 133 "negativethinmathspace", 134 "negativemediummathspace", 135 "negativethickmathspace", 136 "negativeverythickmathspace", 137 "negativeveryverythickmathspace" 138 ].forEach(function(space) { 139 var mrow = document.getElementById(space); 140 var boxBefore = mrow.firstElementChild.getBoundingClientRect(); 141 var boxAfter = mrow.lastElementChild.getBoundingClientRect(); 142 assert_equals(boxAfter.left - boxBefore.right, 0, space); 143 }); 144 }, "Legacy namedspaces"); 145 146 test(function() { 147 assert_true(MathMLFeatureDetection.has_mspace()); 148 // These values are invalid in MathML Core. 149 assert_equals(getBox("unitNone").width, 30, "Unitless"); 150 assert_approx_equals(getBox("n3").width, 0, epsilon, "n3"); 151 var topRef = getBox("ref").top; 152 assert_approx_equals(topRef - getBox("N3").top, 0, epsilon, "N3"); 153 }, "Legacy numbers"); 154 155 done(); 156 } 157 </script> 158 </head> 159 <body> 160 <div id="log"></div> 161 <p> 162 <math> 163 <mspace id="unitCm" width="2.54cm"/> 164 <mspace id="unitEm" width="12em"/> 165 <mspace id="unitEx" width="100ex"/> 166 <mspace id="unitIn" width="3in"/> 167 <mspace id="unitMm" width="152.4mm"/> 168 <mspace id="unitPc" width="6pc"/> 169 <mstyle mathsize="200%"><mspace id="unitPercentage" width="3em"/></mstyle> 170 <mspace id="unitPt" width="72pt"/> 171 <mspace id="unitPx" width="123px"/> 172 <mspace id="unitQ" width="203.2q"/> 173 <mspace id="unitCh" width="10ch"/> 174 <mspace id="unitCap" width="14ch"/> 175 <mspace id="unitIc" width="9ic"/> 176 <mspace id="unitVw" width="35vw"/> 177 <mspace id="unitVh" width="54vh"/> 178 <mspace id="unitVi" width="11vi"/> 179 <mspace id="unitVb" width="4vb"/> 180 <mspace id="unitVmin" width="27vmin"/> 181 <mspace id="unitVmax" width="34vmax"/> 182 <mspace id="unitRem" width="8rem" style="font-size: 3px;"/> 183 <mspace id="unitLh" width="5lh" style="line-height: 12px;"/> 184 <mspace id="unitRlh" width="6rlh" style="line-height: 12px;"/> 185 <mstyle mathsize="5"><mspace id="unitNone" width="3em"/></mstyle> 186 </math> 187 </p> 188 <p> 189 <math> 190 <mspace id="spaceCm" width=" 	

 	

2.54cm 	

 	

"/> 191 <mspace id="spaceEm" width=" 	

 	

12em 	

 	

"/> 192 <mspace id="spaceEx" width=" 	

 	

100ex 	

 	

"/> 193 <mspace id="spaceIn" width=" 	

 	

3in 	

 	

"/> 194 <mspace id="spaceMm" width=" 	

 	

152.4mm 	

 	

"/> 195 <mspace id="spacePc" width=" 	

 	

6pc 	

 	

"/> 196 <mstyle mathsize="200%"><mspace id="spacePercentage" width=" 	

 	

3em 	

 	

"/></mstyle> 197 <mspace id="spacePt" width=" 	

 	

72pt 	

 	

"/> 198 <mspace id="spacePx" width=" 	

 	

123px 	

 	

"/> 199 <mspace id="spaceQ" width=" 	

 	

203.2q 	

 	

"/> 200 <mspace id="spaceCh" width=" 	

 	

10ch 	

 	

"/> 201 <mspace id="spaceCap" width=" 	

 	

14ch 	

 	

"/> 202 <mspace id="spaceIc" width=" 	

 	

9ic 	

 	

"/> 203 <mspace id="spaceVw" width=" 	

 	

35vw 	

 	

"/> 204 <mspace id="spaceVh" width=" 	

 	

54vh 	

 	

"/> 205 <mspace id="spaceVi" width=" 	

 	

11vi 	

 	

"/> 206 <mspace id="spaceVb" width=" 	

 	

4vb 	

 	

"/> 207 <mspace id="spaceVmin" width=" 	

 	

27vmin 	

 	

"/> 208 <mspace id="spaceVmax" width=" 	

 	

34vmax 	

 	

"/> 209 <mspace id="spaceRem" width=" 	

 	

8rem 	

 	

" style="font-size: 3px;"/> 210 <mspace id="spaceLh" width=" 	

 	

5lh 	

 	

" style="line-height: 12px;"/> 211 <mspace id="spaceRlh" width=" 	

 	

6rlh 	

 	

" style="line-height: 12px;"/> 212 </math> 213 </p> 214 <p> 215 <math> 216 <mspace id="n0" width="0em"/> 217 <mspace id="n1" width="9em"/> 218 <mspace id="n2" width=".8em"/> 219 <mspace id="n3" width="7.em"/> 220 <mspace id="n4" width="65em"/> 221 <mspace id="n5" width="432em"/> 222 <mspace id="n6" width=".10em"/> 223 <mspace id="n7" width=".789em"/> 224 <mspace id="n8" width="6.5em"/> 225 <mspace id="n9" width="43.21em"/> 226 <mspace id="n10" width="012.345em"/> 227 </math> 228 </p> 229 <p> 230 <math> 231 <mspace id="ref"></mspace> 232 <mpadded voffset="-0em"><mspace id="N0"/></mpadded> 233 <mpadded voffset="-9em"><mspace id="N1"/></mpadded> 234 <mpadded voffset="-.8em"><mspace id="N2"/></mpadded> 235 <mpadded voffset="-7.em"><mspace id="N3"/></mpadded> 236 <mpadded voffset="-65em"><mspace id="N4"/></mpadded> 237 <mpadded voffset="-432em"><mspace id="N5"/></mpadded> 238 <mpadded voffset="-.10em"><mspace id="N6"/></mpadded> 239 <mpadded voffset="-.789em"><mspace id="N7"/></mpadded> 240 <mpadded voffset="-6.5em"><mspace id="N8"/></mpadded> 241 <mpadded voffset="-43.21em"><mspace id="N9"/></mpadded> 242 <mpadded voffset="-012.345em"><mspace id="N10"/></mpadded> 243 </math> 244 </p> 245 <p> 246 <math> 247 <mrow id="veryverythinmathspace"> 248 <mspace width="1em"/> 249 <mspace width="veryverythinmathspace"/> 250 <mspace/> 251 </mrow> 252 <mrow id="verythinmathspace"> 253 <mspace width="1em"/> 254 <mspace width="verythinmathspace"/> 255 <mspace/> 256 </mrow> 257 <mrow id="thinmathspace"> 258 <mspace width="1em"/> 259 <mspace width="thinmathspace"/> 260 <mspace/> 261 </mrow> 262 <mrow id="mediummathspace"> 263 <mspace width="1em"/> 264 <mspace width="mediummathspace"/> 265 <mspace/> 266 </mrow> 267 <mrow id="thickmathspace"> 268 <mspace width="1em"/> 269 <mspace width="thickmathspace"/> 270 <mspace/> 271 </mrow> 272 <mrow id="verythickmathspace"> 273 <mspace width="1em"/> 274 <mspace width="verythickmathspace"/> 275 <mspace/> 276 </mrow> 277 <mrow id="veryverythickmathspace"> 278 <mspace width="1em"/> 279 <mspace width="veryverythickmathspace"/> 280 <mspace/> 281 </mrow> 282 </math> 283 <math> 284 <mrow id="negativeveryverythinmathspace"> 285 <mspace width="1em"/> 286 <mspace width="veryverythinmathspace"/> 287 <mspace/> 288 </mrow> 289 <mrow id="negativeverythinmathspace"> 290 <mspace width="1em"/> 291 <mspace width="verythinmathspace"/> 292 <mspace/> 293 </mrow> 294 <mrow id="negativethinmathspace"> 295 <mspace width="1em"/> 296 <mspace width="thinmathspace"/> 297 <mspace/> 298 </mrow> 299 <mrow id="negativemediummathspace"> 300 <mspace width="1em"/> 301 <mspace width="mediummathspace"/> 302 <mspace/> 303 </mrow> 304 <mrow id="negativethickmathspace"> 305 <mspace width="1em"/> 306 <mspace width="thickmathspace"/> 307 <mspace/> 308 </mrow> 309 <mrow id="negativeverythickmathspace"> 310 <mspace width="1em"/> 311 <mspace width="verythickmathspace"/> 312 <mspace/> 313 </mrow> 314 <mrow id="negativeveryverythickmathspace"> 315 <mspace width="1em"/> 316 <mspace width="veryverythickmathspace"/> 317 <mspace/> 318 </mrow> 319 </math> 320 </p> 321 </body> 322 </html>