<!DOCTYPE html>
<html>
<head>
    <title>Performance test for :has(> :is(x > y)) with child combinators</title>
    <style>
        ol.group1:has(> :is(.highlight > li:nth-child(odd))) { border-color: red; }
        ol.group2:has(> :is(.highlight > li:nth-child(even))) { border-color: blue; }
        ol.group3:has(> :is(.special > li:first-child)) { border-color: green; }
        ol.group4:has(> :is(.marker > li:last-child)) { border-color: yellow; }
        ol.group5:has(> :is(.tagged > li)) { border-color: purple; }

        ol:has(> :is(.active > li)) { background-color: rgba(255, 0, 0, 0.1); }
        ol:has(> :is(.selected > li)) { background-color: rgba(0, 255, 0, 0.1); }
        ol:has(> :is(.focused > li)) { background-color: rgba(0, 0, 255, 0.1); }
        ol:has(> :is(.hover > li)) { box-shadow: 0 0 5px rgba(0,0,0,0.2); }
        ol:has(> :is(.disabled > li)) { opacity: 0.5; }

        ol:has(> :is(.state1 > li:nth-of-type(1))) { margin-left: 1px; }
        ol:has(> :is(.state2 > li:nth-of-type(2))) { margin-left: 2px; }
        ol:has(> :is(.state3 > li:nth-of-type(3))) { margin-left: 3px; }
        ol:has(> :is(.state4 > li:nth-of-type(4))) { margin-left: 4px; }
        ol:has(> :is(.state5 > li:nth-of-type(5))) { margin-left: 5px; }

        ol:has(> :is(.parent1 > li)) { --color1: red; }
        ol:has(> :is(.parent2 > li)) { --color2: blue; }
        ol:has(> :is(.parent3 > li)) { --color3: green; }
        ol:has(> :is(.parent4 > li)) { --color4: yellow; }
        ol:has(> :is(.parent5 > li)) { --color5: purple; }
    </style>
</head>
<body>
<div id="test-container"></div>
<script src="../resources/runner.js"></script>
<script>

const container = document.getElementById('test-container');

for (let i = 0; i < 100; i++) {
    const ol = document.createElement('ol');
    ol.className = `group${(i % 5) + 1} highlight special marker tagged`;

    for (let j = 0; j < 30; j++) {
        const li = document.createElement('li');
        li.textContent = `Item ${j}`;
        ol.appendChild(li);
    }

    container.appendChild(ol);
}

const allListItems = container.querySelectorAll('li');
const allLists = container.querySelectorAll('ol');

PerfTestRunner.measureRunsPerSecond({
    description: "Tests DOM manipulation performance with complex :has(> :is()) selectors containing child combinators.",
    run: function() {
        for (let i = 0; i < allListItems.length; i += 3) {
            allListItems[i].classList.add('temp');
        }
        getComputedStyle(container).opacity;

        for (let i = 0; i < allLists.length; i += 2) {
            allLists[i].classList.add('active', 'selected', 'focused');
        }
        getComputedStyle(container).opacity;

        for (let i = 0; i < allListItems.length; i += 3) {
            allListItems[i].classList.remove('temp');
        }
        getComputedStyle(container).opacity;

        for (let i = 0; i < allLists.length; i += 2) {
            allLists[i].classList.remove('active', 'selected', 'focused');
        }
        getComputedStyle(container).opacity;
    }
});
</script>
</body>
</html>