table-axis-height.html (1723B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>table axis height</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable"> 7 <meta name="assert" content="Element mtable correctly uses the axis height parameter from the MATH table."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/mathml/support/feature-detection.js"></script> 11 <script src="/mathml/support/fonts.js"></script> 12 <style> 13 math, mspace { 14 font-size: 10px; 15 } 16 @font-face { 17 font-family: axisheight5000-verticalarrow14000; 18 src: url("/fonts/math/axisheight5000-verticalarrow14000.woff"); 19 } 20 </style> 21 <script> 22 var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 23 var epsilon = 1; 24 25 function getBox(aId) { 26 return document.getElementById(aId).getBoundingClientRect(); 27 } 28 29 setup({ explicit_done: true }); 30 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 31 32 function runTests() { 33 test(function() { 34 assert_true(MathMLFeatureDetection.has_mspace()); 35 36 var v1 = 5000 * emToPx; 37 var tableMiddle = (getBox("table").bottom + getBox("table").top) / 2; 38 assert_approx_equals(getBox("baseline").bottom - tableMiddle, 39 v1, epsilon, "mtable: axis height"); 40 }, "AxisHeight"); 41 42 done(); 43 } 44 </script> 45 </head> 46 <body> 47 <div id="log"></div> 48 <p> 49 <math style="font-family: axisheight5000-verticalarrow14000"> 50 <mspace id="baseline" style="background: green" width="50px" height="1px"/> 51 <mtable id="table" style="background: blue"><mtr><mtd><mspace width="100px" height="1px"/></mtd></mtr></mtable> 52 </math> 53 </p> 54 </body> 55 </html>