CSS :dir() selectors and dir=auto interoperability

[dbaron]

Description

The :dir() CSS pseudo-class selector matches elements based on directionality, which is determined based on the HTML dir attribute. :dir(ltr) matches left-to-right text directionality, and :dir(rtl) matches elements with right-to-left text directionality. It is not equivalent to [dir] attribute selectors because it matches against directions inherited from an ancestor with the dir attribute, and because it matches against the direction computed from use of dir=auto (which determines directionality from the first character in the text with strong directionality).

See previous proposals in #177 and #463.

The :dir() selector was included as part of the CSS Pseudo-classes focus area in Interop2023. That inclusion did help lead to work on the implementation in Chromium, which was waiting for specification improvements. Those specification improvements, happening in whatwg/html#3699, whatwg/html#9554, and whatwg/html#9796, are almost complete, and have led to substantial numbers of new tests. It would be good to improve interoperability in the areas tested by those new tests, which were mostly not included in Interop2023.

I realize this is a somehat small piece of the platform, but it might make sense merged into some larger focus area like #177 was last year.

Specification

https://www.w3.org/TR/selectors-4/#the-dir-pseudo and https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute

Open Issues

whatwg/html#3699 and whatwg/html#9796 are currently open, but I'm hoping that work on them will be completed within a week or so. They're currently very close.

Tests

Tests with names starting with "dir" in https://wpt.fyi/results/css/selectors?q=dir and https://wpt.fyi/results/html/dom/elements/global-attributes?q=dir , plus the tests in the PR web-platform-tests/wpt#29820.

The bulk of the new tests as a result of the recent work are in:
web-platform-tests/wpt#29820 (now https://wpt.fyi/results/html/dom/elements/global-attributes?q=dir-shadow)
https://wpt.fyi/results/html/dom/elements/global-attributes/dir-assorted.window.html
https://wpt.fyi/results/html/dom/elements/global-attributes/dir-auto-dynamic-changes.window.html
https://wpt.fyi/results/html/dom/elements/global-attributes/dir-slots-directionality.tentative.html
though there was a change to the existing test:
https://wpt.fyi/results/html/dom/elements/global-attributes/dir_auto-N-EN.html

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

Chromium: Intent to ship: https://groups.google.com/a/chromium.org/g/blink-dev/c/kLRBZY8Qdd0/m/YPwBDDpxAgAJ

Browser bug reports

https://code.google.com/p/chromium/issues/detail?id=576815
https://bugzilla.mozilla.org/show_bug.cgi?id=562169
https://bugs.webkit.org/show_bug.cgi?id=64861

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

No response

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[foolip]

I think this single link should cover all of the proposed tests:
https://wpt.fyi/results/?label=master&label=experimental&aligned&q=path%3A%2Fhtml%2Fdom%2Felements%2Fglobal-attributes%2Fdir%20or%20path%3A%2Fcss%2Fselectors%2Fdir

[dandclark]

This proposal has been accepted as part of Interop 2024! On behalf of the entire Interop team, thank you for proposing it. You’ll be able to track progress on this topic throughout the year via the Interop 2024 dashboard.