| <!DOCTYPE html> |
| <html id="html"> |
| <head> |
| <meta charset="utf-8"> |
| <title>Selectors Level 4: focus-within</title> |
| <link rel="author" title="Benjamin Poulain" href="mailto:bpoulain@apple.com"> |
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> |
| <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> |
| <meta name="assert" content="Checks the basic features of the ':focus-within' pseudo class."> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| * { |
| background-color: white; |
| } |
| :focus-within { |
| background-color: rgb(1, 2, 3); |
| } |
| </style> |
| </head> |
| <body id="body"> |
| <div id="test"> |
| <div id="container1"> |
| <div id="sibling1"></div> |
| <div id="sibling2"> |
| <input id="target1"> |
| </div> |
| <div id="sibling3"></div> |
| </div> |
| <div id="container2"> |
| <div id="sibling4"></div> |
| <div id="sibling5"> |
| <textarea id="target2"></textarea> |
| </div> |
| <div id="sibling6"></div> |
| </div> |
| </div> |
| <div id=log></div> |
| |
| <script> |
| "use strict"; |
| |
| function elementsStyledWithFocusWithinSelector() { |
| let elements = []; |
| for (let element of document.querySelectorAll("*")) { |
| if (getComputedStyle(element).backgroundColor === 'rgb(1, 2, 3)') { |
| elements.push(element.id); |
| } |
| } |
| return elements; |
| } |
| |
| function elementsMatchingFocusWithinSelector() { |
| let elements = []; |
| for (let element of document.querySelectorAll(":focus-within")) { |
| elements.push(element.id); |
| } |
| return elements; |
| } |
| |
| test( |
| function() { |
| assert_array_equals(elementsStyledWithFocusWithinSelector(), []); |
| assert_array_equals(elementsMatchingFocusWithinSelector(), []); |
| }, "Initial State"); |
| |
| var container1 = document.getElementById("container1"); |
| var container2 = document.getElementById("container2"); |
| var target1 = document.getElementById("target1"); |
| var target2 = document.getElementById("target2"); |
| |
| test( |
| function() { |
| target1.focus(); |
| assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]); |
| assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]); |
| }, "Focus 'target1'"); |
| |
| test( |
| function() { |
| target2.focus(); |
| assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]); |
| assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]); |
| }, "Focus 'target2'"); |
| |
| test( |
| function() { |
| target1.focus(); |
| assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]); |
| assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]); |
| }, "Focus 'target1' again"); |
| |
| test( |
| function() { |
| target2.focus(); |
| assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]); |
| assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]); |
| }, "Focus 'target2' again"); |
| |
| test( |
| function() { |
| target1.focus(); |
| assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]); |
| assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]); |
| }, "Focus 'target1' once again"); |
| |
| test( |
| function() { |
| container1.parentElement.removeChild(container1); |
| assert_array_equals(elementsStyledWithFocusWithinSelector(), []); |
| assert_array_equals(elementsMatchingFocusWithinSelector(), []); |
| assert_equals(container1.querySelectorAll(":focus-within").length, 0); |
| assert_false(target1.matches(":focus")); |
| assert_false(target2.matches(":focus")); |
| }, "Detach 'container1' from the document"); |
| |
| test( |
| function() { |
| target1.focus(); |
| assert_array_equals(elementsStyledWithFocusWithinSelector(), []); |
| assert_array_equals(elementsMatchingFocusWithinSelector(), []); |
| assert_equals(container1.querySelectorAll(":focus-within").length, 0); |
| assert_false(target1.matches(":focus")); |
| assert_false(target2.matches(":focus")); |
| }, "Try to focus 'target1'"); |
| |
| test( |
| function() { |
| target2.focus(); |
| assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]); |
| assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]); |
| }, "Focus 'target2' once again"); |
| |
| test( |
| function() { |
| container2.appendChild(container1); |
| assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]); |
| assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]); |
| }, "Attach 'container1' in 'container2'"); |
| |
| test( |
| function() { |
| target1.focus(); |
| assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "container1", "sibling2", "target1"]); |
| assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "container1", "sibling2", "target1"]); |
| }, "Focus 'target1' for the last time"); |
| |
| test( |
| function() { |
| container2.appendChild(target1); |
| assert_array_equals(elementsStyledWithFocusWithinSelector(), []); |
| assert_array_equals(elementsMatchingFocusWithinSelector(), []); |
| assert_false(target1.matches(":focus")); |
| assert_false(target2.matches(":focus")); |
| }, "Move 'target1' in 'container2'"); |
| </script> |
| </body> |
| </html> |
