dynamic-dir-1.html (2571B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test dynamically changing dir attribute</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> 9 <meta name="assert" content="The dir attribute should update direction map to css properties dynamically"> 10 <link rel="match" href="dynamic-dir-1-ref.html"> 11 <script> 12 window.addEventListener("load", () => { 13 14 // force initial layout so we're sure what we're testing against 15 document.documentElement.getBoundingClientRect(); 16 17 ["math", "mstyle", "mrow"].forEach((tag) => { 18 let elements = document.getElementsByTagName(tag); 19 20 // set an explicit rtl where there was none 21 elements[0].setAttribute("dir", "rtl"); 22 23 // change explicit ltr to rtl 24 elements[1].setAttribute("dir", "rtl"); 25 26 // remove an explicitly set dir="rtl" 27 elements[2].removeAttribute("dir"); 28 29 }) 30 31 document.documentElement.classList.remove('reftest-wait'); 32 }) 33 </script> 34 </head> 35 <body> 36 <p> 37 math: 38 <math> 39 <mi>a</mi> 40 <mi>b</mi> 41 <mi>c</mi> 42 </math> 43 <math dir="ltr"> 44 <mi>a</mi> 45 <mi>b</mi> 46 <mi>c</mi> 47 </math> 48 <math dir="rtl"> 49 <mi>a</mi> 50 <mi>b</mi> 51 <mi>c</mi> 52 </math> 53 </p> 54 <p> 55 mstyle: 56 <math> 57 <mstyle> 58 <mi>a</mi> 59 <mi>b</mi> 60 <mi>c</mi> 61 </mstyle> 62 </math> 63 <math> 64 <mstyle dir="ltr"> 65 <mi>a</mi> 66 <mi>b</mi> 67 <mi>c</mi> 68 </mstyle> 69 </math> 70 <math> 71 <mstyle dir="rtl"> 72 <mi>a</mi> 73 <mi>b</mi> 74 <mi>c</mi> 75 </mstyle> 76 </math> 77 </p> 78 <p> 79 mrow: 80 <math> 81 <mrow> 82 <mi>a</mi> 83 <mi>b</mi> 84 <mi>c</mi> 85 </mrow> 86 </math> 87 <math> 88 <mrow dir="ltr"> 89 <mi>a</mi> 90 <mi>b</mi> 91 <mi>c</mi> 92 </mrow> 93 </math> 94 <math> 95 <mrow dir="rtl"> 96 <mi>a</mi> 97 <mi>b</mi> 98 <mi>c</mi> 99 </mrow> 100 </math> 101 </p> 102 <script src="/mathml/support/feature-detection.js"></script> 103 <script>MathMLFeatureDetection.ensure_for_match_reftest("has_dir");</script> 104 </body> 105 </html>