From 1806ff853d29a1255b2135a9d709970f60ee4216 Mon Sep 17 00:00:00 2001 From: Marco Castelluccio Date: Thu, 1 Feb 2024 00:42:18 +0000 Subject: [PATCH] Bug 1825055 [wpt PR 39247] - Add support for allowing elements with display:contents to be focused., a=testonly Automatic update from web-platform-tests Add support for allowing elements with display:contents to be focused. Chromestatus: https://chromestatus.com/feature/6237396851228672 This lands support for allowing elements with display:contents to be focused, behind a feature flag that is created with status:experimental. This is as concluded (though without a group resolution) in https://github.com/w3c/csswg-drafts/issues/2632 and as discussed a bit in https://github.com/whatwg/html/issues/1837 and proposed in https://github.com/whatwg/html/pull/9425 . Note that this diverges from Gecko (see https://bugzil.la/1553549, https://bugzil.la/1791648, and https://github.com/mozilla/standards-positions/issues/772) and WebKit (see https://bugs.webkit.org/show_bug.cgi?id=255149 and https://github.com/WebKit/standards-positions/issues/164). This makes the 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 (away from 'contents') to make it focusable. Note that the 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. Bug: 1366037 Bug: 1428419, 1428420 Change-Id: I46a8ad3b6442ce07f440c8f6a07210bac305600e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3910374 Reviewed-by: Mason Freed Commit-Queue: David Baron Cr-Commit-Position: refs/heads/main{#1252245} -- wpt-commits: 83ac63c35c3c699dab5c8ec3b60377f52f59ca11 wpt-pr: 39247 UltraBlame original commit: 750cbf39a61f63ccdf2d1384fdf9c8ef8e7c98ec --- .../display-contents-focusable-001.html | 535 ++++++++++++++ .../slot-element-focusable.tentative.html | 572 +++++++++++++++ .../slot-element-tabbable.tentative.html | 669 ++++++++++++++++++ ...escendants-focusability-003.tentative.html | 22 +- 4 files changed, 1792 insertions(+), 6 deletions(-) create mode 100644 testing/web-platform/tests/css/css-display/display-contents-focusable-001.html create mode 100644 testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-focusable.tentative.html create mode 100644 testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-tabbable.tentative.html diff --git a/testing/web-platform/tests/css/css-display/display-contents-focusable-001.html b/testing/web-platform/tests/css/css-display/display-contents-focusable-001.html new file mode 100644 index 0000000000000..eaad55a7bb737 --- /dev/null +++ b/testing/web-platform/tests/css/css-display/display-contents-focusable-001.html @@ -0,0 +1,535 @@ +< +! +DOCTYPE +html +> +< +title +> +CSS +Test +( +Display +) +: +Elements +with +display +: +contents +should +be +focusable +< +/ +title +> +< +link +rel += +" +author +" +title += +" +L +. +David +Baron +" +href += +" +https +: +/ +/ +dbaron +. +org +/ +" +> +< +link +rel += +" +author +" +title += +" +Google +" +href += +" +http +: +/ +/ +www +. +google +. +com +/ +" +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +drafts +. +csswg +. +org +/ +css +- +display +- +3 +/ +# +box +- +generation +" +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +github +. +com +/ +w3c +/ +csswg +- +drafts +/ +issues +/ +2632 +" +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +github +. +com +/ +whatwg +/ +html +/ +issues +/ +1837 +" +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +github +. +com +/ +whatwg +/ +html +/ +pull +/ +9425 +" +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +bugs +. +chromium +. +org +/ +p +/ +chromium +/ +issues +/ +detail +? +id += +1366037 +" +> +< +! +- +- +This +requirement +may +not +be +crystal +- +clear +from +CSS +specs +but +discussion +in +https +: +/ +/ +github +. +com +/ +w3c +/ +csswg +- +drafts +/ +issues +/ +2632 +concluded +it +was +correct +and +that +no +spec +changes +were +needed +. +https +: +/ +/ +github +. +com +/ +whatwg +/ +html +/ +pull +/ +9425 +makes +this +clearer +in +the +HTML +spec +. +- +- +> +< +script +src += +" +/ +resources +/ +testharness +. +js +" +> +< +/ +script +> +< +script +src += +" +/ +resources +/ +testharnessreport +. +js +" +> +< +/ +script +> +< +style +> +# +test +{ +- +- +test +- +var +: +test +- +not +- +focused +; +} +# +test +: +focus +{ +- +- +test +- +var +: +test +- +focused +; +} +< +/ +style +> +< +div +id += +" +test +" +style += +" +display +: +contents +" +tabindex += +" +1 +" +> +Hello +< +/ +div +> +< +script +> +test +( +function +( +) +{ +var +e += +document +. +getElementById +( +" +test +" +) +; +var +cs += +getComputedStyle +( +e +) +; +assert_not_equals +( +document +. +activeElement +e +" +precondition +" +) +; +assert_equals +( +cs +. +getPropertyValue +( +" +- +- +test +- +var +" +) +" +test +- +not +- +focused +" +" +precondition +( +style +) +" +) +; +e +. +focus +( +) +; +assert_equals +( +document +. +activeElement +e +" +e +is +now +focused +" +) +; +assert_equals +( +cs +. +getPropertyValue +( +" +- +- +test +- +var +" +) +" +test +- +focused +" +" +e +is +now +focused +( +style +) +" +) +; +} +" +element +with +display +: +contents +is +focusable +" +) +; +< +/ +script +> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-focusable.tentative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-focusable.tentative.html new file mode 100644 index 0000000000000..c3495061764ec --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-focusable.tentative.html @@ -0,0 +1,572 @@ +< +! +DOCTYPE +html +> +< +title +> +CSS +Test +( +Display +) +: +< +slot +> +elements +should +be +focusable +< +/ +title +> +< +link +rel += +" +author +" +title += +" +L +. +David +Baron +" +href += +" +https +: +/ +/ +dbaron +. +org +/ +" +> +< +link +rel += +" +author +" +title += +" +Google +" +href += +" +http +: +/ +/ +www +. +google +. +com +/ +" +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +html +. +spec +. +whatwg +. +org +/ +multipage +/ +rendering +. +html +# +flow +- +content +- +3 +" +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +github +. +com +/ +w3c +/ +csswg +- +drafts +/ +issues +/ +2632 +" +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +github +. +com +/ +whatwg +/ +html +/ +issues +/ +1837 +" +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +github +. +com +/ +whatwg +/ +html +/ +pull +/ +9425 +" +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +bugs +. +chromium +. +org +/ +p +/ +chromium +/ +issues +/ +detail +? +id += +1366037 +" +> +< +! +- +- +This +requirement +is +not +particularly +clear +from +current +specs +so +this +test +is +tentative +. +See +issues +above +. +- +- +> +< +script +src += +" +/ +resources +/ +testharness +. +js +" +> +< +/ +script +> +< +script +src += +" +/ +resources +/ +testharnessreport +. +js +" +> +< +/ +script +> +< +body +> +< +script +> +function +do_test +( +slot_style +description +) +{ +test +( +function +( +) +{ +let +host += +document +. +createElement +( +" +div +" +) +; +document +. +body +. +appendChild +( +host +) +; +var +root += +host +. +attachShadow +( +{ +mode +: +" +open +" +} +) +; +root +. +innerHTML += +< +style +> +slot +{ +- +- +test +- +value +: +slot +- +not +- +focused +; +} +slot +: +focus +{ +- +- +test +- +value +: +slot +- +is +- +focused +; +} +< +/ +style +> +< +slot +tabindex += +" +1 +" +style += +" +{ +slot_style +} +" +> +< +/ +slot +> +; +let +slot += +root +. +querySelector +( +" +slot +" +) +; +let +cs += +getComputedStyle +( +slot +) +; +assert_not_equals +( +root +. +activeElement +slot +" +precondition +" +) +; +assert_equals +( +cs +. +getPropertyValue +( +" +- +- +test +- +value +" +) +" +slot +- +not +- +focused +" +" +precondition +( +style +) +" +) +; +slot +. +focus +( +) +; +assert_equals +( +root +. +activeElement +slot +" +slot +is +now +focused +" +) +; +assert_equals +( +cs +. +getPropertyValue +( +" +- +- +test +- +value +" +) +" +slot +- +is +- +focused +" +" +slot +is +now +focused +( +style +) +" +) +; +document +. +body +. +removeChild +( +host +) +; +} +slot +element +with +{ +description +} +should +be +focusable +) +; +} +do_test +( +" +display +: +block +" +" +display +: +block +" +) +; +do_test +( +" +" +" +default +style +" +) +; +< +/ +script +> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-tabbable.tentative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-tabbable.tentative.html new file mode 100644 index 0000000000000..0db8d55ed04f8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/slot-element-tabbable.tentative.html @@ -0,0 +1,669 @@ +< +! +DOCTYPE +html +> +< +title +> +CSS +Test +( +Display +) +: +< +slot +> +elements +should +be +tabbable +< +/ +title +> +< +link +rel += +" +author +" +title += +" +L +. +David +Baron +" +href += +" +https +: +/ +/ +dbaron +. +org +/ +" +> +< +link +rel += +" +author +" +title += +" +Google +" +href += +" +http +: +/ +/ +www +. +google +. +com +/ +" +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +html +. +spec +. +whatwg +. +org +/ +multipage +/ +rendering +. +html +# +flow +- +content +- +3 +" +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +github +. +com +/ +w3c +/ +csswg +- +drafts +/ +issues +/ +2632 +" +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +github +. +com +/ +whatwg +/ +html +/ +issues +/ +1837 +" +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +github +. +com +/ +whatwg +/ +html +/ +pull +/ +9425 +" +> +< +link +rel += +" +help +" +href += +" +https +: +/ +/ +bugs +. +chromium +. +org +/ +p +/ +chromium +/ +issues +/ +detail +? +id += +1366037 +" +> +< +! +- +- +This +requirement +is +not +particularly +clear +from +current +specs +so +this +test +is +tentative +. +See +issues +above +. +- +- +> +< +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 +> +< +body +> +< +div +id += +" +before +" +tabindex += +" +1 +" +style += +" +height +: +10px +" +> +< +/ +div +> +< +script +> +function +do_test +( +slot_style +description +) +{ +promise_test +( +async +( +) += +> +{ +let +before += +document +. +getElementById +( +" +before +" +) +; +before +. +focus +( +) +; +let +host += +document +. +createElement +( +" +div +" +) +; +document +. +body +. +appendChild +( +host +) +; +var +root += +host +. +attachShadow +( +{ +mode +: +" +open +" +} +) +; +root +. +innerHTML += +< +style +> +slot +{ +- +- +test +- +value +: +slot +- +not +- +focused +; +} +slot +: +focus +{ +- +- +test +- +value +: +slot +- +is +- +focused +; +} +< +/ +style +> +< +slot +tabindex += +" +1 +" +style += +" +{ +slot_style +} +" +> +< +/ +slot +> +; +let +slot += +root +. +querySelector +( +" +slot +" +) +; +let +cs += +getComputedStyle +( +slot +) +; +assert_equals +( +document +. +activeElement +before +" +precondition +" +) +; +assert_not_equals +( +root +. +activeElement +slot +" +precondition +" +) +; +assert_equals +( +cs +. +getPropertyValue +( +" +- +- +test +- +value +" +) +" +slot +- +not +- +focused +" +" +precondition +( +style +) +" +) +; +await +test_driver +. +send_keys +( +before +" +\ +uE004 +" +) +; +assert_equals +( +root +. +activeElement +slot +" +slot +is +now +focused +" +) +; +assert_equals +( +cs +. +getPropertyValue +( +" +- +- +test +- +value +" +) +" +slot +- +is +- +focused +" +" +slot +is +now +focused +( +style +) +" +) +; +document +. +body +. +removeChild +( +host +) +; +} +slot +element +with +{ +description +} +should +be +focusable +) +; +} +do_test +( +" +display +: +block +" +" +display +: +block +" +) +; +do_test +( +" +" +" +default +style +" +) +; +< +/ +script +> diff --git a/testing/web-platform/tests/html/semantics/embedded-content/the-canvas-element/canvas-descendants-focusability-003.tentative.html b/testing/web-platform/tests/html/semantics/embedded-content/the-canvas-element/canvas-descendants-focusability-003.tentative.html index 5d27fd74798c1..8d36b63c4d21a 100644 --- a/testing/web-platform/tests/html/semantics/embedded-content/the-canvas-element/canvas-descendants-focusability-003.tentative.html +++ b/testing/web-platform/tests/html/semantics/embedded-content/the-canvas-element/canvas-descendants-focusability-003.tentative.html @@ -190,7 +190,17 @@ : none ' -or +style +but +can +if +they +are +not +rendered +because +of +a ' display : @@ -324,7 +334,7 @@ focusable = " -false +true " > < @@ -351,7 +361,7 @@ focusable = " -false +true " > < @@ -374,7 +384,7 @@ focusable = " -false +true " > < @@ -401,7 +411,7 @@ focusable = " -false +true " > < @@ -427,7 +437,7 @@ focusable = " -false +true " > <