2 <title>CSS Test (Display):
<slot> elements should be tabbable
</title>
3 <link rel=
"author" title=
"L. David Baron" href=
"https://dbaron.org/">
4 <link rel=
"author" title=
"Google" href=
"http://www.google.com/">
5 <link rel=
"help" href=
"https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3">
6 <link rel=
"help" href=
"https://github.com/w3c/csswg-drafts/issues/2632">
7 <link rel=
"help" href=
"https://github.com/whatwg/html/issues/1837">
8 <link rel=
"help" href=
"https://github.com/whatwg/html/pull/9425">
9 <link rel=
"help" href=
"https://bugs.chromium.org/p/chromium/issues/detail?id=1366037">
12 This requirement is not particularly clear from current specs,
13 so this test is tentative. See issues above.
16 <script src=
"/resources/testharness.js"></script>
17 <script src=
"/resources/testharnessreport.js"></script>
18 <script src=
"/resources/testdriver.js"></script>
19 <script src=
"/resources/testdriver-vendor.js"></script>
23 <div id=
"before" tabindex=
"1" style=
"height: 10px"></div>
27 function do_test(slot_style
, description
) {
30 let before
= document
.getElementById("before");
32 let host
= document
.createElement("div");
33 document
.body
.appendChild(host
);
34 var root
= host
.attachShadow({mode
:"open"});
37 slot { --test-value: slot-not-focused; }
38 slot:focus { --test-value: slot-is-focused; }
40 <slot tabindex="1" style="${slot_style}"></slot>
42 let slot
= root
.querySelector("slot");
43 let cs
= getComputedStyle(slot
);
44 assert_equals(document
.activeElement
, before
, "precondition");
45 assert_not_equals(root
.activeElement
, slot
, "precondition");
46 assert_equals(cs
.getPropertyValue("--test-value"), "slot-not-focused", "precondition (style)");
47 await test_driver
.send_keys(before
, "\uE004");
48 assert_equals(root
.activeElement
, slot
, "slot is now focused");
49 assert_equals(cs
.getPropertyValue("--test-value"), "slot-is-focused", "slot is now focused (style)");
50 document
.body
.removeChild(host
);
51 }, `slot element with ${description} should be focusable`);
54 do_test("display: block", "display: block");
55 do_test("", "default style");