Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[selectors4] Upstream WebKit test for :focus-within #5261

Merged
merged 1 commit into from Apr 5, 2017
Merged

[selectors4] Upstream WebKit test for :focus-within #5261

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
206 changes: 206 additions & 0 deletions css/selectors4/focus-within-009.html
View file
Open in desktop
@@ -0,0 +1,206 @@
<!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() {
target2.style.display = "none";
assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]);
assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]);
assert_true(target2.matches(":focus"));
}, "Set display none on '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", "container1", "sibling2", "target1"]);
assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
assert_true(target1.matches(":focus"));
assert_false(target2.matches(":focus"));
}, "Try to focus 'target2'");

test(
function() {
target2.style.display = "inline-block";
assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
}, "Set display back on 'target2'");

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() {
container2.style.display = "none";
assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]);
assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]);
assert_true(target2.matches(":focus"));
}, "Set display none on 'container2'");

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() {
target2.focus();
assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
assert_true(target1.matches(":focus"));
assert_false(target2.matches(":focus"));
}, "Try to focus 'target2' again");

test(
function() {
container2.style.display = "block";
assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
}, "Set display back on 'container2'");

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>