<!DOCTYPE html>
<html>
<head>
    <title>Performance test for :where()/:is() rule indexing</title>
</head>
<body>
<div id="container" style="height: 1px; overflow: hidden;"></div>
<script src="../resources/runner.js"></script>
<script>

var ruleTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'a', 'blockquote',
    'strong', 'em', 'code', 'pre', 'ol', 'ul', 'li', 'table', 'img', 'hr', 'dl'];
var style = document.createElement('style');
var css = '';
for (var i = 0; i < ruleTags.length; i++)
    css += '.prose :where(' + ruleTags[i] + '):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin: ' + (i + 1) + 'px; }\n';
style.textContent = css;
document.head.appendChild(style);

var container = document.getElementById('container');
var domTags = ['div', 'div', 'div', 'span', 'span', 'p', 'section', 'article'];
for (var i = 0; i < 25000; i++) {
    var el = document.createElement(domTags[i % domTags.length]);
    el.textContent = 'x';
    if (i % 500 === 0)
        el.className = 'not-prose';
    container.appendChild(el);
}

PerfTestRunner.measureRunsPerSecond({
    description: "Style recalculation with :where(tag) rules on a large DOM. Tests that single-argument :where()/:is() rules are indexed by tag.",
    run: function() {
        container.classList.add('prose');
        container.offsetHeight;

        container.classList.remove('prose');
        container.offsetHeight;
    }
});
</script>
</body>
</html>