subsup-6.html (5486B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>mprescripts</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> 7 <meta name="assert" content="Position and size of mprescripts in mmultiscript element."> 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 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <style> 14 math, mspace { 15 font: 25px/1 Ahem; 16 } 17 </style> 18 <script> 19 /* This test does not use a font with a MATH table and does not verify layout 20 rules in a very strict way. */ 21 22 setup({ explicit_done: true }); 23 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 24 25 function runTests() { 26 Array.from(document.getElementsByTagName("mprescripts")). 27 forEach(prescript => { 28 let mmultiscripts = prescript.parentNode; 29 let name = mmultiscripts.getAttribute("data-name"); 30 test(function() { 31 assert_true(MathMLFeatureDetection.has_mspace()); 32 var e = 1; 33 let base_box = mmultiscripts.firstElementChild.getBoundingClientRect(); 34 let prescript_box = prescript.getBoundingClientRect(); 35 assert_approx_equals(prescript_box.left, base_box.left, e, `${name}, left`); 36 assert_approx_equals((prescript_box.top + prescript_box.bottom) / 2, (base_box.top + base_box.bottom) / 2, e, `${name}, top`); 37 38 if (name == "prescripts with padding/border/margin") { 39 assert_approx_equals(prescript_box.width, 2*(15 + 25), e, `${name}, width`); 40 assert_approx_equals(prescript_box.height, 2*(10 + 20), e, `${name}, height`); 41 } else { 42 assert_approx_equals(prescript_box.width, 0, e, `${name}, width`); 43 assert_approx_equals(prescript_box.height, 0, e, `${name}, height`); 44 } 45 }, `mprescripts coordinates and sizes (${name})`); 46 }); 47 48 done(); 49 } 50 </script> 51 </head> 52 <body> 53 <div id="log"></div> 54 <p> 55 <math> 56 <mmultiscripts data-name="2 postscripts"> 57 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 58 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 59 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 60 <mprescripts/> 61 </mmultiscripts> 62 </math> 63 </p> 64 <p> 65 <math> 66 <mmultiscripts data-name="2 prescripts"> 67 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 68 <mprescripts/> 69 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 70 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 71 </mmultiscripts> 72 </math> 73 </p> 74 <p> 75 <math> 76 <mmultiscripts data-name="2 prescripts, 4 postscripts"> 77 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 78 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 79 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 80 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 81 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 82 <mprescripts/> 83 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 84 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 85 </mmultiscripts> 86 </math> 87 </p> 88 <p> 89 <math> 90 <mmultiscripts data-name="4 prescripts, 2 postscripts"> 91 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 92 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 93 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 94 <mprescripts/> 95 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 96 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 97 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 98 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 99 </mmultiscripts> 100 </math> 101 </p> 102 <p> 103 <math> 104 <mmultiscripts data-name="prescripts with padding/border/margin"> 105 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 106 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 107 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 108 <mprescripts style="background: blue; 109 padding-top: 10px; border-top: 20px solid green; 110 padding-bottom: 10px; border-bottom: 20px solid green; 111 padding-left: 15px; border-left: 25px solid green; 112 padding-right: 15px; border-right: 25px solid green; 113 margin-top: 50px;"/> 114 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 115 <mspace width="30px" height="15px" depth="15px" style="background: black"/> 116 </mmultiscripts> 117 </math> 118 </p> 119 </body> 120 </html>