Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Updates since :has() was enabled in Chrome

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 23 Anzeige

Updates since :has() was enabled in Chrome

Herunterladen, um offline zu lesen

A lightning talk by Byungwoo Lee from BlinkOn 17 about tweaks and changes to :has support in chromium since the previous BlinkOn.

A lightning talk by Byungwoo Lee from BlinkOn 17 about tweaks and changes to :has support in chromium since the previous BlinkOn.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie Updates since :has() was enabled in Chrome (20)

Weitere von Igalia (20)

Anzeige

Aktuellste (20)

Updates since :has() was enabled in Chrome

  1. 1. Updates since :has() was enabled in Chrome Byungwoo Lee Igalia, in partnership with EyeO BlinkOn 17 September 2022 1
  2. 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. 3. It passed all the tests (web platform test results after 105 released) 3
  4. 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. 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. 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. 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. 8. Enabled :has() in Chrome 105! 🎉 https://caniuse.com/css-has 8
  9. 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. 10. And I dreamed a dream that won't happen 10
  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. Lesson: improve code quality and increase test coverage! 20
  21. 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. 22

×