<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../resources/js-test-pre.js"></script>
<style id="stylebro" type="text/css">
& .peb {
    color: red;
    & .foo {
        color: green;
    }
}
</style>
</head>
<body>
<script>

styleElement = document.getElementById("stylebro");

function repeatAndJoin(s, count)
{
    var a = new Array();
    for (i = 0; i < count; ++i)
        a.push(s);
    return a.join(", ");
}

function selectorListWithLength(length)
{
    return repeatAndJoin(".x", length);
}

function fatSelectorListWithLength(length)
{
    return repeatAndJoin(".x .y .z .q", length);
}

function styleSheetWithSelectorLength(length)
{
    return selectorListWithLength(length) + " { color: red; & .foo { color: green; }}";
}

function fatStyleSheetWithSelectorLength(length)
{
    return fatSelectorListWithLength(length) + " { color: red; & .foo { color: green; }}";
}

function sheet()
{
    return styleElement.sheet;
}

function rule()
{
    return sheet().cssRules[0];
}

description("This test tests and documents the behavior of CSS style rules with a massive number of selectors. Rules with >8192 selector components get split into multiple rules at the parsing stage. Setting a rule's selectorText via CSSOM will do nothing if there are more than 8192 components.");

shouldBe("rule().selectorText = selectorListWithLength(1); rule().selectorText", "selectorListWithLength(1)");
shouldBe("rule().selectorText = selectorListWithLength(8192); rule().selectorText", "selectorListWithLength(8192)");
shouldBe("rule().selectorText = '.reset'; rule().selectorText", "'.reset'");
shouldBe("rule().selectorText = selectorListWithLength(8193); rule().selectorText", "'.reset'");
shouldBe("rule().selectorText = '.reset'; rule().selectorText", "'.reset'");
shouldBe("rule().selectorText = selectorListWithLength(8193); sheet().rules.length", "1");
shouldBe("rule().selectorText = selectorListWithLength(8192); rule().selectorText", "selectorListWithLength(8192)");
shouldBe("rule().selectorText = selectorListWithLength(8192); sheet().rules.length", "1");
shouldBe("rule().selectorText = '.reset'; rule().selectorText", "'.reset'");
shouldBe("rule().selectorText = selectorListWithLength(8193); rule().selectorText", "'.reset'");
shouldBe("rule().selectorText = selectorListWithLength(8193); sheet().rules.length", "1");

shouldBe("rule().selectorText = fatSelectorListWithLength(1); sheet().rules.length", "1");
shouldBe("rule().selectorText = fatSelectorListWithLength(1); rule().selectorText", "fatSelectorListWithLength(1)");
shouldBe("rule().selectorText = fatSelectorListWithLength(2048); rule().selectorText", "fatSelectorListWithLength(2048)");
shouldBe("rule().selectorText = '.reset'; rule().selectorText", "'.reset'");
shouldBe("rule().selectorText = fatSelectorListWithLength(2049); rule().selectorText", "'.reset'");

shouldBe("styleElement.innerText = styleSheetWithSelectorLength(1); rule().selectorText", "selectorListWithLength(1)");
shouldBe("styleElement.innerText = styleSheetWithSelectorLength(8192); sheet().rules.length", "1");
shouldBe("styleElement.innerText = styleSheetWithSelectorLength(8193); sheet().rules.length", "0");
shouldBe("styleElement.innerText = styleSheetWithSelectorLength(16384); sheet().rules.length", "0");
shouldBe("styleElement.innerText = styleSheetWithSelectorLength(16385); sheet().rules.length", "0");

shouldBe("styleElement.innerText = fatStyleSheetWithSelectorLength(1); sheet().rules.length", "1");
shouldBe("styleElement.innerText = fatStyleSheetWithSelectorLength(2048); sheet().rules.length", "1");
shouldBe("styleElement.innerText = fatStyleSheetWithSelectorLength(2049); sheet().rules.length", "0");
shouldBe("styleElement.innerText = fatStyleSheetWithSelectorLength(4096); sheet().rules.length", "0");
shouldBe("styleElement.innerText = fatStyleSheetWithSelectorLength(4097); sheet().rules.length", "0");
shouldBe("styleElement.innerText = fatStyleSheetWithSelectorLength(16385); sheet().rules.length", "0");
shouldBe("styleElement.innerText = fatStyleSheetWithSelectorLength(16384); sheet().rules.length", "0");
shouldBe("styleElement.innerText = fatStyleSheetWithSelectorLength(16385); sheet().rules.length", "0");

</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>