painting-stretchy-operator-001.html (2482B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Painting of vertical assembly</title> 6 <link rel="match" href="painting-stretchy-operator-001-ref.html"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> 8 <link rel="help" href="https://crbug.com/1409380"> 9 <meta name="assert" content="Verify that vertical glyph assemblies are painted at the position of their bounding box."> 10 <script src="/mathml/support/fonts.js"></script> 11 <style> 12 .container { 13 font-size: 50px; 14 position: absolute; 15 left: 1em; 16 top: 1em; 17 padding: 5px; 18 background: green; 19 width: 4em; 20 height: 8em; 21 } 22 mo { 23 color: green; 24 background: red; 25 } 26 .frame { 27 position: absolute; 28 box-sizing: border-box; 29 border: 2px solid green; 30 } 31 @font-face { 32 font-family: stretchy; 33 src: url("/fonts/math/stretchy.woff"); 34 } 35 @font-face { 36 font-family: stretchy-centered-on-baseline; 37 src: url("/fonts/math/stretchy-centered-on-baseline.woff"); 38 } 39 </style> 40 <script> 41 function runTests() { 42 // Add a green frame around mo to avoid antialisasing/rounding issues. 43 Array.from(document.getElementsByTagName('mo')).forEach(mo => { 44 let box = mo.getBoundingClientRect(); 45 let div = document.createElement("div"); 46 div.className = 'frame'; 47 div.style.left = `${box.left-1}px`; 48 div.style.top = `${box.top-1}px`; 49 div.style.width = `${box.width+1}px`; 50 div.style.height = `${box.height+1}px`; 51 document.body.appendChild(div); 52 }); 53 document.documentElement.classList.remove("reftest-wait"); 54 } 55 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 56 </script> 57 <body> 58 <p>This test passes if you see a green rectangle and no red.</p> 59 <div class="container"> 60 <!-- This font uses assembly glyphs with zero ink descent, which is what 61 Latin Modern Math does for U+007C VERTICAL LINE. --> 62 <math style="font-family: stretchy"> 63 <mspace height="4em"/> 64 <mo stretchy="true" symmetric="true">⥜</mo> 65 </math> 66 <!-- This font uses assembly glyphs with non-zero ink descent, which is what 67 Cambria Math does for U+007C VERTICAL LINE. --> 68 <math style="font-family: stretchy-centered-on-baseline"> 69 <mspace height="4em"/> 70 <mo stretchy="true" symmetric="true">⥜</mo> 71 </math> 72 </div> 73 </body>