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 the mmultiscript element."> |
| 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
, "subscript is after base"); |
| 33 assert_less_than_equal(getBox("msupBase").right, getBox("msupSup").left, e
, "superscript is after base"); |
| 34 assert_less_than_equal(getBox("msubsupBase").right, getBox("msubsupSub").l
eft, e, "subscript is after base"); |
| 35 assert_less_than_equal(getBox("msubsupBase").right, getBox("msubsupSup").l
eft, e, "superscript is after base"); |
| 36 |
| 37 assert_greater_than_equal(getBox("premsubBase").right, getBox("premsubSub")
.left, e, "subscript is before base"); |
| 38 assert_greater_than_equal(getBox("premsupBase").right, getBox("premsupSup"
).left, e, "superscript is before base"); |
| 39 assert_greater_than_equal(getBox("premsubsupBase").right, getBox("premsubs
upSub").left, e, "subscript is before base"); |
| 40 assert_greater_than_equal(getBox("premsubsupBase").right, getBox("premsubs
upSup").left, e, "superscript is before base"); |
| 41 |
| 42 e = 3; |
| 43 assert_approx_equals(getBox("msubBase").right, getBox("msubSub").left, e,
"msub: space between base and subscript is small"); |
| 44 assert_approx_equals(getBox("msubBase").right, getBox("msubSub").left, e,
"msub: subscript is after base"); |
| 45 assert_approx_equals(getBox("msupBase").right, getBox("msupSup").left, e,
"msup: superscript is after base"); |
| 46 assert_approx_equals(getBox("msubsupBase").right, getBox("msubsupSub").lef
t, e, "msubsup: subscript is after base"); |
| 47 assert_approx_equals(getBox("msubsupBase").right, getBox("msubsupSup").lef
t, e, "msubsup: superscript is after base"); |
| 48 |
| 49 assert_approx_equals(getBox("premsubBase").left, getBox("premsubSub").righ
t, e, "msub: space between base and subscript is small"); |
| 50 assert_approx_equals(getBox("premsubBase").left, getBox("premsubSub").righ
t, e, "msub: subscript is after base"); |
| 51 assert_approx_equals(getBox("premsupBase").left, getBox("premsupSup").righ
t, e, "msup: superscript is after base"); |
| 52 assert_approx_equals(getBox("premsubsupBase").left, getBox("premsubsupSub"
).right, e, "msubsup: subscript is after base"); |
| 53 assert_approx_equals(getBox("premsubsupBase").left, getBox("premsubsupSup"
).right, e, "msubsup: superscript is after base"); |
| 54 }, "Respective horizontal positions"); |
| 55 |
| 56 test(function() { |
| 57 var e = 1; |
| 58 assert_approx_equals(getBox("msubBase").middle, getBox("baseline").bottom,
e, "base is placed on the baseline"); |
| 59 assert_approx_equals(getBox("msupBase").middle, getBox("baseline").bottom,
e, "base is placed on the baseline"); |
| 60 assert_approx_equals(getBox("msubsupBase").middle, getBox("baseline").bott
om, e, "base is placed on the baseline"); |
| 61 assert_approx_equals(getBox("premsubBase").middle, getBox("baseline").bott
om, e, "base is placed on the baseline"); |
| 62 assert_approx_equals(getBox("premsupBase").middle, getBox("baseline").bott
om, e, "base is placed on the baseline"); |
| 63 assert_approx_equals(getBox("premsubsupBase").middle, getBox("baseline").b
ottom, e, "base is placed on the baseline"); |
| 64 }, "Alignment of the base on the baseline"); |
| 65 |
| 66 test(function() { |
| 67 var e = 3; |
| 68 assert_approx_equals(getBox("msubSub").middle, getBox("msubBase").bottom,
e, "script is placed at the bottom of the base"); |
| 69 assert_approx_equals(getBox("msupSup").middle, getBox("msupBase").top, e,
"script is placed at the top of the base"); |
| 70 assert_approx_equals(getBox("msubsupSub").middle, getBox("msubsupBase").bo
ttom, e, "script is placed at the bottom of the base"); |
| 71 assert_approx_equals(getBox("msubsupSup").middle, getBox("msubsupBase").to
p, e, "script is placed at the top of the base"); |
| 72 |
| 73 assert_approx_equals(getBox("premsubSub").middle, getBox("premsubBase").bo
ttom, e, "script is placed at the bottom of the base"); |
| 74 assert_approx_equals(getBox("premsupSup").middle, getBox("premsupBase").to
p, e, "script is placed at the top of the base"); |
| 75 assert_approx_equals(getBox("premsubsupSub").middle, getBox("premsubsupBas
e").bottom, e, "script is placed at the bottom of the base"); |
| 76 assert_approx_equals(getBox("premsubsupSup").middle, getBox("premsubsupBas
e").top, e, "script is placed at the top of the base"); |
| 77 }, "Vertical position of scripts"); |
| 78 |
| 79 test(function() { |
| 80 var e = 3; |
| 81 assert_approx_equals(getBox("msub").width, getBox("msubSub").right - getBo
x("msubBase").left, e, "width is determined by the left/right sides of base/scri
pt (+ some space after script)"); |
| 82 assert_approx_equals(getBox("msup").width, getBox("msupSup").right - getBo
x("msupBase").left, e, "width is determined by the left/right sides of base/scri
pt (+ some space after script)"); |
| 83 assert_approx_equals(getBox("msubsup").width, Math.max(getBox("msubsupSub"
).right, getBox("msubsupSup").right) - getBox("msubsupBase").left, e, "width is
determined by the left/right sides of base/scripts (+ some space after script)")
; |
| 84 |
| 85 assert_approx_equals(getBox("premsub").width, getBox("premsubBase").right
- getBox("premsubSub").left, e, "width is determined by the right/left sides of
base/script (+ some space after script)"); |
| 86 assert_approx_equals(getBox("premsup").width, getBox("premsupBase").right
- getBox("premsupSup").left, e, "width is determined by the right/left sides of
base/script (+ some space after script)"); |
| 87 assert_approx_equals(getBox("premsubsup").width, getBox("premsubsupBase").
right - Math.min(getBox("premsubsupSub").left, getBox("premsubsupSup").left), e,
"width is determined by the right/left sides of base/scripts (+ some space afte
r script)"); |
| 88 }, "Width of scripted elements"); |
| 89 |
| 90 test(function() { |
| 91 var e = 1; |
| 92 assert_greater_than_equal(getBox("msub").height, getBox("msubBase").height
, e, "height is at least the one of the base"); |
| 93 assert_greater_than_equal(getBox("msup").height, getBox("msupBase").height
, e, "height is at least the one of the base"); |
| 94 assert_greater_than_equal(getBox("msubsup").height, getBox("msubsupBase").
height, e, "height is at least the one of the base"); |
| 95 assert_greater_than_equal(getBox("premsub").height, getBox("premsubBase").
height, e, "height is at least the one of the base"); |
| 96 assert_greater_than_equal(getBox("premsup").height, getBox("premsupBase").
height, e, "height is at least the one of the base"); |
| 97 assert_greater_than_equal(getBox("premsubsup").height, getBox("premsubsupBase"
).height, e, "height is at least the one of the base"); |
| 98 |
| 99 e = 3; |
| 100 assert_approx_equals(getBox("msub").height, Math.max(getBox("msubSub").bot
tom, getBox("msubBase").bottom) - getBox("msubBase").top, e, "msub height is det
ermined by the top/bottom sides of base/scripts"); |
| 101 assert_approx_equals(getBox("msup").height, getBox("msupBase").bottom - Ma
th.min(getBox("msupSup").top, getBox("msupBase").top), e, "msup height is determ
ined by the top/bottom sides of base/scripts"); |
| 102 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/s
cripts"); |
| 103 assert_approx_equals(getBox("premsub").height, Math.max(getBox("premsubSub
").bottom, getBox("premsubBase").bottom) - getBox("premsubBase").top, e, "msub h
eight is determined by the top/bottom sides of base/scripts"); |
| 104 assert_approx_equals(getBox("premsup").height, getBox("premsupBase").botto
m - Math.min(getBox("premsupSup").top, getBox("premsupBase").top), e, "msup heig
ht is determined by the top/bottom sides of base/scripts"); |
| 105 assert_approx_equals(getBox("premsubsup").height, Math.max(getBox("premsub
Sub").bottom, getBox("premsubBase").bottom) - Math.min(getBox("premsupSup").top,
getBox("premsupBase").top), e, "msubsup height is determined by the top/bottom
sides of base/scripts"); |
| 106 }, "Height of scripted elements"); |
| 107 |
| 108 test(function() { |
| 109 ["none", "mprescripts"].forEach(function(name) { |
| 110 var elements = document.getElementsByTagName(name); |
| 111 for (var i = 0; i < elements.length; i++) { |
| 112 var box = elements[i].getBoundingClientRect(); |
| 113 assert_equals(box.height * box.width, 0, "<" + name + "> " + i + " has
zero is empty"); |
| 114 } |
| 115 }); |
| 116 }, "Size of empty elements"); |
| 117 |
| 118 done(); |
| 119 } |
| 120 </script> |
| 121 </head> |
| 122 <body> |
| 123 <p> |
| 124 <math> |
| 125 <mspace id="baseline" width="30px" height="2px" depth="0px" mathbackground
="blue"/> |
| 126 <mmultiscripts id="msub" mathbackground="green"> |
| 127 <mspace id="msubBase" width="30px" height="15px" depth="15px" mathbackgr
ound="black"/> |
| 128 <mspace id="msubSub" width="10px" height="5px" depth="5px" mathbackgroun
d="black"/> |
| 129 <none/> |
| 130 </mmultiscripts> |
| 131 <mmultiscripts id="msup" mathbackground="green"> |
| 132 <mspace id="msupBase" width="30px" height="15px" depth="15px" mathbackgr
ound="black"/> |
| 133 <none/> |
| 134 <mspace id="msupSup" width="10px" height="5px" depth="5px" mathbackgroun
d="black"/> |
| 135 </mmultiscripts> |
| 136 <mmultiscripts id="msubsup" mathbackground="green"> |
| 137 <mspace id="msubsupBase" width="30px" height="15px" depth="15px" mathbac
kground="black"/> |
| 138 <mspace id="msubsupSub" width="10px" height="5px" depth="5px" mathbackgr
ound="black"/> |
| 139 <mspace id="msubsupSup" width="10px" height="5px" depth="5px" mathbackgr
ound="black"/> |
| 140 </mmultiscripts> |
| 141 <mmultiscripts id="premsub" mathbackground="green"> |
| 142 <mspace id="premsubBase" width="30px" height="15px" depth="15px" mathbac
kground="black"/> |
| 143 <mprescripts/> |
| 144 <mspace id="premsubSub" width="10px" height="5px" depth="5px" mathbackgr
ound="black"/> |
| 145 <none/> |
| 146 </mmultiscripts> |
| 147 <mmultiscripts id="premsup" mathbackground="green"> |
| 148 <mspace id="premsupBase" width="30px" height="15px" depth="15px" mathbac
kground="black"/> |
| 149 <mprescripts/> |
| 150 <none/> |
| 151 <mspace id="premsupSup" width="10px" height="5px" depth="5px" mathbackgr
ound="black"/> |
| 152 </mmultiscripts> |
| 153 <mmultiscripts id="premsubsup" mathbackground="green"> |
| 154 <mspace id="premsubsupBase" width="30px" height="15px" depth="15px" math
background="black"/> |
| 155 <mprescripts/> |
| 156 <mspace id="premsubsupSub" width="10px" height="5px" depth="5px" mathbac
kground="black"/> |
| 157 <mspace id="premsubsupSup" width="10px" height="5px" depth="5px" mathbac
kground="black"/> |
| 158 </mmultiscripts> |
| 159 </math> |
| 160 </p> |
| 161 <hr/> |
| 162 </body> |
| 163 </html> |
OLD | NEW |