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

[selectors] Add tests for :focus-visible in the default UA style sheet #27015

Merged
merged 1 commit into from
Jan 25, 2021
Merged

[selectors] Add tests for :focus-visible in the default UA style sheet #27015

Show file tree
Hide file tree
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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions css/selectors/focus-visible-017.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Test (Selectors): By default initial programatic focus matches :focus-visible and it shows an auto focus ring</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" />
<link rel="help" href="https://html.spec.whatwg.org/#phrasing-content-3" />
<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)) {
#instructions {
display: none;
}

#warning {
display: block;
}
}
</style>

<p>This test checks that by default, if using JavaScript to focus an element triggers <code>:focus-visible</code> matching, then the element should show a focus ring with <code>outline-style: auto</code>.</p>
<ol id="instructions">
<li>If the element below that says "Target" show a focus ring with <code>outline-style: auto</code>, 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">Target</div>
<script>
// Check that :focus-visible is supported.
test_valid_selector(':focus-visible');

async_test(function(t) {
target.addEventListener("focus", t.step_func(function() {
assert_equals(getComputedStyle(target).outlineStyle, "auto", `outline-style for ${target.tagName}#${target.id} should be auto`);
mrego marked this conversation as resolved.
Show resolved Hide resolved
t.done();
}));
target.focus();
mrego marked this conversation as resolved.
Show resolved Hide resolved
}, "By default initial programatic focus matches ':focus-visible', so the element shows a focus ring with 'outline-style: auto'");
</script>
49 changes: 49 additions & 0 deletions css/selectors/focus-visible-018.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Test (Selectors): Mouse focus does not show a focus ring by default</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-actions.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;
}
}
</style>

<p>This test checks that by default, using the mouse to focus a generic element does not show a focus ring (because it does not trigger <code>:focus-visible</code> matching).</p>
<ol id="instructions">
<li>Click on the element below that says "Click me."</li>
<li>If the element does not have a focus ring, 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">Click me.</div>
<script>
setup({ explicit_done: true });

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

async_test(function(t) {
target.addEventListener("focus", t.step_func(function() {
assert_equals(getComputedStyle(target).outlineStyle, "none", `outline-style for ${target.tagName}#${target.id} should be none`);
t.done();
}));
test_driver.click(target).then(() => done());
}, "Mouse focus does not show a focus ring by default");
</script>