dir.html (2945B)
1 <!DOCTYPE html> 2 <html id=html> 3 <head id=head> 4 <meta charset=utf-8 id=meta> 5 <title id=title>Selector: pseudo-classes (:dir(ltr), :dir(rtl))</title> 6 <link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org" id=link1> 7 <link rel=help href="https://html.spec.whatwg.org/multipage/#pseudo-classes" id=link2> 8 <script src="/resources/testharness.js" id=script1></script> 9 <script src="/resources/testharnessreport.js" id=script2></script> 10 <script src="utils.js" id=script3></script> 11 <style id=style> 12 #span1 {direction: rtl;} 13 #span5, #span6 {display: none;} 14 </style> 15 </head> 16 <body id=body> 17 <div id="log"></div> 18 <bdo dir="rtl" id=bdo1>WERBEH</bdo> 19 <bdo dir="ltr" id=bdo2>HEBREW</bdo> 20 <bdi id=bdi1>HEBREW</bdi> 21 <bdi dir="rtl" id=bdi2>WERBEH</bdi> 22 <bdi dir="ltr" id=bdi3>HEBREW</bdi> 23 <bdi id=bdi4>إيان</bdi> 24 <span id=span1>WERBEH</span> 25 <span dir="rtl" id=span2>WERBEH</span> 26 <span dir="ltr" id=span3>HEBREW</span> 27 ‮<span id=span4>WERBEH</span>‬ 28 <span dir="rtl" id=span5>WERBEH</span> 29 <span dir="ltr" id=span6>HEBREW</span> 30 <span dir="rtl" id=span7> 31 <input type=tel id=input-tel1> 32 <input type=tel id=input-tel2 dir="invalid"> 33 </span> 34 <input type=tel id=input-tel3 dir="rtl"> 35 <bdo dir="auto" id=bdo3>HEBREW</bdo> 36 <bdo dir="auto" id=bdo4>إيان</bdo> 37 <bdo dir="ltr" id=bdo5>עברית</bdo> 38 <textarea dir="auto" id="ta1">إيان</textarea> 39 <textarea dir="auto" id="ta2">HEBREWإيان</textarea> 40 <textarea dir="auto" id="ta3">إيان</textarea> 41 <pre dir="auto" id="pre1">إيان</pre> 42 <pre dir="auto" id="pre2">HEBREWإيان</pre> 43 44 <script id=script4> 45 ta3.value = "HEBREW"; 46 47 const rtlElements = [ 48 "bdo1", 49 "bdi2", 50 "bdi4", 51 "span2", 52 "span5", 53 "span7", 54 "input-tel3", 55 "bdo4", 56 "ta1", 57 "pre1", 58 ]; 59 60 testSelectorIdsMatch(":dir(rtl)", rtlElements, "':dir(rtl)' matches all elements whose directionality is 'rtl'."); 61 62 const ltrElements = [ 63 "html", 64 "head", 65 "meta", 66 "title", 67 "link1", 68 "link2", 69 "script1", 70 "script2", 71 "script3", 72 "style", 73 "body", 74 "log", 75 "bdo2", 76 "bdi1", 77 "bdi3", 78 "span1", 79 "span3", 80 "span4", 81 "span6", 82 "input-tel1", 83 "input-tel2", 84 "bdo3", 85 "bdo5", 86 "ta2", 87 "ta3", 88 "pre2", 89 "script4", 90 ]; 91 92 testSelectorIdsMatch(":dir(ltr)", ltrElements, "':dir(ltr)' matches all elements whose directionality is 'ltr'."); 93 94 const bdo = document.createElement("bdo"); 95 bdo.setAttribute("dir", "ltr"); 96 testSelectorIdsMatch(":dir(ltr)", ltrElements, "':dir(ltr)' doesn't match elements not in the document."); 97 </script> 98 </body> 99 </html>