Changeset 286775 in webkit


Ignore:
Timestamp:
Dec 9, 2021, 5:14:30 AM (3 years ago)
Author:
Antti Koivisto
Message:

[selectors] Use :focus-visible in the user agent style sheet
​https://bugs.webkit.org/show_bug.cgi?id=221925
<rdar://problem/74613552>

Reviewed by Manuel Rego Casasnovas.

LayoutTests/imported/w3c:

  • web-platform-tests/css/selectors/focus-visible-018-2-expected.txt:
  • web-platform-tests/css/selectors/focus-visible-018-expected.txt:

Source/WebCore:

Replace :-internal-direct-focus with :focus-visible for the default focus outline styling in the user agent style sheet.

When enabled, this will change focus drawing behavior in two cases:

  • <div tabindex> (or any element with 'tabindex' attribute that is not focusable otherwise) will not show focus indicator when focused via click/tap/script.
  • <details> will not show focus indicator when focused via click/tap/script.

Both still show focus indicator when focused via keyboard (tab) navigation.

With the feature disabled UA sheet :focus-visible behaves like :-internal-direct-focus.

This patch does not enable the feature yet.

  • css/SelectorCheckerTestFunctions.h:

(WebCore::matchesFocusVisiblePseudoClass):

Check the feature flag. If it is not enabled :focus-visible matches like :-internal-direct-focus.

  • css/html.css:

(:focus-visible):
(:-internal-direct-focus): Deleted.

Replace :-internal-direct-focus.

  • css/parser/CSSParserContext.cpp:

(WebCore::CSSParserContext::CSSParserContext):

Always allow :focus-visible when parsing UA sheet.

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r286763 r286775  
     12021-12-09  Antti Koivisto  <antti@apple.com>
     2
     3        [selectors] Use :focus-visible in the user agent style sheet
     4        https://bugs.webkit.org/show_bug.cgi?id=221925
     5        <rdar://problem/74613552>
     6
     7        Reviewed by Manuel Rego Casasnovas.
     8
     9        * web-platform-tests/css/selectors/focus-visible-018-2-expected.txt:
     10        * web-platform-tests/css/selectors/focus-visible-018-expected.txt:
     11
    1122021-12-08  Patrick Griffis  <pgriffis@igalia.com>
    213

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors/focus-visible-018-2-expected.txt

    r286146 r286775  
    3434
    3535PASS ":focus-visible" should be a valid selector
    36 FAIL Mouse focus does not show a focus ring by default in element ABBR assert_equals: outline-style for ABBR should be none expected "none" but got "auto"
    37 FAIL Mouse focus does not show a focus ring by default in element ADDRESS assert_equals: outline-style for ADDRESS should be none expected "none" but got "auto"
    38 FAIL Mouse focus does not show a focus ring by default in element BDI assert_equals: outline-style for BDI should be none expected "none" but got "auto"
    39 FAIL Mouse focus does not show a focus ring by default in element BLOCKQUOTE assert_equals: outline-style for BLOCKQUOTE should be none expected "none" but got "auto"
    40 FAIL Mouse focus does not show a focus ring by default in element CODE assert_equals: outline-style for CODE should be none expected "none" but got "auto"
    41 FAIL Mouse focus does not show a focus ring by default in element DD assert_equals: outline-style for DD should be none expected "none" but got "auto"
    42 FAIL Mouse focus does not show a focus ring by default in element SUMMARY assert_equals: outline-style for SUMMARY should be none expected "none" but got "auto"
     36PASS Mouse focus does not show a focus ring by default in element ABBR
     37PASS Mouse focus does not show a focus ring by default in element ADDRESS
     38PASS Mouse focus does not show a focus ring by default in element BDI
     39PASS Mouse focus does not show a focus ring by default in element BLOCKQUOTE
     40PASS Mouse focus does not show a focus ring by default in element CODE
     41PASS Mouse focus does not show a focus ring by default in element DD
     42PASS Mouse focus does not show a focus ring by default in element SUMMARY
    4343PASS Mouse focus does not show a focus ring by default in element DETAILS
    44 FAIL Mouse focus does not show a focus ring by default in element DIV assert_equals: outline-style for DIV should be none expected "none" but got "auto"
    45 FAIL Mouse focus does not show a focus ring by default in element DL assert_equals: outline-style for DL should be none expected "none" but got "auto"
    46 FAIL Mouse focus does not show a focus ring by default in element DT assert_equals: outline-style for DT should be none expected "none" but got "auto"
    47 FAIL Mouse focus does not show a focus ring by default in element EM assert_equals: outline-style for EM should be none expected "none" but got "auto"
    48 FAIL Mouse focus does not show a focus ring by default in element LEGEND assert_equals: outline-style for LEGEND should be none expected "none" but got "auto"
    49 FAIL Mouse focus does not show a focus ring by default in element FIGCAPTION assert_equals: outline-style for FIGCAPTION should be none expected "none" but got "auto"
    50 FAIL Mouse focus does not show a focus ring by default in element FIGURE assert_equals: outline-style for FIGURE should be none expected "none" but got "auto"
    51 FAIL Mouse focus does not show a focus ring by default in element FORM assert_equals: outline-style for FORM should be none expected "none" but got "auto"
    52 FAIL Mouse focus does not show a focus ring by default in element HR assert_equals: outline-style for HR should be none expected "none" but got "auto"
     44PASS Mouse focus does not show a focus ring by default in element DIV
     45PASS Mouse focus does not show a focus ring by default in element DL
     46PASS Mouse focus does not show a focus ring by default in element DT
     47PASS Mouse focus does not show a focus ring by default in element EM
     48PASS Mouse focus does not show a focus ring by default in element LEGEND
     49PASS Mouse focus does not show a focus ring by default in element FIGCAPTION
     50PASS Mouse focus does not show a focus ring by default in element FIGURE
     51PASS Mouse focus does not show a focus ring by default in element FORM
     52PASS Mouse focus does not show a focus ring by default in element HR
    5353PASS Mouse focus does not show a focus ring by default in element IMG
    54 FAIL Mouse focus does not show a focus ring by default in element LABEL assert_equals: outline-style for LABEL should be none expected "none" but got "auto"
    55 FAIL Mouse focus does not show a focus ring by default in element LI assert_equals: outline-style for LI should be none expected "none" but got "auto"
    56 FAIL Mouse focus does not show a focus ring by default in element MARK assert_equals: outline-style for MARK should be none expected "none" but got "auto"
    57 FAIL Mouse focus does not show a focus ring by default in element METER assert_equals: outline-style for METER should be none expected "none" but got "auto"
    58 FAIL Mouse focus does not show a focus ring by default in element OL assert_equals: outline-style for OL should be none expected "none" but got "auto"
    59 FAIL Mouse focus does not show a focus ring by default in element PRE assert_equals: outline-style for PRE should be none expected "none" but got "auto"
    60 FAIL Mouse focus does not show a focus ring by default in element PROGRESS assert_equals: outline-style for PROGRESS should be none expected "none" but got "auto"
    61 FAIL Mouse focus does not show a focus ring by default in element P assert_equals: outline-style for P should be none expected "none" but got "auto"
    62 FAIL Mouse focus does not show a focus ring by default in element SMALL assert_equals: outline-style for SMALL should be none expected "none" but got "auto"
    63 FAIL Mouse focus does not show a focus ring by default in element S assert_equals: outline-style for S should be none expected "none" but got "auto"
    64 FAIL Mouse focus does not show a focus ring by default in element STRONG assert_equals: outline-style for STRONG should be none expected "none" but got "auto"
    65 FAIL Mouse focus does not show a focus ring by default in element SUB assert_equals: outline-style for SUB should be none expected "none" but got "auto"
    66 FAIL Mouse focus does not show a focus ring by default in element SUP assert_equals: outline-style for SUP should be none expected "none" but got "auto"
    67 FAIL Mouse focus does not show a focus ring by default in element CAPTION assert_equals: outline-style for CAPTION should be none expected "none" but got "auto"
    68 FAIL Mouse focus does not show a focus ring by default in element TABLE assert_equals: outline-style for TABLE should be none expected "none" but got "auto"
    69 FAIL Mouse focus does not show a focus ring by default in element TD assert_equals: outline-style for TD should be none expected "none" but got "auto"
    70 FAIL Mouse focus does not show a focus ring by default in element TIME assert_equals: outline-style for TIME should be none expected "none" but got "auto"
    71 FAIL Mouse focus does not show a focus ring by default in element UL assert_equals: outline-style for UL should be none expected "none" but got "auto"
    72 FAIL Mouse focus does not show a focus ring by default in element U assert_equals: outline-style for U should be none expected "none" but got "auto"
     54PASS Mouse focus does not show a focus ring by default in element LABEL
     55PASS Mouse focus does not show a focus ring by default in element LI
     56PASS Mouse focus does not show a focus ring by default in element MARK
     57PASS Mouse focus does not show a focus ring by default in element METER
     58PASS Mouse focus does not show a focus ring by default in element OL
     59PASS Mouse focus does not show a focus ring by default in element PRE
     60PASS Mouse focus does not show a focus ring by default in element PROGRESS
     61PASS Mouse focus does not show a focus ring by default in element P
     62PASS Mouse focus does not show a focus ring by default in element SMALL
     63PASS Mouse focus does not show a focus ring by default in element S
     64PASS Mouse focus does not show a focus ring by default in element STRONG
     65PASS Mouse focus does not show a focus ring by default in element SUB
     66PASS Mouse focus does not show a focus ring by default in element SUP
     67PASS Mouse focus does not show a focus ring by default in element CAPTION
     68PASS Mouse focus does not show a focus ring by default in element TABLE
     69PASS Mouse focus does not show a focus ring by default in element TD
     70PASS Mouse focus does not show a focus ring by default in element TIME
     71PASS Mouse focus does not show a focus ring by default in element UL
     72PASS Mouse focus does not show a focus ring by default in element U
    7373

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors/focus-visible-018-expected.txt

    r272983 r286775  
    66
    77PASS ":focus-visible" should be a valid selector
    8 FAIL Mouse focus does not show a focus ring by default assert_equals: outline-style for DIV#target should be none expected "none" but got "auto"
     8PASS Mouse focus does not show a focus ring by default
    99

  • trunk/Source/WebCore/ChangeLog

    r286772 r286775  
     12021-12-09  Antti Koivisto  <antti@apple.com>
     2
     3        [selectors] Use :focus-visible in the user agent style sheet
     4        https://bugs.webkit.org/show_bug.cgi?id=221925
     5        <rdar://problem/74613552>
     6
     7        Reviewed by Manuel Rego Casasnovas.
     8
     9        Replace :-internal-direct-focus with :focus-visible for the default focus outline styling in the user agent style sheet.
     10
     11        When enabled, this will change focus drawing behavior in two cases:
     12
     13        - <div tabindex> (or any element with 'tabindex' attribute that is not focusable otherwise) will not show focus
     14          indicator when focused via click/tap/script.
     15        - <details> will not show focus indicator when focused via click/tap/script.
     16
     17        Both still show focus indicator when focused via keyboard (tab) navigation.
     18
     19        With the feature disabled UA sheet :focus-visible behaves like :-internal-direct-focus.
     20
     21        This patch does not enable the feature yet.
     22
     23        * css/SelectorCheckerTestFunctions.h:
     24        (WebCore::matchesFocusVisiblePseudoClass):
     25
     26        Check the feature flag. If it is not enabled :focus-visible matches like :-internal-direct-focus.
     27
     28        * css/html.css:
     29        (:focus-visible):
     30        (:-internal-direct-focus): Deleted.
     31
     32        Replace :-internal-direct-focus.
     33
     34        * css/parser/CSSParserContext.cpp:
     35        (WebCore::CSSParserContext::CSSParserContext):
     36
     37        Always allow :focus-visible when parsing UA sheet.
     38
    1392021-12-09  Myles C. Maxfield  <mmaxfield@apple.com> and Don Olmstead  <don.olmstead@sony.com>
    240

  • trunk/Source/WebCore/css/SelectorCheckerTestFunctions.h

    r285610 r286775  
    4040#include "Page.h"
    4141#include "SelectorChecker.h"
     42#include "Settings.h"
    4243#include "ShadowRoot.h"
    4344#include <wtf/Compiler.h>
    … …  
    516517ALWAYS_INLINE bool matchesFocusVisiblePseudoClass(const Element& element)
    517518{
     519    if (!element.document().settings().focusVisibleEnabled())
     520        return matchesDirectFocusPseudoClass(element);
     521
    518522    if (InspectorInstrumentation::forcePseudoState(element, CSSSelector::PseudoClassFocusVisible))
    519523        return true;

  • trunk/Source/WebCore/css/html.css

    r285610 r286775  
    12621262/* states */
    12631263
    1264 :-internal-direct-focus {
     1264:focus-visible {
    12651265#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    12661266    outline: auto 3px -webkit-focus-ring-color;

  • trunk/Source/WebCore/css/parser/CSSParserContext.cpp

    r286772 r286775  
    5050    if (mode == UASheetMode) {
    5151        individualTransformPropertiesEnabled = true;
     52        focusVisibleEnabled = true;
    5253#if ENABLE(CSS_TRANSFORM_STYLE_OPTIMIZED_3D)
    5354        transformStyleOptimized3DEnabled = true;
Note: See TracChangeset for help on using the changeset viewer.