<!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:[email protected]">
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
<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>
Codebase Browser
chromium