This page is for testing the compariative cost of dynamically changing DOM
and updating styles for a significantly large tree in which rules
involving the :has selector match or not. That is, they involve
changing classes used inside :has rules, but do not actually ultimately apply.
This is our best attempt at isolating the impact on performance of the Style Invalidation phase
that would be introduced.
Below is a dynamically built, significantly large tree of deeply nested DOM of lists containing lists. Each element has an id that matches the text identifying the element. When you click go, the test grabs a starting timestamp, toggles the classes .foo and .bar on every element whose index is evenly divisible by 10, or 20, respectively. These have style rules in the page that turn their text blue or green. It then forces relayout by asking for the root's `.offsetHeight`, grabs an ending timestamp and adds it to a 'total regular test time'. It does this 100 times and then reports back the average time. Then it does something similar by attaching the bat class to every 10th element. The page contains one style rule that changes #C-1000:has(.bat) text red, with a background color yellow. There is no #C-1000, but lots of elements get the bat class, so the cost of attempting to do