dir-dynamic.html (1564B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <link rel="author" title="Vincent Hilla" href="mailto:vhilla@mozilla.com"> 8 <link rel="help" href="https://html.spec.whatwg.org/#the-directionality"> 9 </head> 10 <body> 11 <input id="inp"/> 12 <textarea id="ta"></textarea> 13 <div id="div"></div> 14 <pre id="pre"></pre> 15 16 <script> 17 function doTest(e) { 18 e.dir = "ltr"; 19 assert_true(e.matches(":dir(ltr)"), "dir to ltr on " + e.tagName + " element"); 20 21 e.dir = "rtl"; 22 assert_true(e.matches(":dir(rtl)"), "dir to rtl on " + e.tagName + " element"); 23 24 e.dir = "auto"; 25 assert_true(e.matches(":dir(ltr)"), "dir to auto, empty text on " + e.tagName + " element"); 26 27 e.value = "\u05D0;"; 28 e.textContent = "\u05D0;"; 29 assert_true(e.matches(":dir(rtl)"), "auto dir, text to Hebrew on " + e.tagName + " element"); 30 31 e.dir = "ltr"; 32 assert_true(e.matches(":dir(ltr)"), "dir to ltr, Hebrew text on " + e.tagName + " element"); 33 34 e.dir = "auto"; 35 assert_true(e.matches(":dir(rtl)"), "dir to auto, Hebrew text on " + e.tagName + " element"); 36 37 e.removeAttribute("dir"); 38 assert_true(e.matches(":dir(ltr)"), "dir removed, Hebrew text on " + e.tagName + " element"); 39 } 40 41 const elements = [inp, ta, div, pre]; 42 for (const e of elements) { 43 test(() => doTest(e), "Dynamically changing dir, text on " + e.tagName.toLowerCase() + " element"); 44 } 45 </script> 46 </body> 47 </html>