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.

More about the test

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.

Note: This will cause rapid flashing, do not look at this test if you have some photosensitivity