dir-selector-querySelector.html (3035B)
1 <!doctype html> 2 <html> 3 <head> 4 <link rel="help" href="http://www.w3.org/TR/selectors4/#dir-pseudo"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 </head> 8 9 <body> 10 <div id=outer> 11 <div id=div1></div> 12 <div id=div2 dir=ltr> 13 <div id=div2_1></div> 14 <div id=div2_2 dir=ltr></div> 15 <div id=div2_3 dir=rtl></div> 16 </div> 17 <div id=div3 dir=rtl> 18 <div id=div3_1> 19 <div id=div3_1_1></div> 20 </div> 21 <div id=div3_2 dir=ltr></div> 22 <div id=div3_3 dir=rtl></div> 23 </div> 24 <div id=div4 dir=lol></div> 25 <div id=div5 dir=auto></div> 26 </div> 27 </body> 28 29 <script> 30 test(() => { 31 assert_equals(document.querySelector(":dir(lol)"), null); 32 assert_equals(document.querySelector(":dir(lol )"), null); 33 assert_equals(document.querySelector(":dir( auto)"), null); 34 assert_equals(document.querySelector(":dir(\nauto\t)"), null); 35 }, ":dir() allows any ident value but strings other than ltr/rtl don't match"); 36 37 test(() => { 38 assert_throws_dom("SYNTAX_ERR", () => { document.querySelector(":dir()"); }); 39 assert_throws_dom("SYNTAX_ERR", () => { document.querySelector(":dir(ltr, rtl)"); }); 40 assert_throws_dom("SYNTAX_ERR", () => { document.querySelector(":dir('ltr')"); }); 41 }, ":dir() requires exactly an ident argument"); 42 43 test(() => { 44 assert_equals(document.querySelector(":dir(rtl)"), div2_3); 45 assert_equals(document.querySelector("*:dir(rtl)"), div2_3); 46 assert_equals(document.querySelector("div:dir(ltr)"), outer); 47 assert_equals(document.querySelector("div:dir(ltr):dir(ltr)"), outer); 48 assert_equals(document.querySelector(":dir(rtl)#div3_3"), div3_3); 49 assert_equals(document.querySelector(":nth-child(2):dir(rtl)"), null); 50 assert_equals(document.querySelector(":nth-child(3):dir(rtl)"), div2_3); 51 assert_equals(document.querySelector(":nth-child(4):dir(ltr)"), div4); 52 assert_equals(document.querySelector(":nth-last-child(3):dir(rtl)"), div3); 53 }, ":dir() works in compound selectors"); 54 55 test(() => { 56 assert_equals(document.querySelector("#div2 :dir(ltr)"), div2_1); 57 assert_equals(document.querySelector(":dir(rtl) div"), div3_1); 58 assert_equals(document.querySelector("div + :dir(ltr)"), div2); 59 assert_equals(document.querySelector(":dir(ltr) + :dir(rtl)"), div2_3); 60 assert_equals(document.querySelector(":dir(rtl) :dir(rtl)"), div3_1); 61 assert_equals(document.querySelector(":dir(rtl) + :dir(ltr)"), div3_2); 62 assert_equals(document.querySelector(":dir(rtl) ~ :dir(rtl)"), div3_3); 63 assert_equals(document.querySelector(":dir(rtl) :dir(ltr)"), div3_2); 64 assert_equals(document.querySelector("* :dir(rtl) *"), div3_1); 65 assert_equals(document.querySelector("div :dir(rtl) div"), div3_1); 66 assert_equals(document.querySelector(":dir(ltr) :dir(rtl) + :dir(ltr)"), div3_2); 67 assert_equals(document.querySelector(":dir(ltr) + :dir(rtl) + * + *"), div5); 68 assert_equals(document.querySelector(":dir(rtl) > * > :dir(rtl)"), div3_1_1); 69 }, ":dir() works in complex selectors"); 70 </script> 71 </html>