<!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>[176623] 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/176623">176623</a></dd>
<dt>Author</dt> <dd>benjamin@webkit.org</dd>
<dt>Date</dt> <dd>2014-12-01 18:29:53 -0800 (Mon, 01 Dec 2014)</dd>
</dl>

<h3>Log Message</h3>
<pre>Add the dynamic specificity of the selector list argument when matching :nth-child() and :nth-last-child()
https://bugs.webkit.org/show_bug.cgi?id=139001

Reviewed by Andreas Kling.

Source/WebCore:

When matching :nth-child(An+B of selector list) or :nth-last-child(An+B of selector list),
we were previously ignoring the arguments.

That behavior seems to be confusing for users. We made the proposal to include the selector list
like when using :matches():
    http://lists.w3.org/Archives/Public/www-style/2014Oct/0533.html
David Baron also agrees with this behavior:
    http://lists.w3.org/Archives/Public/www-style/2014Oct/0534.html

This patch adds the specificity computation.

Tests: fast/css/nth-child-specificity-1.html
       fast/css/nth-child-specificity-2.html
       fast/css/nth-last-child-specificity-1.html
       fast/css/nth-last-child-specificity-2.html

* css/CSSSelector.cpp:
(WebCore::simpleSelectorFunctionalPseudoClassStaticSpecificity):
* css/SelectorChecker.cpp:
(WebCore::SelectorChecker::checkOne):
(WebCore::SelectorChecker::matchSelectorList):
* css/SelectorChecker.h:
* cssjit/SelectorCompiler.cpp:
(WebCore::SelectorCompiler::addPseudoClassType):

LayoutTests:

* fast/css/nth-child-specificity-1-expected.html: Added.
* fast/css/nth-child-specificity-1.html: Added.
* fast/css/nth-child-specificity-2-expected.html: Added.
* fast/css/nth-child-specificity-2.html: Added.
* fast/css/nth-child-specificity-3-expected.html: Added.
* fast/css/nth-child-specificity-3.html: Added.
* fast/css/nth-child-specificity-4-expected.html: Added.
* fast/css/nth-child-specificity-4.html: Added.
* fast/css/nth-last-child-specificity-1-expected.html: Added.
* fast/css/nth-last-child-specificity-1.html: Added.
* fast/css/nth-last-child-specificity-2-expected.html: Added.
* fast/css/nth-last-child-specificity-2.html: Added.
* fast/css/nth-last-child-specificity-3-expected.html: Added.
* fast/css/nth-last-child-specificity-3.html: Added.
* fast/css/nth-last-child-specificity-4-expected.html: Added.
* fast/css/nth-last-child-specificity-4.html: Added.</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="#trunkSourceWebCorecssCSSSelectorcpp">trunk/Source/WebCore/css/CSSSelector.cpp</a></li>
<li><a href="#trunkSourceWebCorecssSelectorCheckercpp">trunk/Source/WebCore/css/SelectorChecker.cpp</a></li>
<li><a href="#trunkSourceWebCorecssSelectorCheckerh">trunk/Source/WebCore/css/SelectorChecker.h</a></li>
<li><a href="#trunkSourceWebCorecssjitSelectorCompilercpp">trunk/Source/WebCore/cssjit/SelectorCompiler.cpp</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssnthchildspecificity1expectedhtml">trunk/LayoutTests/fast/css/nth-child-specificity-1-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthchildspecificity1html">trunk/LayoutTests/fast/css/nth-child-specificity-1.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthchildspecificity2expectedhtml">trunk/LayoutTests/fast/css/nth-child-specificity-2-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthchildspecificity2html">trunk/LayoutTests/fast/css/nth-child-specificity-2.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthchildspecificity3expectedhtml">trunk/LayoutTests/fast/css/nth-child-specificity-3-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthchildspecificity3html">trunk/LayoutTests/fast/css/nth-child-specificity-3.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthchildspecificity4expectedhtml">trunk/LayoutTests/fast/css/nth-child-specificity-4-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthchildspecificity4html">trunk/LayoutTests/fast/css/nth-child-specificity-4.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthlastchildspecificity1expectedhtml">trunk/LayoutTests/fast/css/nth-last-child-specificity-1-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthlastchildspecificity1html">trunk/LayoutTests/fast/css/nth-last-child-specificity-1.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthlastchildspecificity2expectedhtml">trunk/LayoutTests/fast/css/nth-last-child-specificity-2-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthlastchildspecificity2html">trunk/LayoutTests/fast/css/nth-last-child-specificity-2.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthlastchildspecificity3expectedhtml">trunk/LayoutTests/fast/css/nth-last-child-specificity-3-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthlastchildspecificity3html">trunk/LayoutTests/fast/css/nth-last-child-specificity-3.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthlastchildspecificity4expectedhtml">trunk/LayoutTests/fast/css/nth-last-child-specificity-4-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnthlastchildspecificity4html">trunk/LayoutTests/fast/css/nth-last-child-specificity-4.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (176622 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2014-12-02 02:21:16 UTC (rev 176622)
+++ trunk/LayoutTests/ChangeLog        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -1,3 +1,28 @@
</span><ins>+2014-12-01  Benjamin Poulain  &lt;benjamin@webkit.org&gt;
+
+        Add the dynamic specificity of the selector list argument when matching :nth-child() and :nth-last-child()
+        https://bugs.webkit.org/show_bug.cgi?id=139001
+
+        Reviewed by Andreas Kling.
+
+        * fast/css/nth-child-specificity-1-expected.html: Added.
+        * fast/css/nth-child-specificity-1.html: Added.
+        * fast/css/nth-child-specificity-2-expected.html: Added.
+        * fast/css/nth-child-specificity-2.html: Added.
+        * fast/css/nth-child-specificity-3-expected.html: Added.
+        * fast/css/nth-child-specificity-3.html: Added.
+        * fast/css/nth-child-specificity-4-expected.html: Added.
+        * fast/css/nth-child-specificity-4.html: Added.
+        * fast/css/nth-last-child-specificity-1-expected.html: Added.
+        * fast/css/nth-last-child-specificity-1.html: Added.
+        * fast/css/nth-last-child-specificity-2-expected.html: Added.
+        * fast/css/nth-last-child-specificity-2.html: Added.
+        * fast/css/nth-last-child-specificity-3-expected.html: Added.
+        * fast/css/nth-last-child-specificity-3.html: Added.
+        * fast/css/nth-last-child-specificity-4-expected.html: Added.
+        * fast/css/nth-last-child-specificity-4.html: Added.
+
+
</ins><span class="cx"> 2014-12-01  Zalan Bujtas  &lt;zalan@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Twitter avatar moves when hovering/unhovering the &quot;follow&quot; button.
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssnthchildspecificity1expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-child-specificity-1-expected.html (0 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-child-specificity-1-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/css/nth-child-specificity-1-expected.html        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -0,0 +1,17 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;body&gt;
+    &lt;p&gt;This test the specificity of :nth-child() with static specificity. The test passes if the text &quot;target&quot; is displayed white on green background. There should be 2 red rects on each side.&lt;/p&gt;
+    &lt;div&gt;
+        &lt;foo style=&quot;color: red; background-color: red;&quot;&gt;Not target&lt;/foo&gt;
+        &lt;padding&gt;&lt;/padding&gt;
+        &lt;bar style=&quot;color: red; background-color: red;&quot;&gt;Not target&lt;/bar&gt;
+        &lt;more-padding&gt;&lt;/more-padding&gt;
+        &lt;target  style=&quot;color: white; background-color: green;&quot;&gt;Target&lt;/target&gt;
+        &lt;more-padding&gt;&lt;/more-padding&gt;
+        &lt;foo style=&quot;color: red; background-color: red;&quot;&gt;Not target&lt;/foo&gt;
+        &lt;padding&gt;&lt;/padding&gt;
+        &lt;bar style=&quot;color: red; background-color: red;&quot;&gt;Not target&lt;/bar&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssnthchildspecificity1html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-child-specificity-1.html (0 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-child-specificity-1.html                                (rev 0)
+++ trunk/LayoutTests/fast/css/nth-child-specificity-1.html        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -0,0 +1,37 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+    /* The following 3 rules should all have the same specificity when matching &lt;target&gt;. They should be be applied in order. */
+    foo:nth-child(n), bar:nth-child(n), target:nth-child(n) {
+        background-color: red;
+        color: red;
+    }
+    :nth-child(3n of foo, bar, target) {
+        background-color: green;
+        color: blue;
+    }
+    foo.target, bar.target, target.target {
+        color: white;
+    }
+    * {
+        background-color: white;
+        color: black;
+    }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test the specificity of :nth-child() with static specificity. The test passes if the text &quot;target&quot; is displayed white on green background. There should be 2 red rects on each side.&lt;/p&gt;
+    &lt;div&gt;
+        &lt;foo&gt;Not target&lt;/foo&gt;
+        &lt;padding&gt;&lt;/padding&gt;
+        &lt;bar&gt;Not target&lt;/bar&gt;
+        &lt;more-padding&gt;&lt;/more-padding&gt;
+        &lt;target class=&quot;target&quot;&gt;Target&lt;/target&gt;
+        &lt;more-padding&gt;&lt;/more-padding&gt;
+        &lt;foo&gt;Not target&lt;/foo&gt;
+        &lt;padding&gt;&lt;/padding&gt;
+        &lt;bar&gt;Not target&lt;/bar&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssnthchildspecificity2expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-child-specificity-2-expected.html (0 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-child-specificity-2-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/css/nth-child-specificity-2-expected.html        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -0,0 +1,24 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+    target {
+        display: block;
+        margin: 2px;
+    }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test the specificity of :nth-child() with dynamic specificity. If the test pass, the style of each line should match its text description.&lt;/p&gt;
+    &lt;div&gt;
+        &lt;target style=&quot;background-color: white; color: black; border: none;&quot;&gt;Black text on white background.&lt;/target&gt;
+        &lt;target style=&quot;background-color: red; color: white; border: 5px solid purple;&quot;&gt;White text on red background with a purple border.&lt;/target&gt;
+        &lt;target style=&quot;background-color: green; color: red; border: none;&quot;&gt;Red text on green background.&lt;/target&gt;
+        &lt;target style=&quot;background-color: green; color: white; border: 5px solid purple;&quot;&gt;White text on green background with a purple border.&lt;/target&gt;
+        &lt;target style=&quot;background-color: white; color: black; border: 5px solid blue;&quot;&gt;Black text on white background with a blue border.&lt;/target&gt;
+        &lt;target style=&quot;background-color: red; color: white; border: 5px solid purple;&quot;&gt;White text on red background with a purple border.&lt;/target&gt;
+        &lt;target style=&quot;background-color: green; color: red; border: 5px solid blue;&quot;&gt;Red text on green background with a blue border.&lt;/target&gt;
+        &lt;target style=&quot;background-color: red; color: white; border: 5px solid purple;&quot;&gt;White text on red background with a purple border.&lt;/target&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssnthchildspecificity2html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-child-specificity-2.html (0 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-child-specificity-2.html                                (rev 0)
+++ trunk/LayoutTests/fast/css/nth-child-specificity-2.html        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -0,0 +1,45 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+    /* The specifity varies with the element being matched. */
+    :nth-child(even of .foo, #bar, target) {
+        background-color: red;
+        color: white;
+        border: 5px solid purple;
+    }
+
+    /* (0, 1, 1) */
+    target.foo {
+        color: red;
+    }
+
+    /* (0, 2, 0) */
+    .foo.foo {
+        background-color: green;
+    }
+    /* (1, 0, 1) */
+    target#bar {
+        border: 5px solid blue;
+    }
+
+    target {
+        display: block;
+        margin: 2px;
+    }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test the specificity of :nth-child() with dynamic specificity. If the test pass, the style of each line should match its text description.&lt;/p&gt;
+    &lt;div&gt;
+        &lt;target&gt;Black text on white background.&lt;/target&gt;
+        &lt;target&gt;White text on red background with a purple border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot;&gt;Red text on green background.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot;&gt;White text on green background with a purple border.&lt;/target&gt;
+        &lt;target id=&quot;bar&quot;&gt;Black text on white background with a blue border.&lt;/target&gt;
+        &lt;target id=&quot;bar&quot;&gt;White text on red background with a purple border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot; id=&quot;bar&quot;&gt;Red text on green background with a blue border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot; id=&quot;bar&quot;&gt;White text on red background with a purple border.&lt;/target&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssnthchildspecificity3expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-child-specificity-3-expected.html (0 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-child-specificity-3-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/css/nth-child-specificity-3-expected.html        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -0,0 +1,24 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+    target {
+        display: block;
+        margin: 2px;
+    }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test the specificity of :nth-child() with dynamic specificity of compound selectors. If the test pass, the style of each line should match its text description.&lt;/p&gt;
+    &lt;div&gt;
+        &lt;target&gt;Black text.&lt;/target&gt;
+        &lt;target&gt;Black text.&lt;/target&gt;
+        &lt;target style=&quot;color:red; border: 5px solid black;&quot;&gt;Red text with black border.&lt;/target&gt;
+        &lt;target style=&quot;color:white; background-color:red; border: 5px solid black;&quot;&gt;White text on red background with black border.&lt;/target&gt;
+        &lt;target style=&quot;border: 5px solid blue;&quot;&gt;Black text with blue border.&lt;/target&gt;
+        &lt;target style=&quot;color:white; background-color:red; border: 5px solid purple;&quot;&gt;White text on red background with purple border.&lt;/target&gt;
+        &lt;target style=&quot;color:red; background-color:green; border: 5px solid blue;&quot;&gt;Red text on green background with blue border.&lt;/target&gt;
+        &lt;target style=&quot;color:white; background-color:red; border: 5px solid purple;&quot;&gt;White text on red background with purple border.&lt;/target&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssnthchildspecificity3html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-child-specificity-3.html (0 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-child-specificity-3.html                                (rev 0)
+++ trunk/LayoutTests/fast/css/nth-child-specificity-3.html        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -0,0 +1,49 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+    /* The specifity varies with the element being matched. */
+    :nth-child(even of target.foo, .foo#bar, target.foo#bar, target#bar) {
+        background-color: red;
+        color: white;
+        border: 5px solid purple;
+    }
+
+    /* (0, 1, 1) */
+    target.foo {
+        color: red;
+    }
+    /* (0, 2, 1) */
+    target.foo.foo {
+        border: 5px solid black;
+    }
+
+    /* (1, 1, 0) */
+    .foo#bar {
+        background-color: green;
+    }
+    /* (1, 0, 1) */
+    target#bar {
+        border: 5px solid blue;
+    }
+
+    target {
+        display: block;
+        margin: 2px;
+    }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test the specificity of :nth-child() with dynamic specificity of compound selectors. If the test pass, the style of each line should match its text description.&lt;/p&gt;
+    &lt;div&gt;
+        &lt;target&gt;Black text.&lt;/target&gt;
+        &lt;target&gt;Black text.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot;&gt;Red text with black border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot;&gt;White text on red background with black border.&lt;/target&gt;
+        &lt;target id=&quot;bar&quot;&gt;Black text with blue border.&lt;/target&gt;
+        &lt;target id=&quot;bar&quot;&gt;White text on red background with purple border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot; id=&quot;bar&quot;&gt;Red text on green background with blue border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot; id=&quot;bar&quot;&gt;White text on red background with purple border.&lt;/target&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssnthchildspecificity4expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-child-specificity-4-expected.html (0 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-child-specificity-4-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/css/nth-child-specificity-4-expected.html        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -0,0 +1,24 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+    target {
+        display: block;
+        margin: 2px;
+    }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test the specificity of :nth-child() with dynamic specificity of compound selectors. In this case, we verify the matching of siblings does not affect the specificity of the current element. If the test pass, the style of each line should match its text description.&lt;/p&gt;
+    &lt;div&gt;
+        &lt;target&gt;Black text.&lt;/target&gt;
+        &lt;target&gt;Black text.&lt;/target&gt;
+        &lt;target style=&quot;border: 5px solid blue;&quot;&gt;Black text with blue border.&lt;/target&gt;
+        &lt;target style=&quot;color:white; background-color:red; border: 5px solid black;&quot;&gt;White text on red background with black border.&lt;/target&gt;
+        &lt;target style=&quot;color:red; background-color:green; border: 5px solid blue;&quot;&gt;Red text on green background with blue border.&lt;/target&gt;
+        &lt;target style=&quot;color:white; background-color:red; border: 5px solid purple;&quot;&gt;White text on red background with purple border.&lt;/target&gt;
+        &lt;target style=&quot;color:red; border: 5px solid black;&quot;&gt;Red text with black border.&lt;/target&gt;
+        &lt;target style=&quot;color:white; background-color:red; border: 5px solid purple;&quot;&gt;White text on red background with purple border.&lt;/target&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssnthchildspecificity4html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-child-specificity-4.html (0 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-child-specificity-4.html                                (rev 0)
+++ trunk/LayoutTests/fast/css/nth-child-specificity-4.html        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -0,0 +1,49 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+    /* The specifity varies with the element being matched. */
+    :nth-child(even of target.foo, .foo#bar, target.foo#bar, target#bar) {
+        background-color: red;
+        color: white;
+        border: 5px solid purple;
+    }
+
+    /* (0, 1, 1) */
+    target.foo {
+        color: red;
+    }
+    /* (0, 2, 1) */
+    target.foo.foo {
+        border: 5px solid black;
+    }
+
+    /* (1, 1, 0) */
+    .foo#bar {
+        background-color: green;
+    }
+    /* (1, 0, 1) */
+    target#bar {
+        border: 5px solid blue;
+    }
+
+    target {
+        display: block;
+        margin: 2px;
+    }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test the specificity of :nth-child() with dynamic specificity of compound selectors. In this case, we verify the matching of siblings does not affect the specificity of the current element. If the test pass, the style of each line should match its text description.&lt;/p&gt;
+    &lt;div&gt;
+        &lt;target&gt;Black text.&lt;/target&gt;
+        &lt;target&gt;Black text.&lt;/target&gt;
+        &lt;target id=&quot;bar&quot;&gt;Black text with blue border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot;&gt;White text on red background with black border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot; id=&quot;bar&quot;&gt;Red text on green background with blue border.&lt;/target&gt;
+        &lt;target id=&quot;bar&quot;&gt;White text on red background with purple border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot;&gt;Red text with black border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot; id=&quot;bar&quot;&gt;White text on red background with purple border.&lt;/target&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssnthlastchildspecificity1expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-last-child-specificity-1-expected.html (0 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-last-child-specificity-1-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/css/nth-last-child-specificity-1-expected.html        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -0,0 +1,17 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;body&gt;
+    &lt;p&gt;This test the specificity of :nth-last-child() with static specificity. The test passes if the text &quot;target&quot; is displayed white on green background. There should be 2 red rects on each side.&lt;/p&gt;
+    &lt;div&gt;
+        &lt;foo style=&quot;color: red; background-color: red;&quot;&gt;Not target&lt;/foo&gt;
+        &lt;padding&gt;&lt;/padding&gt;
+        &lt;bar style=&quot;color: red; background-color: red;&quot;&gt;Not target&lt;/bar&gt;
+        &lt;more-padding&gt;&lt;/more-padding&gt;
+        &lt;target  style=&quot;color: white; background-color: green;&quot;&gt;Target&lt;/target&gt;
+        &lt;more-padding&gt;&lt;/more-padding&gt;
+        &lt;foo style=&quot;color: red; background-color: red;&quot;&gt;Not target&lt;/foo&gt;
+        &lt;padding&gt;&lt;/padding&gt;
+        &lt;bar style=&quot;color: red; background-color: red;&quot;&gt;Not target&lt;/bar&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssnthlastchildspecificity1html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-last-child-specificity-1.html (0 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-last-child-specificity-1.html                                (rev 0)
+++ trunk/LayoutTests/fast/css/nth-last-child-specificity-1.html        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -0,0 +1,37 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+    /* The following 3 rules should all have the same specificity when matching &lt;target&gt;. They should be be applied in order. */
+    foo:nth-last-child(n), bar:nth-last-child(n), target:nth-last-child(n) {
+        background-color: red;
+        color: red;
+    }
+    :nth-last-child(3n of foo, bar, target) {
+        background-color: green;
+        color: blue;
+    }
+    foo.target, bar.target, target.target {
+        color: white;
+    }
+    * {
+        background-color: white;
+        color: black;
+    }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test the specificity of :nth-last-child() with static specificity. The test passes if the text &quot;target&quot; is displayed white on green background. There should be 2 red rects on each side.&lt;/p&gt;
+    &lt;div&gt;
+        &lt;foo&gt;Not target&lt;/foo&gt;
+        &lt;padding&gt;&lt;/padding&gt;
+        &lt;bar&gt;Not target&lt;/bar&gt;
+        &lt;more-padding&gt;&lt;/more-padding&gt;
+        &lt;target class=&quot;target&quot;&gt;Target&lt;/target&gt;
+        &lt;more-padding&gt;&lt;/more-padding&gt;
+        &lt;foo&gt;Not target&lt;/foo&gt;
+        &lt;padding&gt;&lt;/padding&gt;
+        &lt;bar&gt;Not target&lt;/bar&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssnthlastchildspecificity2expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-last-child-specificity-2-expected.html (0 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-last-child-specificity-2-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/css/nth-last-child-specificity-2-expected.html        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -0,0 +1,24 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+    target {
+        display: block;
+        margin: 2px;
+    }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test the specificity of :nth-last-child() with dynamic specificity. If the test pass, the style of each line should match its text description.&lt;/p&gt;
+    &lt;div&gt;
+        &lt;target style=&quot;background-color: red; color: white; border: 5px solid purple;&quot;&gt;White text on red background with a purple border.&lt;/target&gt;
+        &lt;target style=&quot;background-color: white; color: black; border: none;&quot;&gt;Black text on white background.&lt;/target&gt;
+        &lt;target style=&quot;background-color: green; color: white; border: 5px solid purple;&quot;&gt;White text on green background with a purple border.&lt;/target&gt;
+        &lt;target style=&quot;background-color: green; color: red; border: none;&quot;&gt;Red text on green background.&lt;/target&gt;
+        &lt;target style=&quot;background-color: red; color: white; border: 5px solid purple;&quot;&gt;White text on red background with a purple border.&lt;/target&gt;
+        &lt;target style=&quot;background-color: white; color: black; border: 5px solid blue;&quot;&gt;Black text on white background with a blue border.&lt;/target&gt;
+        &lt;target style=&quot;background-color: red; color: white; border: 5px solid purple;&quot;&gt;White text on red background with a purple border.&lt;/target&gt;
+        &lt;target style=&quot;background-color: green; color: red; border: 5px solid blue;&quot;&gt;Red text on green background with a blue border.&lt;/target&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssnthlastchildspecificity2html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-last-child-specificity-2.html (0 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-last-child-specificity-2.html                                (rev 0)
+++ trunk/LayoutTests/fast/css/nth-last-child-specificity-2.html        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -0,0 +1,45 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+    /* The specifity varies with the element being matched. */
+    :nth-last-child(even of .foo, #bar, target) {
+        background-color: red;
+        color: white;
+        border: 5px solid purple;
+    }
+
+    /* (0, 1, 1) */
+    target.foo {
+        color: red;
+    }
+
+    /* (0, 2, 0) */
+    .foo.foo {
+        background-color: green;
+    }
+    /* (1, 0, 1) */
+    target#bar {
+        border: 5px solid blue;
+    }
+
+    target {
+        display: block;
+        margin: 2px;
+    }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test the specificity of :nth-last-child() with dynamic specificity. If the test pass, the style of each line should match its text description.&lt;/p&gt;
+    &lt;div&gt;
+        &lt;target&gt;White text on red background with a purple border.&lt;/target&gt;
+        &lt;target&gt;Black text on white background.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot;&gt;White text on green background with a purple border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot;&gt;Red text on green background.&lt;/target&gt;
+        &lt;target id=&quot;bar&quot;&gt;White text on red background with a purple border.&lt;/target&gt;
+        &lt;target id=&quot;bar&quot;&gt;Black text on white background with a blue border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot; id=&quot;bar&quot;&gt;White text on red background with a purple border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot; id=&quot;bar&quot;&gt;Red text on green background with a blue border.&lt;/target&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssnthlastchildspecificity3expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-last-child-specificity-3-expected.html (0 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-last-child-specificity-3-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/css/nth-last-child-specificity-3-expected.html        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -0,0 +1,24 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+    target {
+        display: block;
+        margin: 2px;
+    }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test the specificity of :nth-last-child() with dynamic specificity of compound selectors. If the test pass, the style of each line should match its text description.&lt;/p&gt;
+    &lt;div&gt;
+        &lt;target&gt;Black text.&lt;/target&gt;
+        &lt;target&gt;Black text.&lt;/target&gt;
+        &lt;target style=&quot;color:white; background-color:red; border: 5px solid black;&quot;&gt;White text on red background with black border.&lt;/target&gt;
+        &lt;target style=&quot;color:red; border: 5px solid black;&quot;&gt;Red text with black border.&lt;/target&gt;
+        &lt;target style=&quot;color:white; background-color:red; border: 5px solid purple;&quot;&gt;White text on red background with purple border.&lt;/target&gt;
+        &lt;target style=&quot;border: 5px solid blue;&quot;&gt;Black text with blue border.&lt;/target&gt;
+        &lt;target style=&quot;color:white; background-color:red; border: 5px solid purple;&quot;&gt;White text on red background with purple border.&lt;/target&gt;
+        &lt;target style=&quot;color:red; background-color:green; border: 5px solid blue;&quot;&gt;Red text on green background with blue border.&lt;/target&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssnthlastchildspecificity3html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-last-child-specificity-3.html (0 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-last-child-specificity-3.html                                (rev 0)
+++ trunk/LayoutTests/fast/css/nth-last-child-specificity-3.html        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -0,0 +1,49 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+    /* The specifity varies with the element being matched. */
+    :nth-last-child(even of target.foo, .foo#bar, target.foo#bar, target#bar) {
+        background-color: red;
+        color: white;
+        border: 5px solid purple;
+    }
+
+    /* (0, 1, 1) */
+    target.foo {
+        color: red;
+    }
+    /* (0, 2, 1) */
+    target.foo.foo {
+        border: 5px solid black;
+    }
+
+    /* (1, 1, 0) */
+    .foo#bar {
+        background-color: green;
+    }
+    /* (1, 0, 1) */
+    target#bar {
+        border: 5px solid blue;
+    }
+
+    target {
+        display: block;
+        margin: 2px;
+    }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test the specificity of :nth-last-child() with dynamic specificity of compound selectors. If the test pass, the style of each line should match its text description.&lt;/p&gt;
+    &lt;div&gt;
+        &lt;target&gt;Black text.&lt;/target&gt;
+        &lt;target&gt;Black text.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot;&gt;White text on red background with black border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot;&gt;Red text with black border.&lt;/target&gt;
+        &lt;target id=&quot;bar&quot;&gt;White text on red background with purple border.&lt;/target&gt;
+        &lt;target id=&quot;bar&quot;&gt;Black text with blue border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot; id=&quot;bar&quot;&gt;White text on red background with purple border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot; id=&quot;bar&quot;&gt;Red text on green background with blue border.&lt;/target&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssnthlastchildspecificity4expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-last-child-specificity-4-expected.html (0 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-last-child-specificity-4-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/css/nth-last-child-specificity-4-expected.html        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -0,0 +1,24 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+    target {
+        display: block;
+        margin: 2px;
+    }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test the specificity of :nth-last-child() with dynamic specificity of compound selectors. In this case, we verify the matching of siblings does not affect the specificity of the current element. If the test pass, the style of each line should match its text description.&lt;/p&gt;
+    &lt;div&gt;
+        &lt;target&gt;Black text.&lt;/target&gt;
+        &lt;target&gt;Black text.&lt;/target&gt;
+        &lt;target style=&quot;color:white; background-color:red; border: 5px solid black;&quot;&gt;White text on red background with black border.&lt;/target&gt;
+        &lt;target style=&quot;border: 5px solid blue;&quot;&gt;Black text with blue border.&lt;/target&gt;
+        &lt;target style=&quot;color:white; background-color:red; border: 5px solid purple;&quot;&gt;White text on red background with purple border.&lt;/target&gt;
+        &lt;target style=&quot;color:red; background-color:green; border: 5px solid blue;&quot;&gt;Red text on green background with blue border.&lt;/target&gt;
+        &lt;target style=&quot;color:white; background-color:red; border: 5px solid purple;&quot;&gt;White text on red background with purple border.&lt;/target&gt;
+        &lt;target style=&quot;color:red; border: 5px solid black;&quot;&gt;Red text with black border.&lt;/target&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssnthlastchildspecificity4html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/nth-last-child-specificity-4.html (0 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/nth-last-child-specificity-4.html                                (rev 0)
+++ trunk/LayoutTests/fast/css/nth-last-child-specificity-4.html        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -0,0 +1,49 @@
</span><ins>+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+    /* The specifity varies with the element being matched. */
+    :nth-last-child(even of target.foo, .foo#bar, target.foo#bar, target#bar) {
+        background-color: red;
+        color: white;
+        border: 5px solid purple;
+    }
+
+    /* (0, 1, 1) */
+    target.foo {
+        color: red;
+    }
+    /* (0, 2, 1) */
+    target.foo.foo {
+        border: 5px solid black;
+    }
+
+    /* (1, 1, 0) */
+    .foo#bar {
+        background-color: green;
+    }
+    /* (1, 0, 1) */
+    target#bar {
+        border: 5px solid blue;
+    }
+
+    target {
+        display: block;
+        margin: 2px;
+    }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test the specificity of :nth-last-child() with dynamic specificity of compound selectors. In this case, we verify the matching of siblings does not affect the specificity of the current element. If the test pass, the style of each line should match its text description.&lt;/p&gt;
+    &lt;div&gt;
+        &lt;target&gt;Black text.&lt;/target&gt;
+        &lt;target&gt;Black text.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot;&gt;White text on red background with black border.&lt;/target&gt;
+        &lt;target id=&quot;bar&quot;&gt;Black text with blue border.&lt;/target&gt;
+        &lt;target id=&quot;bar&quot;&gt;White text on red background with purple border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot; id=&quot;bar&quot;&gt;Red text on green background with blue border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot; id=&quot;bar&quot;&gt;White text on red background with purple border.&lt;/target&gt;
+        &lt;target class=&quot;foo&quot;&gt;Red text with black border.&lt;/target&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (176622 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2014-12-02 02:21:16 UTC (rev 176622)
+++ trunk/Source/WebCore/ChangeLog        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -1,3 +1,35 @@
</span><ins>+2014-12-01  Benjamin Poulain  &lt;benjamin@webkit.org&gt;
+
+        Add the dynamic specificity of the selector list argument when matching :nth-child() and :nth-last-child()
+        https://bugs.webkit.org/show_bug.cgi?id=139001
+
+        Reviewed by Andreas Kling.
+
+        When matching :nth-child(An+B of selector list) or :nth-last-child(An+B of selector list),
+        we were previously ignoring the arguments.
+
+        That behavior seems to be confusing for users. We made the proposal to include the selector list
+        like when using :matches():
+            http://lists.w3.org/Archives/Public/www-style/2014Oct/0533.html
+        David Baron also agrees with this behavior:
+            http://lists.w3.org/Archives/Public/www-style/2014Oct/0534.html
+
+        This patch adds the specificity computation.
+
+        Tests: fast/css/nth-child-specificity-1.html
+               fast/css/nth-child-specificity-2.html
+               fast/css/nth-last-child-specificity-1.html
+               fast/css/nth-last-child-specificity-2.html
+
+        * css/CSSSelector.cpp:
+        (WebCore::simpleSelectorFunctionalPseudoClassStaticSpecificity):
+        * css/SelectorChecker.cpp:
+        (WebCore::SelectorChecker::checkOne):
+        (WebCore::SelectorChecker::matchSelectorList):
+        * css/SelectorChecker.h:
+        * cssjit/SelectorCompiler.cpp:
+        (WebCore::SelectorCompiler::addPseudoClassType):
+
</ins><span class="cx"> 2014-12-01  Chris Dumez  &lt;cdumez@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Move 'text-shadow' / 'box-shadow' / '-webkit-box-shadow' to the new StyleBuilder
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSSelectorcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSSelector.cpp (176622 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSSelector.cpp        2014-12-02 02:21:16 UTC (rev 176622)
+++ trunk/Source/WebCore/css/CSSSelector.cpp        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -131,10 +131,16 @@
</span><span class="cx"> static unsigned simpleSelectorFunctionalPseudoClassStaticSpecificity(const CSSSelector&amp; simpleSelector, bool&amp; ok)
</span><span class="cx"> {
</span><span class="cx">     if (simpleSelector.match() == CSSSelector::PseudoClass) {
</span><del>-        if (simpleSelector.pseudoClassType() == CSSSelector::PseudoClassMatches) {
-            const CSSSelectorList&amp; selectorList = *simpleSelector.selectorList();
-            const CSSSelector&amp; firstSubselector = *selectorList.first();
</del><ins>+        CSSSelector::PseudoClassType pseudoClassType = simpleSelector.pseudoClassType();
+        if (pseudoClassType == CSSSelector::PseudoClassMatches || pseudoClassType == CSSSelector::PseudoClassNthChild || pseudoClassType == CSSSelector::PseudoClassNthLastChild) {
+            const CSSSelectorList* selectorList = simpleSelector.selectorList();
+            if (!selectorList) {
+                ASSERT_WITH_MESSAGE(pseudoClassType != CSSSelector::PseudoClassMatches, &quot;:matches() should never be created without a valid selector list.&quot;);
+                return 0;
+            }
</ins><span class="cx"> 
</span><ins>+            const CSSSelector&amp; firstSubselector = *selectorList-&gt;first();
+
</ins><span class="cx">             unsigned initialSpecificity = staticSpecificityInternal(firstSubselector, ok);
</span><span class="cx">             if (!ok)
</span><span class="cx">                 return 0;
</span></span></pre></div>
<a id="trunkSourceWebCorecssSelectorCheckercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/SelectorChecker.cpp (176622 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/SelectorChecker.cpp        2014-12-02 02:21:16 UTC (rev 176622)
+++ trunk/Source/WebCore/css/SelectorChecker.cpp        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -744,7 +744,10 @@
</span><span class="cx">             if (element-&gt;parentElement()) {
</span><span class="cx"> #if ENABLE(CSS_SELECTORS_LEVEL4)
</span><span class="cx">                 if (const CSSSelectorList* selectorList = selector-&gt;selectorList()) {
</span><del>-                    if (!matchSelectorList(context, *element, *selectorList))
</del><ins>+                    unsigned selectorListSpecificity;
+                    if (matchSelectorList(context, *element, *selectorList, selectorListSpecificity))
+                        specificity = CSSSelector::addSpecificities(specificity, selectorListSpecificity);
+                    else
</ins><span class="cx">                         return false;
</span><span class="cx">                 }
</span><span class="cx"> #endif
</span><span class="lines">@@ -759,7 +762,8 @@
</span><span class="cx">                         if (context.resolvingMode == Mode::ResolvingStyle)
</span><span class="cx">                             sibling-&gt;setAffectsNextSiblingElementStyle();
</span><span class="cx"> 
</span><del>-                        if (matchSelectorList(context, *sibling, *selectorList))
</del><ins>+                        unsigned ignoredSpecificity;
+                        if (matchSelectorList(context, *sibling, *selectorList, ignoredSpecificity))
</ins><span class="cx">                             ++count;
</span><span class="cx">                     }
</span><span class="cx">                 } else
</span><span class="lines">@@ -796,7 +800,10 @@
</span><span class="cx"> 
</span><span class="cx"> #if ENABLE(CSS_SELECTORS_LEVEL4)
</span><span class="cx">                 if (const CSSSelectorList* selectorList = selector-&gt;selectorList()) {
</span><del>-                    if (!matchSelectorList(context, *element, *selectorList))
</del><ins>+                    unsigned selectorListSpecificity;
+                    if (matchSelectorList(context, *element, *selectorList, selectorListSpecificity))
+                        specificity = CSSSelector::addSpecificities(specificity, selectorListSpecificity);
+                    else
</ins><span class="cx">                         return false;
</span><span class="cx"> 
</span><span class="cx">                     if (context.resolvingMode == Mode::ResolvingStyle) {
</span><span class="lines">@@ -812,7 +819,8 @@
</span><span class="cx"> #if ENABLE(CSS_SELECTORS_LEVEL4)
</span><span class="cx">                 if (const CSSSelectorList* selectorList = selector-&gt;selectorList()) {
</span><span class="cx">                     for (Element* sibling = ElementTraversal::nextSibling(element); sibling; sibling = ElementTraversal::nextSibling(sibling)) {
</span><del>-                        if (matchSelectorList(context, *sibling, *selectorList))
</del><ins>+                        unsigned ignoredSpecificity;
+                        if (matchSelectorList(context, *sibling, *selectorList, ignoredSpecificity))
</ins><span class="cx">                             ++count;
</span><span class="cx">                     }
</span><span class="cx">                 } else
</span><span class="lines">@@ -1029,8 +1037,11 @@
</span><span class="cx">     return true;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-bool SelectorChecker::matchSelectorList(const CheckingContextWithStatus&amp; baseContext, Element&amp; element, const CSSSelectorList&amp; selectorList) const
</del><ins>+bool SelectorChecker::matchSelectorList(const CheckingContextWithStatus&amp; baseContext, Element&amp; element, const CSSSelectorList&amp; selectorList, unsigned&amp; specificity) const
</ins><span class="cx"> {
</span><ins>+    specificity = 0;
+    bool hasMatchedAnything = false;
+
</ins><span class="cx">     for (const CSSSelector* subselector = selectorList.first(); subselector; subselector = CSSSelectorList::next(subselector)) {
</span><span class="cx">         CheckingContextWithStatus subcontext(baseContext);
</span><span class="cx">         subcontext.element = &amp;element;
</span><span class="lines">@@ -1042,10 +1053,12 @@
</span><span class="cx">         unsigned localSpecificity = 0;
</span><span class="cx">         if (matchRecursively(subcontext, ignoreDynamicPseudo, localSpecificity).match == Match::SelectorMatches) {
</span><span class="cx">             ASSERT(!ignoreDynamicPseudo);
</span><del>-            return true;
</del><ins>+
+            hasMatchedAnything = true;
+            specificity = std::max(specificity, localSpecificity);
</ins><span class="cx">         }
</span><span class="cx">     }
</span><del>-    return false;
</del><ins>+    return hasMatchedAnything;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> bool SelectorChecker::checkScrollbarPseudoClass(const CheckingContextWithStatus&amp; context, const CSSSelector* selector) const
</span></span></pre></div>
<a id="trunkSourceWebCorecssSelectorCheckerh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/SelectorChecker.h (176622 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/SelectorChecker.h        2014-12-02 02:21:16 UTC (rev 176622)
+++ trunk/Source/WebCore/css/SelectorChecker.h        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -109,7 +109,7 @@
</span><span class="cx"> private:
</span><span class="cx">     MatchResult matchRecursively(const CheckingContextWithStatus&amp;, PseudoIdSet&amp;, unsigned&amp; specificity) const;
</span><span class="cx">     bool checkOne(const CheckingContextWithStatus&amp;, PseudoIdSet&amp;, MatchType&amp;, unsigned&amp; specificity) const;
</span><del>-    bool matchSelectorList(const CheckingContextWithStatus&amp;, Element&amp;, const CSSSelectorList&amp;) const;
</del><ins>+    bool matchSelectorList(const CheckingContextWithStatus&amp;, Element&amp;, const CSSSelectorList&amp;, unsigned&amp; specificity) const;
</ins><span class="cx"> 
</span><span class="cx">     bool checkScrollbarPseudoClass(const CheckingContextWithStatus&amp;, const CSSSelector*) const;
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebCorecssjitSelectorCompilercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/cssjit/SelectorCompiler.cpp (176622 => 176623)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/cssjit/SelectorCompiler.cpp        2014-12-02 02:21:16 UTC (rev 176622)
+++ trunk/Source/WebCore/cssjit/SelectorCompiler.cpp        2014-12-02 02:29:53 UTC (rev 176623)
</span><span class="lines">@@ -636,6 +636,9 @@
</span><span class="cx">                 if (selectorContext != SelectorContext::QuerySelector)
</span><span class="cx">                     globalFunctionType = FunctionType::SelectorCheckerWithCheckingContext;
</span><span class="cx"> 
</span><ins>+                unsigned firstFragmentListSpecificity = 0;
+                bool firstFragmentListSpecificitySet = false;
+
</ins><span class="cx">                 for (const CSSSelector* subselector = selectorList-&gt;first(); subselector; subselector = CSSSelectorList::next(subselector)) {
</span><span class="cx">                     SelectorFragmentList selectorFragments;
</span><span class="cx">                     VisitedMode ignoreVisitedMode = VisitedMode::None;
</span><span class="lines">@@ -651,8 +654,19 @@
</span><span class="cx">                     case FunctionType::CannotCompile:
</span><span class="cx">                         return FunctionType::CannotCompile;
</span><span class="cx">                     }
</span><ins>+
+                    if (firstFragmentListSpecificitySet) {
+                        // The CSS JIT does not handle dynamic specificity yet.
+                        if (selectorContext == SelectorContext::RuleCollector &amp;&amp; selectorFragments.staticSpecificity != firstFragmentListSpecificity)
+                            return FunctionType::CannotCompile;
+                    } else {
+                        firstFragmentListSpecificitySet = true;
+                        firstFragmentListSpecificity = selectorFragments.staticSpecificity;
+                    }
+
</ins><span class="cx">                     globalFunctionType = mostRestrictiveFunctionType(globalFunctionType, functionType);
</span><span class="cx">                 }
</span><ins>+                internalSpecificity = firstFragmentListSpecificity;
</ins><span class="cx">                 fragment.nthChildOfFilters.append(nthChildOfSelectorInfo);
</span><span class="cx">                 return globalFunctionType;
</span><span class="cx">             }
</span></span></pre>
</div>
</div>

</body>
</html>