This page is for testing the compariative "whole cost" of enabling or disabling stylesheets which contain :has based rules and those which do not, on a significantly large tree by enabling or disabling stylesheets

More about the test

The test creates is a dynamically built significantly large tree 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