focus-within-009.html (6309B)
1 <!DOCTYPE html> 2 <html id="html"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Selectors Level 4: focus-within</title> 6 <link rel="author" title="Benjamin Poulain" href="mailto:bpoulain@apple.com"> 7 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 8 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> 9 <meta name="assert" content="Checks the basic features of the ':focus-within' pseudo class."> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <style> 13 * { 14 background-color: white; 15 } 16 :focus-within { 17 background-color: rgb(1, 2, 3); 18 } 19 </style> 20 </head> 21 <body id="body"> 22 <div id="test"> 23 <div id="container1"> 24 <div id="sibling1"></div> 25 <div id="sibling2"> 26 <input id="target1"> 27 </div> 28 <div id="sibling3"></div> 29 </div> 30 <div id="container2"> 31 <div id="sibling4"></div> 32 <div id="sibling5"> 33 <textarea id="target2"></textarea> 34 </div> 35 <div id="sibling6"></div> 36 </div> 37 </div> 38 <div id=log></div> 39 40 <script> 41 "use strict"; 42 43 function elementsStyledWithFocusWithinSelector() { 44 let elements = []; 45 for (let element of document.querySelectorAll("*")) { 46 if (getComputedStyle(element).backgroundColor === 'rgb(1, 2, 3)') { 47 elements.push(element.id); 48 } 49 } 50 return elements; 51 } 52 53 function elementsMatchingFocusWithinSelector() { 54 let elements = []; 55 for (let element of document.querySelectorAll(":focus-within")) { 56 elements.push(element.id); 57 } 58 return elements; 59 } 60 61 test( 62 function() { 63 assert_array_equals(elementsStyledWithFocusWithinSelector(), []); 64 assert_array_equals(elementsMatchingFocusWithinSelector(), []); 65 }, "Initial State"); 66 67 var container1 = document.getElementById("container1"); 68 var container2 = document.getElementById("container2"); 69 var target1 = document.getElementById("target1"); 70 var target2 = document.getElementById("target2"); 71 72 test( 73 function() { 74 target1.focus(); 75 assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]); 76 assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]); 77 }, "Focus 'target1'"); 78 79 test( 80 function() { 81 target2.focus(); 82 assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]); 83 assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]); 84 }, "Focus 'target2'"); 85 86 test( 87 function() { 88 target1.focus(); 89 assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]); 90 assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]); 91 }, "Focus 'target1' again"); 92 93 test( 94 function() { 95 target2.focus(); 96 assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]); 97 assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]); 98 }, "Focus 'target2' again"); 99 100 test( 101 function() { 102 target1.focus(); 103 assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]); 104 assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]); 105 }, "Focus 'target1' once again"); 106 107 test( 108 function() { 109 container1.parentElement.removeChild(container1); 110 assert_array_equals(elementsStyledWithFocusWithinSelector(), []); 111 assert_array_equals(elementsMatchingFocusWithinSelector(), []); 112 assert_equals(container1.querySelectorAll(":focus-within").length, 0); 113 assert_false(target1.matches(":focus")); 114 assert_false(target2.matches(":focus")); 115 }, "Detach 'container1' from the document"); 116 117 test( 118 function() { 119 target1.focus(); 120 assert_array_equals(elementsStyledWithFocusWithinSelector(), []); 121 assert_array_equals(elementsMatchingFocusWithinSelector(), []); 122 assert_equals(container1.querySelectorAll(":focus-within").length, 0); 123 assert_false(target1.matches(":focus")); 124 assert_false(target2.matches(":focus")); 125 }, "Try to focus 'target1'"); 126 127 test( 128 function() { 129 target2.focus(); 130 assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]); 131 assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]); 132 }, "Focus 'target2' once again"); 133 134 test( 135 function() { 136 container2.appendChild(container1); 137 assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]); 138 assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]); 139 }, "Attach 'container1' in 'container2'"); 140 141 test( 142 function() { 143 target1.focus(); 144 assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "container1", "sibling2", "target1"]); 145 assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "container1", "sibling2", "target1"]); 146 }, "Focus 'target1' for the last time"); 147 148 test( 149 function() { 150 container2.appendChild(target1); 151 assert_array_equals(elementsStyledWithFocusWithinSelector(), []); 152 assert_array_equals(elementsMatchingFocusWithinSelector(), []); 153 assert_false(target1.matches(":focus")); 154 assert_false(target2.matches(":focus")); 155 }, "Move 'target1' in 'container2'"); 156 </script> 157 </body> 158 </html>