Skip to content

Commit 49e4d26

Browse files
dbaronchromium-wpt-export-bot
dbaron
authored and
chromium-wpt-export-bot
committed
Allow elements with display:contents to be focused.
This is as concluded (though without a group resolution) in w3c/csswg-drafts#2632 and as discussed a bit in whatwg/html#1837 . Note that this diverges from Gecko (see https://bugzil.la/1553549, https://bugzil.la/1791648, and mozilla/standards-positions#772) and WebKit (see https://bugs.webkit.org/show_bug.cgi?id=255149 and WebKit/standards-positions#164). This makes the <slot> element focusable when it has a tabindex. Note that this does not match Gecko and WebKit, which also require that its 'display' value is changed to make it focusable. Note that the <slot> element is still not tabbable in Chrome; this is https://crbug.com/1428419. This also does not match Gecko and WebKit, where it is tabbable whenever it is focusable. The added test slot-element-tabbable.tentative.html fails both tests as a result, but is added anyway. (Gecko and WebKit pass the display: block test but fail the default style (display: contents) test.) The added tests display-contents-focusable-001.html and slot-element-focusable.tentative.html are partly fixed by this change, but the style part is still broken due to https://crbug.com/1428420. Fixed: 1366037 Bug: 1428419, 1428420 Change-Id: I46a8ad3b6442ce07f440c8f6a07210bac305600e
1 parent 1d9b01e commit 49e4d26

File tree

4 files changed

+155
-6
lines changed

4 files changed

+155
-6
lines changed

‎css/css-display/display-contents-focusable-001.html

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<title>CSS Test (Display): Elements with display:contents should be focusable</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://drafts.csswg.org/css-display-3/#box-generation">
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://bugs.chromium.org/p/chromium/issues/detail?id=1366037">
9+
<!--
10+
11+
This requirement may not be crystal-clear from specs, but discussion
12+
in https://github.com/w3c/csswg-drafts/issues/2632 concluded it was
13+
correct and that no spec changes were needed.
14+
15+
-->
16+
<script src="/resources/testharness.js"></script>
17+
<script src="/resources/testharnessreport.js"></script>
18+
<style>
19+
20+
#test { --test-var: 4; }
21+
#test:focus { --test-var: 6; }
22+
23+
</style>
24+
25+
<div id="test" style="display: contents" tabindex="1">Hello</div>
26+
27+
<script>
28+
29+
test(
30+
function() {
31+
var e = document.getElementById("test");
32+
var cs = getComputedStyle(e);
33+
assert_not_equals(document.activeElement, e, "precondition");
34+
assert_equals(cs.getPropertyValue("--test-var"), "4", "precondition (style)");
35+
e.focus();
36+
assert_equals(document.activeElement, e, "e is now focused");
37+
assert_equals(cs.getPropertyValue("--test-var"), "6", "e is now focused (style)");
38+
}, "element with display:contents is focusable");
39+
40+
</script>
41+

‎html/rendering/non-replaced-elements/flow-content-0/slot-element-focusable.tentative.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<title>CSS Test (Display): <slot> elements should be focusable</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://bugs.chromium.org/p/chromium/issues/detail?id=1366037">
9+
<!--
10+
11+
This requirement is not particularly clear from current specs,
12+
so this test is tentative. See issues above.
13+
14+
-->
15+
<script src="/resources/testharness.js"></script>
16+
<script src="/resources/testharnessreport.js"></script>
17+
18+
<body>
19+
20+
<script>
21+
22+
function do_test(slot_style, description) {
23+
test(
24+
function() {
25+
let host = document.createElement("div");
26+
document.body.appendChild(host);
27+
var root = host.attachShadow({mode:"open"});
28+
root.innerHTML = `
29+
<style>
30+
slot { --test-value: 3; }
31+
slot:focus { --test-value: 7; }
32+
</style>
33+
<slot tabindex="1" style="${slot_style}"></slot>
34+
`;
35+
let slot = root.querySelector("slot");
36+
let cs = getComputedStyle(slot);
37+
assert_not_equals(root.activeElement, slot, "precondition");
38+
assert_equals(cs.getPropertyValue("--test-value"), "3", "precondition (style)");
39+
slot.focus();
40+
assert_equals(root.activeElement, slot, "slot is now focused");
41+
assert_equals(cs.getPropertyValue("--test-value"), "7", "slot is now focused (style)");
42+
document.body.removeChild(host);
43+
}, `slot element with ${description} should be focusable`);
44+
}
45+
46+
do_test("display: block", "display: block");
47+
do_test("", "default style");
48+
49+
</script>
50+

‎html/rendering/non-replaced-elements/flow-content-0/slot-element-tabbable.tentative.html

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
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://bugs.chromium.org/p/chromium/issues/detail?id=1366037">
9+
<!--
10+
11+
This requirement is not particularly clear from current specs,
12+
so this test is tentative. See issues above.
13+
14+
-->
15+
<script src="/resources/testharness.js"></script>
16+
<script src="/resources/testharnessreport.js"></script>
17+
<script src="/resources/testdriver.js"></script>
18+
<script src="/resources/testdriver-vendor.js"></script>
19+
20+
<body>
21+
22+
<div id="before" tabindex="1" style="height: 10px"></div>
23+
24+
<script>
25+
26+
function do_test(slot_style, description) {
27+
promise_test(
28+
async () => {
29+
let before = document.getElementById("before");
30+
before.focus();
31+
let host = document.createElement("div");
32+
document.body.appendChild(host);
33+
var root = host.attachShadow({mode:"open"});
34+
root.innerHTML = `
35+
<style>
36+
slot { --test-value: 3; }
37+
slot:focus { --test-value: 7; }
38+
</style>
39+
<slot tabindex="1" style="${slot_style}"></slot>
40+
`;
41+
let slot = root.querySelector("slot");
42+
let cs = getComputedStyle(slot);
43+
assert_equals(document.activeElement, before, "precondition");
44+
assert_not_equals(root.activeElement, slot, "precondition");
45+
assert_equals(cs.getPropertyValue("--test-value"), "3", "precondition (style)");
46+
await test_driver.send_keys(before, "\uE004");
47+
assert_equals(root.activeElement, slot, "slot is now focused");
48+
assert_equals(cs.getPropertyValue("--test-value"), "7", "slot is now focused (style)");
49+
document.body.removeChild(host);
50+
}, `slot element with ${description} should be focusable`);
51+
}
52+
53+
do_test("display: block", "display: block");
54+
do_test("", "default style");
55+
56+
</script>
57+

‎html/semantics/embedded-content/the-canvas-element/canvas-descendants-focusability-003.tentative.html

+7-6
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
<link rel="help" href="https://github.com/whatwg/html/issues/7534">
88
<meta name="assert" content="Checks that elements being used as relevant canvas
99
fallback content can't be focusable if they are not rendered because of an
10-
explicit 'display: none' or 'display: contents' style.">
10+
explicit 'display: none' style, but can if they are not rendered because of
11+
a 'display: contents' style.">
1112
<div id="log"></div>
1213
<canvas>
1314
<button hidden data-focusable="false"></button>
@@ -16,11 +17,11 @@
1617
<span tabindex="-1" data-focusable="false"></span>
1718
<a href="#" data-focusable="false"></a>
1819
</section>
19-
<button style="display: contents" data-focusable="false"></button>
20-
<section style="display: contents" tabindex="-1" data-focusable="false">
21-
<div style="display: contents" tabindex="-1" data-focusable="false"></div>
22-
<span style="display: contents" tabindex="-1" data-focusable="false"></span>
23-
<a style="display: contents" href="#" data-focusable="false"></a>
20+
<button style="display: contents" data-focusable="true"></button>
21+
<section style="display: contents" tabindex="-1" data-focusable="true">
22+
<div style="display: contents" tabindex="-1" data-focusable="true"></div>
23+
<span style="display: contents" tabindex="-1" data-focusable="true"></span>
24+
<a style="display: contents" href="#" data-focusable="true"></a>
2425
</section>
2526
</canvas>
2627
<script src="/resources/testharness.js"></script>

0 commit comments

Comments
 (0)