Intent to Prototype and Ship: CSS Selector Pseudo class :dir()

258 views
Skip to first unread message

Miyoung Shin

unread,
Oct 16, 2020, 1:09:32 PM10/16/20
to blink-dev
Contact emails

Explainer
none

Specification

Summary
The :dir CSS pseudo-class matches elements based on the directionality of the text contained in them. The :dir() pseudo-class uses only the semantic value of the directionality. It doesn't account for styling directionality. Pseudo-class :dir() pseudo-class is not equivalent of using the [dir=…] attribute selector. The latter matches a value of the dir attribute and doesn't match when no attribute is set, even if in that case the element inherits the value of its parent. On the other hand, :dir() will match the value calculated by the UA, being inherited or the auto value.

In 2016, there were discussions to support this feature, but it never moved forward into the implementation phase.

There were concerns about ShadowDOM at the time, but I believe this won't not a problem if we use Node::ParentOrShadowHostNode when traversing own ancestors to find the inherited dir property.

Blink component
Blink>CSS

TAG review
None

TAG review status
Not applicable

Demo link

Debuggability
No special considerations. It is similar to other pseudo-classes and can be checked in Dev tools.

Measurement
Adding use-counter in the patch that can later be checked for usage stats at chromestatus.

Risks
  • Interoperability and Compatibility
  • This change improves interoperability since it was already shipped on Gecko for a long time, and we can see a positive signal on Webkit, and compatibility risk is low as it’s adding new capability without affecting existing use cases.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)? 
Yes

Is this feature fully tested by web-platform-tests?
Yes

Tracking bug

Link to entry on the Chrome Platform Status

This intent message was generated by Chrome Platform Status.

Rune Lillesveen

unread,
Oct 16, 2020, 5:33:17 PM10/16/20
to Miyoung Shin, blink-dev
On Fri, Oct 16, 2020 at 7:09 PM Miyoung Shin <myid...@chromium.org> wrote:
Contact emails

Explainer
none

Specification

Summary
The :dir CSS pseudo-class matches elements based on the directionality of the text contained in them. The :dir() pseudo-class uses only the semantic value of the directionality. It doesn't account for styling directionality. Pseudo-class :dir() pseudo-class is not equivalent of using the [dir=…] attribute selector. The latter matches a value of the dir attribute and doesn't match when no attribute is set, even if in that case the element inherits the value of its parent. On the other hand, :dir() will match the value calculated by the UA, being inherited or the auto value.

In 2016, there were discussions to support this feature, but it never moved forward into the implementation phase.

There were concerns about ShadowDOM at the time, but I believe this won't not a problem if we use Node::ParentOrShadowHostNode when traversing own ancestors to find the inherited dir property.

I think the main concern was actually performance of dir="auto" without introducing a cache for element directionality, since that requires a subtree traversal[1] for each resolution.

Based on [2] from the previous intent, it seems Gecko caches the result.


Emilio Cobos Álvarez

unread,
Oct 17, 2020, 2:56:58 PM10/17/20
to blin...@chromium.org
On 10/16/20 11:32 PM, Rune Lillesveen wrote:> I think the main concern
was actually performance of dir="auto" without > introducing a cache for
element directionality, since that requires a > subtree traversal[1] for
each resolution.> > Based on [2] from the previous intent, it seems
Gecko caches the result.
It's not so much a cache (as in the nth-child kind of cache that all
browsers have) fwiw, it's more of a "Gecko keeps the directionality of
the DOM up-to-date on DOM mutations". In particular, we keep two node
bits for the dir pseudo-class[1]. There are a couple bits to make
dir=auto and directionality computation efficient and such too, much
like the existing Blink bits in the ComputedStyle...

It seems Blink right now stores dir=auto information in style for some
reason, which looks really odd/sketchy (and heh, it seems esprehn@
agreed[2]).

Regarding Shadow DOM, the behavior in Gecko is a bit more subtle than
walking the shadow-including parent chain (specially wrt slotting), but
we believe it is the right one based on the discussions in [3][4], and
was implemented in [5] and [6] (and there are some WPT tests for that).

Cheers,

-- Emilio

[1]:
https://searchfox.org/mozilla-central/rev/f43cef551760b268a3d22eaddd0e76719acf2d88/dom/events/EventStates.h#261-264
[2]:
https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/html/html_element.cc;l=1166-1173;drc=449eeaa3adcc30f2ad63611bf919e67e887da36d
[3]: https://github.com/whatwg/html/issues/3699
[4]: https://github.com/whatwg/html/issues/4906
[5]: https://bugzilla.mozilla.org/show_bug.cgi?id=1469108
[6]: https://bugzilla.mozilla.org/show_bug.cgi?id=1100912

PhistucK

unread,
Oct 18, 2020, 3:45:35 AM10/18/20
to Miyoung Shin, blink-dev
> Tracking bug
> https://code.google.com/p/chromium/issues/detail?id=576815

Wow, a blast from the past, what generated this old code.google.com URL for you? :OOO


I love this intent. This should have been supported since the beginning, way overdue. Woo hoo!

☆PhistucK


--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/05deeb34-12ae-4fe6-8c0e-5c148a9a22fdn%40chromium.org.

Rune Lillesveen

unread,
Oct 19, 2020, 7:03:51 AM10/19/20
to Miyoung Shin, blink-dev, Miyoung Shin
On Mon, Oct 19, 2020 at 8:54 AM Miyoung Shin <myid...@igalia.com> wrote:
> I think the main concern was actually performance of dir="auto" without introducing a cache for element directionality, since that requires a subtree traversal[1] for each resolution.
Right. We would definitely introduce a cache method for the performance.

Looks like we are already doing this once for every element here:


We should at least be able to take advantage of that resolution for :dir() on the target element for the selector. Should probably take this discussion off the intent-thread, though.

> "Gecko keeps the directionality of the DOM up-to-date on DOM mutations".
But, it seems that keeping it up-to-date on DOM mutations, like Gaeko, can be inefficient if it is not actually necessary. 

So, I think we'll have to reset the value when we need to re-calculate it for dir="auto" with a change in style or a change in the descendant node, and we'll have to cache the value in HTMLElement when we actually need that value and re-use caching value until the value is invalidated. And I think it would be nice to use pinpoint to see how effective this is. wdyt?

2020년 10월 17일 토요일 오전 6시 33분 17초 UTC+9에 Rune Lillesveen님이 작성:

Miyoung Shin

unread,
Oct 19, 2020, 4:18:40 PM10/19/20
to blink-dev, Rune Lillesveen, blink-dev, Miyoung Shin
> I think the main concern was actually performance of dir="auto" without introducing a cache for element directionality, since that requires a subtree traversal[1] for each resolution.
Right. We would definitely introduce a cache method for the performance.

> "Gecko keeps the directionality of the DOM up-to-date on DOM mutations".
But, it seems that keeping it up-to-date on DOM mutations, like Gaeko, can be inefficient if it is not actually necessary. 

So, I think we'll have to reset the value when we need to re-calculate it for dir="auto" with a change in style or a change in the descendant node, and we'll have to cache the value in HTMLElement when we actually need that value and re-use caching value until the value is invalidated. And I think it would be nice to use pinpoint to see how effective this is. wdyt?

2020년 10월 17일 토요일 오전 6시 33분 17초 UTC+9에 Rune Lillesveen님이 작성:
On Fri, Oct 16, 2020 at 7:09 PM Miyoung Shin <myid...@chromium.org> wrote:

Chris Harrelson

unread,
Oct 28, 2020, 1:56:15 PM10/28/20
to Rune Lillesveen, Miyoung Shin, blink-dev, Miyoung Shin
LGTM1

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeS67Tza63FM4XRqLa9dfoF4oHgy%3DzZs2Jbje5-D8HAwWQ%40mail.gmail.com.

Yoav Weiss

unread,
Oct 28, 2020, 1:59:39 PM10/28/20
to Chris Harrelson, Rune Lillesveen, Miyoung Shin, blink-dev, Miyoung Shin
LGTM2 assuming Rune is happy with the implementation's performance characteristics.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw_J_eT6q5Z9Ld1h1XwpYg%2Bs5vMiT%3DbOioAQGwTR5RYymQ%40mail.gmail.com.

TAMURA, Kent

unread,
Oct 28, 2020, 10:24:42 PM10/28/20
to blink-dev, Rune Lillesveen, Miyoung Shin, Miyoung Shin
LGTM3


To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACj%3DBEgkbBOWM7ssP1qGQ%3DHd5Xc6%2BwVW8Hs-dYhtfhKyQ7MpoA%40mail.gmail.com.


--
TAMURA Kent
Software Engineer, Google


Reply all
Reply to author
Forward
0 new messages