<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[173853] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/173853">173853</a></dd>
<dt>Author</dt> <dd>benjamin@webkit.org</dd>
<dt>Date</dt> <dd>2014-09-22 15:09:13 -0700 (Mon, 22 Sep 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Add the baseline implementation of :nth-child(An+B of selector-list)
https://bugs.webkit.org/show_bug.cgi?id=136975
Patch by Benjamin Poulain <bpoulain@apple.com> on 2014-09-22
Reviewed by Darin Adler.
Source/WebCore:
Tests: fast/css/nth-child-of-classname.html
fast/css/nth-child-of-complex-selector.html
fast/css/nth-child-of-compound-selector.html
fast/css/nth-child-of-tagname.html
fast/selectors/nth-child-of-basics.html
fast/selectors/nth-child-of-class-style-update.html
fast/selectors/nth-child-of-complex-selectors.html
fast/selectors/nth-child-of-selector-list.html
* css/SelectorChecker.cpp:
(WebCore::SelectorChecker::checkOne):
Pretty basic:
-Go over the previous siblings.
-For each sibling, test the selector list. If it matches, increase the count.
* cssjit/SelectorCompiler.cpp:
(WebCore::SelectorCompiler::addPseudoClassType):
Skip any case of the new selector. This will be implemented separately.
LayoutTests:
* fast/css/nth-child-of-classname-expected.html: Added.
* fast/css/nth-child-of-classname.html: Added.
* fast/css/nth-child-of-complex-selector-expected.html: Added.
* fast/css/nth-child-of-complex-selector.html: Added.
* fast/css/nth-child-of-compound-selector-expected.html: Added.
* fast/css/nth-child-of-compound-selector.html: Added.
* fast/css/nth-child-of-tagname-expected.html: Added.
* fast/css/nth-child-of-tagname.html: Added.
Cover basic styling and style sharing.
* fast/selectors/nth-child-of-basics-expected.txt: Added.
* fast/selectors/nth-child-of-basics.html: Added.
* fast/selectors/nth-child-of-complex-selectors-expected.txt: Added.
* fast/selectors/nth-child-of-complex-selectors.html: Added.
* fast/selectors/nth-child-of-selector-list-expected.txt: Added.
* fast/selectors/nth-child-of-selector-list.html: Added.
Cover querySelector and styling of various cases.
* fast/selectors/nth-child-of-class-style-update-expected.txt: Added.
* fast/selectors/nth-child-of-class-style-update.html: Added.
Basic case of style invalidation.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssSelectorCheckercpp">trunk/Source/WebCore/css/SelectorChecker.cpp</a></li>
<li><a href="#trunkSourceWebCorecssjitSelectorCompilercpp">trunk/Source/WebCore/cssjit/SelectorCompiler.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssnthchildofclassnameexpectedhtml">trunk/LayoutTests/fast/css/nth-child-of-classname-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthchildofclassnamehtml">trunk/LayoutTests/fast/css/nth-child-of-classname.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthchildofcomplexselectorexpectedhtml">trunk/LayoutTests/fast/css/nth-child-of-complex-selector-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthchildofcomplexselectorhtml">trunk/LayoutTests/fast/css/nth-child-of-complex-selector.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthchildofcompoundselectorexpectedhtml">trunk/LayoutTests/fast/css/nth-child-of-compound-selector-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthchildofcompoundselectorhtml">trunk/LayoutTests/fast/css/nth-child-of-compound-selector.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthchildoftagnameexpectedhtml">trunk/LayoutTests/fast/css/nth-child-of-tagname-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthchildoftagnamehtml">trunk/LayoutTests/fast/css/nth-child-of-tagname.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsnthchildofbasicsexpectedtxt">trunk/LayoutTests/fast/selectors/nth-child-of-basics-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsnthchildofbasicshtml">trunk/LayoutTests/fast/selectors/nth-child-of-basics.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsnthchildofclassstyleupdateexpectedtxt">trunk/LayoutTests/fast/selectors/nth-child-of-class-style-update-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsnthchildofclassstyleupdatehtml">trunk/LayoutTests/fast/selectors/nth-child-of-class-style-update.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsnthchildofcomplexselectorsexpectedtxt">trunk/LayoutTests/fast/selectors/nth-child-of-complex-selectors-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsnthchildofcomplexselectorshtml">trunk/LayoutTests/fast/selectors/nth-child-of-complex-selectors.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsnthchildofselectorlistexpectedtxt">trunk/LayoutTests/fast/selectors/nth-child-of-selector-list-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsnthchildofselectorlisthtml">trunk/LayoutTests/fast/selectors/nth-child-of-selector-list.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (173852 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-09-22 22:08:02 UTC (rev 173852)
+++ trunk/LayoutTests/ChangeLog 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -1,3 +1,32 @@
</span><ins>+2014-09-22 Benjamin Poulain <bpoulain@apple.com>
+
+ Add the baseline implementation of :nth-child(An+B of selector-list)
+ https://bugs.webkit.org/show_bug.cgi?id=136975
+
+ Reviewed by Darin Adler.
+
+ * fast/css/nth-child-of-classname-expected.html: Added.
+ * fast/css/nth-child-of-classname.html: Added.
+ * fast/css/nth-child-of-complex-selector-expected.html: Added.
+ * fast/css/nth-child-of-complex-selector.html: Added.
+ * fast/css/nth-child-of-compound-selector-expected.html: Added.
+ * fast/css/nth-child-of-compound-selector.html: Added.
+ * fast/css/nth-child-of-tagname-expected.html: Added.
+ * fast/css/nth-child-of-tagname.html: Added.
+ Cover basic styling and style sharing.
+
+ * fast/selectors/nth-child-of-basics-expected.txt: Added.
+ * fast/selectors/nth-child-of-basics.html: Added.
+ * fast/selectors/nth-child-of-complex-selectors-expected.txt: Added.
+ * fast/selectors/nth-child-of-complex-selectors.html: Added.
+ * fast/selectors/nth-child-of-selector-list-expected.txt: Added.
+ * fast/selectors/nth-child-of-selector-list.html: Added.
+ Cover querySelector and styling of various cases.
+
+ * fast/selectors/nth-child-of-class-style-update-expected.txt: Added.
+ * fast/selectors/nth-child-of-class-style-update.html: Added.
+ Basic case of style invalidation.
+
</ins><span class="cx"> 2014-09-22 David Hyatt <hyatt@apple.com>
</span><span class="cx">
</span><span class="cx"> Bad cast in isValidColumnSpanner.
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssnthchildofclassnameexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-child-of-classname-expected.html (0 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-child-of-classname-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/nth-child-of-classname-expected.html 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -0,0 +1,16 @@
</span><ins>+<!doctype html>
+<html>
+<body>
+ <p>This test the styling of paragraphs with :nth-child(An+B of selector). If the test succeed, paragraphs that say "green" should have a green background.</p>
+ <p class="webkit">White</p>
+ <p style="background-color: lime">Green!</p>
+ <p style="background-color: lime">Green!</p>
+ <p style="background-color: lime">Green!</p>
+ <p>White</p>
+ <p>White</p>
+ <p>White</p>
+ <p style="background-color: lime">Green!</p>
+ <p style="background-color: lime">Green!</p>
+ <p>White</p>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssnthchildofclassnamehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-child-of-classname.html (0 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-child-of-classname.html (rev 0)
+++ trunk/LayoutTests/fast/css/nth-child-of-classname.html 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -0,0 +1,23 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<style>
+p:nth-child(even of .webkit, .fast) {
+ background-color: lime;
+}
+</style>
+</head>
+<body>
+ <p>This test the styling of paragraphs with :nth-child(An+B of selector). If the test succeed, paragraphs that say "green" should have a green background.</p>
+ <p class="webkit">White</p>
+ <p>Green!</p>
+ <p>Green!</p>
+ <p class="fast">Green!</p>
+ <p>White</p>
+ <p>White</p>
+ <p class="webkit">White</p>
+ <p>Green!</p>
+ <p class="webkit">Green!</p>
+ <p>White</p>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssnthchildofcomplexselectorexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-child-of-complex-selector-expected.html (0 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-child-of-complex-selector-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/nth-child-of-complex-selector-expected.html 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -0,0 +1,14 @@
</span><ins>+<!doctype html>
+<html>
+<body>
+ <p>This test the styling of paragraphs with :nth-child(An+B of selector). If the test succeed, paragraphs that say "green" should have a green background.</p>
+ <p>White</p>
+ <p>White</p>
+ <p>White</p>
+ <p style="background-color: lime">Green</p>
+ <p>White</p>
+ <p>White</p>
+ <p>White</p>
+ <p style="background-color: lime">Green</p>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssnthchildofcomplexselectorhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-child-of-complex-selector.html (0 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-child-of-complex-selector.html (rev 0)
+++ trunk/LayoutTests/fast/css/nth-child-of-complex-selector.html 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -0,0 +1,22 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<style>
+/* At least 4 pair of <p> above, can be overlapping. The other selectors of the list are useless. */
+p:nth-child(4n of html:root>body>p+p:not(empty), :not(*), p:not(p), span, .notthere) {
+ background-color: lime;
+}
+</style>
+</head>
+<body>
+ <p>This test the styling of paragraphs with :nth-child(An+B of selector). If the test succeed, paragraphs that say "green" should have a green background.</p>
+ <p>White</p>
+ <p>White</p>
+ <p>White</p>
+ <p>Green</p>
+ <p>White</p>
+ <p>White</p>
+ <p>White</p>
+ <p>Green</p>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssnthchildofcompoundselectorexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-child-of-compound-selector-expected.html (0 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-child-of-compound-selector-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/nth-child-of-compound-selector-expected.html 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -0,0 +1,18 @@
</span><ins>+<!doctype html>
+<html>
+<body>
+ <p></p>
+ <p>This test the styling of paragraphs with :nth-child(An+B of selector). If the test succeed, paragraphs that say "green" should have a green background.</p>
+ <p>White!</p>
+ <p>White!</p>
+ <p>White!</p>
+ <p>White!</p>
+ <p style="background-color: lime">Green</p>
+ <p style="background-color: lime">Green</p>
+ <p>White!</p>
+ <p>White!</p>
+ <p>White!</p>
+ <p>White!</p>
+ <p style="background-color: lime">Green</p>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssnthchildofcompoundselectorhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-child-of-compound-selector.html (0 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-child-of-compound-selector.html (rev 0)
+++ trunk/LayoutTests/fast/css/nth-child-of-compound-selector.html 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -0,0 +1,26 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<style>
+/* 3n of paragraph with the class foobar but for which foobar is not the only class. */
+p:nth-child(3n+1 of p.foobar:not([class=foobar])) {
+ background-color: lime;
+}
+</style>
+</head>
+<body>
+ <p class="foobar foo"></p>
+ <p>This test the styling of paragraphs with :nth-child(An+B of selector). If the test succeed, paragraphs that say "green" should have a green background.</p>
+ <p class="foobar">White!</p>
+ <p class="foobar foo">White!</p>
+ <p>White!</p>
+ <p class="foo foobar">White!</p>
+ <p>Green</p>
+ <p class="foobar foo">Green</p>
+ <p class="foobar">White!</p>
+ <p class="foo foobar">White!</p>
+ <p class="foobar">White!</p>
+ <p class="foo foobar baz">White!</p>
+ <p>Green</p>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssnthchildoftagnameexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-child-of-tagname-expected.html (0 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-child-of-tagname-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/nth-child-of-tagname-expected.html 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -0,0 +1,16 @@
</span><ins>+<!doctype html>
+<html>
+<body>
+ <webkit></webkit>
+ <p>This test the styling of paragraphs with :nth-child(An+B of selector). If the test succeed, paragraphs that say "green" should have a green background.</p>
+ <p>White!</p>
+ <p>White!</p>
+ <fast>White!</fast>
+ <p style="background-color: lime">Green</p>
+ <p style="background-color: lime">Green</p>
+ <webkit>White!</webkit>
+ <p>White!</p>
+ <webkit>White!</webkit>
+ <p style="background-color: lime">Green</p>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssnthchildoftagnamehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-child-of-tagname.html (0 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-child-of-tagname.html (rev 0)
+++ trunk/LayoutTests/fast/css/nth-child-of-tagname.html 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -0,0 +1,23 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<style>
+p:nth-child(odd of webkit, fast) {
+ background-color: lime;
+}
+</style>
+</head>
+<body>
+ <webkit></webkit>
+ <p>This test the styling of paragraphs with :nth-child(An+B of selector). If the test succeed, paragraphs that say "green" should have a green background.</p>
+ <p>White!</p>
+ <p>White!</p>
+ <fast>White!</fast>
+ <p>Green</p>
+ <p>Green</p>
+ <webkit>White!</webkit>
+ <p>White!</p>
+ <webkit>White!</webkit>
+ <p>Green</p>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsnthchildofbasicsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/nth-child-of-basics-expected.txt (0 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/nth-child-of-basics-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/nth-child-of-basics-expected.txt 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -0,0 +1,556 @@
</span><ins>+Check the basic features of the ":nth-child(An+B of selectorList)" pseudo class.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Testing ":nth-child(2n of *)"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *)').length is 15
+PASS document.querySelectorAll('#test-root :nth-child(2n of *)')[0].id is "testcase2"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *)')[1].id is "testcase4"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *)')[2].id is "testcase6"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *)')[3].id is "testcase8"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *)')[4].id is "testcase10"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *)')[5].id is "testcase12"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *)')[6].id is "testcase14"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *)')[7].id is "testcase16"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *)')[8].id is "testcase18"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *)')[9].id is "testcase20"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *)')[10].id is "testcase22"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *)')[11].id is "testcase24"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *)')[12].id is "testcase26"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *)')[13].id is "testcase28"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *)')[14].id is "testcase30"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(10, 100, 200)"
+
+Testing ":nth-child(2n + 1 of testcaseA)"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 1 of testcaseA)').length is 15
+PASS document.querySelectorAll('#test-root :nth-child(2n + 1 of testcaseA)')[0].id is "testcase1"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 1 of testcaseA)')[1].id is "testcase4"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 1 of testcaseA)')[2].id is "testcase5"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 1 of testcaseA)')[3].id is "testcase8"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 1 of testcaseA)')[4].id is "testcase9"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 1 of testcaseA)')[5].id is "testcase12"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 1 of testcaseA)')[6].id is "testcase13"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 1 of testcaseA)')[7].id is "testcase16"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 1 of testcaseA)')[8].id is "testcase17"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 1 of testcaseA)')[9].id is "testcase20"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 1 of testcaseA)')[10].id is "testcase21"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 1 of testcaseA)')[11].id is "testcase24"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 1 of testcaseA)')[12].id is "testcase25"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 1 of testcaseA)')[13].id is "testcase28"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 1 of testcaseA)')[14].id is "testcase29"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(255, 0, 0)"
+
+Testing ":nth-child(3n - 2 of [attribute1=value1])"
+PASS document.querySelectorAll('#test-root :nth-child(3n - 2 of [attribute1=value1])').length is 12
+PASS document.querySelectorAll('#test-root :nth-child(3n - 2 of [attribute1=value1])')[0].id is "testcase1"
+PASS document.querySelectorAll('#test-root :nth-child(3n - 2 of [attribute1=value1])')[1].id is "testcase5"
+PASS document.querySelectorAll('#test-root :nth-child(3n - 2 of [attribute1=value1])')[2].id is "testcase6"
+PASS document.querySelectorAll('#test-root :nth-child(3n - 2 of [attribute1=value1])')[3].id is "testcase9"
+PASS document.querySelectorAll('#test-root :nth-child(3n - 2 of [attribute1=value1])')[4].id is "testcase10"
+PASS document.querySelectorAll('#test-root :nth-child(3n - 2 of [attribute1=value1])')[5].id is "testcase13"
+PASS document.querySelectorAll('#test-root :nth-child(3n - 2 of [attribute1=value1])')[6].id is "testcase17"
+PASS document.querySelectorAll('#test-root :nth-child(3n - 2 of [attribute1=value1])')[7].id is "testcase20"
+PASS document.querySelectorAll('#test-root :nth-child(3n - 2 of [attribute1=value1])')[8].id is "testcase21"
+PASS document.querySelectorAll('#test-root :nth-child(3n - 2 of [attribute1=value1])')[9].id is "testcase24"
+PASS document.querySelectorAll('#test-root :nth-child(3n - 2 of [attribute1=value1])')[10].id is "testcase27"
+PASS document.querySelectorAll('#test-root :nth-child(3n - 2 of [attribute1=value1])')[11].id is "testcase28"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(255, 0, 0)"
+
+Testing ":nth-child(4n - 1 of .bar)"
+PASS document.querySelectorAll('#test-root :nth-child(4n - 1 of .bar)').length is 6
+PASS document.querySelectorAll('#test-root :nth-child(4n - 1 of .bar)')[0].id is "testcase3"
+PASS document.querySelectorAll('#test-root :nth-child(4n - 1 of .bar)')[1].id is "testcase4"
+PASS document.querySelectorAll('#test-root :nth-child(4n - 1 of .bar)')[2].id is "testcase10"
+PASS document.querySelectorAll('#test-root :nth-child(4n - 1 of .bar)')[3].id is "testcase15"
+PASS document.querySelectorAll('#test-root :nth-child(4n - 1 of .bar)')[4].id is "testcase20"
+PASS document.querySelectorAll('#test-root :nth-child(4n - 1 of .bar)')[5].id is "testcase25"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(255, 0, 0)"
+
+Testing ":nth-child(2n + 2 of :empty)"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 2 of :empty)').length is 13
+PASS document.querySelectorAll('#test-root :nth-child(2n + 2 of :empty)')[0].id is "testcase3"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 2 of :empty)')[1].id is "testcase4"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 2 of :empty)')[2].id is "testcase5"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 2 of :empty)')[3].id is "testcase6"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 2 of :empty)')[4].id is "testcase7"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 2 of :empty)')[5].id is "testcase8"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 2 of :empty)')[6].id is "testcase9"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 2 of :empty)')[7].id is "testcase22"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 2 of :empty)')[8].id is "testcase23"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 2 of :empty)')[9].id is "testcase24"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 2 of :empty)')[10].id is "testcase25"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 2 of :empty)')[11].id is "testcase26"
+PASS document.querySelectorAll('#test-root :nth-child(2n + 2 of :empty)')[12].id is "testcase27"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(255, 0, 0)"
+
+Testing "testcaseA:nth-child(even of testcaseA)"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA)').length is 7
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA)')[0].id is "testcase3"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA)')[1].id is "testcase7"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA)')[2].id is "testcase11"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA)')[3].id is "testcase15"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA)')[4].id is "testcase19"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA)')[5].id is "testcase23"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA)')[6].id is "testcase27"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(255, 0, 0)"
+
+Testing "testcaseA:nth-child(even of testcaseA.bazoo)"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA.bazoo)').length is 8
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA.bazoo)')[0].id is "testcase3"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA.bazoo)')[1].id is "testcase7"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA.bazoo)')[2].id is "testcase11"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA.bazoo)')[3].id is "testcase13"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA.bazoo)')[4].id is "testcase17"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA.bazoo)')[5].id is "testcase21"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA.bazoo)')[6].id is "testcase23"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of testcaseA.bazoo)')[7].id is "testcase29"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(255, 0, 0)"
+
+Testing "[attribute2]:nth-child(odd of [attribute2])"
+PASS document.querySelectorAll('#test-root [attribute2]:nth-child(odd of [attribute2])').length is 3
+PASS document.querySelectorAll('#test-root [attribute2]:nth-child(odd of [attribute2])')[0].id is "testcase2"
+PASS document.querySelectorAll('#test-root [attribute2]:nth-child(odd of [attribute2])')[1].id is "testcase9"
+PASS document.querySelectorAll('#test-root [attribute2]:nth-child(odd of [attribute2])')[2].id is "testcase20"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(255, 0, 0)"
+
+Testing ".foo:nth-child(even of .foo)"
+PASS document.querySelectorAll('#test-root .foo:nth-child(even of .foo)').length is 11
+PASS document.querySelectorAll('#test-root .foo:nth-child(even of .foo)')[0].id is "testcase4"
+PASS document.querySelectorAll('#test-root .foo:nth-child(even of .foo)')[1].id is "testcase6"
+PASS document.querySelectorAll('#test-root .foo:nth-child(even of .foo)')[2].id is "testcase9"
+PASS document.querySelectorAll('#test-root .foo:nth-child(even of .foo)')[3].id is "testcase11"
+PASS document.querySelectorAll('#test-root .foo:nth-child(even of .foo)')[4].id is "testcase14"
+PASS document.querySelectorAll('#test-root .foo:nth-child(even of .foo)')[5].id is "testcase16"
+PASS document.querySelectorAll('#test-root .foo:nth-child(even of .foo)')[6].id is "testcase19"
+PASS document.querySelectorAll('#test-root .foo:nth-child(even of .foo)')[7].id is "testcase23"
+PASS document.querySelectorAll('#test-root .foo:nth-child(even of .foo)')[8].id is "testcase25"
+PASS document.querySelectorAll('#test-root .foo:nth-child(even of .foo)')[9].id is "testcase28"
+PASS document.querySelectorAll('#test-root .foo:nth-child(even of .foo)')[10].id is "testcase30"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(10, 100, 200)"
+
+Testing "testcaseA:nth-child(even of .bar.foo)"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of .bar.foo)').length is 4
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of .bar.foo)')[0].id is "testcase5"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of .bar.foo)')[1].id is "testcase13"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of .bar.foo)')[2].id is "testcase21"
+PASS document.querySelectorAll('#test-root testcaseA:nth-child(even of .bar.foo)')[3].id is "testcase25"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(255, 0, 0)"
+
+Testing "*:nth-child(3n+1 of [id][attribute2^="value"].bazoo)"
+PASS document.querySelectorAll('#test-root *:nth-child(3n+1 of [id][attribute2^="value"].bazoo)').length is 13
+PASS document.querySelectorAll('#test-root *:nth-child(3n+1 of [id][attribute2^="value"].bazoo)')[0].id is "testcase1"
+PASS document.querySelectorAll('#test-root *:nth-child(3n+1 of [id][attribute2^="value"].bazoo)')[1].id is "testcase2"
+PASS document.querySelectorAll('#test-root *:nth-child(3n+1 of [id][attribute2^="value"].bazoo)')[2].id is "testcase10"
+PASS document.querySelectorAll('#test-root *:nth-child(3n+1 of [id][attribute2^="value"].bazoo)')[3].id is "testcase11"
+PASS document.querySelectorAll('#test-root *:nth-child(3n+1 of [id][attribute2^="value"].bazoo)')[4].id is "testcase12"
+PASS document.querySelectorAll('#test-root *:nth-child(3n+1 of [id][attribute2^="value"].bazoo)')[5].id is "testcase13"
+PASS document.querySelectorAll('#test-root *:nth-child(3n+1 of [id][attribute2^="value"].bazoo)')[6].id is "testcase14"
+PASS document.querySelectorAll('#test-root *:nth-child(3n+1 of [id][attribute2^="value"].bazoo)')[7].id is "testcase15"
+PASS document.querySelectorAll('#test-root *:nth-child(3n+1 of [id][attribute2^="value"].bazoo)')[8].id is "testcase16"
+PASS document.querySelectorAll('#test-root *:nth-child(3n+1 of [id][attribute2^="value"].bazoo)')[9].id is "testcase17"
+PASS document.querySelectorAll('#test-root *:nth-child(3n+1 of [id][attribute2^="value"].bazoo)')[10].id is "testcase18"
+PASS document.querySelectorAll('#test-root *:nth-child(3n+1 of [id][attribute2^="value"].bazoo)')[11].id is "testcase19"
+PASS document.querySelectorAll('#test-root *:nth-child(3n+1 of [id][attribute2^="value"].bazoo)')[12].id is "testcase20"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(255, 0, 0)"
+
+Testing ":-webkit-any(testcaseA, dontExist):nth-child(n+3 of .foo:empty)"
+PASS document.querySelectorAll('#test-root :-webkit-any(testcaseA, dontExist):nth-child(n+3 of .foo:empty)').length is 4
+PASS document.querySelectorAll('#test-root :-webkit-any(testcaseA, dontExist):nth-child(n+3 of .foo:empty)')[0].id is "testcase23"
+PASS document.querySelectorAll('#test-root :-webkit-any(testcaseA, dontExist):nth-child(n+3 of .foo:empty)')[1].id is "testcase25"
+PASS document.querySelectorAll('#test-root :-webkit-any(testcaseA, dontExist):nth-child(n+3 of .foo:empty)')[2].id is "testcase27"
+PASS document.querySelectorAll('#test-root :-webkit-any(testcaseA, dontExist):nth-child(n+3 of .foo:empty)')[3].id is "testcase29"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(255, 0, 0)"
+
+Testing "*:nth-child(even of :nth-child(odd of [attribute2]))"
+PASS document.querySelectorAll('#test-root *:nth-child(even of :nth-child(odd of [attribute2]))').length is 7
+PASS document.querySelectorAll('#test-root *:nth-child(even of :nth-child(odd of [attribute2]))')[0].id is "testcase2"
+PASS document.querySelectorAll('#test-root *:nth-child(even of :nth-child(odd of [attribute2]))')[1].id is "testcase7"
+PASS document.querySelectorAll('#test-root *:nth-child(even of :nth-child(odd of [attribute2]))')[2].id is "testcase9"
+PASS document.querySelectorAll('#test-root *:nth-child(even of :nth-child(odd of [attribute2]))')[3].id is "testcase16"
+PASS document.querySelectorAll('#test-root *:nth-child(even of :nth-child(odd of [attribute2]))')[4].id is "testcase18"
+PASS document.querySelectorAll('#test-root *:nth-child(even of :nth-child(odd of [attribute2]))')[5].id is "testcase20"
+PASS document.querySelectorAll('#test-root *:nth-child(even of :nth-child(odd of [attribute2]))')[6].id is "testcase29"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(255, 0, 0)"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsnthchildofbasicshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/nth-child-of-basics.html (0 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/nth-child-of-basics.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/nth-child-of-basics.html 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -0,0 +1,116 @@
</span><ins>+<!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" attribute1="value1" class="bar baz bazoo" attribute3="value3">Not empty</testcaseA>
+ <testcaseB id="testcase2" class="bar baz bazoo" attribute2="value2" attribute3="value3"></testcaseB>
+ <testcaseA id="testcase3" attribute1="value1" class="foo baz bazoo">Not empty</testcaseA>
+ <testcaseB id="testcase4" attribute1="value1" class="foo bar bazoo">Not empty</testcaseB>
+ <testcaseA id="testcase5" class="foo baz bazoo" attribute2="value2" attribute3="value3">Not empty</testcaseA>
+ <testcaseB id="testcase6" attribute1="value1" class="foo bar baz" attribute3="value3">Not empty</testcaseB>
+ <testcaseA id="testcase7" attribute1="value1" class="bar baz bazoo">Not empty</testcaseA>
+ <testcaseB id="testcase8" attribute1="value1" class="foo baz bazoo">Not empty</testcaseB>
+ <testcaseA id="testcase9" class="foo bar bazoo" attribute2="value2" attribute3="value3"></testcaseA>
+ <testcaseB id="testcase10" attribute1="value1" class="foo bar bazoo" attribute3="value3">Not empty</testcaseB>
+ <testcaseA id="testcase11" attribute1="value1" class="foo bar baz">Not empty</testcaseA>
+ <testcaseB id="testcase12" attribute1="value1" class="bar baz bazoo">Not empty</testcaseB>
+ <testcaseA id="testcase13" attribute1="value1" class="foo baz bazoo" attribute3="value3">Not empty</testcaseA>
+ <testcaseB id="testcase14" class="foo bar baz" attribute2="value2">Not empty</testcaseB>
+ <testcaseA id="testcase15" attribute1="value1" class="foo bar bazoo">Not empty</testcaseA>
+ <testcaseB id="testcase16" attribute1="value1" class="foo bar baz" attribute3="value3">Not empty</testcaseB>
+ <testcaseA id="testcase17" attribute1="value1" class="bar baz bazoo" attribute3="value3">Not empty</testcaseA>
+ <testcaseB id="testcase18" attribute1="value1" class="foo baz bazoo">Not empty</testcaseB>
+ <testcaseA id="testcase19" attribute1="value1" class="foo bar bazoo">Not empty</testcaseA>
+ <testcaseB id="testcase20" class="bar baz bazoo" attribute2="value2" attribute3="value3">Not empty</testcaseB>
+ <testcaseA id="testcase21" attribute1="value1" class="foo bar baz" attribute3="value3"></testcaseA>
+ <testcaseB id="testcase22" attribute1="value1" class="bar baz bazoo">Not empty</testcaseB>
+ <testcaseA id="testcase23" attribute1="value1" class="foo baz bazoo">Not empty</testcaseA>
+ <testcaseB id="testcase24" attribute1="value1" class="foo bar bazoo" attribute3="value3">Not empty</testcaseB>
+ <testcaseA id="testcase25" attribute1="value1" class="foo bar baz" attribute3="value3">Not empty</testcaseA>
+ <testcaseB id="testcase26" attribute1="value1" class="bar baz bazoo">Not empty</testcaseB>
+ <testcaseA id="testcase27" class="foo baz bazoo" attribute2="value2"></testcaseA>
+ <testcaseB id="testcase28" attribute1="value1" class="foo baz bazoo" attribute3="value3">Not empty</testcaseB>
+ <testcaseA id="testcase29" attribute1="value1" class="foo bar bazoo">Not empty</testcaseA>
+ <testcaseB id="testcase30" attribute1="value1" class="foo bar baz">Not empty</testcaseB>
+ </div>
+</body>
+<script>
+description('Check the basic features of the ":nth-child(An+B of selectorList)" pseudo class.');
+
+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("");
+}
+
+// Should be the same as :nth-child(even).
+testSelector(":nth-child(2n of *)", ["testcase2", "testcase4", "testcase6", "testcase8", "testcase10", "testcase12", "testcase14", "testcase16", "testcase18", "testcase20", "testcase22", "testcase24", "testcase26", "testcase28", "testcase30"]);
+
+/* -- Some generic tests for primitive selectors. -- */
+
+// Even of a tag name.
+testSelector(":nth-child(2n + 1 of testcaseA)", ["testcase1", "testcase4", "testcase5", "testcase8", "testcase9", "testcase12", "testcase13", "testcase16", "testcase17", "testcase20", "testcase21", "testcase24", "testcase25", "testcase28", "testcase29"]);
+
+// Attribute.
+testSelector(":nth-child(3n - 2 of [attribute1=value1])", ["testcase1", "testcase5", "testcase6", "testcase9", "testcase10", "testcase13", "testcase17", "testcase20", "testcase21", "testcase24", "testcase27", "testcase28"]);
+
+// Class.
+testSelector(":nth-child(4n - 1 of .bar)", ["testcase3", "testcase4", "testcase10", "testcase15", "testcase20", "testcase25"]);
+
+// Value.
+testSelector(":nth-child(2n + 2 of :empty)", ["testcase3", "testcase4", "testcase5", "testcase6", "testcase7", "testcase8", "testcase9", "testcase22", "testcase23", "testcase24", "testcase25", "testcase26", "testcase27"]);
+
+
+/* -- In practice, we expect a lot of filtering will be done on the same type. -- */
+
+// Even of testcaseA.
+testSelector("testcaseA:nth-child(even of testcaseA)", ["testcase3", "testcase7", "testcase11", "testcase15", "testcase19", "testcase23", "testcase27"]);
+
+// All the testcaseA with an odd number of testcaseA.bazoo before it.
+testSelector("testcaseA:nth-child(even of testcaseA.bazoo)", ["testcase3", "testcase7", "testcase11", "testcase13", "testcase17", "testcase21", "testcase23", "testcase29"]);
+
+// Odd of [attribute2].
+testSelector("[attribute2]:nth-child(odd of [attribute2])", ["testcase2", "testcase9", "testcase20"]);
+
+// Even of .foo.
+testSelector(".foo:nth-child(even of .foo)", ["testcase4", "testcase6", "testcase9", "testcase11", "testcase14", "testcase16", "testcase19", "testcase23", "testcase25", "testcase28", "testcase30"]);
+
+
+/* -- Compound selectors -- */
+testSelector("testcaseA:nth-child(even of .bar.foo)", ["testcase5", "testcase13", "testcase21", "testcase25"]);
+testSelector('*:nth-child(3n+1 of [id][attribute2^="value"].bazoo)', ["testcase1", "testcase2", "testcase10", "testcase11", "testcase12", "testcase13", "testcase14", "testcase15", "testcase16", "testcase17", "testcase18", "testcase19", "testcase20"]);
+testSelector(':-webkit-any(testcaseA, dontExist):nth-child(n+3 of .foo:empty)', ["testcase23", "testcase25", "testcase27", "testcase29"]);
+testSelector('*:nth-child(even of :nth-child(odd of [attribute2]))', ["testcase2", "testcase7", "testcase9", "testcase16", "testcase18", "testcase20", "testcase29"]);
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsnthchildofclassstyleupdateexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/nth-child-of-class-style-update-expected.txt (0 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/nth-child-of-class-style-update-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/nth-child-of-class-style-update-expected.txt 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -0,0 +1,259 @@
</span><ins>+Test style update of :nth-child() when the tree structure is modified.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Initialy, <foo> is the first of its type, the style should match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+Removing the .webkit class from the first element, nothing should match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(255, 255, 255)"
+Adding it back, we should be back to the original state.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+Removing the .webkit class from the third element, nothing should match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(255, 255, 255)"
+Adding it back, we should be back to the original state.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+Removing the .webkit class from the second element, nothing should match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(255, 255, 255)"
+Adding an element <target> on top, we should have a match again, skipping 2.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+Adding the .webkit calss back on 2, we should now match 2 elements.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+Removing the element we added should put us back in the initial state.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+Adding an element <target> on top, we should now match 4 and 5.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+Adding an element <nottarget> on top, we should now match 3, 4 and 5.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+Adding an element <nottarget> on top, we should now match 2, 3, 4 and 5.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+Adding an element <target> on top, we should now match 1, 2, 3, 4 and 5.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[12]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[13]).backgroundColor is "rgb(1, 2, 3)"
+Adding an element <nottarget> on top, we should now match 0, 1, 2, 3, 4 and 5.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[12]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[13]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <nottarget>, 0 should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[12]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[13]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <target>, 1 should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[12]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[13]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <notarget>, 2 should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[12]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[13]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <target>, 3 should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <target>, 4 should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <target>, there are only 4 siblings left, nothing can match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsnthchildofclassstyleupdatehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/nth-child-of-class-style-update.html (0 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/nth-child-of-class-style-update.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/nth-child-of-class-style-update.html 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -0,0 +1,157 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+target {
+ background-color: white;
+}
+target:nth-child(n+5 of .webkit) {
+ background-color: rgb(1, 2, 3);
+}
+</style>
+</head>
+<body>
+ <div id="with-renderer">
+ <target class="element_1 webkit"></target>
+ <target class="element_2 webkit"></target>
+ <target class="element_3 webkit"></target>
+ <target class="element_4 webkit"></target>
+ <target class="element_5 webkit"></target>
+ </div>
+ <div id="without-renderer" style="display:none;">
+ <target class="element_1 webkit"></target>
+ <target class="element_2 webkit"></target>
+ <target class="element_3 webkit"></target>
+ <target class="element_4 webkit"></target>
+ <target class="element_5 webkit"></target>
+ </div>
+</body>
+<script>
+description('Test style update of :nth-child() when the tree structure is modified.');
+
+function testColor(classesThatShouldMatch) {
+ var allTargets = document.querySelectorAll("target");
+ for (var i = 0; i < allTargets.length; ++i) {
+ var expectMath = classesThatShouldMatch.indexOf(allTargets[i].classList[0]) != -1;
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[' + i + ']).backgroundColor', expectMath ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+ }
+}
+
+function addElementAsFirstChild(tagName, className)
+{
+ var newElement = document.createElement(tagName);
+ newElement.className = className + ' webkit';
+
+ var withRenderer = document.getElementById("with-renderer");
+ withRenderer.insertBefore(newElement, withRenderer.firstChild);
+
+ var withoutRenderer = document.getElementById("without-renderer");
+ withoutRenderer.insertBefore(newElement.cloneNode(), withoutRenderer.firstChild);
+}
+
+function removeWebKitClassFromElementsOfClass(className)
+{
+ var allElementsToUpdate = document.querySelectorAll('.' + className);
+ for (var i = 0; i < allElementsToUpdate.length; ++i)
+ allElementsToUpdate[i].classList.remove("webkit");
+}
+
+function addWebKitClassToElementsOfClass(className)
+{
+ var allElementsToUpdate = document.querySelectorAll('.' + className);
+ for (var i = 0; i < allElementsToUpdate.length; ++i)
+ allElementsToUpdate[i].classList.add("webkit");
+}
+
+
+function removeElementsOfClass(className)
+{
+ var allElementsToRemove = document.querySelectorAll('.' + className);
+ for (var i = 0; i < allElementsToRemove.length; ++i)
+ allElementsToRemove[i].parentElement.removeChild(allElementsToRemove[i]);
+}
+
+debug("Initialy, &lt;foo&gt; is the first of its type, the style should match.");
+testColor(["element_5"]);
+
+debug("Removing the .webkit class from the first element, nothing should match.");
+removeWebKitClassFromElementsOfClass("element_1");
+testColor([]);
+
+debug("Adding it back, we should be back to the original state.");
+addWebKitClassToElementsOfClass("element_1");
+testColor(["element_5"]);
+
+debug("Removing the .webkit class from the third element, nothing should match.");
+removeWebKitClassFromElementsOfClass("element_3");
+testColor([]);
+
+debug("Adding it back, we should be back to the original state.");
+addWebKitClassToElementsOfClass("element_3");
+testColor(["element_5"]);
+
+debug("Removing the .webkit class from the second element, nothing should match.");
+removeWebKitClassFromElementsOfClass("element_2");
+testColor([]);
+
+debug("Adding an element &lt;target&gt; on top, we should have a match again, skipping 2.");
+addElementAsFirstChild("target", "element_0")
+testColor(["element_5"]);
+
+debug("Adding the .webkit calss back on 2, we should now match 2 elements.");
+addWebKitClassToElementsOfClass("element_2");
+testColor(["element_4", "element_5"]);
+
+debug("Removing the element we added should put us back in the initial state.");
+removeElementsOfClass("element_0");
+testColor(["element_5"]);
+
+debug("Adding an element &lt;target&gt; on top, we should now match 4 and 5.");
+addElementAsFirstChild("target", "element_0")
+testColor(["element_4", "element_5"]);
+
+// Using nottarget is interesting because the ':nth-child()' part is not matched for those elements.
+debug("Adding an element &lt;nottarget&gt; on top, we should now match 3, 4 and 5.");
+addElementAsFirstChild("nottarget", "element_-1")
+testColor(["element_3", "element_4", "element_5"]);
+
+debug("Adding an element &lt;nottarget&gt; on top, we should now match 2, 3, 4 and 5.");
+addElementAsFirstChild("nottarget", "element_-2")
+testColor(["element_2", "element_3", "element_4", "element_5"]);
+
+debug("Adding an element &lt;target&gt; on top, we should now match 1, 2, 3, 4 and 5.");
+addElementAsFirstChild("target", "element_-3")
+testColor(["element_1", "element_2", "element_3", "element_4", "element_5"]);
+
+debug("Adding an element &lt;nottarget&gt; on top, we should now match 0, 1, 2, 3, 4 and 5.");
+addElementAsFirstChild("nottarget", "element_-4")
+testColor(["element_0", "element_1", "element_2", "element_3", "element_4", "element_5"]);
+
+debug("Removing one of the &lt;nottarget&gt;, 0 should no longer match.");
+removeElementsOfClass("element_-2");
+testColor(["element_1", "element_2", "element_3", "element_4", "element_5"]);
+
+debug("Removing one of the &lt;target&gt;, 1 should no longer match.");
+removeElementsOfClass("element_-4");
+testColor(["element_2", "element_3", "element_4", "element_5"]);
+
+debug("Removing one of the &lt;notarget&gt;, 2 should no longer match.");
+removeElementsOfClass("element_-1");
+testColor(["element_3", "element_4", "element_5"]);
+
+debug("Removing one of the &lt;target&gt;, 3 should no longer match.");
+removeElementsOfClass("element_-3");
+testColor(["element_4", "element_5"]);
+
+debug("Removing one of the &lt;target&gt;, 4 should no longer match.");
+removeElementsOfClass("element_0");
+testColor(["element_5"]);
+
+debug("Removing one of the &lt;target&gt;, there are only 4 siblings left, nothing can match.");
+removeElementsOfClass("element_1");
+testColor([]);
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsnthchildofcomplexselectorsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/nth-child-of-complex-selectors-expected.txt (0 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/nth-child-of-complex-selectors-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/nth-child-of-complex-selectors-expected.txt 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -0,0 +1,217 @@
</span><ins>+Check ":nth-child(An+B of selectorList)" with complex selectors.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Testing ":nth-child(2n of :root parent1>testcaseA)"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent1>testcaseA)').length is 5
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent1>testcaseA)')[0].id is "target2"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent1>testcaseA)')[1].id is "target3"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent1>testcaseA)')[2].id is "target6"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent1>testcaseA)')[3].id is "target7"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent1>testcaseA)')[4].id is "target10"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+
+Testing ":nth-child(2n of :root parent2>.foo)"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo)').length is 5
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo)')[0].id is "target12"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo)')[1].id is "target13"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo)')[2].id is "target16"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo)')[3].id is "target17"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo)')[4].id is "target20"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(10, 100, 200)"
+
+Testing ":nth-child(2n of :root parent2>.foo, :root parent1>testcaseA)"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo, :root parent1>testcaseA)').length is 10
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo, :root parent1>testcaseA)')[0].id is "target2"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo, :root parent1>testcaseA)')[1].id is "target3"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo, :root parent1>testcaseA)')[2].id is "target6"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo, :root parent1>testcaseA)')[3].id is "target7"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo, :root parent1>testcaseA)')[4].id is "target10"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo, :root parent1>testcaseA)')[5].id is "target12"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo, :root parent1>testcaseA)')[6].id is "target13"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo, :root parent1>testcaseA)')[7].id is "target16"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo, :root parent1>testcaseA)')[8].id is "target17"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :root parent2>.foo, :root parent1>testcaseA)')[9].id is "target20"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(10, 100, 200)"
+
+Testing "> * > *:nth-child(2n + 1 of html div testcaseA~testcaseA + *)"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n + 1 of html div testcaseA~testcaseA + *)').length is 12
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n + 1 of html div testcaseA~testcaseA + *)')[0].id is "target1"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n + 1 of html div testcaseA~testcaseA + *)')[1].id is "target2"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n + 1 of html div testcaseA~testcaseA + *)')[2].id is "target3"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n + 1 of html div testcaseA~testcaseA + *)')[3].id is "target4"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n + 1 of html div testcaseA~testcaseA + *)')[4].id is "target7"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n + 1 of html div testcaseA~testcaseA + *)')[5].id is "target8"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n + 1 of html div testcaseA~testcaseA + *)')[6].id is "target11"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n + 1 of html div testcaseA~testcaseA + *)')[7].id is "target12"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n + 1 of html div testcaseA~testcaseA + *)')[8].id is "target13"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n + 1 of html div testcaseA~testcaseA + *)')[9].id is "target15"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n + 1 of html div testcaseA~testcaseA + *)')[10].id is "target17"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n + 1 of html div testcaseA~testcaseA + *)')[11].id is "target19"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+
+Testing "> * > *:nth-child(2n+1 of html .foo)"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html .foo)').length is 15
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html .foo)')[0].id is "target1"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html .foo)')[1].id is "target2"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html .foo)')[2].id is "target3"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html .foo)')[3].id is "target4"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html .foo)')[4].id is "target5"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html .foo)')[5].id is "target6"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html .foo)')[6].id is "target7"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html .foo)')[7].id is "target8"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html .foo)')[8].id is "target9"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html .foo)')[9].id is "target10"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html .foo)')[10].id is "target11"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html .foo)')[11].id is "target14"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html .foo)')[12].id is "target15"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html .foo)')[13].id is "target18"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html .foo)')[14].id is "target19"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+
+Testing "> * > *:nth-child(2n+1 of html div testcaseA~testcaseA + *, html .foo)"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html div testcaseA~testcaseA + *, html .foo)').length is 11
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html div testcaseA~testcaseA + *, html .foo)')[0].id is "target1"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html div testcaseA~testcaseA + *, html .foo)')[1].id is "target2"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html div testcaseA~testcaseA + *, html .foo)')[2].id is "target3"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html div testcaseA~testcaseA + *, html .foo)')[3].id is "target4"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html div testcaseA~testcaseA + *, html .foo)')[4].id is "target7"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html div testcaseA~testcaseA + *, html .foo)')[5].id is "target8"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html div testcaseA~testcaseA + *, html .foo)')[6].id is "target11"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html div testcaseA~testcaseA + *, html .foo)')[7].id is "target14"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html div testcaseA~testcaseA + *, html .foo)')[8].id is "target16"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html div testcaseA~testcaseA + *, html .foo)')[9].id is "target18"
+PASS document.querySelectorAll('#test-root > * > *:nth-child(2n+1 of html div testcaseA~testcaseA + *, html .foo)')[10].id is "target20"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(10, 100, 200)"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsnthchildofcomplexselectorshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/nth-child-of-complex-selectors.html (0 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/nth-child-of-complex-selectors.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/nth-child-of-complex-selectors.html 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -0,0 +1,86 @@
</span><ins>+<!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">
+ <parent1>
+ <testcaseA id="target1"></testcaseA>
+ <testcaseB id="target2"></testcaseB>
+ <testcaseA id="target3"></testcaseA>
+ <testcaseB id="target4"></testcaseB>
+ <testcaseA id="target5"></testcaseA>
+ <testcaseB id="target6"></testcaseB>
+ <testcaseA id="target7"></testcaseA>
+ <testcaseB id="target8"></testcaseB>
+ <testcaseA id="target9"></testcaseA>
+ <testcaseB id="target10"></testcaseB>
+ </parent1>
+ <parent2>
+ <testcaseA class="foo" id="target11"></testcaseA>
+ <testcaseA class="bar" id="target12"></testcaseA>
+ <testcaseA class="foo" id="target13"></testcaseA>
+ <testcaseA class="bar" id="target14"></testcaseA>
+ <testcaseA class="foo" id="target15"></testcaseA>
+ <testcaseA class="bar" id="target16"></testcaseA>
+ <testcaseA class="foo" id="target17"></testcaseA>
+ <testcaseA class="bar" id="target18"></testcaseA>
+ <testcaseA class="foo" id="target19"></testcaseA>
+ <testcaseA class="bar" id="target20"></testcaseA>
+ </parent2>
+ </div>
+</body>
+<script>
+description('Check ":nth-child(An+B of selectorList)" with complex selectors.');
+
+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("");
+}
+
+testSelector(':nth-child(2n of :root parent1>testcaseA)', ["target2", "target3", "target6", "target7", "target10"]);
+
+testSelector(':nth-child(2n of :root parent2>.foo)', ["target12", "target13", "target16", "target17", "target20"]);
+
+// Since the two above are disjoint sets, the combined selector should match the combined results.
+testSelector(':nth-child(2n of :root parent2>.foo, :root parent1>testcaseA)', ["target2", "target3", "target6", "target7", "target10", "target12", "target13", "target16", "target17", "target20"]);
+
+
+testSelector('> * > *:nth-child(2n + 1 of html div testcaseA~testcaseA + *)', ["target1", "target2", "target3", "target4", "target7", "target8", "target11", "target12", "target13", "target15", "target17", "target19"]);
+
+testSelector('> * > *:nth-child(2n+1 of html .foo)', ["target1", "target2", "target3", "target4", "target5", "target6", "target7", "target8", "target9", "target10", "target11", "target14", "target15", "target18", "target19"]);
+
+testSelector('> * > *:nth-child(2n+1 of html div testcaseA~testcaseA + *, html .foo)', ["target1", "target2", "target3", "target4", "target7", "target8", "target11", "target14", "target16", "target18", "target20"]);
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsnthchildofselectorlistexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/nth-child-of-selector-list-expected.txt (0 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/nth-child-of-selector-list-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/nth-child-of-selector-list-expected.txt 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -0,0 +1,380 @@
</span><ins>+Check ":nth-child(An+B of selectorList)" with a selector list.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Testing ":nth-child(2n of *, :not(*), *)"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *, :not(*), *)').length is 15
+PASS document.querySelectorAll('#test-root :nth-child(2n of *, :not(*), *)')[0].id is "testcase2"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *, :not(*), *)')[1].id is "testcase4"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *, :not(*), *)')[2].id is "testcase6"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *, :not(*), *)')[3].id is "testcase8"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *, :not(*), *)')[4].id is "testcase10"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *, :not(*), *)')[5].id is "testcase12"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *, :not(*), *)')[6].id is "testcase14"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *, :not(*), *)')[7].id is "testcase16"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *, :not(*), *)')[8].id is "testcase18"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *, :not(*), *)')[9].id is "testcase20"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *, :not(*), *)')[10].id is "testcase22"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *, :not(*), *)')[11].id is "testcase24"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *, :not(*), *)')[12].id is "testcase26"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *, :not(*), *)')[13].id is "testcase28"
+PASS document.querySelectorAll('#test-root :nth-child(2n of *, :not(*), *)')[14].id is "testcase30"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(10, 100, 200)"
+
+Testing ":nth-child(2n of :not(*), :empty:not(:empty), [attribute1][attribute2][attribute3], .foo.bar.baz.bazoo, :not([id]), :not([class]))"
+PASS document.querySelectorAll('#test-root :nth-child(2n of :not(*), :empty:not(:empty), [attribute1][attribute2][attribute3], .foo.bar.baz.bazoo, :not([id]), :not([class]))').length is 0
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(255, 0, 0)"
+
+Testing ":nth-child(odd of testcaseA, testcaseB)"
+PASS document.querySelectorAll('#test-root :nth-child(odd of testcaseA, testcaseB)').length is 15
+PASS document.querySelectorAll('#test-root :nth-child(odd of testcaseA, testcaseB)')[0].id is "testcase1"
+PASS document.querySelectorAll('#test-root :nth-child(odd of testcaseA, testcaseB)')[1].id is "testcase3"
+PASS document.querySelectorAll('#test-root :nth-child(odd of testcaseA, testcaseB)')[2].id is "testcase5"
+PASS document.querySelectorAll('#test-root :nth-child(odd of testcaseA, testcaseB)')[3].id is "testcase7"
+PASS document.querySelectorAll('#test-root :nth-child(odd of testcaseA, testcaseB)')[4].id is "testcase9"
+PASS document.querySelectorAll('#test-root :nth-child(odd of testcaseA, testcaseB)')[5].id is "testcase11"
+PASS document.querySelectorAll('#test-root :nth-child(odd of testcaseA, testcaseB)')[6].id is "testcase13"
+PASS document.querySelectorAll('#test-root :nth-child(odd of testcaseA, testcaseB)')[7].id is "testcase15"
+PASS document.querySelectorAll('#test-root :nth-child(odd of testcaseA, testcaseB)')[8].id is "testcase17"
+PASS document.querySelectorAll('#test-root :nth-child(odd of testcaseA, testcaseB)')[9].id is "testcase19"
+PASS document.querySelectorAll('#test-root :nth-child(odd of testcaseA, testcaseB)')[10].id is "testcase21"
+PASS document.querySelectorAll('#test-root :nth-child(odd of testcaseA, testcaseB)')[11].id is "testcase23"
+PASS document.querySelectorAll('#test-root :nth-child(odd of testcaseA, testcaseB)')[12].id is "testcase25"
+PASS document.querySelectorAll('#test-root :nth-child(odd of testcaseA, testcaseB)')[13].id is "testcase27"
+PASS document.querySelectorAll('#test-root :nth-child(odd of testcaseA, testcaseB)')[14].id is "testcase29"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(255, 0, 0)"
+
+Testing ":nth-child(even of .foo, .bar, .baz)"
+PASS document.querySelectorAll('#test-root :nth-child(even of .foo, .bar, .baz)').length is 15
+PASS document.querySelectorAll('#test-root :nth-child(even of .foo, .bar, .baz)')[0].id is "testcase2"
+PASS document.querySelectorAll('#test-root :nth-child(even of .foo, .bar, .baz)')[1].id is "testcase4"
+PASS document.querySelectorAll('#test-root :nth-child(even of .foo, .bar, .baz)')[2].id is "testcase6"
+PASS document.querySelectorAll('#test-root :nth-child(even of .foo, .bar, .baz)')[3].id is "testcase8"
+PASS document.querySelectorAll('#test-root :nth-child(even of .foo, .bar, .baz)')[4].id is "testcase10"
+PASS document.querySelectorAll('#test-root :nth-child(even of .foo, .bar, .baz)')[5].id is "testcase12"
+PASS document.querySelectorAll('#test-root :nth-child(even of .foo, .bar, .baz)')[6].id is "testcase14"
+PASS document.querySelectorAll('#test-root :nth-child(even of .foo, .bar, .baz)')[7].id is "testcase16"
+PASS document.querySelectorAll('#test-root :nth-child(even of .foo, .bar, .baz)')[8].id is "testcase18"
+PASS document.querySelectorAll('#test-root :nth-child(even of .foo, .bar, .baz)')[9].id is "testcase20"
+PASS document.querySelectorAll('#test-root :nth-child(even of .foo, .bar, .baz)')[10].id is "testcase22"
+PASS document.querySelectorAll('#test-root :nth-child(even of .foo, .bar, .baz)')[11].id is "testcase24"
+PASS document.querySelectorAll('#test-root :nth-child(even of .foo, .bar, .baz)')[12].id is "testcase26"
+PASS document.querySelectorAll('#test-root :nth-child(even of .foo, .bar, .baz)')[13].id is "testcase28"
+PASS document.querySelectorAll('#test-root :nth-child(even of .foo, .bar, .baz)')[14].id is "testcase30"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(10, 100, 200)"
+
+Testing ":nth-child(odd of [attribute1], [attribute2=value2])"
+PASS document.querySelectorAll('#test-root :nth-child(odd of [attribute1], [attribute2=value2])').length is 15
+PASS document.querySelectorAll('#test-root :nth-child(odd of [attribute1], [attribute2=value2])')[0].id is "testcase1"
+PASS document.querySelectorAll('#test-root :nth-child(odd of [attribute1], [attribute2=value2])')[1].id is "testcase3"
+PASS document.querySelectorAll('#test-root :nth-child(odd of [attribute1], [attribute2=value2])')[2].id is "testcase5"
+PASS document.querySelectorAll('#test-root :nth-child(odd of [attribute1], [attribute2=value2])')[3].id is "testcase7"
+PASS document.querySelectorAll('#test-root :nth-child(odd of [attribute1], [attribute2=value2])')[4].id is "testcase9"
+PASS document.querySelectorAll('#test-root :nth-child(odd of [attribute1], [attribute2=value2])')[5].id is "testcase11"
+PASS document.querySelectorAll('#test-root :nth-child(odd of [attribute1], [attribute2=value2])')[6].id is "testcase13"
+PASS document.querySelectorAll('#test-root :nth-child(odd of [attribute1], [attribute2=value2])')[7].id is "testcase15"
+PASS document.querySelectorAll('#test-root :nth-child(odd of [attribute1], [attribute2=value2])')[8].id is "testcase17"
+PASS document.querySelectorAll('#test-root :nth-child(odd of [attribute1], [attribute2=value2])')[9].id is "testcase19"
+PASS document.querySelectorAll('#test-root :nth-child(odd of [attribute1], [attribute2=value2])')[10].id is "testcase21"
+PASS document.querySelectorAll('#test-root :nth-child(odd of [attribute1], [attribute2=value2])')[11].id is "testcase23"
+PASS document.querySelectorAll('#test-root :nth-child(odd of [attribute1], [attribute2=value2])')[12].id is "testcase25"
+PASS document.querySelectorAll('#test-root :nth-child(odd of [attribute1], [attribute2=value2])')[13].id is "testcase27"
+PASS document.querySelectorAll('#test-root :nth-child(odd of [attribute1], [attribute2=value2])')[14].id is "testcase29"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(255, 0, 0)"
+
+Testing ":nth-child(even of [attribute3$="3"], :empty)"
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)').length is 16
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)')[0].id is "testcase2"
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)')[1].id is "testcase6"
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)')[2].id is "testcase10"
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)')[3].id is "testcase14"
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)')[4].id is "testcase15"
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)')[5].id is "testcase16"
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)')[6].id is "testcase18"
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)')[7].id is "testcase19"
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)')[8].id is "testcase20"
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)')[9].id is "testcase22"
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)')[10].id is "testcase23"
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)')[11].id is "testcase24"
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)')[12].id is "testcase26"
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)')[13].id is "testcase27"
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)')[14].id is "testcase29"
+PASS document.querySelectorAll('#test-root :nth-child(even of [attribute3$="3"], :empty)')[15].id is "testcase30"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(10, 100, 200)"
+
+Testing ":nth-child(even of [id][attribute3$="3"], [id]:empty)"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)').length is 16
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)')[0].id is "testcase2"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)')[1].id is "testcase6"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)')[2].id is "testcase10"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)')[3].id is "testcase14"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)')[4].id is "testcase15"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)')[5].id is "testcase16"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)')[6].id is "testcase18"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)')[7].id is "testcase19"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)')[8].id is "testcase20"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)')[9].id is "testcase22"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)')[10].id is "testcase23"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)')[11].id is "testcase24"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)')[12].id is "testcase26"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)')[13].id is "testcase27"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)')[14].id is "testcase29"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute3$="3"], [id]:empty)')[15].id is "testcase30"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(10, 100, 200)"
+
+Testing ":nth-child(even of [id][attribute2*="alue"], .foo.bar)"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute2*="alue"], .foo.bar)').length is 15
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute2*="alue"], .foo.bar)')[0].id is "testcase3"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute2*="alue"], .foo.bar)')[1].id is "testcase4"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute2*="alue"], .foo.bar)')[2].id is "testcase6"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute2*="alue"], .foo.bar)')[3].id is "testcase10"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute2*="alue"], .foo.bar)')[4].id is "testcase12"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute2*="alue"], .foo.bar)')[5].id is "testcase13"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute2*="alue"], .foo.bar)')[6].id is "testcase14"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute2*="alue"], .foo.bar)')[7].id is "testcase16"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute2*="alue"], .foo.bar)')[8].id is "testcase20"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute2*="alue"], .foo.bar)')[9].id is "testcase22"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute2*="alue"], .foo.bar)')[10].id is "testcase23"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute2*="alue"], .foo.bar)')[11].id is "testcase24"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute2*="alue"], .foo.bar)')[12].id is "testcase26"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute2*="alue"], .foo.bar)')[13].id is "testcase27"
+PASS document.querySelectorAll('#test-root :nth-child(even of [id][attribute2*="alue"], .foo.bar)')[14].id is "testcase30"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[0]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[1]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[2]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[3]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[4]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[5]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[6]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[7]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[8]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[9]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[10]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[11]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[12]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[13]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[14]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[15]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[16]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[17]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[18]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[19]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[20]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[21]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[22]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[23]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[24]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[25]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[26]).backgroundColor is "rgb(10, 100, 200)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[27]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[28]).backgroundColor is "rgb(255, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("#test-root *")[29]).backgroundColor is "rgb(10, 100, 200)"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsnthchildofselectorlisthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/nth-child-of-selector-list.html (0 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/nth-child-of-selector-list.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/nth-child-of-selector-list.html 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -0,0 +1,102 @@
</span><ins>+<!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" attribute1="value1" class="bar baz bazoo" attribute3="value3">Not empty</testcaseA>
+ <testcaseB id="testcase2" class="bar baz bazoo" attribute2="value2" attribute3="value3"></testcaseB>
+ <testcaseA id="testcase3" attribute1="value1" class="foo baz bazoo">Not empty</testcaseA>
+ <testcaseB id="testcase4" attribute1="value1" class="foo bar bazoo">Not empty</testcaseB>
+ <testcaseA id="testcase5" class="foo baz bazoo" attribute2="value2" attribute3="value3">Not empty</testcaseA>
+ <testcaseB id="testcase6" attribute1="value1" class="foo bar baz" attribute3="value3">Not empty</testcaseB>
+ <testcaseA id="testcase7" attribute1="value1" class="bar baz bazoo">Not empty</testcaseA>
+ <testcaseB id="testcase8" attribute1="value1" class="foo baz bazoo">Not empty</testcaseB>
+ <testcaseA id="testcase9" class="foo bar bazoo" attribute2="value2" attribute3="value3"></testcaseA>
+ <testcaseB id="testcase10" attribute1="value1" class="foo bar bazoo" attribute3="value3">Not empty</testcaseB>
+ <testcaseA id="testcase11" attribute1="value1" class="foo bar baz">Not empty</testcaseA>
+ <testcaseB id="testcase12" attribute1="value1" class="bar baz bazoo">Not empty</testcaseB>
+ <testcaseA id="testcase13" attribute1="value1" class="foo baz bazoo" attribute3="value3">Not empty</testcaseA>
+ <testcaseB id="testcase14" class="foo bar baz" attribute2="value2">Not empty</testcaseB>
+ <testcaseA id="testcase15" attribute1="value1" class="foo bar bazoo">Not empty</testcaseA>
+ <testcaseB id="testcase16" attribute1="value1" class="foo bar baz" attribute3="value3">Not empty</testcaseB>
+ <testcaseA id="testcase17" attribute1="value1" class="bar baz bazoo" attribute3="value3">Not empty</testcaseA>
+ <testcaseB id="testcase18" attribute1="value1" class="foo baz bazoo">Not empty</testcaseB>
+ <testcaseA id="testcase19" attribute1="value1" class="foo bar bazoo">Not empty</testcaseA>
+ <testcaseB id="testcase20" class="bar baz bazoo" attribute2="value2" attribute3="value3">Not empty</testcaseB>
+ <testcaseA id="testcase21" attribute1="value1" class="foo bar baz" attribute3="value3"></testcaseA>
+ <testcaseB id="testcase22" attribute1="value1" class="bar baz bazoo">Not empty</testcaseB>
+ <testcaseA id="testcase23" attribute1="value1" class="foo baz bazoo">Not empty</testcaseA>
+ <testcaseB id="testcase24" attribute1="value1" class="foo bar bazoo" attribute3="value3">Not empty</testcaseB>
+ <testcaseA id="testcase25" attribute1="value1" class="foo bar baz" attribute3="value3">Not empty</testcaseA>
+ <testcaseB id="testcase26" attribute1="value1" class="bar baz bazoo">Not empty</testcaseB>
+ <testcaseA id="testcase27" class="foo baz bazoo" attribute2="value2"></testcaseA>
+ <testcaseB id="testcase28" attribute1="value1" class="foo baz bazoo" attribute3="value3">Not empty</testcaseB>
+ <testcaseA id="testcase29" attribute1="value1" class="foo bar bazoo">Not empty</testcaseA>
+ <testcaseB id="testcase30" attribute1="value1" class="foo bar baz">Not empty</testcaseB>
+ </div>
+</body>
+<script>
+description('Check ":nth-child(An+B of selectorList)" with a selector list.');
+
+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("");
+}
+
+// Since :not(*) never match anything, this should be equivalent to :nth-child(2n).
+testSelector(":nth-child(2n of *, :not(*), *)", ["testcase2", "testcase4", "testcase6", "testcase8", "testcase10", "testcase12", "testcase14", "testcase16", "testcase18", "testcase20", "testcase22", "testcase24", "testcase26", "testcase28", "testcase30"]);
+
+// The selector list can never match anything.
+testSelector(":nth-child(2n of :not(*), :empty:not(:empty), [attribute1][attribute2][attribute3], .foo.bar.baz.bazoo, :not([id]), :not([class]))", []);
+
+// Filtering with "testcaseA, testcaseB" matches everything too, that should be equivalent to :nth-child(odd).
+testSelector(":nth-child(odd of testcaseA, testcaseB)", ["testcase1", "testcase3", "testcase5", "testcase7", "testcase9", "testcase11", "testcase13", "testcase15", "testcase17", "testcase19", "testcase21", "testcase23", "testcase25", "testcase27", "testcase29"]);
+
+// Matching all the classes should match everything like :nth-child(even).
+testSelector(":nth-child(even of .foo, .bar, .baz)", ["testcase2", "testcase4", "testcase6", "testcase8", "testcase10", "testcase12", "testcase14", "testcase16", "testcase18", "testcase20", "testcase22", "testcase24", "testcase26", "testcase28", "testcase30"]);
+
+// Every element has an attribute, this should be equivalent to :nth-child(odd)
+testSelector(":nth-child(odd of [attribute1], [attribute2=value2])", ["testcase1", "testcase3", "testcase5", "testcase7", "testcase9", "testcase11", "testcase13", "testcase15", "testcase17", "testcase19", "testcase21", "testcase23", "testcase25", "testcase27", "testcase29"]);
+
+// Any element with an odd number of (attribute3 or empty) above.
+testSelector(':nth-child(even of [attribute3$="3"], :empty)', ["testcase2", "testcase6", "testcase10", "testcase14", "testcase15", "testcase16", "testcase18", "testcase19", "testcase20", "testcase22", "testcase23", "testcase24", "testcase26", "testcase27", "testcase29", "testcase30"]);
+
+// Any element with an odd number of (attribute3 or empty) above. Overqualified with id to test compound selectors.
+testSelector(':nth-child(even of [id][attribute3$="3"], [id]:empty)', ["testcase2", "testcase6", "testcase10", "testcase14", "testcase15", "testcase16", "testcase18", "testcase19", "testcase20", "testcase22", "testcase23", "testcase24", "testcase26", "testcase27", "testcase29", "testcase30"]);
+
+// id is always there but attribute2 is uncommon. The classes .foo.bar matches many elements.
+testSelector(':nth-child(even of [id][attribute2*="alue"], .foo.bar)', ["testcase3", "testcase4", "testcase6", "testcase10", "testcase12", "testcase13", "testcase14", "testcase16", "testcase20", "testcase22", "testcase23", "testcase24", "testcase26", "testcase27", "testcase30"]);
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (173852 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-09-22 22:08:02 UTC (rev 173852)
+++ trunk/Source/WebCore/ChangeLog 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -1,3 +1,29 @@
</span><ins>+2014-09-22 Benjamin Poulain <bpoulain@apple.com>
+
+ Add the baseline implementation of :nth-child(An+B of selector-list)
+ https://bugs.webkit.org/show_bug.cgi?id=136975
+
+ Reviewed by Darin Adler.
+
+ Tests: fast/css/nth-child-of-classname.html
+ fast/css/nth-child-of-complex-selector.html
+ fast/css/nth-child-of-compound-selector.html
+ fast/css/nth-child-of-tagname.html
+ fast/selectors/nth-child-of-basics.html
+ fast/selectors/nth-child-of-class-style-update.html
+ fast/selectors/nth-child-of-complex-selectors.html
+ fast/selectors/nth-child-of-selector-list.html
+
+ * css/SelectorChecker.cpp:
+ (WebCore::SelectorChecker::checkOne):
+ Pretty basic:
+ -Go over the previous siblings.
+ -For each sibling, test the selector list. If it matches, increase the count.
+
+ * cssjit/SelectorCompiler.cpp:
+ (WebCore::SelectorCompiler::addPseudoClassType):
+ Skip any case of the new selector. This will be implemented separately.
+
</ins><span class="cx"> 2014-09-19 Myles C. Maxfield <mmaxfield@apple.com>
</span><span class="cx">
</span><span class="cx"> Implement 'vhea', 'vmtx', and 'kern' tables in SVG -> OTF converter
</span></span></pre></div>
<a id="trunkSourceWebCorecssSelectorCheckercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/SelectorChecker.cpp (173852 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/SelectorChecker.cpp 2014-09-22 22:08:02 UTC (rev 173852)
+++ trunk/Source/WebCore/css/SelectorChecker.cpp 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -666,11 +666,37 @@
</span><span class="cx"> if (context.resolvingMode == Mode::ResolvingStyle)
</span><span class="cx"> element->setStyleIsAffectedByPreviousSibling();
</span><span class="cx">
</span><del>- int count = 1 + countElementsBefore(element, context.resolvingMode == Mode::ResolvingStyle);
</del><ins>+ int count = 1;
+#if ENABLE(CSS_SELECTORS_LEVEL4)
+ if (const CSSSelectorList* selectorList = selector->selectorList()) {
+ for (Element* sibling = ElementTraversal::previousSibling(element); sibling; sibling = ElementTraversal::previousSibling(sibling)) {
+ if (context.resolvingMode == Mode::ResolvingStyle)
+ sibling->setAffectsNextSiblingElementStyle();
+
+ for (const CSSSelector* subselector = selectorList->first(); subselector; subselector = CSSSelectorList::next(subselector)) {
+ CheckingContextWithStatus subcontext(context);
+ subcontext.element = sibling;
+ subcontext.selector = subselector;
+ subcontext.inFunctionalPseudoClass = true;
+ subcontext.firstSelectorOfTheFragment = subselector;
+ PseudoId ignoreDynamicPseudo = NOPSEUDO;
+ if (matchRecursively(subcontext, ignoreDynamicPseudo) == SelectorMatches) {
+ ASSERT(ignoreDynamicPseudo == NOPSEUDO);
+ ++count;
+ break;
+ }
+ }
+ }
+ } else
+#endif
+ {
+ count += countElementsBefore(element, context.resolvingMode == Mode::ResolvingStyle);
+ if (context.resolvingMode == Mode::ResolvingStyle)
+ element->setChildIndex(count);
+ }
+
</ins><span class="cx"> if (context.resolvingMode == Mode::ResolvingStyle) {
</span><del>- RenderStyle* childStyle = context.elementStyle ? context.elementStyle : element->renderStyle();
- element->setChildIndex(count);
- if (childStyle)
</del><ins>+ if (RenderStyle* childStyle = context.elementStyle ? context.elementStyle : element->renderStyle())
</ins><span class="cx"> childStyle->setUnique();
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorecssjitSelectorCompilercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/cssjit/SelectorCompiler.cpp (173852 => 173853)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/cssjit/SelectorCompiler.cpp 2014-09-22 22:08:02 UTC (rev 173852)
+++ trunk/Source/WebCore/cssjit/SelectorCompiler.cpp 2014-09-22 22:09:13 UTC (rev 173853)
</span><span class="lines">@@ -552,6 +552,9 @@
</span><span class="cx"> if (!selector.parseNth())
</span><span class="cx"> return FunctionType::CannotMatchAnything;
</span><span class="cx">
</span><ins>+ if (selector.selectorList())
+ return FunctionType::CannotCompile;
+
</ins><span class="cx"> int a = selector.nthA();
</span><span class="cx"> int b = selector.nthB();
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>