This page is for testing the compariative cost of invalidating styles for
a an average size tree (accordion to the HTTPArchive data ~500 elements), by enabling or disabling stylesheets which
contain
:has
based rules and those which do not.
The test creates is a dynamically built tree of around 500 elements -
average according to the HTTPArchive data. It is built
of mainly list items with the class car
, each of which
represents an item in inventory. Each contains an element encoded with
metadata (classes) about the specific item in inventory: These are
classes like feature-power-windows
and sale
.
The document also contains 2 stylesheets which are initially disabled.
One is a 'regular' stylesheet which stripes rows with
:nth-child
white, gray and yellow, respectively and and
sets some (not very readable) font colors. The other is a stylesheet
with some :has() rules. Clicking the button will grab a starting
timestamp and then toggle the regular stylesheet on and off 100 times in
between animation frames, and then measure and record the average speed.
It will then do the same with the stylesheet containing the :has rules
and report the results.