1.
Updates since :has() was enabled
in Chrome
Byungwoo Lee
Igalia, in partnership with EyeO
BlinkOn 17
September 2022
1

2.
In order to enable :has(),
I landed ...
Logic
(incl. comments)
Test etc. (build conf.,
test expectation,...)
Total
Touched Files 39 files 46 files 32 files 117 files
Lines
(+Added / -Deleted)
+3647
(+6181 / -2534)
+11306
(+14562 / -3256)
-511
(+1580 / -2091)
+14442
(+22323 / -7881)
... with many tests
unit tests wep platform tests perf tests
Touched Files 11 files 25 files 10 files
Lines +8083
(+10684 / -2601)
+2640
(+3293 / -653)
+583
(+585 / -2)
53 CLs
2

3.
It passed all the tests
(web platform test results after 105 released)
3

4.
It showed reasonable performance
Selector testing time with a single :has() pseudo class increases linearly with the number of elements.
(REF. )
https://www.youtube.com/watch?v=o1pJJuQiCmQ&t=1564s
4

5.
It showed reasonable performance
Restyling time with a single :has() pseudo class in style rules performs well
by considering the restyling time without :has() .
(REF. )
https://www.youtube.com/watch?v=o1pJJuQiCmQ&t=1564s
5

6.
It showed reasonable performance
Cache memory consumption of :has() testing scales close to
where is the number of elements.
Please refer the blog post:
"How blink tests :has() pseudo class?" ( )
(REF. )
O(log(n))
n
https://bit.ly/
https://www.youtube.com/watch?v=o1pJJuQiCmQ&t=1564s
6

7.
I listed-up TODO items.
@supports selector() behavior change of disallowing forgiving selector parsing
Resolved at
Adopt bloom filter approach in WebKit
Already investigated and planned
Additional performance optimizations (?)
Need more investigation
Simply introduced at the Ad Filtering Dev Summit 2022:
csswg-drafts/issues/7280
WebKit commit 245283
https://www.youtube.com/watch?v=nBrEGNsOJLM&t=21333s
7

8.
Enabled :has() in Chrome 105! 🎉
https://caniuse.com/css-has
8

9.
... with these 5 limitations
Nesting :has() inside :has() is not allowed. (e.g. :has(.a:has(.b)) )
[Resolved at ]
All current pseudo elements are not allowed inside :has() . (e.g. :has(::first-line) )
[Resolved at ]
:has() is not allowed inside the pseudos that only accept compound selectors. (e.g.
:host(.a:has(.b)) )
[Specified at / Ongoing discussion at ]
:has() is not allowed to be compounded to a pseudo elements. (e.g. ::part(foo):has(.a) )
[Specified at ]
:visited always does not match inside :has() to avoid leaking visitedness.
csswg-drafts/issues/6952
csswg-drafts/issues/7463
css-scoping webcomponents-cg/issues/5
selectors-4#pseudo-element-states
9

10.
And I dreamed a dream that won't happen
10

11.
Landed CLs after enabled
have been merged since it was enabled
Fix bugs in stable: (1 regression)
Applying @supports issue resolution:
Applying bloom filter:
Code cleanup:
Fix test error:
20 CLs
6 CLs
2 CLs
6 CLs
3 CLs
3 CLs
11

12.
6 bugs have been reported after stable
released!
:has() invalidation bug with display: none ( )
:has() invalidation bug for streaming HTML ( )
:has() breaks jQuery custom selectors ( )
:has() invalidation bug for wiping an element ( )
:has(:hover) invalidation regression ( )
:has() invalidation bug for removing element ( )
crbug.com/1347181
crbug.com/1353524
crbug.com/1358953
crbug.com/1366369
crbug.com/1368863
crbug.com/1375248
12

13.
:has() invalidation bug with display:
none
<style>
#target:has(~ input:checked) { display: none; }
</style>
<div id="target"> PASS </div>
<input type="checkbox" id="checkme">
<label for="checkme"> Check me! </label>
(Reported: Jul. 26 / Fixed: Jul. 28)
Bug: The display:none element wasn't able to have the AffectedBySubjectHas flag set.
Fix: Moved the flag from the computed style extra fields to the element rare data.
Test:
crbug.com/1347181
css/selectors/invalidation/subject-has-invalidation-with-display-none-anchor-element.html
13

14.
:has() invalidation bug for streaming HTML
<style>
div:has(+ div) { background-color: red }
</style>
<div> This <b>must</b> be red. </div>
<!-- html parsing stops here and browser renders the above partially -->
<div> This <b>must not</b> be red.</div>
<!-- html parsing finishes and browser renders the entire page -->
(Reported: Aug. 17 / Fixed: Aug. 19)
Bug: Passed incorrect element as the previous sibling of the children-parsing finished element.
Fix: Changed to pass correct previous sibling of the children-parsing finished element.
Test:
105 106 107 108 109
Fail Fail Pass Pass Pass
crbug.com/1353524
StyleEngineSimTest.ShouldInvalidateSubjectPseudoHasAfterChildrenParsingFinished
14

15.
:has() breaks jQuery custom selectors
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
.blue { color: blue }
</style>
<div> <p>text with keyword</p> </div>
<div> <p>other text</p> </div>
<script>
$("div:has(p:contains('keyword'))").addClass("blue");
</script>
(Reported: Sep. 1 / Fixed: Sep. 3)
Bug: Conflict between the :has() forgiving parsing behavior and jQuery :has() validity check
logic.
Workaround: Make :has() invalid when all arguments are dropped.
Fix: Apply @supports issue resolution (Expected to be enabled in 111)
Test:
crbug.com/1358953
https://codepen.io/byung-woo/pen/xxjvPPQ
15

16.
:has() invalidation bug for wiping an
element
<style>
#subject:has(b) { color: green }
</style>
<div id="subject">This text <b>must</b> be green</div>
<script>
document.body.offsetLeft;
subject.innerHTML = "This text must not be green";
</script>
(Reported: Sep. 21 / Fixed: Sep. 23)
Bug: ChildrenChangedType::kAllChildrenRemoved is not handled in Element::ChildChanged()
Fix: Handle the missing case (removing both element and non-element nodes).
Test:
crbug.com/1366369
css/selectors/invalidation/has-invalidation-for-wiping-an-element.html
16

17.
:has(:hover) invalidation regression
<style>
.a:has(nonexistent), .a:has(.b:hover) { color: green }
</style>
<div class="a">
<div>Hovering here does not change the color</div>
<div class="b">Hovering here changes the color to green</div>
<div>Hovering here does not change the color</div>
</div>
(Reported: Sep. 28 / Fixed: Sep. 28)
Regression: After adopted the approach of handling :hover in the fast rejection filter, the restyle
flag for :hover invalidation doesn't work properly.
Fix: Revert the approach of handling :hover in the :has() fast rejection filter.
Test:
105 106 107 108 109
Pass Fail Fail Pass Pass
crbug.com/1368863
AffectedByPseudoTest.AncestorsOrSiblingsAffectedByHoverInHasWithFastRejection
17

18.
:has() invalidation bug for removing
element
<style>
div:has(#descendant) { color: red }
</style>
<div> This text <b>must not</b> be red. <span id="descendant">This text must not exist.</span></d
<script>
document.body.offsetLeft;
descendant.remove();
</script>
(Reported: Oct. 17 / Fixed: Oct. 21)
Bug: The logic of determining :has() invalidation direction was partially missing for the case of
removing element.
Fix: Collected the logic and added the missing logic for the case.
Test:
crbug.com/1375248
css/selectors/invalidation/has-invalidation-after-removing-non-first-element.html
18

19.
Review the bugs
:has() invalidation bug with display: none
The computed style extra fields of an element will not be allocated when the element is display: none . All the other :has() related flags
in the computed style extra fields were moved to the element rare data before. The AffectedBySubjectHas was the only flag left in the
computed style extra fields. To prove the safety of locating the flag in the computed style extra fields, I needed to add the tests for the
display: none anchor element.
:has() invalidation bug for streaming HTML
The parsing sequence and element insertion sequence uses a same invalidation method. I skipped testing the invalidation method with the
parsing sequence since the invalidation method can be tested with with the element insertion sequence. So the caller side bug in the parsing
sequence wasn't able to be detected. I should tested with the parsing sequence.
:has() breaks jQuery custom selectors
As I don't have much experience with jQuery, I wasn't able to expect this issue earlier. Need to think about filling in the missing experience or
knowlege by communicating with the people involved.
:has() invalidation bug for wiping an element
I didn't check all the possible conditional branches that can be generated by the enum values. I should have checked how the enum values are
used and should have tested the cases.
:has(:hover) invalidation regression
I should have added tests when applying the :hover fast rejection approach (Oops!)
:has() invalidation bug for removing element
The logic of detecting :has() invalidation traversal direction was unnecessarily divided into two pieces and placed in different parts. This lack of
cohesiveness increased the risk of missing logic and test.
19

20.
Lesson:
improve code quality and increase test
coverage!
20

21.
Thank you!
Slide:
Bug report:
https://people.igalia.com/blee/presentation/blinkon-17-2022.html
https://bugs.chromium.org/p/chromium/issues/entry
21

22.
22