OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <meta charset="utf-8"> |
| 5 <title>Subscripts and Superscripts metrics</title> |
| 6 <link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#S
S4"> |
| 7 <meta name="assert" content="Basic metrics for elements msub, msup and msubsup."
> |
| 8 <script src="/resources/testharness.js"></script> |
| 9 <script src="/resources/testharnessreport.js"></script> |
| 10 <style> |
| 11 math, mspace { |
| 12 font-size: 10px; |
| 13 } |
| 14 </style> |
| 15 <script> |
| 16 /* This test does not use any specific fonts and so the exact rules are not |
| 17 specified precisely. We assume reasonable values for script shifts and |
| 18 spacing. */ |
| 19 |
| 20 function getBox(aId) { |
| 21 var box = document.getElementById(aId).getBoundingClientRect(); |
| 22 box.middle = (box.bottom + box.top) / 2; |
| 23 return box; |
| 24 } |
| 25 |
| 26 setup({ explicit_done: true }); |
| 27 window.addEventListener("load", runTests); |
| 28 |
| 29 function runTests() { |
| 30 test(function() { |
| 31 var e = 1; |
| 32 assert_less_than_equal(getBox("msubBase").right, getBox("msubSub").left, e
, "msub: subscript is after base"); |
| 33 assert_less_than_equal(getBox("msupBase").right, getBox("msupSup").left, e
, "msup: superscript is after base"); |
| 34 assert_less_than_equal(getBox("msubsupBase").right, getBox("msubsupSub").l
eft, e, "msubsup: subscript is after base"); |
| 35 assert_less_than_equal(getBox("msubsupBase").right, getBox("msubsupSup").l
eft, e, "msubsup: superscript is after base"); |
| 36 |
| 37 e = 3; |
| 38 assert_approx_equals(getBox("msubBase").right, getBox("msubSub").left, e,
"msub: space between base and subscript is small"); |
| 39 assert_approx_equals(getBox("msubBase").right, getBox("msubSub").left, e,
"msub: subscript is after base"); |
| 40 assert_approx_equals(getBox("msupBase").right, getBox("msupSup").left, e,
"msup: superscript is after base"); |
| 41 assert_approx_equals(getBox("msubsupBase").right, getBox("msubsupSub").lef
t, e, "msubsup: subscript is after base"); |
| 42 assert_approx_equals(getBox("msubsupBase").right, getBox("msubsupSup").lef
t, e, "msubsup: superscript is after base"); |
| 43 }, "Respective horizontal positions"); |
| 44 |
| 45 test(function() { |
| 46 var e = 1; |
| 47 assert_approx_equals(getBox("msubBase").middle, getBox("baseline").bottom,
e, "msub: base is placed on the baseline"); |
| 48 assert_approx_equals(getBox("msupBase").middle, getBox("baseline").bottom,
e, "msup: base is placed on the baseline"); |
| 49 assert_approx_equals(getBox("msubsupBase").middle, getBox("baseline").bott
om, e, "msubsup: base is placed on the baseline"); |
| 50 }, "Alignment of the base on the baseline"); |
| 51 |
| 52 test(function() { |
| 53 var e = 3; |
| 54 assert_approx_equals(getBox("msubSub").middle, getBox("msubBase").bottom,
e, "msub: script is placed at the bottom of the base"); |
| 55 assert_approx_equals(getBox("msupSup").middle, getBox("msupBase").top, e,
"msup: script is placed at the top of the base"); |
| 56 assert_approx_equals(getBox("msubsupSub").middle, getBox("msubsupBase").bo
ttom, e, "msubsup: script is placed at the bottom of the base"); |
| 57 assert_approx_equals(getBox("msubsupSup").middle, getBox("msubsupBase").to
p, e, "msubsup: script is placed at the top of the base"); |
| 58 }, "Vertical position of scripts"); |
| 59 |
| 60 test(function() { |
| 61 var e = 3; |
| 62 assert_approx_equals(getBox("msub").width, getBox("msubSub").right - getBo
x("msubBase").left, e, "msub: width is determined by the left/right sides of bas
e/script (+ some space after script)"); |
| 63 assert_approx_equals(getBox("msup").width, getBox("msupSup").right - getBo
x("msupBase").left, e, "msup: width is determined by the left/right sides of bas
e/script (+ some space after script)"); |
| 64 assert_approx_equals(getBox("msubsup").width, Math.max(getBox("msubsupSub"
).right, getBox("msubsupSup").right) - getBox("msubsupBase").left, e, "msubsup:
width is determined by the left/right sides of base/scripts (+ some space after
script)"); |
| 65 }, "Width of scripted elements"); |
| 66 |
| 67 test(function() { |
| 68 var e = 1; |
| 69 assert_greater_than_equal(getBox("msub").height, getBox("msubBase").height
, e, "msub: height is at least the one of the base"); |
| 70 assert_greater_than_equal(getBox("msup").height, getBox("msupBase").height
, e, "msup: height is at least the one of the base"); |
| 71 assert_greater_than_equal(getBox("msubsup").height, getBox("msubsupBase").
height, e, "msubsup: height is at least the one of the base"); |
| 72 |
| 73 e = 3; |
| 74 assert_approx_equals(getBox("msub").height, Math.max(getBox("msubSub").bot
tom, getBox("msubBase").bottom) - getBox("msubBase").top, e, "msub: height is de
termined by the top/bottom sides of base/scripts"); |
| 75 assert_approx_equals(getBox("msup").height, getBox("msupBase").bottom - Ma
th.min(getBox("msupSup").top, getBox("msupBase").top), e, "msup: height is deter
mined by the top/bottom sides of base/scripts"); |
| 76 assert_approx_equals(getBox("msubsup").height, Math.max(getBox("msubSub").
bottom, getBox("msubBase").bottom) - Math.min(getBox("msupSup").top, getBox("msu
pBase").top), e, "msubsup: height is determined by the top/bottom sides of base/
scripts"); |
| 77 }, "Height of scripted elements"); |
| 78 |
| 79 done(); |
| 80 } |
| 81 </script> |
| 82 </head> |
| 83 <body> |
| 84 <p> |
| 85 <math> |
| 86 <mspace id="baseline" width="30px" height="2px" depth="0px" mathbackground
="blue"/> |
| 87 <msub id="msub" mathbackground="green"> |
| 88 <mspace id="msubBase" width="30px" height="15px" depth="15px" mathbackgr
ound="black"/> |
| 89 <mspace id="msubSub" width="10px" height="5px" depth="5px" mathbackgroun
d="black"/> |
| 90 </msub> |
| 91 <msup id="msup" mathbackground="blue"> |
| 92 <mspace id="msupBase" width="30px" height="15px" depth="15px" mathbackgr
ound="black"/> |
| 93 <mspace id="msupSup" width="10px" height="5px" depth="5px" mathbackgroun
d="black"/> |
| 94 </msup> |
| 95 <msubsup id="msubsup" mathbackground="green"> |
| 96 <mspace id="msubsupBase" width="30px" height="15px" depth="15px" mathbac
kground="black"/> |
| 97 <mspace id="msubsupSub" width="10px" height="5px" depth="5px" mathbackgr
ound="black"/> |
| 98 <mspace id="msubsupSup" width="10px" height="5px" depth="5px" mathbackgr
ound="black"/> |
| 99 </msubsup> |
| 100 </math> |
| 101 </p> |
| 102 <hr/> |
| 103 </body> |
| 104 </html> |
OLD | NEW |