focus.html (1839B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Selector: pseudo-classes (:focus)</title> 4 <link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org" id=link1> 5 <link rel=help href="https://html.spec.whatwg.org/multipage/#pseudo-classes" id=link2> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="utils.js"></script> 9 <body id=body tabindex=0> 10 <div id="log"></div> 11 <button id=button1 type=submit>button1</button> 12 <input id=input1> 13 <input id=input2 disabled> 14 <textarea id=textarea1>textarea1</textarea> 15 <input type=checkbox id=checkbox1 checked> 16 <input type=radio id=radio1 checked> 17 <div tabindex=0 id=div1>hello</div> 18 <div contenteditable id=div2>content</div> 19 <iframe src="focus-iframe.html" id=iframe></iframe> 20 21 <script> 22 setup({explicit_done: true}); 23 24 onload = function() { 25 if (document.hasFocus() || frames[0].document.hasFocus()) { 26 run_test() 27 } else { 28 window.onfocus = run_test; 29 } 30 } 31 32 function run_test() { 33 document.getElementById("input1").focus(); // set the focus on input1 34 testSelectorIdsMatch(":focus", ["input1"], "input1 has the focus"); 35 36 document.getElementById("div1").focus(); 37 testSelectorIdsMatch(":focus", ["div1"], "tabindex attribute makes the element focusable"); 38 39 document.getElementById("div2").focus(); 40 testSelectorIdsMatch(":focus", ["div2"], "editable elements are focusable"); 41 42 document.body.focus(); 43 testSelectorIdsMatch(":focus", ["body"], "':focus' matches focussed body with tabindex"); 44 45 document.getElementById("iframe").contentDocument.getElementById("inputiframe").focus(); 46 testSelectorIdsMatch(":focus", [], "':focus' doesn't match focused elements in iframe"); 47 48 done(); 49 } 50 </script> 51 </body>