A Lightning talk from BlinkOn 14 by Igalia's Miyoung shin

1. Cache the directionality of
the element
myid.shin@igalia.com

2. What is the directionality of the element
abc
<div>abc</div>
<div dir=”ltr”>abc</div>
abc
abc ‫اﻟﯾﻣﯾن‬
<div dir=”rtl”>abc</div>
<div dir=”auto”>abc</div>
<div dir=”auto”>‫<اﻟﯾﻣﯾن‬/div>

3. Why cache?
● Element didn’t have own directionality itself
● Instead, depended on `direction` in ComputedStyle
● Didn’t know the directionality if ComputedStyle is not created yet
● Also, use it with `direction` property of CSS in ComputedStyle
● There are cases when the directionality of the element needs to be
recalculated even if there is no change in the element
● Also, needs to be recalculated more for :dir pseudo class
Functionality & Performance Issues

4. How to cache the directionality of the element?
● If dir=ltr|rtl, update the directionality of the element and its descendant
immediately
● If dir=auto, resolve the directionality and update the element and its
descendant immediately
● If no valid dir, set the directionality of the parent before parsing children
● If the child is inserted with no valid dir, set the directionality of the parent
● Complete caching the directionality of all elements before calculating the style
● <slot> and <shadow-root> are still unclear and under the discussion on the
Spec

5. What else?
● Support :dir() pseudo classe as experimental since M89 👏
○ run chrome with --enable-blink-features=CSSPseudoDir
● Improved the performance for dir=auto by reducing a calculation of the
directionality
○ do not adjust the directionality if the new text's direction is same with old one or doesn’t have
the strong directionality.
○ drop out of the tree walk if the node changed children is passed during traversing.
○ in case of replacing the text node : 13% 👏👏👏
○ in case of inserting the text node : 270% 👏👏👏
● Fixed the updating dir=auto issue when inserting text into a display:none
● no measure data for the cache of the directionality

6. Thanks