Notation In the examples and text below, we use the following notation: a - element name .a - class name #a - id [a] - attribute name * - wholeSubtreeInvalid ! - treeBoundaryCrossing !! - insertionPointCrossing P { P0, P1, .. , PN } - invalidation set for P Examples Selectors: .a { } Invalidation sets: .a { } Selectors: .a .b { } .c { } Invalidation sets: .a { .b } .b { } .c { } Selectors (:not(.b) does not map to a P, so there are no Ps in the rightmost compound which causes the wholeSubtreeInvalid to be set for the set for “.a”): #x * { } #x .a { } .a :not(.b) { } Invalidation sets: .a { * } #x { *, .a } Selectors (treeBoundaryCrossing and insertionPointCrossing): :host-context(.a) span { } :host(.b) input[disabled] { } [type] ::content > .c { } Invalidation sets: .a { span, !, !! } .b { input, [disabled], ! } .c { } [type] { .c, !! } Selectors (disjoint selector lists): .a :-webkit-any(:hover, .b) { } .c :-webkit-any(.d, .e) { } :-webkit-any(.f, .g) { } :-webkit-any(.h, *) #i { } Invalidation sets: .a { * } .b { } .c { .d, .e } .d { } .e { } .h { #i } Selectors (negated simple selectors mapping to properties in non-rightmost compound selectors): :not(.a):not(.b) > span#id { } Invalidation sets: .a { span, #id } .b { span, #id } Selectors (adjacent selectors causing wholeSubtreeInvalid): .a + .b #id { } .c ~ span { } .d ~ [type] div { } Invalidation sets: .a { * } .b { #id } #id { } .c { * } .d { * } [type] { div } Scheduling Invalidations When we change a class attribute, id attribute, etc. we retrieve the descendant invalidation set for that property and add it to a list of scheduled invalidations for that element. The actual invalidation happens asynchronously and is scheduled to happen right before computed style recalculation. The Style Invalidation and Style Recalculation In the code, there are two passes over the DOM tree which are named Style Invalidation and Style Recalculation. Style Invalidation is the process of applying descendant invalidation sets scheduled for elements down the elements’ subtree and mark elements for Style Recalculation. Style Recalculation then traverses the DOM tree and calculates the computed style (RenderStyle objects) for the marked elements. An invalidation set is pushed onto the set of applied invalidation sets as an element for which the set is scheduled is entered during DOM tree traversal. The invalidation set is then being used to match its simple selector members against elements in the subtree, and pop it when we leave the subtree root that it was pushed for. Invalidation sets with the treeBoundaryCrossing flag set are propagated into shadow trees. Likewise, the insertionPointCrossing flag allows invalidation sets to apply across elements into distributed nodes. Example HTML

Invalidation Sets .a { .b } .b { } .c { } #body { #c } Description In this example we schedule { #c } for the body element and { .b } for the #t element. The first set will match the span element with id=”c” and marked for recalc as it’s a descendant of body. The div child of body will not be marked for recalc as the second set is not pushed until we enter its child div with id=”t”, but the inner div with class=”b” will. Notes and Further Improvements Since we split simple selectors from rightmost compound selectors into distinct members of the invalidation sets, combinations of type selectors and classes/ids can be sub-optimal. Consider the selector “.a span.b”. Say you have a div with a large number of span descendants, only one of which has the class “b”, and set the class a on that div. Only the span with class “b” needs a style recalc, but since the invalidation set for “.a” becomes “{ span, .b }”, we will recalculate the computed style for all those span descendants.