Skip to content

[selectors4] Add new tests for :focus-within as universal selector #5249

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

Merged
frivoal merged 2 commits into from
Apr 5, 2017
Merged

[selectors4] Add new tests for :focus-within as universal selector #5249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
da44da2
[selectors4] Add new tests for :focus-within as universal selector
mrego Mar 29, 2017
32cac9a
[selectors4] Remove "interact" flag on new :focus-within tests
mrego Apr 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions css/selectors4/focus-within-007-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Selectors Level 4: focus-within Reference File</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<style>
html, body, div {
border: solid 5px green;
}
</style>
<p>Test passes if, when the element below is focused, it is surrounded by a green border, and HTML and BODY elements also have a green border. There must be no red or blue once it is focused.</p>
<div>Focus this element</div>
33 changes: 33 additions & 0 deletions css/selectors4/focus-within-007.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>Selectors Level 4: focus-within</title>
<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">
<link rel="match" href="focus-within-007-ref.html">
<meta name="assert" content="Checks that ':focus-within' can be used as universal selector.">
<style>
/* Suppress things that cannot be reproduced in the reference file */
:focus {
outline: none;
}
html, body, div {
border: solid 5px red;
}
/* Use blue to indicate that the user needs to pay attention.
This element needs to be focused for the test to make sense. */
div {
border-color: blue;
}
:focus-within {
border-color: green;
}
</style>
<p>Test passes if, when the element below is focused, it is surrounded by a green border, and HTML and BODY elements also have a green border. There must be no red or blue once it is focused.</p>
<div id="focusme" tabindex="1">Focus this element</div>
<script>
var focusme = document.getElementById('focusme');
focusme.focus();
document.documentElement.classList.remove('reftest-wait');
</script>
</html>
33 changes: 33 additions & 0 deletions css/selectors4/focus-within-008.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>Selectors Level 4: focus-within</title>
<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">
<link rel="match" href="focus-within-007-ref.html">
<meta name="assert" content="Checks that ':focus-within' can be used as universal selector (using *).">
<style>
/* Suppress things that cannot be reproduced in the reference file */
:focus {
outline: none;
}
html, body, div {
border: solid 5px red;
}
/* Use blue to indicate that the user needs to pay attention.
This element needs to be focused for the test to make sense. */
div {
border-color: blue;
}
*:focus-within {
border-color: green;
}
</style>
<p>Test passes if, when the element below is focused, it is surrounded by a green border, and HTML and BODY elements also have a green border. There must be no red or blue once it is focused.</p>
<div id="focusme" tabindex="1">Focus this element</div>
<script>
var focusme = document.getElementById('focusme');
focusme.focus();
document.documentElement.classList.remove('reftest-wait');
</script>
</html>