blob: 94b8ae9a035f83fc40778c18aeb7b1ad85931af0 [file] [log] [blame]
<!doctype html>
<html id="html">
<head>
<script src="../../resources/js-test-pre.js"></script>
<style id="style">
* {
background-color: white;
}
:focus-within {
background-color: rgb(1, 2, 3);
}
</style>
</head>
<body id="body">
<div id="webkit-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>
</body>
<script>
"use strict";
description('Check the basic features of the :focus-within pseudo class');
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;
}
debug("Initial State");
shouldBe('elementsStyledWithFocusWithinSelector()', '[]');
shouldBe('elementsMatchingFocusWithinSelector()', '[]');
debug("Focus target1");
var target1 = document.getElementById("target1");
target1.focus();
shouldBe('elementsStyledWithFocusWithinSelector()', '["html", "body", "webkit-test", "container1", "sibling2", "target1"]');
shouldBe('elementsMatchingFocusWithinSelector()', '["html", "body", "webkit-test", "container1", "sibling2", "target1"]');
debug("Focus target2");
var target2 = document.getElementById("target2");
target2.focus();
shouldBe('elementsStyledWithFocusWithinSelector()', '["html", "body", "webkit-test", "container2", "sibling5", "target2"]');
shouldBe('elementsMatchingFocusWithinSelector()', '["html", "body", "webkit-test", "container2", "sibling5", "target2"]');
debug("Set display none on target2");
target2.style.display = "none";
shouldBe('elementsStyledWithFocusWithinSelector()', '["html", "body", "webkit-test", "container2", "sibling5", "target2"]');
shouldBe('elementsMatchingFocusWithinSelector()', '["html", "body", "webkit-test", "container2", "sibling5", "target2"]');
shouldBeTrue('target2.matches(":focus")');
debug("Focus target1");
target1.focus();
shouldBe('elementsStyledWithFocusWithinSelector()', '["html", "body", "webkit-test", "container1", "sibling2", "target1"]');
shouldBe('elementsMatchingFocusWithinSelector()', '["html", "body", "webkit-test", "container1", "sibling2", "target1"]');
debug("Try to focus target2");
target2.focus();
shouldBe('elementsStyledWithFocusWithinSelector()', '["html", "body", "webkit-test", "container1", "sibling2", "target1"]');
shouldBe('elementsMatchingFocusWithinSelector()', '["html", "body", "webkit-test", "container1", "sibling2", "target1"]');
shouldBeTrue('target1.matches(":focus")');
shouldBeFalse('target2.matches(":focus")');
debug("Set display back on target2");
target2.style.display = "revert";
shouldBe('elementsStyledWithFocusWithinSelector()', '["html", "body", "webkit-test", "container1", "sibling2", "target1"]');
shouldBe('elementsMatchingFocusWithinSelector()', '["html", "body", "webkit-test", "container1", "sibling2", "target1"]');
debug("Focus target2");
target2.focus();
shouldBe('elementsStyledWithFocusWithinSelector()', '["html", "body", "webkit-test", "container2", "sibling5", "target2"]');
shouldBe('elementsMatchingFocusWithinSelector()', '["html", "body", "webkit-test", "container2", "sibling5", "target2"]');
debug("Set display none on container2");
var container2 = document.getElementById("container2");
container2.style.display = "none";
shouldBe('elementsStyledWithFocusWithinSelector()', '["html", "body", "webkit-test", "container2", "sibling5", "target2"]');
shouldBe('elementsMatchingFocusWithinSelector()', '["html", "body", "webkit-test", "container2", "sibling5", "target2"]');
shouldBeTrue('target2.matches(":focus")');
debug("Focus target1");
target1.focus();
shouldBe('elementsStyledWithFocusWithinSelector()', '["html", "body", "webkit-test", "container1", "sibling2", "target1"]');
shouldBe('elementsMatchingFocusWithinSelector()', '["html", "body", "webkit-test", "container1", "sibling2", "target1"]');
debug("Try to focus target2");
target2.focus();
shouldBe('elementsStyledWithFocusWithinSelector()', '["html", "body", "webkit-test", "container1", "sibling2", "target1"]');
shouldBe('elementsMatchingFocusWithinSelector()', '["html", "body", "webkit-test", "container1", "sibling2", "target1"]');
shouldBeTrue('target1.matches(":focus")');
shouldBeFalse('target2.matches(":focus")');
debug("Set display back on container2");
var container2 = document.getElementById("container2");
container2.style.display = "revert";
shouldBe('elementsStyledWithFocusWithinSelector()', '["html", "body", "webkit-test", "container1", "sibling2", "target1"]');
shouldBe('elementsMatchingFocusWithinSelector()', '["html", "body", "webkit-test", "container1", "sibling2", "target1"]');
debug("Detach container1 from the document");
var container1 = document.getElementById("container1");
container1.parentElement.removeChild(container1);
shouldBe('elementsStyledWithFocusWithinSelector()', '[]');
shouldBe('elementsMatchingFocusWithinSelector()', '[]');
shouldBe('container1.querySelectorAll(":focus-within").length', '0');
shouldBeFalse('target1.matches(":focus")');
shouldBeFalse('target2.matches(":focus")');
debug("Try to focus target1");
target1.focus();
shouldBe('elementsStyledWithFocusWithinSelector()', '[]');
shouldBe('elementsMatchingFocusWithinSelector()', '[]');
shouldBe('container1.querySelectorAll(":focus-within").length', '0');
shouldBeFalse('target1.matches(":focus")');
shouldBeFalse('target2.matches(":focus")');
debug("Focus target2");
target2.focus();
shouldBe('elementsStyledWithFocusWithinSelector()', '["html", "body", "webkit-test", "container2", "sibling5", "target2"]');
shouldBe('elementsMatchingFocusWithinSelector()', '["html", "body", "webkit-test", "container2", "sibling5", "target2"]');
debug("Attach container1 in container2");
container2.appendChild(container1);
shouldBe('elementsStyledWithFocusWithinSelector()', '["html", "body", "webkit-test", "container2", "sibling5", "target2"]');
shouldBe('elementsMatchingFocusWithinSelector()', '["html", "body", "webkit-test", "container2", "sibling5", "target2"]');
debug("Focus target1");
target1.focus();
shouldBe('elementsStyledWithFocusWithinSelector()', '["html", "body", "webkit-test", "container2", "container1", "sibling2", "target1"]');
shouldBe('elementsMatchingFocusWithinSelector()', '["html", "body", "webkit-test", "container2", "container1", "sibling2", "target1"]');
debug("Move target1 in container2");
container2.appendChild(target1);
shouldBe('elementsStyledWithFocusWithinSelector()', '[]');
shouldBe('elementsMatchingFocusWithinSelector()', '[]');
shouldBeFalse('target1.matches(":focus")');
shouldBeFalse('target2.matches(":focus")');
gc();
// Clean up the test.
document.getElementById("webkit-test").style.display = "none";
document.getElementById("style").innerHTML = "";
</script>
<script src="../../resources/js-test-post.js"></script>
</html>