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

[selectors] Add tests related to script focus and :focus-visible #27806

Merged
merged 2 commits into from
Apr 15, 2021
Merged

[selectors] Add tests related to script focus and :focus-visible #27806

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
f103b72
[selectors] Add tests related to script focus and :focus-visible
mrego Feb 26, 2021
d02a7c5
[selectors] Mark some script focus and :focus-visible tests as tentative
mrego Apr 15, 2021
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
54 changes: 54 additions & 0 deletions css/selectors/focus-visible-script-focus-001.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Test (Selectors): Script focus without any previous user interaction matches :focus-visible</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
#warning {
display: none;
background: red;
}

@supports not (selector(:focus-visible)) {
mrego marked this conversation as resolved.
Show resolved Hide resolved
#instructions {
display: none;
}

#warning {
display: block;
}
}

:focus-visible {
outline: solid thick green;
}

:focus:not(:focus-visible) {
background-color: red;
}
</style>

<p>This test checks that a script focus when the user hasn't interacted with the page yet, always matches <code>:focus-visible</code>.</p>
<ol id="instructions">
<li>If the element that says "Focused" has a red background then the test result is FAILURE, if it has a green outline then the test result is SUCCESS.</li>
</ol>
<p id="warning">Your user-agent does not support <code>:focus-visible</code> pseudo-class, please SKIP this test.</p>

<div id="target" tabindex="0">Focused</div>

<script>
// Check that :focus-visible is supported.
test_valid_selector(':focus-visible');

async_test(function(t) {
target.addEventListener("focus", t.step_func_done(function() {
assert_equals(getComputedStyle(target).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${target.tagName}#${target.id} should be green`);
assert_not_equals(getComputedStyle(target).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${target.tagName}#${target.id} should NOT be red`);
}));
}, "Script focus without any previous user interaction matches :focus-visible");

target.focus();
</script>
64 changes: 64 additions & 0 deletions css/selectors/focus-visible-script-focus-002.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Test (Selectors): Script focus after mouse click does match :focus-visible</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
#warning {
display: none;
background: red;
}

@supports not (selector(:focus-visible)) {
#instructions {
display: none;
}

#warning {
display: block;
}
}

:focus-visible {
outline: solid thick green;
}

:focus:not(:focus-visible) {
background-color: red;
}
</style>

<p>This test checks that a script focus after a mouse click does match <code>:focus-visible</code>.</p>
<ol id="instructions">
<li>Click in some part of the page other than the element that says "Focused".</li>
<li>If the element that says "Focused" has a red background then the test result is FAILURE, if it has a green outline then the test result is SUCCESS.</li>
</ol>
<p id="warning">Your user-agent does not support <code>:focus-visible</code> pseudo-class, please SKIP this test.</p>

<div id="target" tabindex="0">Focused</div>

<script>
setup({ explicit_done: true });

// Check that :focus-visible is supported.
test_valid_selector(':focus-visible');

document.addEventListener("click", () => {
target.focus();
});

async_test(function(t) {
target.addEventListener("focus", t.step_func_done(function() {
assert_equals(getComputedStyle(target).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${target.tagName}#${target.id} should be green`);
assert_not_equals(getComputedStyle(target).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${target.tagName}#${target.id} should NOT be red`);
}));

test_driver.click(document.body).then(() => done());
}, "Script focus after mouse click does match :focus-visible");
</script>

64 changes: 64 additions & 0 deletions css/selectors/focus-visible-script-focus-003.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Test (Selectors): Script focus after blur after mouse click does match :focus-visible</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
#warning {
display: none;
background: red;
}

@supports not (selector(:focus-visible)) {
#instructions {
display: none;
}

#warning {
display: block;
}
}

:focus-visible {
outline: solid thick green;
}

:focus:not(:focus-visible) {
background-color: red;
}
</style>

<p>This test checks that a script focus after blur after a mouse click does match <code>:focus-visible</code>.</p>
<ol id="instructions">
<li>Click in some part of the page other than the element that says "Focused".</li>
<li>If the element that says "Focused" has a red background then the test result is FAILURE, if it has a green outline then the test result is SUCCESS.</li>
</ol>
<p id="warning">Your user-agent does not support <code>:focus-visible</code> pseudo-class, please SKIP this test.</p>

<div id="target" tabindex="0">Focused</div>

<script>
setup({ explicit_done: true });

// Check that :focus-visible is supported.
test_valid_selector(':focus-visible');

document.addEventListener("click", () => {
document.activeElement.blur();
target.focus();
});

async_test(function(t) {
target.addEventListener("focus", t.step_func_done(function() {
assert_equals(getComputedStyle(target).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${target.tagName}#${target.id} should be green`);
assert_not_equals(getComputedStyle(target).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${target.tagName}#${target.id} should NOT be red`);
}));

test_driver.click(document.body).then(() => done());
}, "Script focus after blur after mouse click does match :focus-visible");
</script>
62 changes: 62 additions & 0 deletions css/selectors/focus-visible-script-focus-004.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Test (Selectors): Script focus after keyboard input does match :focus-visible</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
#warning {
display: none;
background: red;
}

@supports not (selector(:focus-visible)) {
#instructions {
display: none;
}

#warning {
display: block;
}
}

:focus-visible {
outline: solid thick green;
}

:focus:not(:focus-visible) {
background-color: red;
}
</style>

<p>This test checks that a script focus after a keyboard input does match <code>:focus-visible</code>.</p>
<ol id="instructions">
<li>Type some letter with the keyboard without having done anything before.</li>
<li>If the element that says "Focused" has a red background then the test result is FAILURE, if it has a green outline then the test result is SUCCESS.</li>
</ol>
<p id="warning">Your user-agent does not support <code>:focus-visible</code> pseudo-class, please SKIP this test.</p>

<div id="target" tabindex="0">Focused</div>

<script>
// Check that :focus-visible is supported.
test_valid_selector(':focus-visible');

document.addEventListener("keypress", () => {
target.focus();
});

async_test(function(t) {
target.addEventListener("focus", t.step_func_done(function() {
assert_equals(getComputedStyle(target).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${target.tagName}#${target.id} should be green`);
assert_not_equals(getComputedStyle(target).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${target.tagName}#${target.id} should NOT be red`);
}));

test_driver.send_keys(document.body, "a");
}, "Script focus after keyboard event does match :focus-visible");
</script>

63 changes: 63 additions & 0 deletions css/selectors/focus-visible-script-focus-005.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Test (Selectors): Script focus after blur after keyboard input does match :focus-visible</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
#warning {
display: none;
background: red;
}

@supports not (selector(:focus-visible)) {
#instructions {
display: none;
}

#warning {
display: block;
}
}

:focus-visible {
outline: solid thick green;
}

:focus:not(:focus-visible) {
background-color: red;
}
</style>

<p>This test checks that a script focus after blur after a keyboard input does match <code>:focus-visible</code>.</p>
<ol id="instructions">
<li>Type some letter with the keyboard without having done anything before.</li>
<li>If the element that says "Focused" has a red background then the test result is FAILURE, if it has a green outline then the test result is SUCCESS.</li>
</ol>
<p id="warning">Your user-agent does not support <code>:focus-visible</code> pseudo-class, please SKIP this test.</p>

<div id="target" tabindex="0">Focused</div>

<script>
// Check that :focus-visible is supported.
test_valid_selector(':focus-visible');

document.addEventListener("keypress", () => {
document.activeElement.blur();
target.focus();
});

async_test(function(t) {
target.addEventListener("focus", t.step_func_done(function() {
assert_equals(getComputedStyle(target).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${target.tagName}#${target.id} should be green`);
assert_not_equals(getComputedStyle(target).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${target.tagName}#${target.id} should NOT be red`);
}));

test_driver.send_keys(document.body, "a");
}, "Script focus after blur after keyboard event does match :focus-visible");
</script>

65 changes: 65 additions & 0 deletions css/selectors/focus-visible-script-focus-006.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Test (Selectors): Script focus after mouse click on a NOT focusable element does match :focus-visible</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
#warning {
display: none;
background: red;
}

@supports not (selector(:focus-visible)) {
#instructions {
display: none;
}

#warning {
display: block;
}
}

:focus-visible {
outline: solid thick green;
}

:focus:not(:focus-visible) {
background-color: red;
}
</style>

<p>This test checks that a script focus after a mouse click on a NOT focusable element does match <code>:focus-visible</code>.</p>
<ol id="instructions">
<li>Click on the element that says "Click me".</li>
<li>If the element that says "Focused" has a red background then the test result is FAILURE, if it has a green outline then the test result is SUCCESS.</li>
</ol>
<p id="warning">Your user-agent does not support <code>:focus-visible</code> pseudo-class, please SKIP this test.</p>

<div id="initial">Click me</div>
<div id="target" tabindex="0">Focused</div>

<script>
setup({ explicit_done: true });

// Check that :focus-visible is supported.
test_valid_selector(':focus-visible');

initial.addEventListener("click", () => {
target.focus();
});

async_test(function(t) {
target.addEventListener("focus", t.step_func_done(function() {
assert_equals(getComputedStyle(target).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${target.tagName}#${target.id} should be green`);
assert_not_equals(getComputedStyle(target).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${target.tagName}#${target.id} should NOT be red`);
}));

test_driver.click(initial).then(() => done());
}, "Script focus after mouse click on a NOT focusable element does match :focus-visible");
</script>

Loading