1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>Stack parameters</title>
6<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS3.SSS2">
7<meta name="assert" content="Element mfrac correctly uses the stack parameters from the MATH table.">
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 @font-face {
15 font-family: axisheight7000;
16 src: url("../../../fonts/math/stack-axisheight7000.woff");
17 }
18 @font-face {
19 font-family: bottomdisplaystyleshiftdown5000;
20 src: url("../../../fonts/math/stack-bottomdisplaystyleshiftdown5000.woff");
21 }
22 @font-face {
23 font-family: bottomshiftdown6000;
24 src: url("../../../fonts/math/stack-bottomshiftdown6000.woff");
25 }
26 @font-face {
27 font-family: displaystylegapmin4000;
28 src: url("../../../fonts/math/stack-displaystylegapmin4000.woff");
29 }
30 @font-face {
31 font-family: gapmin8000;
32 src: url("../../../fonts/math/stack-gapmin8000.woff");
33 }
34 @font-face {
35 font-family: topdisplaystyleshiftup3000;
36 src: url("../../../fonts/math/stack-topdisplaystyleshiftup3000.woff");
37 }
38 @font-face {
39 font-family: topshiftup9000;
40 src: url("../../../fonts/math/stack-topshiftup9000.woff");
41 }
42</style>
43<script>
44 var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
45 var epsilon = 1;
46
47 function getBox(aId) {
48 return document.getElementById(aId).getBoundingClientRect();
49 }
50
51 setup({ explicit_done: true });
52 window.addEventListener("load", function() {
53 document.fonts.ready.then(function() {
54 window.setTimeout(runTests, 250);
55 });
56 });
57
58 function runTests() {
59 test(function() {
60 var v = 7000 * emToPx;
61 assert_approx_equals(getBox("ref0001").top - getBox("num0001").bottom,
62 v, epsilon, "mfrac: axis height");
63 }, "AxisHeight");
64
65 test(function() {
66 var v = 5000 * emToPx;
67 assert_approx_equals(getBox("den0002").top - getBox("ref0002").bottom,
68 v, epsilon, "mfrac: denominator shift");
69 }, "BottomDisplayStyleShiftDown");
70
71 test(function() {
72 var v = 6000 * emToPx;
73 assert_approx_equals(getBox("den0003").top - getBox("ref0003").bottom,
74 v, epsilon, "mfrac: denominator shift");
75 }, "BottomShiftDown");
76
77 test(function() {
78 var v = 4000 * emToPx;
79 assert_approx_equals(getBox("den0004").top - getBox("num0004").bottom,
80 v, epsilon, "mfrac: gap");
81 }, "DisplayStyleGapMin");
82
83 test(function() {
84 var v = 8000 * emToPx;
85 assert_approx_equals(getBox("den0005").top - getBox("num0005").bottom,
86 v, epsilon, "mfrac: gap");
87 }, "GapMin");
88
89 test(function() {
90 var v = 3000 * emToPx;
91 assert_approx_equals(getBox("ref0006").top - getBox("num0006").bottom,
92 v, epsilon, "mfrac: numerator shift");
93 }, "TopDisplayStyleShiftUp");
94
95 test(function() {
96 var v = 9000 * emToPx;
97 assert_approx_equals(getBox("ref0007").top - getBox("num0007").bottom,
98 v, epsilon, "mfrac: numerator shift");
99 }, "ToShiftUp");
100
101 done();
102 }
103</script>
104</head>
105<body>
106 <p>
107 <math style="font-family: axisheight7000;">
108 <mspace id="ref0001" depth="1em" width="3em" mathbackground="green"/>
109 <mfrac linethickness="0px">
110 <mspace width="3em" height="1em" id="num0001" mathbackground="blue"/>
111 <mspace width="3em"/>
112 </mfrac>
113 </math>
114 </p>
115 <hr/>
116 <p>
117 <math display="block" style="font-family: bottomdisplaystyleshiftdown5000;">
118 <mspace id="ref0002" width="3em" height="1em" mathbackground="green"/>
119 <mfrac linethickness="0px">
120 <mspace width="3em"/>
121 <mspace width="3em" depth="1em" id="den0002" mathbackground="blue"/>
122 </mfrac>
123 </math>
124 </p>
125 <hr/>
126 <p>
127 <math style="font-family: bottomshiftdown6000;">
128 <mspace id="ref0003" width="3em" height="1em" mathbackground="green"/>
129 <mfrac linethickness="0px">
130 <mspace width="3em"/>
131 <mspace width="3em" depth="1em" id="den0003" mathbackground="blue"/>
132 </mfrac>
133 </math>
134 </p>
135 <hr/>
136 <p>
137 <math display="block" style="font-family: displaystylegapmin4000;">
138 <mfrac linethickness="0px">
139 <mspace width="3em" height="1em" id="num0004" mathbackground="blue"/>
140 <mspace width="3em" depth="1em" id="den0004" mathbackground="green"/>
141 </mfrac>
142 </math>
143 </p>
144 <hr/>
145 <p>
146 <math style="font-family: gapmin8000;">
147 <mfrac linethickness="0px">
148 <mspace width="3em" height="1em" id="num0005" mathbackground="blue"/>
149 <mspace width="3em" depth="1em" id="den0005" mathbackground="green"/>
150 </mfrac>
151 </math>
152 </p>
153 <hr/>
154 <p>
155 <math display="block" style="font-family: topdisplaystyleshiftup3000;">
156 <mspace id="ref0006" width="3em" depth="1em" mathbackground="green"/>
157 <mfrac linethickness="0px">
158 <mspace width="3em" height="1em" id="num0006" mathbackground="blue"/>
159 <mspace width="3em"/>
160 </mfrac>
161 </math>
162 </p>
163 <hr/>
164 <p>
165 <math style="font-family: topshiftup9000;">
166 <mspace id="ref0007" width="3em" depth="1em" mathbackground="green"/>
167 <mfrac linethickness="0px">
168 <mspace width="3em" height="1em" id="num0007" mathbackground="blue"/>
169 <mspace width="3em"/>
170 </mfrac>
171 </math>
172 </p>
173 <hr/>
174</body>
175</html>