4 <meta charset=
"utf-8" />
5 <title>CSS Test (Selectors): Keyboard focus enables :focus-visible
</title>
6 <link rel=
"author" title=
"Alice Boxhall" href=
"aboxhall@chromium.org" />
7 <link rel=
"help" href=
"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
8 <script src=
"/resources/testharness.js"></script>
9 <script src=
"/resources/testharnessreport.js"></script>
10 <script src=
"/html/interaction/focus/the-autofocus-attribute/resources/utils.js"></script>
12 @supports not selector(:focus-visible) {
14 outline: red solid
5px;
15 background-color: red;
20 outline: green solid
5px;
23 #button:focus:not(:focus-visible) {
24 background-color: red;
30 This test checks that any element focused via an
<code>autofocus
</code> attribute will have
<code>:focus-visible
</code> matching enabled.
31 <ul id=
"instructions">
32 <li>If the button that says
"I will be focused automatically" has a red background, then the test result is FAILURE. If it has a green outline, then the test result is SUCCESS.
</li>
35 <button id=
"button" autofocus
tabindex=
"-1">I will be focused automatically.
</button>
37 promise_test(async
function() {
38 await
waitUntilStableAutofocusState();
39 assert_equals(document
.activeElement
, button
, "Should have correct focused element");
40 assert_equals(getComputedStyle(button
).outlineColor
, "rgb(0, 128, 0)", `outlineColor for ${button.tagName}#${button.id} should be green`);
41 assert_not_equals(getComputedStyle(button
).backgroundColor
, "rgb(255, 0, 0)", `backgroundColor for ${button.tagName}#${button.id} should NOT be red`);
42 }, "Autofocus should match :focus-visible");