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 might match or not.

More about the test

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-57:has(.bat) text red, with a background color yellow.