How CSS Pseudo Elements are handled

[kalyani Shinde]

Hi Team,

I have recently started working with chromium/blink, so quite new to this code. 

I wanted to understand where and how css pseudo elements(e.g webkit-scrollbar) are handled while applying style to any element. These elements are not treated as PseudoElement when we do "GetPseudoElement" on StyleResolveState which finally applies to any element.

Simple question here is to know how to identify this particular style change(state <StyleResolverState>) is defined for Css PseudoElement. 

Thanks in advance.

[Rune Lillesveen]

In short, Blink first detects the presence of pseudo element style when matching rules for the originating element. If all but the pseudo element part of the selector matches, we mark the element as having pseudo element style:

https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/css/element_rule_collector.cc;l=1057;drc=d708cc843536cc344f0f7679a978634cc14d6153;bpv=1;bpt=1

For tree-abiding pseudo elements that generate a PseudoElement, such elements are then generated from Element::UpdatePseudoElement(), ultimately checking the flag that was set when computing the originating element's style:

https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/style/computed_style.h;l=2474;drc=d708cc843536cc344f0f7679a978634cc14d6153

For scrollbars, CustomScrollbar is created based on the HasPseudoElementStyle() here:

https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/paint/paint_layer_scrollable_area.cc;l=2780?q=MakeGarbageCollected%3CCustomScrollbar%3E&ss=chromium%2Fchromium%2Fsrc

And the styling for the various scrollbar parts is computed here:

https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/layout/custom_scrollbar.cc;l=134-162;drc=d708cc843536cc344f0f7679a978634cc14d6153;bpv=1;bpt=1?q=CustomScrollbar::&ss=chromium%2Fchromium%2Fsrc

Hope that helps.

--

Rune Lillesveen