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
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.