<!DOCTYPE html>
<html>
<head>
<script src="../resources/runner.js"></script>
<style>
  .root .child {}
</style>
</head>
<body>
<div id="root"></div>
<script>
function insertStyleSheet(css)
{
    var styleElement = document.createElement("style");
    styleElement.textContent = css;
    document.head.appendChild(styleElement);
    return styleElement;
}

function cssStrWithClassSelectors(count) {
    var selector = '.a' + count + ' .b' + count + ' { color: red } ';
    // Intentionally repeat the same classes many times, to test duplicate optimizations.
    return selector + selector + selector + selector + selector + selector + selector;
}

function cssStrWithAttributeSelectors(count) {
    var selector = '[attrA' + count + '="1"]' + ' [attrB' + count + '="1"]' + ' { color: red } ';
    // Intentionally repeat the same classes many times, to test duplicate optimizations.
    return selector + selector + selector + selector + selector + selector + selector;
}

function runFunction()
{
    var numRules = 1000;
    var arr = new Array(numRules);
    for (var i = 0 ; i < numRules; i++) {
        arr[i] = cssStrWithClassSelectors(i);
    }
    for (var i = 0 ; i < numRules; i++) {
        arr[numRules + i] = cssStrWithAttributeSelectors(i);
    }
    var styleElement = insertStyleSheet(arr.join(' '));

    // Force style recalc.
    document.body.offsetTop;

    styleElement.parentNode.removeChild(styleElement);
}

PerfTestRunner.measureRunsPerSecond({
    description: "Measures performance of inserting a stylesheet of 2000 different CSS rules, each of which is duplicated 7 times to test duplicate rule optimizations.",
    run: runFunction
});

</script>
</body>
</html>