glyph-level-mirroring.html (3682B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Glyph-level mirroring</title> 6 <link 7 rel="help" 8 href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot" 9 > 10 <meta 11 name="assert" 12 content="Radicals should be mirrored when using RTL text direction" 13 > 14 <script src="/resources/testharness.js"></script> 15 <script src="/resources/testharnessreport.js"></script> 16 <script src="/mathml/support/feature-detection.js"></script> 17 <script src="/mathml/support/fonts.js"></script> 18 19 <style> 20 /* This font contains the 0x221A character (radical), and a mirrored 21 version using the rtlm font feature (radical.rtlm). The base, 22 variant and assembly widths of the original character are 4em, 23 while the ones from the rtlm version are 1em. */ 24 @font-face { 25 font-family: rtlm; 26 src: url("/fonts/math/radical-rtlm.woff"); 27 } 28 math { 29 font-family: rtlm; 30 font-size: 16px; 31 } 32 mspace { 33 width: 1em; 34 background: cornflowerblue; 35 } 36 </style> 37 38 <script> 39 const epsilon = 1; 40 const font_size = 16; 41 const test_cases = [ 42 "Base glyph", 43 "Size variant", 44 "Glyph assembly", 45 ]; 46 47 setup({ explicit_done: true }); 48 window.addEventListener("load", () => { 49 loadAllFonts().then(runTests); 50 }); 51 52 function runTests() { 53 test(function () { 54 document.querySelectorAll("math:not([dir='rtl'])").forEach( 55 (math, i) => { 56 msqrt = math.firstElementChild; 57 box = msqrt.getBoundingClientRect(); 58 // The box size should be the width of the mspace (1em) 59 // plus the expected glyph width (4em in this case). 60 mspace_width = 61 msqrt.firstElementChild.getBoundingClientRect().width; 62 const glyph_width = 4 * font_size; 63 assert_approx_equals( 64 box.width, 65 glyph_width + mspace_width, 66 epsilon, 67 test_cases[i], 68 ); 69 }, 70 ); 71 }, "LTR Direction"); 72 73 test(function () { 74 document.querySelectorAll("math[dir='rtl']").forEach( 75 (math, i) => { 76 msqrt = math.firstElementChild; 77 box = msqrt.getBoundingClientRect(); 78 // In this case the expected glyph width is 1em, as it 79 // should be using the rtlm version. 80 mspace_width = 81 msqrt.firstElementChild.getBoundingClientRect().width; 82 const glyph_width = 1 * font_size; 83 assert_approx_equals( 84 box.width, 85 glyph_width + mspace_width, 86 epsilon, 87 test_cases[i], 88 ); 89 }, 90 ); 91 }, "RTL Direction"); 92 93 done(); 94 } 95 </script> 96 </head> 97 98 <body> 99 <div id="log"></div> 100 <p> 101 <math> 102 <msqrt> 103 <mspace height="0.5em" /> 104 </msqrt> 105 </math> 106 <math dir="rtl"> 107 <msqrt> 108 <mspace height="0.5em" /> 109 </msqrt> 110 </math> 111 </p> 112 <hr /> 113 <p> 114 <math> 115 <msqrt> 116 <mspace height="1em" /> 117 </msqrt> 118 </math> 119 <math dir="rtl"> 120 <msqrt> 121 <mspace height="1em" /> 122 </msqrt> 123 </math> 124 </p> 125 <hr /> 126 <p> 127 <math> 128 <msqrt> 129 <mspace height="4em" /> 130 </msqrt> 131 </math> 132 <math dir="rtl"> 133 <msqrt> 134 <mspace height="4em" /> 135 </msqrt> 136 </math> 137 </p> 138 </body> 139 </html>