Check the basic features of the :focus-within pseudo class

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


Initial State
PASS elementsStyledWithFocusWithinSelector() is []
PASS elementsMatchingFocusWithinSelector() is []
Focus target1
PASS elementsStyledWithFocusWithinSelector() is ["html", "body", "webkit-test", "container1", "sibling2", "target1"]
PASS elementsMatchingFocusWithinSelector() is ["html", "body", "webkit-test", "container1", "sibling2", "target1"]
Focus target2
PASS elementsStyledWithFocusWithinSelector() is ["html", "body", "webkit-test", "container2", "sibling5", "target2"]
PASS elementsMatchingFocusWithinSelector() is ["html", "body", "webkit-test", "container2", "sibling5", "target2"]
Set display none on target2
PASS elementsStyledWithFocusWithinSelector() is ["html", "body", "webkit-test", "container2", "sibling5", "target2"]
PASS elementsMatchingFocusWithinSelector() is ["html", "body", "webkit-test", "container2", "sibling5", "target2"]
PASS target2.matches(":focus") is true
Focus target1
PASS elementsStyledWithFocusWithinSelector() is ["html", "body", "webkit-test", "container1", "sibling2", "target1"]
PASS elementsMatchingFocusWithinSelector() is ["html", "body", "webkit-test", "container1", "sibling2", "target1"]
Try to focus target2
PASS elementsStyledWithFocusWithinSelector() is ["html", "body", "webkit-test", "container1", "sibling2", "target1"]
PASS elementsMatchingFocusWithinSelector() is ["html", "body", "webkit-test", "container1", "sibling2", "target1"]
PASS target1.matches(":focus") is true
PASS target2.matches(":focus") is false
Set display back on target2
PASS elementsStyledWithFocusWithinSelector() is ["html", "body", "webkit-test", "container1", "sibling2", "target1"]
PASS elementsMatchingFocusWithinSelector() is ["html", "body", "webkit-test", "container1", "sibling2", "target1"]
Focus target2
PASS elementsStyledWithFocusWithinSelector() is ["html", "body", "webkit-test", "container2", "sibling5", "target2"]
PASS elementsMatchingFocusWithinSelector() is ["html", "body", "webkit-test", "container2", "sibling5", "target2"]
Set display none on container2
PASS elementsStyledWithFocusWithinSelector() is ["html", "body", "webkit-test", "container2", "sibling5", "target2"]
PASS elementsMatchingFocusWithinSelector() is ["html", "body", "webkit-test", "container2", "sibling5", "target2"]
PASS target2.matches(":focus") is true
Focus target1
PASS elementsStyledWithFocusWithinSelector() is ["html", "body", "webkit-test", "container1", "sibling2", "target1"]
PASS elementsMatchingFocusWithinSelector() is ["html", "body", "webkit-test", "container1", "sibling2", "target1"]
Try to focus target2
PASS elementsStyledWithFocusWithinSelector() is ["html", "body", "webkit-test", "container1", "sibling2", "target1"]
PASS elementsMatchingFocusWithinSelector() is ["html", "body", "webkit-test", "container1", "sibling2", "target1"]
PASS target1.matches(":focus") is true
PASS target2.matches(":focus") is false
Set display back on container2
PASS elementsStyledWithFocusWithinSelector() is ["html", "body", "webkit-test", "container1", "sibling2", "target1"]
PASS elementsMatchingFocusWithinSelector() is ["html", "body", "webkit-test", "container1", "sibling2", "target1"]
Detach container1 from the document
PASS elementsStyledWithFocusWithinSelector() is []
PASS elementsMatchingFocusWithinSelector() is []
PASS container1.querySelectorAll(":focus-within").length is 0
PASS target1.matches(":focus") is false
PASS target2.matches(":focus") is false
Try to focus target1
PASS elementsStyledWithFocusWithinSelector() is []
PASS elementsMatchingFocusWithinSelector() is []
PASS container1.querySelectorAll(":focus-within").length is 0
PASS target1.matches(":focus") is false
PASS target2.matches(":focus") is false
Focus target2
PASS elementsStyledWithFocusWithinSelector() is ["html", "body", "webkit-test", "container2", "sibling5", "target2"]
PASS elementsMatchingFocusWithinSelector() is ["html", "body", "webkit-test", "container2", "sibling5", "target2"]
Attach container1 in container2
PASS elementsStyledWithFocusWithinSelector() is ["html", "body", "webkit-test", "container2", "sibling5", "target2"]
PASS elementsMatchingFocusWithinSelector() is ["html", "body", "webkit-test", "container2", "sibling5", "target2"]
Focus target1
PASS elementsStyledWithFocusWithinSelector() is ["html", "body", "webkit-test", "container2", "container1", "sibling2", "target1"]
PASS elementsMatchingFocusWithinSelector() is ["html", "body", "webkit-test", "container2", "container1", "sibling2", "target1"]
Move target1 in container2
PASS elementsStyledWithFocusWithinSelector() is []
PASS elementsMatchingFocusWithinSelector() is []
PASS target1.matches(":focus") is false
PASS target2.matches(":focus") is false
PASS successfullyParsed is true

TEST COMPLETE