character-level-mirroring.html (3241B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Character-level mirroring</title> 6 <meta 7 name="assert" 8 content="Operators should be mirrored when using RTL text direction" 9 > 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/mathml/support/feature-detection.js"></script> 13 <script src="/mathml/support/fonts.js"></script> 14 15 <style> 16 /* This font contains the characters 0x007B, 0x0029, 0x007D and 0x0028 17 (left and right parentheses and brackets), which respectively have 18 widths of 1em, 2em, 3em and 4em for any stretch size (base glyph, 19 size variants and glyph assemblies). */ 20 @font-face { 21 font-family: operators; 22 src: url("/fonts/math/stretchy-text-direction-asymetrical.woff"); 23 } 24 math { 25 font-family: operators; 26 font-size: 16px; 27 } 28 mspace { 29 width: 1em; 30 background: cornflowerblue; 31 } 32 </style> 33 34 <script> 35 const epsilon = 1; 36 const font_size = 16; 37 const test_cases = [ 38 "Base glyph", 39 "Size variant", 40 "Glyph assembly", 41 ]; 42 43 setup({ explicit_done: true }); 44 window.addEventListener("load", () => { 45 loadAllFonts().then(runTests); 46 }); 47 48 function runTests() { 49 // Test base glyph, size variant and glyph assembly. 50 document.querySelectorAll("p").forEach( 51 (paragraph, i) => { 52 mspace = paragraph.querySelector("mspace"); 53 test(function () { 54 paragraph.querySelectorAll("mo").forEach((mo, j) => { 55 box = mo.getBoundingClientRect(); 56 // Measure the width of the characters { and ), then the 57 // mirrored } and (. 58 assert_approx_equals( 59 box.width, 60 font_size * (j + 1), 61 epsilon, 62 `operator ${mo.textContent} ${ 63 window.getComputedStyle(mo).direction 64 }`, 65 ); 66 }); 67 }, `${test_cases[i]} (${mspace.getAttribute("height")})`); 68 }, 69 ); 70 71 done(); 72 } 73 </script> 74 </head> 75 76 <body> 77 <div id="log"></div> 78 <p> 79 <math> 80 <mrow> 81 <mo>{</mo> 82 <mspace height="0.5em" /> 83 <mo>)</mo> 84 </mrow> 85 </math> 86 <math dir="rtl"> 87 <mrow> 88 <mo>{</mo> 89 <mspace height="0.5em" /> 90 <mo>)</mo> 91 </mrow> 92 </math> 93 </p> 94 <hr /> 95 <p> 96 <math> 97 <mrow> 98 <mo>{</mo> 99 <mspace height="1em" /> 100 <mo>)</mo> 101 </mrow> 102 </math> 103 <math dir="rtl"> 104 <mrow> 105 <mo>{</mo> 106 <mspace height="1em" /> 107 <mo>)</mo> 108 </mrow> 109 </math> 110 </p> 111 <hr /> 112 <p> 113 <math> 114 <mrow> 115 <mo>{</mo> 116 <mspace height="4em" /> 117 <mo>)</mo> 118 </mrow> 119 </math> 120 <math dir="rtl"> 121 <mrow> 122 <mo>{</mo> 123 <mspace height="4em" /> 124 <mo>)</mo> 125 </mrow> 126 </math> 127 </p> 128 </body> 129 </html>