| <!DOCTYPE html><!-- webkit-test-runner [ CoreMathMLEnabled=false ] --> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>MathML lengths</title> |
| <meta name="assert" content="Verify various cases of the MathML length syntax."> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| @font-face { |
| font-family: TestFont; |
| src: url("../resources/xheight500.woff"); |
| } |
| math { |
| font-family: TestFont; |
| font-size: 10px; |
| } |
| </style> |
| <script> |
| var epsilon = .5; |
| |
| function getBox(aId) { |
| return document.getElementById(aId).getBoundingClientRect(); |
| } |
| |
| setup({ explicit_done: true }); |
| window.addEventListener("load", () => { document.fonts.ready.then(runTests); }); |
| |
| function runTests() { |
| test(function() { |
| assert_equals(getBox("unitCm").width, 96, "cm"); |
| assert_equals(getBox("unitEm").width, 120, "em"); |
| assert_equals(getBox("unitEx").width, 500, "ex"); |
| assert_equals(getBox("unitIn").width, 288, "in"); |
| assert_equals(getBox("unitNamed").width, 700, "namedspace"); |
| assert_equals(getBox("unitMm").width, 576, "mm"); |
| assert_equals(getBox("unitPc").width, 96, "pc"); |
| assert_equals(getBox("unitPercentage").width, 60, "%"); |
| assert_equals(getBox("unitPt").width, 96, "pt"); |
| assert_equals(getBox("unitPx").width, 123, "px"); |
| assert_equals(getBox("unitNone").width, 150, "Unitless"); |
| }, "Units"); |
| |
| test(function() { |
| assert_equals(getBox("spaceCm").width, 96, "cm"); |
| assert_equals(getBox("spaceEm").width, 120, "em"); |
| assert_equals(getBox("spaceEx").width, 500, "ex"); |
| assert_equals(getBox("spaceIn").width, 288, "in"); |
| assert_equals(getBox("spaceNamed").width, 700, "namedspace"); |
| assert_equals(getBox("spaceMm").width, 576, "mm"); |
| assert_equals(getBox("spacePc").width, 96, "pc"); |
| assert_equals(getBox("spacePercentage").width, 60, "%"); |
| assert_equals(getBox("spacePt").width, 96, "pt"); |
| assert_equals(getBox("spacePx").width, 123, "px"); |
| assert_equals(getBox("spaceNone").width, 150, "Unitless"); |
| }, "Trimming of space"); |
| |
| test(function() { |
| assert_approx_equals(getBox("n0").width, 0, epsilon, "n0"); |
| assert_approx_equals(getBox("n1").width, 90, epsilon, "n1"); |
| assert_approx_equals(getBox("n2").width, 8, epsilon, "n2"); |
| assert_approx_equals(getBox("n3").width, 70, epsilon, "n3"); |
| assert_approx_equals(getBox("n4").width, 650, epsilon, "n4"); |
| assert_approx_equals(getBox("n5").width, 4320, epsilon, "n5"); |
| assert_approx_equals(getBox("n6").width, 1, epsilon, "n6"); |
| assert_approx_equals(getBox("n7").width, 8, epsilon, "n7"); |
| assert_approx_equals(getBox("n8").width, 65, epsilon, "n8"); |
| assert_approx_equals(getBox("n9").width, 432, epsilon, "n9"); |
| assert_approx_equals(getBox("n10").width, 123, epsilon, "n10"); |
| }, "Non-negative numbers"); |
| |
| test(function() { |
| var topRef = getBox("ref").top; |
| assert_approx_equals(getBox("N0").top - topRef, -0, epsilon, "N0"); |
| assert_approx_equals(topRef - getBox("N1").top, -90, epsilon, "N1"); |
| assert_approx_equals(topRef - getBox("N2").top, -8, epsilon, "N2"); |
| assert_approx_equals(topRef - getBox("N3").top, -70, epsilon, "N3"); |
| assert_approx_equals(topRef - getBox("N4").top, -650, epsilon, "N4"); |
| assert_approx_equals(topRef - getBox("N5").top, -4320, epsilon, "N5"); |
| assert_approx_equals(topRef - getBox("N6").top, -1, epsilon, "N6"); |
| assert_approx_equals(topRef - getBox("N7").top, -8, epsilon, "N7"); |
| assert_approx_equals(topRef - getBox("N8").top, -65, epsilon, "N8"); |
| assert_approx_equals(topRef - getBox("N9").top, -432, epsilon, "N9"); |
| assert_approx_equals(topRef - getBox("N10").top, -123, epsilon, "N10"); |
| }, "Non-positive numbers"); |
| |
| done(); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="log"></div> |
| <p> |
| <math> |
| <mspace id="unitCm" width="2.54cm"/> |
| <mspace id="unitEm" width="12em"/> |
| <mspace id="unitEx" width="100ex"/> |
| <mspace id="unitIn" width="3in"/> |
| <mspace style="font-size: 1800px" id="unitNamed" width="veryverythickmathspace"/> |
| <mspace id="unitMm" width="152.4mm"/> |
| <mspace id="unitPc" width="6pc"/> |
| <mstyle mathsize="200%"><mspace id="unitPercentage" width="3em"/></mstyle> |
| <mspace id="unitPt" width="72pt"/> |
| <mspace id="unitPx" width="123px"/> |
| <mstyle mathsize="5"><mspace id="unitNone" width="3em"/></mstyle> |
| </math> |
| </p> |
| <p> |
| <math> |
| <mspace id="spaceCm" width=" 	

 	

2.54cm 	

 	

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

 	

12em 	

 	

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

 	

100ex 	

 	

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

 	

3in 	

 	

"/> |
| <mspace style="font-size: 1800px" id="spaceNamed" width=" 	

 	

veryverythickmathspace 	

 	

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

 	

152.4mm 	

 	

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

 	

6pc 	

 	

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

 	

3em 	

 	

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

 	

72pt 	

 	

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

 	

123px 	

 	

"/> |
| <mstyle mathsize="5"><mspace id="spaceNone" width=" 	

 	

3em 	

 	

"/></mstyle> |
| </math> |
| </p> |
| <p> |
| <math> |
| <mspace id="n0" width="0em"/> |
| <mspace id="n1" width="9em"/> |
| <mspace id="n2" width=".8em"/> |
| <mspace id="n3" width="7.em"/> |
| <mspace id="n4" width="65em"/> |
| <mspace id="n5" width="432em"/> |
| <mspace id="n6" width=".10em"/> |
| <mspace id="n7" width=".789em"/> |
| <mspace id="n8" width="6.5em"/> |
| <mspace id="n9" width="43.21em"/> |
| <mspace id="n10" width="012.345em"/> |
| </math> |
| </p> |
| <p> |
| <math> |
| <mspace id="ref"></mspace> |
| <mpadded voffset="-0em"><mspace id="N0"/></mpadded> |
| <mpadded voffset="-9em"><mspace id="N1"/></mpadded> |
| <mpadded voffset="-.8em"><mspace id="N2"/></mpadded> |
| <mpadded voffset="-7.em"><mspace id="N3"/></mpadded> |
| <mpadded voffset="-65em"><mspace id="N4"/></mpadded> |
| <mpadded voffset="-432em"><mspace id="N5"/></mpadded> |
| <mpadded voffset="-.10em"><mspace id="N6"/></mpadded> |
| <mpadded voffset="-.789em"><mspace id="N7"/></mpadded> |
| <mpadded voffset="-6.5em"><mspace id="N8"/></mpadded> |
| <mpadded voffset="-43.21em"><mspace id="N9"/></mpadded> |
| <mpadded voffset="-012.345em"><mspace id="N10"/></mpadded> |
| </math> |
| </p> |
| </body> |
| </html> |
