OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <meta charset="utf-8"> |
| 5 <title>table axis height</title> |
| 6 <link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#S
S5"> |
| 7 <meta name="assert" content="Element mtable correctly uses the axis height param
eter 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: axisheight5000-verticalarrow14000; |
| 16 src: url("/fonts/math/axisheight5000-verticalarrow14000.woff"); |
| 17 } |
| 18 </style> |
| 19 <script> |
| 20 var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 |
| 21 var epsilon = 1; |
| 22 |
| 23 function getBox(aId) { |
| 24 return document.getElementById(aId).getBoundingClientRect(); |
| 25 } |
| 26 |
| 27 setup({ explicit_done: true }); |
| 28 window.addEventListener("load", function() { |
| 29 document.fonts.ready.then(runTests); |
| 30 }); |
| 31 |
| 32 function runTests() { |
| 33 test(function() { |
| 34 var v1 = 5000 * emToPx; |
| 35 var tableMiddle = (getBox("table").bottom + getBox("table").top) / 2; |
| 36 assert_approx_equals(getBox("baseline").bottom - tableMiddle, |
| 37 v1, epsilon, "mtable: axis height"); |
| 38 }, "AxisHeight"); |
| 39 |
| 40 done(); |
| 41 } |
| 42 </script> |
| 43 </head> |
| 44 <body> |
| 45 <p> |
| 46 <math style="font-family: axisheight5000-verticalarrow14000"> |
| 47 <mspace id="baseline" mathbackground="green" width="50px" height="1px"/> |
| 48 <mtable id="table" mathbackground="blue"><mtr><mtd><mspace width="100px" h
eight="1px"/></mtd></mtr></mtable> |
| 49 </math> |
| 50 </p> |
| 51 </body> |
| 52 </html> |
OLD | NEW |