<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>MathML lengths</title> <link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S2.html#SS3.SSS1"/> <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("fonts/xheight500.woff"); } math { font-family: TestFont; font-size: 10px; } </style> <script> var epsilon = 2; function getBox(aId) { return document.getElementById(aId).getBoundingClientRect(); } setup({ explicit_done: true }); window.addEventListener("load", function() { document.fonts.ready.then(runTests); }); function runTests() { test(function() { assert_approx_equals(getBox("unitCm").width, 96, epsilon, "cm"); assert_approx_equals(getBox("unitEm").width, 120, epsilon, "em"); assert_approx_equals(getBox("unitEx").width, 500, epsilon, "ex"); assert_approx_equals(getBox("unitIn").width, 288, epsilon, "in"); assert_approx_equals(getBox("unitNamed").width, 389, epsilon, "namedspace"); assert_approx_equals(getBox("unitMm").width, 576, epsilon, "mm"); assert_approx_equals(getBox("unitPc").width, 96, epsilon, "pc"); assert_approx_equals(getBox("unitPercentage").width, 60, epsilon, "%"); assert_approx_equals(getBox("unitPt").width, 96, epsilon, "pt"); assert_approx_equals(getBox("unitPx").width, 123, epsilon, "px"); assert_approx_equals(getBox("unitNone").width, 150, epsilon, "Unitless"); }, "Units"); test(function() { assert_approx_equals(getBox("spaceCm").width, 96, epsilon, "cm"); assert_approx_equals(getBox("spaceEm").width, 120, epsilon, "em"); assert_approx_equals(getBox("spaceEx").width, 500, epsilon, "ex"); assert_approx_equals(getBox("spaceIn").width, 288, epsilon, "in"); assert_approx_equals(getBox("spaceNamed").width, 389, epsilon, "namedspace"); assert_approx_equals(getBox("spaceMm").width, 576, epsilon, "mm"); assert_approx_equals(getBox("spacePc").width, 96, epsilon, "pc"); assert_approx_equals(getBox("spacePercentage").width, 60, epsilon, "%"); assert_approx_equals(getBox("spacePt").width, 96, epsilon, "pt"); assert_approx_equals(getBox("spacePx").width, 123, epsilon, "px"); assert_approx_equals(getBox("spaceNone").width, 150, epsilon, "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> <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: 1000px" 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: 1000px" 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> <hr/> </body> </html>