Element-closest.html (3119B)
1 <!DOCTYPE HTML> 2 <meta charset=utf8> 3 <title>Test for Element.closest</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <body id="body"> 7 <div id="test8" class="div3" style="display:none"> 8 <div id="test7" class="div2"> 9 <div id="test6" class="div1"> 10 <form id="test10" class="form2"></form> 11 <form id="test5" class="form1" name="form-a"> 12 <input id="test1" class="input1" required> 13 <fieldset class="fieldset2" id="test2"> 14 <select id="test3" class="select1" required> 15 <option default id="test4" value="">Test4</option> 16 <option selected id="test11">Test11</option> 17 <option id="test12">Test12</option> 18 <option id="test13">Test13</option> 19 </select> 20 <input id="test9" type="text" required> 21 </fieldset> 22 </form> 23 </div> 24 </div> 25 </div> 26 <div id=log></div> 27 <script> 28 do_test("select" , "test12", "test3"); 29 do_test("fieldset" , "test13", "test2"); 30 do_test("div" , "test13", "test6"); 31 do_test("body" , "test3" , "body"); 32 33 do_test("[default]" , "test4" , "test4"); 34 do_test("[selected]" , "test4" , ""); 35 do_test("[selected]" , "test11", "test11"); 36 do_test('[name="form-a"]' , "test12", "test5"); 37 do_test('form[name="form-a"]' , "test13", "test5"); 38 do_test("input[required]" , "test9" , "test9"); 39 do_test("select[required]" , "test9" , ""); 40 41 do_test("div:not(.div1)" , "test13", "test7"); 42 do_test("div.div3" , "test6" , "test8"); 43 do_test("div#test7" , "test1" , "test7"); 44 45 do_test(".div3 > .div2" , "test12", "test7"); 46 do_test(".div3 > .div1" , "test12", ""); 47 do_test("form > input[required]" , "test9" , ""); 48 do_test("fieldset > select[required]", "test12", "test3"); 49 50 do_test("input + fieldset" , "test6" , ""); 51 do_test("form + form" , "test3" , "test5"); 52 do_test("form + form" , "test5" , "test5"); 53 54 do_test(":empty" , "test10", "test10"); 55 do_test(":last-child" , "test11", "test2"); 56 do_test(":first-child" , "test12", "test3"); 57 do_test(":invalid" , "test11", "test2"); 58 59 do_test(":scope" , "test4", "test4"); 60 do_test("select > :scope" , "test4", "test4"); 61 do_test("div > :scope" , "test4", ""); 62 do_test(":has(> :scope)" , "test4", "test3"); 63 function do_test(aSelector, aElementId, aTargetId) { 64 test(function() { 65 var el = document.getElementById(aElementId).closest(aSelector); 66 if (el === null) { 67 assert_equals("", aTargetId, aSelector); 68 } else { 69 assert_equals(el.id, aTargetId, aSelector); 70 } 71 }, "Element.closest with context node '" + aElementId + "' and selector '" + aSelector + "'"); 72 } 73 </script>