symmetric-largeop.html (2560B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test placement of non-stretchy symmetric/non-symmetric largeops with a block-direction intrinsic stretch axis</title> 6 <link rel="help" href="https://issues.chromium.org/issues/40889877"> 7 <link rel="help" href="https://github.com/w3c/mathml-core/issues/250"> 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 @font-face { 14 font-family: TestFont; 15 src: url("/fonts/math/largeop-displayoperatorminheight3000-2AFF-axisheight1000.woff"); 16 } 17 math { 18 font-family: TestFont; 19 font-size: 30px; 20 margin-bottom: 15px; /* to distinguish the tests visually */ 21 } 22 mspace { 23 background-color: green; 24 } 25 </style> 26 <script> 27 setup({ explicit_done: true }); 28 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 29 30 // U+2AFF has intrinsic block stretch axis and the symmetric, largeop and movablelimits properties. 31 // 32 // We compare the operator top to the mspace bottom (which will always be the alphabetic baseline). 33 // 34 // The operator should center around the math axis for symmetric largeops. 35 // The ascent of the largeop is: 36 // largeop height / 2 (= 1.5em) 37 // + AxisHeight (= 1em) 38 // = 2.5em (75px). 39 // 40 // The operator should place on the baseline for non-symmetric largeops, 41 // so the ascent of the largeop = 3em (90px). 42 43 function runTests() { 44 test(function() { 45 const container = document.getElementById("container"); 46 [ 47 [ 75, "symmetric largeop is centered around the math axis" ], 48 [ 90, "non-symmetric largeop is placed on the baseline" ], 49 ].forEach(([ spacing, desc ], i) => { 50 const mrow = container.children[i].firstElementChild; 51 let opBbox = mrow.firstElementChild.getBoundingClientRect(); 52 let spaceBbox = mrow.lastElementChild.getBoundingClientRect(); 53 assert_equals(spaceBbox.bottom - opBbox.top, spacing, desc); 54 }) 55 }, "Placement of operators"); 56 done(); 57 } 58 </script> 59 </head> 60 <body> 61 <div id="container"> 62 <math display="block"> 63 <mrow> 64 <mo symmetric="true" largeop="true">⫿</mo> 65 <mspace height="1em" width="1em"></mspace> 66 </mrow> 67 </math> 68 <math display="block"> 69 <mrow> 70 <mo symmetric="false" largeop="true">⫿</mo> 71 <mspace height="1em" width="1em"></mspace> 72 </mrow> 73 </math> 74 </div> 75 </body> 76 </html>