<!doctype html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
#test-root * {
    background-color: red;
}
</style>
<style id="style">
</style>
</head>
<body>
    <div style="display:none" id="test-root">
        <testcaseA id="testcase1" type="foobar" attribute1="value1" class="bar baz bazoo" attribute3="value3"><span><span><span><span><span><innerTestCase id="innertestcase1"></innerTestCase></span></span></span></span></span></testcaseA>
        <testcaseB id="testcase2" type="foobar" class="bar baz bazoo" attribute2="value2" attribute3="value3"></testcaseB>
        <testcaseA id="testcase3" type="foobar" attribute1="value1" class="foo baz bazoo"><span><span><span><span><span><innerTestCase id="innertestcase2"></innerTestCase></span></span></span></span></span></testcaseA>
        <testcaseB id="testcase4" type="foobar" attribute1="value1" class="foo bar bazoo"><span><span><span><span><span><innerTestCase id="innertestcase3"></innerTestCase></span></span></span></span></span></testcaseB>
        <testcaseA id="testcase5" type="foobar" class="foo baz bazoo" attribute2="value2" attribute3="value3"><span><span><span><span><span><innerTestCase id="innertestcase4"></innerTestCase></span></span></span></span></span></testcaseA>
        <testcaseB id="testcase6" type="foobar" attribute1="value1" class="foo bar baz" attribute3="value3"><span><span><span><span><span><innerTestCase id="innertestcase5"></innerTestCase></span></span></span></span></span></testcaseB>
        <testcaseA id="testcase7" type="foobar" attribute1="value1" class="bar baz bazoo"><span><span><span><span><span><innerTestCase id="innertestcase6"></innerTestCase></span></span></span></span></span></testcaseA>
        <testcaseB id="testcase8" type="foobar" attribute1="value1" class="foo baz bazoo"><span><span><span><span><span><innerTestCase id="innertestcase7"></innerTestCase></span></span></span></span></span></testcaseB>
        <testcaseA id="testcase9" type="foobar" class="foo bar bazoo" attribute2="value2" attribute3="value3"></testcaseA>
        <testcaseB id="testcase10" type="foobar" attribute1="value1" class="foo bar bazoo" attribute3="value3"><span><span><span><span><span><innerTestCase id="innertestcase8"></innerTestCase></span></span></span></span></span></testcaseB>
        <testcaseA id="testcase11" type="foobar" attribute1="value1" class="foo bar baz"><span><span><span><span><span><innerTestCase id="innertestcase9"></innerTestCase></span></span></span></span></span></testcaseA>
        <testcaseB id="testcase12" type="foobar" attribute1="value1" class="bar baz bazoo"><span><span><span><span><span><innerTestCase id="innertestcase10"></innerTestCase></span></span></span></span></span></testcaseB>
        <testcaseA id="testcase13" type="foobar" attribute1="value1" class="foo baz bazoo" attribute3="value3"><span><span><span><span><span><innerTestCase id="innertestcase11"></innerTestCase></span></span></span></span></span></testcaseA>
        <testcaseB id="testcase14" type="foobar" class="foo bar baz" attribute2="value2"><span><span><span><span><span><innerTestCase id="innertestcase12"></innerTestCase></span></span></span></span></span></testcaseB>
        <testcaseA id="testcase15" type="foobar" attribute1="value1" class="foo bar bazoo"><span><span><span><span><span><innerTestCase id="innertestcase13"></innerTestCase></span></span></span></span></span></testcaseA>
        <testcaseB id="testcase16" type="foobar" attribute1="value1" class="foo bar baz" attribute3="value3"><span><span><span><span><span><innerTestCase id="innertestcase14"></innerTestCase></span></span></span></span></span></testcaseB>
        <testcaseA id="testcase17" type="foobar" attribute1="value1" class="bar baz bazoo" attribute3="value3"><span><span><span><span><span><innerTestCase id="innertestcase15"></innerTestCase></span></span></span></span></span></testcaseA>
        <testcaseB id="testcase18" type="foobar" attribute1="value1" class="foo baz bazoo"><span><span><span><span><span><innerTestCase id="innertestcase16"></innerTestCase></span></span></span></span></span></testcaseB>
        <testcaseA id="testcase19" type="foobar" attribute1="value1" class="foo bar bazoo"><span><span><span><span><span><innerTestCase id="innertestcase17"></innerTestCase></span></span></span></span></span></testcaseA>
        <testcaseB id="testcase20" type="foobar" class="bar baz bazoo" attribute2="value2" attribute3="value3"><span><span><span><span><span><innerTestCase id="innertestcase18"></innerTestCase></span></span></span></span></span></testcaseB>
        <testcaseA id="testcase21" type="foobar" attribute1="value1" class="foo bar baz" attribute3="value3"></testcaseA>
        <testcaseB id="testcase22" type="foobar" attribute1="value1" class="bar baz bazoo"><span><span><span><span><span><innerTestCase id="innertestcase19"></innerTestCase></span></span></span></span></span></testcaseB>
        <testcaseA id="testcase23" type="foobar" attribute1="value1" class="foo baz bazoo"><span><span><span><span><span><innerTestCase id="innertestcase20"></innerTestCase></span></span></span></span></span></testcaseA>
        <testcaseB id="testcase24" type="foobar" attribute1="value1" class="foo bar bazoo" attribute3="value3"><span><span><span><span><span><innerTestCase id="innertestcase21"></innerTestCase></span></span></span></span></span></testcaseB>
        <testcaseA id="testcase25" type="foobar" attribute1="value1" class="foo bar baz" attribute3="value3"><span><span><span><span><span><innerTestCase id="innertestcase22"></innerTestCase></span></span></span></span></span></testcaseA>
        <testcaseB id="testcase26" type="foobar" attribute1="value1" class="bar baz bazoo"><span><span><span><span><span><innerTestCase id="innertestcase23"></innerTestCase></span></span></span></span></span></testcaseB>
        <testcaseA id="testcase27" type="foobar" class="foo baz bazoo" attribute2="value2"></testcaseA>
        <testcaseB id="testcase28" type="foobar" attribute1="value1" class="foo baz bazoo" attribute3="value3"><span><span><span><span><span><innerTestCase id="innertestcase24"></innerTestCase></span></span></span></span></span></testcaseB>
        <testcaseA id="testcase29" type="foobar" attribute1="value1" class="foo bar bazoo"><span><span><span><span><span><innerTestCase id="innertestcase25"></innerTestCase></span></span></span></span></span></testcaseA>
        <testcaseB id="testcase30" type="foobar" attribute1="value1" class="foo bar baz"><span><span><span><span><span><innerTestCase id="innertestcase26"></innerTestCase></span></span></span></span></span></testcaseB>
    </div>
</body>
<script>
description('Check various cases of register pressure inside ":nth-child(An+B of selectorList)".');

function testQuerySelector(selector, expectedIds) {
    shouldBe("document.querySelectorAll('" + selector + "').length", '' + expectedIds.length);
    for (var i = 0; i < expectedIds.length; ++i)
        shouldBeEqualToString("document.querySelectorAll('" + selector + "')[" + i + "].id", expectedIds[i]);
}

function testStyling(selector, expectedIds) {
    var stylingElement = document.getElementById("style");
    stylingElement.innerHTML = '' + selector + ' { background-color: rgb(10, 100, 200); }';

    var allTestCases = document.querySelectorAll("#test-root *");
    for (var i = 0; i < allTestCases.length; ++i) {
        var expectMatch = expectedIds.indexOf(allTestCases[i].id) >= 0;
        shouldBeEqualToString('getComputedStyle(document.querySelectorAll("#test-root *")[' + i + ']).backgroundColor', expectMatch ? 'rgb(10, 100, 200)' : 'rgb(255, 0, 0)');
    }

    stylingElement.innerHTML = '';
}

function testSelector(selector, expectedIds) {
    debug("Testing \"" + selector + "\"");
    testQuerySelector("#test-root " + selector, expectedIds);
    testStyling("#test-root " + selector, expectedIds);
    debug("");
}

// First, test various case of simple register pressure.
testSelector(":nth-child(2n of [id^=testcase][attribute1=value1][class])", ["testcase3", "testcase6", "testcase8", "testcase11", "testcase13", "testcase16", "testcase18", "testcase21", "testcase23", "testcase25", "testcase28", "testcase30"]);
testSelector(":nth-child(2n of [id^=testcase][attribute1=value1][type])", ["testcase3", "testcase6", "testcase8", "testcase11", "testcase13", "testcase16", "testcase18", "testcase21", "testcase23", "testcase25", "testcase28", "testcase30"]);
testSelector(":nth-child(2n of [id^=testcase][attribute1=value1][type=foobar])", ["testcase3", "testcase6", "testcase8", "testcase11", "testcase13", "testcase16", "testcase18", "testcase21", "testcase23", "testcase25", "testcase28", "testcase30"]);
testSelector(":nth-child(2n of testcaseA:nth-child(2n+1))", ["testcase3", "testcase7", "testcase11", "testcase15", "testcase19", "testcase23", "testcase27"]);
testSelector(":nth-child(2n of [id^=testcase][attribute1=value1][type=foobar]:nth-child(2n+1))", ["testcase3", "testcase11", "testcase15", "testcase19", "testcase23", "testcase29"]);

// Next, let's check those are handed correctly if combined in a selector list.
testSelector(":nth-child(2n of some, noise, those.selectors, are#not, matched.in#this:not(.tree), [id^=testcase][attribute1=value1][class])", ["testcase3", "testcase6", "testcase8", "testcase11", "testcase13", "testcase16", "testcase18", "testcase21", "testcase23", "testcase25", "testcase28", "testcase30"]);
testSelector(":nth-child(2n of some, noise, those.selectors, are#not, matched.in#this:not(.tree), [id^=testcase][attribute1=value1][type])", ["testcase3", "testcase6", "testcase8", "testcase11", "testcase13", "testcase16", "testcase18", "testcase21", "testcase23", "testcase25", "testcase28", "testcase30"]);
testSelector(":nth-child(2n of some, noise, those.selectors, are#not, matched.in#this:not(.tree), [id^=testcase][attribute1=value1][type=foobar])", ["testcase3", "testcase6", "testcase8", "testcase11", "testcase13", "testcase16", "testcase18", "testcase21", "testcase23", "testcase25", "testcase28", "testcase30"]);
testSelector(":nth-child(2n of some, noise, those.selectors, are#not, matched.in#this:not(.tree), testcaseA:nth-child(2n+1))", ["testcase3", "testcase7", "testcase11", "testcase15", "testcase19", "testcase23", "testcase27"]);
testSelector(":nth-child(2n of some, noise, those.selectors, are#not, matched.in#this:not(.tree), [id^=testcase][attribute1=value1][type=foobar]:nth-child(2n+1))", ["testcase3", "testcase11", "testcase15", "testcase19", "testcase23", "testcase29"]);

// Let's add even more register pressure, let's add a backtracking chain.
testSelector(":nth-child(2n of [id^=testcase][attribute1=value1][class]) > * > * innerTestCase", ["innertestcase2", "innertestcase5", "innertestcase7", "innertestcase9", "innertestcase11", "innertestcase14", "innertestcase16", "innertestcase20", "innertestcase22", "innertestcase24", "innertestcase26"]);
testSelector(":nth-child(2n of [id^=testcase][attribute1=value1][class]) + * + * ~ * > * > * innerTestCase", ["innertestcase5", "innertestcase6", "innertestcase7", "innertestcase8", "innertestcase9", "innertestcase10", "innertestcase11", "innertestcase12", "innertestcase13", "innertestcase14", "innertestcase15", "innertestcase16", "innertestcase17", "innertestcase18", "innertestcase19", "innertestcase20", "innertestcase21", "innertestcase22", "innertestcase23", "innertestcase24", "innertestcase25", "innertestcase26"]);
testSelector(":nth-child(2n of [id^=testcase][attribute1=value1][class][type]) > * > * innerTestCase", ["innertestcase2", "innertestcase5", "innertestcase7", "innertestcase9", "innertestcase11", "innertestcase14", "innertestcase16", "innertestcase20", "innertestcase22", "innertestcase24", "innertestcase26"]);
testSelector(":nth-child(2n of [id^=testcase][attribute1=value1][class][type]) + * + * ~ * > * > * innerTestCase", ["innertestcase5", "innertestcase6", "innertestcase7", "innertestcase8", "innertestcase9", "innertestcase10", "innertestcase11", "innertestcase12", "innertestcase13", "innertestcase14", "innertestcase15", "innertestcase16", "innertestcase17", "innertestcase18", "innertestcase19", "innertestcase20", "innertestcase21", "innertestcase22", "innertestcase23", "innertestcase24", "innertestcase25", "innertestcase26"]);
testSelector(":nth-child(2n of [id^=testcase][attribute1=value1][class][type=foobar]) > * > * innerTestCase", ["innertestcase2", "innertestcase5", "innertestcase7", "innertestcase9", "innertestcase11", "innertestcase14", "innertestcase16", "innertestcase20", "innertestcase22", "innertestcase24", "innertestcase26"]);
testSelector(":nth-child(2n of [id^=testcase][attribute1=value1][class][type=foobar]) + * + * ~ * > * > * innerTestCase", ["innertestcase5", "innertestcase6", "innertestcase7", "innertestcase8", "innertestcase9", "innertestcase10", "innertestcase11", "innertestcase12", "innertestcase13", "innertestcase14", "innertestcase15", "innertestcase16", "innertestcase17", "innertestcase18", "innertestcase19", "innertestcase20", "innertestcase21", "innertestcase22", "innertestcase23", "innertestcase24", "innertestcase25", "innertestcase26"]);
testSelector(":nth-child(2n of testcaseA:nth-child(2n+1)) > * > * innerTestCase", ["innertestcase2", "innertestcase6", "innertestcase9", "innertestcase13", "innertestcase17", "innertestcase20"]);
testSelector(":nth-child(2n of testcaseA:nth-child(2n+1)) + * + * ~ * > * > * innerTestCase", ["innertestcase5", "innertestcase6", "innertestcase7", "innertestcase8", "innertestcase9", "innertestcase10", "innertestcase11", "innertestcase12", "innertestcase13", "innertestcase14", "innertestcase15", "innertestcase16", "innertestcase17", "innertestcase18", "innertestcase19", "innertestcase20", "innertestcase21", "innertestcase22", "innertestcase23", "innertestcase24", "innertestcase25", "innertestcase26"]);
testSelector(":nth-child(2n of [id^=testcase][attribute1=value1][type=foobar]:nth-child(2n+1)) > * > * innerTestCase", ["innertestcase2", "innertestcase9", "innertestcase13", "innertestcase17", "innertestcase20", "innertestcase25"]);
testSelector(":nth-child(2n of [id^=testcase][attribute1=value1][type=foobar]:nth-child(2n+1)) + * + * ~ * > * > * innerTestCase", ["innertestcase5", "innertestcase6", "innertestcase7", "innertestcase8", "innertestcase9", "innertestcase10", "innertestcase11", "innertestcase12", "innertestcase13", "innertestcase14", "innertestcase15", "innertestcase16", "innertestcase17", "innertestcase18", "innertestcase19", "innertestcase20", "innertestcase21", "innertestcase22", "innertestcase23", "innertestcase24", "innertestcase25", "innertestcase26"]);

testSelector(":nth-child(2n of some, noise, those.selectors, are#not, matched.in#this:not(.tree), [id^=testcase][attribute1=value1][class]) > * > * innerTestCase", ["innertestcase2", "innertestcase5", "innertestcase7", "innertestcase9", "innertestcase11", "innertestcase14", "innertestcase16", "innertestcase20", "innertestcase22", "innertestcase24", "innertestcase26"]);
testSelector(":nth-child(2n of some, noise, those.selectors, are#not, matched.in#this:not(.tree), [id^=testcase][attribute1=value1][class]) + * + * ~ * > * > * innerTestCase", ["innertestcase5", "innertestcase6", "innertestcase7", "innertestcase8", "innertestcase9", "innertestcase10", "innertestcase11", "innertestcase12", "innertestcase13", "innertestcase14", "innertestcase15", "innertestcase16", "innertestcase17", "innertestcase18", "innertestcase19", "innertestcase20", "innertestcase21", "innertestcase22", "innertestcase23", "innertestcase24", "innertestcase25", "innertestcase26"]);
testSelector(":nth-child(2n of some, noise, those.selectors, are#not, matched.in#this:not(.tree), [id^=testcase][attribute1=value1][class][type]) > * > * innerTestCase", ["innertestcase2", "innertestcase5", "innertestcase7", "innertestcase9", "innertestcase11", "innertestcase14", "innertestcase16", "innertestcase20", "innertestcase22", "innertestcase24", "innertestcase26"]);
testSelector(":nth-child(2n of some, noise, those.selectors, are#not, matched.in#this:not(.tree), [id^=testcase][attribute1=value1][class][type]) + * + * ~ * > * > * innerTestCase", ["innertestcase5", "innertestcase6", "innertestcase7", "innertestcase8", "innertestcase9", "innertestcase10", "innertestcase11", "innertestcase12", "innertestcase13", "innertestcase14", "innertestcase15", "innertestcase16", "innertestcase17", "innertestcase18", "innertestcase19", "innertestcase20", "innertestcase21", "innertestcase22", "innertestcase23", "innertestcase24", "innertestcase25", "innertestcase26"]);
testSelector(":nth-child(2n of some, noise, those.selectors, are#not, matched.in#this:not(.tree), [id^=testcase][attribute1=value1][class][type=foobar]) > * > * innerTestCase", ["innertestcase2", "innertestcase5", "innertestcase7", "innertestcase9", "innertestcase11", "innertestcase14", "innertestcase16", "innertestcase20", "innertestcase22", "innertestcase24", "innertestcase26"]);
testSelector(":nth-child(2n of some, noise, those.selectors, are#not, matched.in#this:not(.tree), [id^=testcase][attribute1=value1][class][type=foobar]) + * + * ~ * > * > * innerTestCase", ["innertestcase5", "innertestcase6", "innertestcase7", "innertestcase8", "innertestcase9", "innertestcase10", "innertestcase11", "innertestcase12", "innertestcase13", "innertestcase14", "innertestcase15", "innertestcase16", "innertestcase17", "innertestcase18", "innertestcase19", "innertestcase20", "innertestcase21", "innertestcase22", "innertestcase23", "innertestcase24", "innertestcase25", "innertestcase26"]);
testSelector(":nth-child(2n of some, noise, those.selectors, are#not, matched.in#this:not(.tree), testcaseA:nth-child(2n+1)) > * > * innerTestCase", ["innertestcase2", "innertestcase6", "innertestcase9", "innertestcase13", "innertestcase17", "innertestcase20"]);
testSelector(":nth-child(2n of some, noise, those.selectors, are#not, matched.in#this:not(.tree), testcaseA:nth-child(2n+1)) + * + * ~ * > * > * innerTestCase", ["innertestcase5", "innertestcase6", "innertestcase7", "innertestcase8", "innertestcase9", "innertestcase10", "innertestcase11", "innertestcase12", "innertestcase13", "innertestcase14", "innertestcase15", "innertestcase16", "innertestcase17", "innertestcase18", "innertestcase19", "innertestcase20", "innertestcase21", "innertestcase22", "innertestcase23", "innertestcase24", "innertestcase25", "innertestcase26"]);
testSelector(":nth-child(2n of some, noise, those.selectors, are#not, matched.in#this:not(.tree), [id^=testcase][attribute1=value1][type=foobar]:nth-child(2n+1)) > * > * innerTestCase", ["innertestcase2", "innertestcase9", "innertestcase13", "innertestcase17", "innertestcase20", "innertestcase25"]);
testSelector(":nth-child(2n of some, noise, those.selectors, are#not, matched.in#this:not(.tree), [id^=testcase][attribute1=value1][type=foobar]:nth-child(2n+1)) + * + * ~ * > * > * innerTestCase", ["innertestcase5", "innertestcase6", "innertestcase7", "innertestcase8", "innertestcase9", "innertestcase10", "innertestcase11", "innertestcase12", "innertestcase13", "innertestcase14", "innertestcase15", "innertestcase16", "innertestcase17", "innertestcase18", "innertestcase19", "innertestcase20", "innertestcase21", "innertestcase22", "innertestcase23", "innertestcase24", "innertestcase25", "innertestcase26"]);
</script>
<script src="../../resources/js-test-post.js"></script>
</html>