mo-stretch-properties-001.html (2206B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Stretch properties</title> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#dictionary-based-attributes"> 8 <meta name="assert" content="Verify "> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/mathml/support/fonts.js"></script> 12 <style> 13 math { 14 font: 25px/1 Ahem; 15 } 16 @font-face { 17 font-family: operators; 18 src: url("/fonts/math/operators.woff"); 19 } 20 mo { 21 font-family: operators; 22 } 23 </style> 24 <script> 25 setup({ explicit_done: true }); 26 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 27 28 function runTests() { 29 30 var epsilon = 1; 31 var emToPx = 25; 32 var element; 33 34 test(function() { 35 element = document.getElementById("mn_vertical_line"); 36 assert_approx_equals(element.getBoundingClientRect().height, 1 * emToPx, epsilon, "<mn> element"); 37 38 element = document.getElementById("mo_prefix_vertical_line"); 39 assert_approx_equals(element.getBoundingClientRect().height, 6 * emToPx, epsilon, "Prefix <mo> element"); 40 41 element = document.getElementById("mo_infix_vertical_line"); 42 assert_approx_equals(element.getBoundingClientRect().height, 1 * emToPx, epsilon, "Infix <mo> element"); 43 44 element = document.getElementById("mo_postfix_vertical_line"); 45 assert_approx_equals(element.getBoundingClientRect().height, 6 * emToPx, epsilon, "Postfix <mo> element"); 46 }, `Stretchy vertical line`); 47 48 done(); 49 } 50 </script> 51 </head> 52 <body> 53 <div id="log"></div> 54 <p> 55 <math> 56 <mrow> 57 <!-- Some non-element nodes before --> 58 <mo id="mo_prefix_vertical_line" style="color: green">|</mo> 59 <mn id="mn_vertical_line">|</mn> 60 <mspace width="1em" height="3em" depth="3em" style="background: blue"/> 61 <mo id="mo_infix_vertical_line" lspace="0" rspace="0">|</mo> 62 <mo id="mo_postfix_vertical_line" style="color: green">|</mo> 63 <!-- Some non-element nodes after --> 64 </mrow> 65 </math> 66 </p> 67 </body> 68 </html>