blob: a29dfaa356a7f0de27d38e2fcb9a7caf2a8e799b [file] [log] [blame]
<!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;
}
</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; }";
}
function fatStyleSheetWithSelectorLength(length)
{
return fatSelectorListWithLength(length) + " { color: red; }";
}
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); rule().selectorText", "selectorListWithLength(8192)");
shouldBe("styleElement.innerText = styleSheetWithSelectorLength(8192); sheet().rules.length", "1");
shouldBe("styleElement.innerText = styleSheetWithSelectorLength(8193); rule().selectorText", "selectorListWithLength(8192)");
shouldBe("styleElement.innerText = styleSheetWithSelectorLength(8193); sheet().rules.length", "2");
shouldBe("styleElement.innerText = styleSheetWithSelectorLength(16384); sheet().rules.length", "2");
shouldBe("styleElement.innerText = styleSheetWithSelectorLength(16385); sheet().rules.length", "3");
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", "2");
shouldBe("styleElement.innerText = fatStyleSheetWithSelectorLength(4096); sheet().rules.length", "2");
shouldBe("styleElement.innerText = fatStyleSheetWithSelectorLength(4097); sheet().rules.length", "3");
shouldBe("styleElement.innerText = fatStyleSheetWithSelectorLength(16385); sheet().rules.length", "9");
shouldBe("styleElement.innerText = fatStyleSheetWithSelectorLength(16384); sheet().rules.length", "8");
shouldBe("styleElement.innerText = fatStyleSheetWithSelectorLength(16385); sheet().rules.length", "9");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>