subsup-5.html (5086B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Subscripts and Superscripts metrics</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> 7 <meta name="assert" content="Verify metrics of scripted elements with tall scripts."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/mathml/support/feature-detection.js"></script> 11 <style> 12 math, mspace { 13 font-size: 10px; 14 } 15 </style> 16 <script> 17 /* This test does not use any specific fonts and so the exact rules are not 18 specified precisely. We assume reasonable values for script shifts and 19 spacing. */ 20 21 function getBox(aId) { 22 var box = document.getElementById(aId).getBoundingClientRect(); 23 box.middle = (box.bottom + box.top) / 2; 24 return box; 25 } 26 27 setup({ explicit_done: true }); 28 window.addEventListener("load", runTests); 29 30 var sizeArray = [50, 75, 100]; 31 32 function runTests() { 33 test(function() { 34 assert_true(MathMLFeatureDetection.has_mspace()); 35 36 var e = 1; 37 assert_approx_equals(getBox("msubbase").middle, getBox("baseline").bottom, e, "msub base is placed on the baseline"); 38 assert_approx_equals(getBox("msupbase").middle, getBox("baseline").bottom, e, "msup base is placed on the baseline"); 39 assert_approx_equals(getBox("msubsupbase").middle, getBox("baseline").bottom, e, "msubsup base is placed on the baseline"); 40 assert_approx_equals(getBox("multibase").middle, getBox("baseline").bottom, e, "mmultiscripts baseis placed on the baseline"); 41 }, "Alignment on the baseline with different and large script heights"); 42 43 test(function() { 44 assert_true(MathMLFeatureDetection.has_mspace()); 45 46 assert_greater_than(getBox("msubsub").top, getBox("msubbase").top, "msub: subscript is below the top of the base"); 47 assert_less_than(getBox("msupsup").bottom, getBox("msupbase").bottom, "msup: supscript is above the bottom of the base"); 48 assert_greater_than(getBox("msubsupsub").top, getBox("msubsupbase").top, "msubsup: subscript is below the top of the base"); 49 assert_less_than(getBox("msubsupsup").bottom, getBox("msubsupbase").bottom, "msubsup: supscript is above the bottom of the base"); 50 assert_greater_than(getBox("multipostsub").top, getBox("multibase").top, "mmultiscripts: postsubscript is below the top of the base"); 51 assert_less_than(getBox("multipostsup").bottom, getBox("multibase").bottom, "mmultiscripts: postsupscript is above the bottom of the base"); 52 assert_greater_than(getBox("multipresub").top, getBox("multibase").top, "mmultiscripts: presubscript is below the top of the base"); 53 assert_less_than(getBox("multipresup").bottom, getBox("multibase").bottom, "mmultiscripts: presupscript is above the bottom of the base"); 54 }, "Tall subscripts/superscripts are not placed too high/low"); 55 56 test(function() { 57 assert_true(MathMLFeatureDetection.has_mspace()); 58 59 assert_greater_than(getBox("msubsupsub").top, getBox("msubsupsup").bottom, "msubsup: subscript is below the superscript"); 60 assert_greater_than(getBox("multipresub").top, getBox("multipresup").bottom, "mmultiscripts: presubscript is below the presuperscript"); 61 assert_greater_than(getBox("multipostsub").top, getBox("multipostsup").bottom, "mmultiscripts: postsubscript is below the postsuperscript"); 62 }, "No collisions for tall subscripts and superscripts"); 63 64 done(); 65 } 66 </script> 67 </head> 68 <body> 69 <div id="log"></div> 70 <p> 71 <math> 72 <mspace id="baseline" width="30px" height="2px" depth="0px" style="background: blue"/> 73 <msub id="msub"> 74 <mspace id="msubbase" width="30px" height="15px" depth="15px" style="background: black"/> 75 <mspace id="msubsub" width="10px" height="50px" depth="50px" style="background: black"/> 76 </msub> 77 <msup id="msup"> 78 <mspace id="msupbase" width="30px" height="15px" depth="15px" style="background: black"/> 79 <mspace id="msupsup" width="10px" height="75px" depth="75px" style="background: black"/> 80 </msup> 81 <msubsup id="msubsup"> 82 <mspace id="msubsupbase" width="30px" height="15px" depth="15px" style="background: black"/> 83 <mspace id="msubsupsub" width="10px" height="50px" depth="50px" style="background: black"/> 84 <mspace id="msubsupsup" width="10px" height="75px" depth="75px" style="background: black"/> 85 </msubsup> 86 <mmultiscripts id="multi"> 87 <mspace id="multibase" width="30px" height="15px" depth="15px" style="background: black"/> 88 <mspace id="multipostsub" width="10px" height="50px" depth="50px" style="background: black"/> 89 <mspace id="multipostsup" width="10px" height="75px" depth="75px" style="background: black"/> 90 <mprescripts/> 91 <mspace id="multipresub" width="10px" height="50px" depth="50px" style="background: black"/> 92 <mspace id="multipresup" width="10px" height="75px" depth="75px" style="background: black"/> 93 </mmultiscripts> 94 </math> 95 </p> 96 </body> 97 </html>