<!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>[169360] 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/169360">169360</a></dd>
<dt>Author</dt> <dd>benjamin@webkit.org</dd>
<dt>Date</dt> <dd>2014-05-26 14:45:17 -0700 (Mon, 26 May 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Fix the quirks mode selector matching of the pseudo classes :hover and :active
https://bugs.webkit.org/show_bug.cgi?id=133063
Reviewed by Antti Koivisto.
Source/WebCore:
Our implementation of the quirks mode of :active and :hover was very wrong. The only
thing it was doing is verify the pseudo class is not the first selector of a fragment
(which was conveniently the only thing that was tested :)).
Since those pseudo class were only checking for the order of the filters, something like
#target:hover
would succeed because :hover is not the first simple selector, while
:hover#target
would fail.
That behavior is also a problem for the CSS JIT as it is an implementation detail of SelectorChecker
and compiling something like that with our out-of-order matching would be nonsense.
This patch update the implementation to follow http://quirks.spec.whatwg.org/#the-:active-and-:hover-quirk
Basically, the only cases that do not work in quirks mode are selectors composed only of "*, :hover and :active".
To implement this behavior, I needed to be able to inspect a complete selector fragment, including
what is before and after :hover/:active.
To do that, I replaced the boolean isSubSelector by a pointer to the first selector of the fragment.
When we need to match :active/:hover in quirks mode, we just go over all the selectors in the fragment
to find one of the qualifying match type.
Tests: fast/selectors/active-hover-quirks.html
fast/selectors/active-quirks.html
fast/selectors/hover-quirks.html
* css/SelectorChecker.cpp:
(WebCore::SelectorChecker::matchRecursively):
(WebCore::canMatchHoverOrActiveInQuirksMode):
(WebCore::SelectorChecker::checkOne):
* css/SelectorChecker.h:
(WebCore::SelectorChecker::SelectorCheckingContext::SelectorCheckingContext):
LayoutTests:
The test coverage of :hover and :active was extremly poor.
Those new tests add coverage for the cases fixed by this patch.
* fast/selectors/active-hover-quirks-expected.txt: Added.
* fast/selectors/active-hover-quirks.html: Added.
* fast/selectors/active-hover-strict-expected.txt: Added.
* fast/selectors/active-hover-strict.html: Added.
* fast/selectors/active-quirks-expected.txt: Added.
* fast/selectors/active-quirks.html: Added.
* fast/selectors/active-strict-expected.txt: Added.
* fast/selectors/active-strict.html: Added.
* fast/selectors/hover-quirks-expected.txt: Added.
* fast/selectors/hover-quirks.html: Added.
* fast/selectors/hover-strict-expected.txt: Added.
* fast/selectors/hover-strict.html: Added.
* fast/selectors/resources/hover-active-quirks-utility.js: Added.
* selectors/resources/hover-active-strict-utility.js: 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="#trunkSourceWebCorecssSelectorCheckercpp">trunk/Source/WebCore/css/SelectorChecker.cpp</a></li>
<li><a href="#trunkSourceWebCorecssSelectorCheckerh">trunk/Source/WebCore/css/SelectorChecker.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastselectorsactivehoverquirksexpectedtxt">trunk/LayoutTests/fast/selectors/active-hover-quirks-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsactivehoverquirkshtml">trunk/LayoutTests/fast/selectors/active-hover-quirks.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsactivehoverstrictexpectedtxt">trunk/LayoutTests/fast/selectors/active-hover-strict-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsactivehoverstricthtml">trunk/LayoutTests/fast/selectors/active-hover-strict.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsactivequirksexpectedtxt">trunk/LayoutTests/fast/selectors/active-quirks-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsactivequirkshtml">trunk/LayoutTests/fast/selectors/active-quirks.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsactivestrictexpectedtxt">trunk/LayoutTests/fast/selectors/active-strict-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsactivestricthtml">trunk/LayoutTests/fast/selectors/active-strict.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorshoverquirksexpectedtxt">trunk/LayoutTests/fast/selectors/hover-quirks-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorshoverquirkshtml">trunk/LayoutTests/fast/selectors/hover-quirks.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorshoverstrictexpectedtxt">trunk/LayoutTests/fast/selectors/hover-strict-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorshoverstricthtml">trunk/LayoutTests/fast/selectors/hover-strict.html</a></li>
<li>trunk/LayoutTests/fast/selectors/resources/</li>
<li><a href="#trunkLayoutTestsfastselectorsresourceshoveractivequirksutilityjs">trunk/LayoutTests/fast/selectors/resources/hover-active-quirks-utility.js</a></li>
<li><a href="#trunkLayoutTestsfastselectorsresourceshoveractivestrictutilityjs">trunk/LayoutTests/fast/selectors/resources/hover-active-strict-utility.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (169359 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-05-26 20:18:25 UTC (rev 169359)
+++ trunk/LayoutTests/ChangeLog 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -1,3 +1,28 @@
</span><ins>+2014-05-26 Benjamin Poulain <benjamin@webkit.org>
+
+ Fix the quirks mode selector matching of the pseudo classes :hover and :active
+ https://bugs.webkit.org/show_bug.cgi?id=133063
+
+ Reviewed by Antti Koivisto.
+
+ The test coverage of :hover and :active was extremly poor.
+ Those new tests add coverage for the cases fixed by this patch.
+
+ * fast/selectors/active-hover-quirks-expected.txt: Added.
+ * fast/selectors/active-hover-quirks.html: Added.
+ * fast/selectors/active-hover-strict-expected.txt: Added.
+ * fast/selectors/active-hover-strict.html: Added.
+ * fast/selectors/active-quirks-expected.txt: Added.
+ * fast/selectors/active-quirks.html: Added.
+ * fast/selectors/active-strict-expected.txt: Added.
+ * fast/selectors/active-strict.html: Added.
+ * fast/selectors/hover-quirks-expected.txt: Added.
+ * fast/selectors/hover-quirks.html: Added.
+ * fast/selectors/hover-strict-expected.txt: Added.
+ * fast/selectors/hover-strict.html: Added.
+ * fast/selectors/resources/hover-active-quirks-utility.js: Added.
+ * selectors/resources/hover-active-strict-utility.js: Added.
+
</ins><span class="cx"> 2014-05-26 Darin Adler <darin@apple.com>
</span><span class="cx">
</span><span class="cx"> Class name matching should use ASCII case-insensitive matching, not Unicode case folding
</span></span></pre></div>
<a id="trunkLayoutTestsfastselectorsactivehoverquirksexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/active-hover-quirks-expected.txt (0 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/active-hover-quirks-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/active-hover-quirks-expected.txt 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -0,0 +1,101 @@
</span><ins>+Test the :active:hover selector when the document is in quirks mode. To test manually, move the cursor over the green rectangle and press a mouse button until the test is finished.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS document.querySelectorAll(":active:hover").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll("*:active:hover").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":active:hover:hover").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":hover:active:hover").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":hover:active:hover:hover").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":active:hover:active").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":active:active:hover").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":active:active:hover:active").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll("div:active:hover").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("#target:active:hover").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover#target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("#target:active:hover#target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass:active:hover").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover.aClass").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass:active:hover.otherClass").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id]:active:hover[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id=target]:active:hover[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id^=ta]:active:hover[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id$=et]:active:hover[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id*=rg]:active:hover[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id~=target]:active:hover[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id|=target]:active:hover[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(1):active:hover").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover:nth-child(1)").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(1):active:hover:nth-child(1)").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):active:hover > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover:nth-child(n) > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):active:hover:nth-child(n) > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):active:hover #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover:nth-child(n) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):active:hover:nth-child(n) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":-webkit-any(:active:hover) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsactivehoverquirkshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/active-hover-quirks.html (0 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/active-hover-quirks.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/active-hover-quirks.html 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -0,0 +1,33 @@
</span><ins>+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<script src="resources/hover-active-quirks-utility.js"></script>
+<style id="testStyle">
+</style>
+</head>
+<body>
+<div id="target" class="aClass otherClass" webkit="rocks" style="background-color:green; width:200px; height:200px;"></div>
+<div id="console"></div>
+</div>
+</body>
+<script>
+description('Test the :active:hover selector when the document is in quirks mode. To test manually, move the cursor over the green rectangle and press a mouse button until the test is finished.');
+
+
+if (window.eventSender) {
+ var target = document.getElementById('target');
+ var x = target.offsetLeft + target.offsetWidth / 2;
+ var y = target.offsetTop + target.offsetHeight / 2;
+ eventSender.mouseMoveTo(x, y);
+ eventSender.mouseDown();
+ test(':active:hover');
+ eventSender.mouseUp()
+} else {
+ // For some reasons, the test does not work well without the timeout on Firefox.
+ var target = document.getElementById('target');
+ target.addEventListener('mousedown', function() { setTimeout(test, 250, ':active:hover'); });
+}
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsactivehoverstrictexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/active-hover-strict-expected.txt (0 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/active-hover-strict-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/active-hover-strict-expected.txt 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -0,0 +1,89 @@
</span><ins>+Test the :active:hover selector when the document is in strict mode. To test manually, move the cursor over the green rectangle and press a mouse button until the test is finished.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS document.querySelectorAll("div:active:hover").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("#target:active:hover").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover#target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("#target:active:hover#target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass:active:hover").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover.aClass").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass:active:hover.otherClass").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id]:active:hover[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id=target]:active:hover[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id^=ta]:active:hover[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id$=et]:active:hover[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id*=rg]:active:hover[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id~=target]:active:hover[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id|=target]:active:hover[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(1):active:hover").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover:nth-child(1)").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(1):active:hover:nth-child(1)").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):active:hover > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover:nth-child(n) > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):active:hover:nth-child(n) > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):active:hover #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover:nth-child(n) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):active:hover:nth-child(n) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":-webkit-any(:active:hover) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:hover").length is 3
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("*:active:hover").length is 3
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsactivehoverstricthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/active-hover-strict.html (0 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/active-hover-strict.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/active-hover-strict.html 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -0,0 +1,33 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<script src="resources/hover-active-strict-utility.js"></script>
+<style id="testStyle">
+</style>
+</head>
+<body>
+<div id="target" class="aClass otherClass" webkit="rocks" style="background-color:green; width:200px; height:200px;"></div>
+<div id="console"></div>
+</div>
+</body>
+<script>
+description('Test the :active:hover selector when the document is in strict mode. To test manually, move the cursor over the green rectangle and press a mouse button until the test is finished.');
+
+if (window.eventSender) {
+ var target = document.getElementById('target');
+ var x = target.offsetLeft + target.offsetWidth / 2;
+ var y = target.offsetTop + target.offsetHeight / 2;
+ eventSender.mouseMoveTo(x, y);
+ eventSender.mouseDown();
+ test(':active:hover');
+ eventSender.mouseUp()
+} else {
+ // For some reasons, the test does not work well without the timeout on Firefox.
+ var target = document.getElementById('target');
+ target.addEventListener('mousedown', function() { setTimeout(test, 250, ':active:hover'); });
+}
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsactivequirksexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/active-quirks-expected.txt (0 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/active-quirks-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/active-quirks-expected.txt 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -0,0 +1,101 @@
</span><ins>+Test the :active selector when the document is in quirks mode. To test manually, move the cursor over the green rectangle and press a mouse button until the test is finished.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS document.querySelectorAll(":active").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll("*:active").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":active:hover").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":hover:active").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":hover:active:hover").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":active:active").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":active:active").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":active:active:active").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll("div:active").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("#target:active").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active#target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("#target:active#target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass:active").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active.aClass").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass:active.otherClass").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id]:active[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id=target]:active[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id^=ta]:active[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id$=et]:active[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id*=rg]:active[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id~=target]:active[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id|=target]:active[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(1):active").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:nth-child(1)").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(1):active:nth-child(1)").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):active > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:nth-child(n) > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):active:nth-child(n) > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):active #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:nth-child(n) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):active:nth-child(n) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":-webkit-any(:active) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsactivequirkshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/active-quirks.html (0 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/active-quirks.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/active-quirks.html 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -0,0 +1,33 @@
</span><ins>+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<script src="resources/hover-active-quirks-utility.js"></script>
+<style id="testStyle">
+</style>
+</head>
+<body>
+<div id="target" class="aClass otherClass" webkit="rocks" style="background-color:green; width:200px; height:200px;"></div>
+<div id="console"></div>
+</div>
+</body>
+<script>
+description('Test the :active selector when the document is in quirks mode. To test manually, move the cursor over the green rectangle and press a mouse button until the test is finished.');
+
+
+if (window.eventSender) {
+ var target = document.getElementById('target');
+ var x = target.offsetLeft + target.offsetWidth / 2;
+ var y = target.offsetTop + target.offsetHeight / 2;
+ eventSender.mouseMoveTo(x, y);
+ eventSender.mouseDown();
+ test(':active');
+ eventSender.mouseUp()
+} else {
+ // For some reasons, the test does not work well without the timeout on Firefox.
+ var target = document.getElementById('target');
+ target.addEventListener('mousedown', function() { setTimeout(test, 250, ':active'); });
+}
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsactivestrictexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/active-strict-expected.txt (0 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/active-strict-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/active-strict-expected.txt 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -0,0 +1,89 @@
</span><ins>+Test the :active selector when the document is in strict mode. To test manually, move the cursor over the green rectangle and press a mouse button until the test is finished.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS document.querySelectorAll("div:active").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("#target:active").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active#target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("#target:active#target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass:active").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active.aClass").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass:active.otherClass").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id]:active[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id=target]:active[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id^=ta]:active[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id$=et]:active[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id*=rg]:active[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id~=target]:active[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id|=target]:active[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(1):active").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:nth-child(1)").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(1):active:nth-child(1)").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):active > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:nth-child(n) > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):active:nth-child(n) > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):active #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active:nth-child(n) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):active:nth-child(n) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":-webkit-any(:active) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":active").length is 3
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("*:active").length is 3
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsactivestricthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/active-strict.html (0 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/active-strict.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/active-strict.html 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -0,0 +1,33 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<script src="resources/hover-active-strict-utility.js"></script>
+<style id="testStyle">
+</style>
+</head>
+<body>
+<div id="target" class="aClass otherClass" webkit="rocks" style="background-color:green; width:200px; height:200px;"></div>
+<div id="console"></div>
+</div>
+</body>
+<script>
+description('Test the :active selector when the document is in strict mode. To test manually, move the cursor over the green rectangle and press a mouse button until the test is finished.');
+
+if (window.eventSender) {
+ var target = document.getElementById('target');
+ var x = target.offsetLeft + target.offsetWidth / 2;
+ var y = target.offsetTop + target.offsetHeight / 2;
+ eventSender.mouseMoveTo(x, y);
+ eventSender.mouseDown();
+ test(':active');
+ eventSender.mouseUp()
+} else {
+ // For some reasons, the test does not work well without the timeout on Firefox.
+ var target = document.getElementById('target');
+ target.addEventListener('mousedown', function() { setTimeout(test, 250, ':active'); });
+}
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorshoverquirksexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/hover-quirks-expected.txt (0 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/hover-quirks-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/hover-quirks-expected.txt 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -0,0 +1,101 @@
</span><ins>+Test the :hover selector when the document is in quirks mode. To test manually, move the cursor over the green rectangle and reload the page.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS document.querySelectorAll(":hover").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll("*:hover").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":hover:hover").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":hover:hover").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":hover:hover:hover").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":hover:active").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":active:hover").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll(":active:hover:active").length is 0
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(1, 2, 3)"
+PASS document.querySelectorAll("div:hover").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("#target:hover").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover#target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("#target:hover#target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass:hover").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover.aClass").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass:hover.otherClass").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id]:hover[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id=target]:hover[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id^=ta]:hover[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id$=et]:hover[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id*=rg]:hover[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id~=target]:hover[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id|=target]:hover[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(1):hover").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover:nth-child(1)").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(1):hover:nth-child(1)").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):hover > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover:nth-child(n) > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):hover:nth-child(n) > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):hover #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover:nth-child(n) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):hover:nth-child(n) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":-webkit-any(:hover) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorshoverquirkshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/hover-quirks.html (0 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/hover-quirks.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/hover-quirks.html 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -0,0 +1,29 @@
</span><ins>+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<script src="resources/hover-active-quirks-utility.js"></script>
+<style id="testStyle">
+</style>
+</head>
+<body>
+<div id="target" class="aClass otherClass" webkit="rocks" style="background-color:green; width:200px; height:200px;"></div>
+<div id="console"></div>
+</div>
+</body>
+<script>
+description('Test the :hover selector when the document is in quirks mode. To test manually, move the cursor over the green rectangle and reload the page.');
+
+if (window.eventSender) {
+ var target = document.getElementById('target');
+ var x = target.offsetLeft + target.offsetWidth / 2;
+ var y = target.offsetTop + target.offsetHeight / 2;
+ eventSender.mouseMoveTo(x, y);
+ test(':hover');
+} else {
+ // To test manually, wait a bit to make sure the browers has updated its state, then run the tests.
+ setTimeout(test, 250, ':hover');
+}
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorshoverstrictexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/hover-strict-expected.txt (0 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/hover-strict-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/hover-strict-expected.txt 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -0,0 +1,89 @@
</span><ins>+Test the :hover selector when the document is in strict mode. To test manually, move the cursor over the green rectangle and reload the page.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS document.querySelectorAll("div:hover").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("#target:hover").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover#target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("#target:hover#target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass:hover").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover.aClass").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass:hover.otherClass").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id]:hover[webkit]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id=target]:hover[webkit=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id^=ta]:hover[webkit^=ro]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id$=et]:hover[webkit$=ks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id*=rg]:hover[webkit*=ck]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id~=target]:hover[webkit~=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(".aClass[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("[id|=target]:hover[webkit|=rocks]").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(1):hover").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover:nth-child(1)").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(1):hover:nth-child(1)").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):hover > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover:nth-child(n) > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):hover:nth-child(n) > #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):hover #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover:nth-child(n) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":nth-child(n):hover:nth-child(n) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":-webkit-any(:hover) #target").length is 1
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll(":hover").length is 3
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS document.querySelectorAll("*:hover").length is 3
+PASS getComputedStyle(document.getElementById("target")).color is "rgb(4, 5, 6)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorshoverstricthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/hover-strict.html (0 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/hover-strict.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/hover-strict.html 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -0,0 +1,30 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<script src="resources/hover-active-strict-utility.js"></script>
+<style id="testStyle">
+</style>
+</head>
+<body>
+<div id="target" class="aClass otherClass" webkit="rocks" style="background-color:green; width:200px; height:200px;"></div>
+<div id="console"></div>
+</div>
+</body>
+<script>
+description('Test the :hover selector when the document is in strict mode. To test manually, move the cursor over the green rectangle and reload the page.');
+
+if (window.eventSender) {
+ var target = document.getElementById('target');
+ var x = target.offsetLeft + target.offsetWidth / 2;
+ var y = target.offsetTop + target.offsetHeight / 2;
+ eventSender.mouseMoveTo(x, y);
+ test(':hover');
+} else {
+ // To test manually, wait a bit to make sure the browers has updated its state, then run the tests.
+ setTimeout(test, 250, ':hover');
+}
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsresourceshoveractivequirksutilityjs"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/resources/hover-active-quirks-utility.js (0 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/resources/hover-active-quirks-utility.js (rev 0)
+++ trunk/LayoutTests/fast/selectors/resources/hover-active-quirks-utility.js 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -0,0 +1,93 @@
</span><ins>+var testCases = [
+ // The universal selector does not qualify the pseudo class.
+ ["PLACEHOLDER", false],
+ ["*PLACEHOLDER", false],
+
+ // Having :hover or :active does not qualify the pseudo class.
+ ["PLACEHOLDER:hover", false],
+ [":hoverPLACEHOLDER", false],
+ [":hoverPLACEHOLDER:hover", false],
+ ["PLACEHOLDER:active", false],
+ [":activePLACEHOLDER", false],
+ [":activePLACEHOLDER:active", false],
+
+ // Tag qualify the pseudo class.
+ ["divPLACEHOLDER", true],
+
+ // Id qualify the pseudo class.
+ ["#targetPLACEHOLDER", true],
+ ["PLACEHOLDER#target", true],
+ ["#targetPLACEHOLDER#target", true],
+
+ // Class qualify the pseudo class.
+ [".aClassPLACEHOLDER", true],
+ ["PLACEHOLDER.aClass", true],
+ [".aClassPLACEHOLDER.otherClass", true],
+
+ // Any attribute filter qualify the pseudo class.
+ [".aClass[webkit]", true],
+ ["PLACEHOLDER[webkit]", true],
+ ["[id]PLACEHOLDER[webkit]", true],
+
+ [".aClass[webkit=rocks]", true],
+ ["PLACEHOLDER[webkit=rocks]", true],
+ ["[id=target]PLACEHOLDER[webkit=rocks]", true],
+
+ [".aClass[webkit^=ro]", true],
+ ["PLACEHOLDER[webkit^=ro]", true],
+ ["[id^=ta]PLACEHOLDER[webkit^=ro]", true],
+
+ [".aClass[webkit$=ks]", true],
+ ["PLACEHOLDER[webkit$=ks]", true],
+ ["[id$=et]PLACEHOLDER[webkit$=ks]", true],
+
+ [".aClass[webkit*=ck]", true],
+ ["PLACEHOLDER[webkit*=ck]", true],
+ ["[id*=rg]PLACEHOLDER[webkit*=ck]", true],
+
+ [".aClass[webkit~=rocks]", true],
+ ["PLACEHOLDER[webkit~=rocks]", true],
+ ["[id~=target]PLACEHOLDER[webkit~=rocks]", true],
+
+ [".aClass[webkit|=rocks]", true],
+ ["PLACEHOLDER[webkit|=rocks]", true],
+ ["[id|=target]PLACEHOLDER[webkit|=rocks]", true],
+
+ // A pseudo-class other than :active/:hover qualify the pseudo class.
+ [":nth-child(1)PLACEHOLDER", true],
+ ["PLACEHOLDER:nth-child(1)", true],
+ [":nth-child(1)PLACEHOLDER:nth-child(1)", true],
+ // Same with child.
+ [":nth-child(n)PLACEHOLDER > #target", true],
+ ["PLACEHOLDER:nth-child(n) > #target", true],
+ [":nth-child(n)PLACEHOLDER:nth-child(n) > #target", true],
+ // Same with descendant.
+ [":nth-child(n)PLACEHOLDER #target", true],
+ ["PLACEHOLDER:nth-child(n) #target", true],
+ [":nth-child(n)PLACEHOLDER:nth-child(n) #target", true],
+
+ [":-webkit-any(PLACEHOLDER) #target", true],
+];
+
+function testQuerySelector(selector, shouldMatch) {
+ shouldBe('document.querySelectorAll("' + selector + '").length', shouldMatch? '1' : '0');
+}
+
+function testStyling(selector, shouldMatch) {
+ var testStyle = document.getElementById('testStyle');
+ var noMatchStyle = "rgb(1, 2, 3)";
+ var matchStyle = "rgb(4, 5, 6)"
+ testStyle.textContent = "#target { color:" + noMatchStyle + " } " + selector + " { color:" + matchStyle + " !important }";
+
+ shouldBeEqualToString('getComputedStyle(document.getElementById("target")).color', shouldMatch ? matchStyle : noMatchStyle);
+
+ testStyle.textContent = "";
+}
+
+function test(pseudoClass) {
+ for (var i = 0, length = testCases.length; i < length; ++i) {
+ var selector = testCases[i][0].replace('PLACEHOLDER', pseudoClass)
+ testQuerySelector(selector, testCases[i][1]);
+ testStyling(selector, testCases[i][1]);
+ }
+}
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsresourceshoveractivestrictutilityjs"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/resources/hover-active-strict-utility.js (0 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/resources/hover-active-strict-utility.js (rev 0)
+++ trunk/LayoutTests/fast/selectors/resources/hover-active-strict-utility.js 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -0,0 +1,89 @@
</span><ins>+// In strict mode, there is no restriction on when :hover or :active can match.
+var testCases = [
+ // Tag name.
+ ["divPLACEHOLDER", true],
+
+ // Id.
+ ["#targetPLACEHOLDER", true],
+ ["PLACEHOLDER#target", true],
+ ["#targetPLACEHOLDER#target", true],
+
+ // Class name.
+ [".aClassPLACEHOLDER", true],
+ ["PLACEHOLDER.aClass", true],
+ [".aClassPLACEHOLDER.otherClass", true],
+
+ // Attribute filter.
+ [".aClass[webkit]", true],
+ ["PLACEHOLDER[webkit]", true],
+ ["[id]PLACEHOLDER[webkit]", true],
+
+ [".aClass[webkit=rocks]", true],
+ ["PLACEHOLDER[webkit=rocks]", true],
+ ["[id=target]PLACEHOLDER[webkit=rocks]", true],
+
+ [".aClass[webkit^=ro]", true],
+ ["PLACEHOLDER[webkit^=ro]", true],
+ ["[id^=ta]PLACEHOLDER[webkit^=ro]", true],
+
+ [".aClass[webkit$=ks]", true],
+ ["PLACEHOLDER[webkit$=ks]", true],
+ ["[id$=et]PLACEHOLDER[webkit$=ks]", true],
+
+ [".aClass[webkit*=ck]", true],
+ ["PLACEHOLDER[webkit*=ck]", true],
+ ["[id*=rg]PLACEHOLDER[webkit*=ck]", true],
+
+ [".aClass[webkit~=rocks]", true],
+ ["PLACEHOLDER[webkit~=rocks]", true],
+ ["[id~=target]PLACEHOLDER[webkit~=rocks]", true],
+
+ [".aClass[webkit|=rocks]", true],
+ ["PLACEHOLDER[webkit|=rocks]", true],
+ ["[id|=target]PLACEHOLDER[webkit|=rocks]", true],
+
+ // Pseudo-class other than :active/:hover.
+ [":nth-child(1)PLACEHOLDER", true],
+ ["PLACEHOLDER:nth-child(1)", true],
+ [":nth-child(1)PLACEHOLDER:nth-child(1)", true],
+ // Same with child relation.
+ [":nth-child(n)PLACEHOLDER > #target", true],
+ ["PLACEHOLDER:nth-child(n) > #target", true],
+ [":nth-child(n)PLACEHOLDER:nth-child(n) > #target", true],
+ // Same with descendant relation.
+ [":nth-child(n)PLACEHOLDER #target", true],
+ ["PLACEHOLDER:nth-child(n) #target", true],
+ [":nth-child(n)PLACEHOLDER:nth-child(n) #target", true],
+
+ [":-webkit-any(PLACEHOLDER) #target", true],
+];
+
+function testQuerySelector(selector, shouldMatch) {
+ shouldBe('document.querySelectorAll("' + selector + '").length', shouldMatch? '1' : '0');
+}
+
+function testStyling(selector, shouldMatch) {
+ var testStyle = document.getElementById('testStyle');
+ var noMatchStyle = "rgb(1, 2, 3)";
+ var matchStyle = "rgb(4, 5, 6)"
+ testStyle.textContent = "#target { color:" + noMatchStyle + " } " + selector + " { color:" + matchStyle + " !important }";
+
+ shouldBeEqualToString('getComputedStyle(document.getElementById("target")).color', shouldMatch ? matchStyle : noMatchStyle);
+
+ testStyle.textContent = "";
+}
+
+function test(pseudoClass) {
+ for (var i = 0, length = testCases.length; i < length; ++i) {
+ var selector = testCases[i][0].replace('PLACEHOLDER', pseudoClass)
+ testQuerySelector(selector, testCases[i][1]);
+ testStyling(selector, testCases[i][1]);
+ }
+
+ // In strict mode, no tag name or the universal selector also work. This is tested separately because those selectors match
+ // every ancestor of the target.
+ shouldBe('document.querySelectorAll("' + pseudoClass + '").length', '3');
+ testStyling(pseudoClass, true);
+ shouldBe('document.querySelectorAll("*' + pseudoClass + '").length', '3');
+ testStyling('*' + pseudoClass, true);
+}
</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 (169359 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-05-26 20:18:25 UTC (rev 169359)
+++ trunk/Source/WebCore/ChangeLog 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -1,3 +1,43 @@
</span><ins>+2014-05-26 Benjamin Poulain <benjamin@webkit.org>
+
+ Fix the quirks mode selector matching of the pseudo classes :hover and :active
+ https://bugs.webkit.org/show_bug.cgi?id=133063
+
+ Reviewed by Antti Koivisto.
+
+ Our implementation of the quirks mode of :active and :hover was very wrong. The only
+ thing it was doing is verify the pseudo class is not the first selector of a fragment
+ (which was conveniently the only thing that was tested :)).
+
+ Since those pseudo class were only checking for the order of the filters, something like
+ #target:hover
+ would succeed because :hover is not the first simple selector, while
+ :hover#target
+ would fail.
+
+ That behavior is also a problem for the CSS JIT as it is an implementation detail of SelectorChecker
+ and compiling something like that with our out-of-order matching would be nonsense.
+
+ This patch update the implementation to follow http://quirks.spec.whatwg.org/#the-:active-and-:hover-quirk
+ Basically, the only cases that do not work in quirks mode are selectors composed only of "*, :hover and :active".
+
+ To implement this behavior, I needed to be able to inspect a complete selector fragment, including
+ what is before and after :hover/:active.
+ To do that, I replaced the boolean isSubSelector by a pointer to the first selector of the fragment.
+ When we need to match :active/:hover in quirks mode, we just go over all the selectors in the fragment
+ to find one of the qualifying match type.
+
+ Tests: fast/selectors/active-hover-quirks.html
+ fast/selectors/active-quirks.html
+ fast/selectors/hover-quirks.html
+
+ * css/SelectorChecker.cpp:
+ (WebCore::SelectorChecker::matchRecursively):
+ (WebCore::canMatchHoverOrActiveInQuirksMode):
+ (WebCore::SelectorChecker::checkOne):
+ * css/SelectorChecker.h:
+ (WebCore::SelectorChecker::SelectorCheckingContext::SelectorCheckingContext):
+
</ins><span class="cx"> 2014-05-26 Zalan Bujtas <zalan@apple.com>
</span><span class="cx">
</span><span class="cx"> Split the call to adjustForLocalZoom out into a separate expression.
</span></span></pre></div>
<a id="trunkSourceWebCorecssSelectorCheckercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/SelectorChecker.cpp (169359 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/SelectorChecker.cpp 2014-05-26 20:18:25 UTC (rev 169359)
+++ trunk/Source/WebCore/css/SelectorChecker.cpp 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -192,7 +192,7 @@
</span><span class="cx"> return SelectorFailsCompletely;
</span><span class="cx">
</span><span class="cx"> // Disable :visited matching when we see the first link or try to match anything else than an ancestors.
</span><del>- if (!context.isSubSelector && (context.element->isLink() || (relation != CSSSelector::Descendant && relation != CSSSelector::Child)))
</del><ins>+ if (context.firstSelectorOfTheFragment == context.selector && (context.element->isLink() || (relation != CSSSelector::Descendant && relation != CSSSelector::Child)))
</ins><span class="cx"> nextContext.visitedMatchType = VisitedMatchDisabled;
</span><span class="cx">
</span><span class="cx"> nextContext.pseudoId = NOPSEUDO;
</span><span class="lines">@@ -201,7 +201,7 @@
</span><span class="cx"> switch (relation) {
</span><span class="cx"> case CSSSelector::Descendant:
</span><span class="cx"> nextContext.element = context.element->parentElement();
</span><del>- nextContext.isSubSelector = false;
</del><ins>+ nextContext.firstSelectorOfTheFragment = nextContext.selector;
</ins><span class="cx"> nextContext.elementStyle = 0;
</span><span class="cx"> for (; nextContext.element; nextContext.element = nextContext.element->parentElement()) {
</span><span class="cx"> Match match = this->matchRecursively(nextContext, ignoreDynamicPseudo);
</span><span class="lines">@@ -215,7 +215,7 @@
</span><span class="cx"> nextContext.element = context.element->parentElement();
</span><span class="cx"> if (!nextContext.element)
</span><span class="cx"> return SelectorFailsCompletely;
</span><del>- nextContext.isSubSelector = false;
</del><ins>+ nextContext.firstSelectorOfTheFragment = nextContext.selector;
</ins><span class="cx"> nextContext.elementStyle = nullptr;
</span><span class="cx"> Match match = matchRecursively(nextContext, ignoreDynamicPseudo);
</span><span class="cx"> if (match == SelectorMatches || match == SelectorFailsCompletely)
</span><span class="lines">@@ -231,7 +231,7 @@
</span><span class="cx"> nextContext.element = context.element->previousElementSibling();
</span><span class="cx"> if (!nextContext.element)
</span><span class="cx"> return SelectorFailsAllSiblings;
</span><del>- nextContext.isSubSelector = false;
</del><ins>+ nextContext.firstSelectorOfTheFragment = nextContext.selector;
</ins><span class="cx"> nextContext.elementStyle = 0;
</span><span class="cx"> return matchRecursively(nextContext, ignoreDynamicPseudo);
</span><span class="cx">
</span><span class="lines">@@ -241,7 +241,7 @@
</span><span class="cx"> parentElement->setChildrenAffectedByForwardPositionalRules();
</span><span class="cx"> }
</span><span class="cx"> nextContext.element = context.element->previousElementSibling();
</span><del>- nextContext.isSubSelector = false;
</del><ins>+ nextContext.firstSelectorOfTheFragment = nextContext.selector;
</ins><span class="cx"> nextContext.elementStyle = 0;
</span><span class="cx"> for (; nextContext.element; nextContext.element = nextContext.element->previousElementSibling()) {
</span><span class="cx"> Match match = this->matchRecursively(nextContext, ignoreDynamicPseudo);
</span><span class="lines">@@ -260,7 +260,6 @@
</span><span class="cx"> && !nextContext.hasSelectionPseudo
</span><span class="cx"> && !(nextContext.hasScrollbarPseudo && nextContext.selector->m_match == CSSSelector::PseudoClass))
</span><span class="cx"> return SelectorFailsCompletely;
</span><del>- nextContext.isSubSelector = true;
</del><span class="cx"> return matchRecursively(nextContext, dynamicPseudo);
</span><span class="cx">
</span><span class="cx"> case CSSSelector::ShadowDescendant:
</span><span class="lines">@@ -269,7 +268,7 @@
</span><span class="cx"> if (!shadowHostNode)
</span><span class="cx"> return SelectorFailsCompletely;
</span><span class="cx"> nextContext.element = shadowHostNode;
</span><del>- nextContext.isSubSelector = false;
</del><ins>+ nextContext.firstSelectorOfTheFragment = nextContext.selector;
</ins><span class="cx"> nextContext.elementStyle = 0;
</span><span class="cx"> return matchRecursively(nextContext, ignoreDynamicPseudo);
</span><span class="cx"> }
</span><span class="lines">@@ -356,6 +355,61 @@
</span><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+static bool canMatchHoverOrActiveInQuirksMode(const SelectorChecker::SelectorCheckingContext& context)
+{
+ // For quirks mode, follow this: http://quirks.spec.whatwg.org/#the-:active-and-:hover-quirk
+ // In quirks mode, a compound selector 'selector' that matches the following conditions must not match elements that would not also match the ':any-link' selector.
+ //
+ // selector uses the ':active' or ':hover' pseudo-classes.
+ // selector does not use a type selector.
+ // selector does not use an attribute selector.
+ // selector does not use an ID selector.
+ // selector does not use a class selector.
+ // selector does not use a pseudo-class selector other than ':active' and ':hover'.
+ // selector does not use a pseudo-element selector.
+ // selector is not part of an argument to a functional pseudo-class or pseudo-element.
+ if (context.inFunctionalPseudoClass)
+ return true;
+
+ for (const CSSSelector* selector = context.firstSelectorOfTheFragment; selector; selector = selector->tagHistory()) {
+ switch (selector->m_match) {
+ case CSSSelector::Tag:
+ if (selector->tagQName() != anyQName())
+ return true;
+ break;
+ case CSSSelector::PseudoClass: {
+ CSSSelector::PseudoClassType pseudoClassType = selector->pseudoClassType();
+ if (pseudoClassType != CSSSelector::PseudoClassHover && pseudoClassType != CSSSelector::PseudoClassActive)
+ return true;
+ break;
+ }
+ case CSSSelector::Id:
+ case CSSSelector::Class:
+ case CSSSelector::Exact:
+ case CSSSelector::Set:
+ case CSSSelector::List:
+ case CSSSelector::Hyphen:
+ case CSSSelector::Contain:
+ case CSSSelector::Begin:
+ case CSSSelector::End:
+ case CSSSelector::PagePseudoClass:
+ case CSSSelector::PseudoElement:
+ return true;
+ case CSSSelector::Unknown:
+ ASSERT_NOT_REACHED();
+ break;
+ }
+
+ CSSSelector::Relation relation = selector->relation();
+ if (relation == CSSSelector::ShadowDescendant)
+ return true;
+
+ if (relation != CSSSelector::SubSelector)
+ return false;
+ }
+ return false;
+}
+
</ins><span class="cx"> bool SelectorChecker::checkOne(const SelectorCheckingContext& context) const
</span><span class="cx"> {
</span><span class="cx"> Element* const & element = context.element;
</span><span class="lines">@@ -393,7 +447,8 @@
</span><span class="cx"> return false;
</span><span class="cx">
</span><span class="cx"> SelectorCheckingContext subContext(context);
</span><del>- subContext.isSubSelector = true;
</del><ins>+ subContext.inFunctionalPseudoClass = true;
+ subContext.firstSelectorOfTheFragment = selectorList->first();
</ins><span class="cx"> for (subContext.selector = selectorList->first(); subContext.selector; subContext.selector = subContext.selector->tagHistory()) {
</span><span class="cx"> if (subContext.selector->m_match == CSSSelector::PseudoClass) {
</span><span class="cx"> // :not cannot nest. I don't really know why this is a
</span><span class="lines">@@ -582,9 +637,10 @@
</span><span class="cx"> case CSSSelector::PseudoClassAny:
</span><span class="cx"> {
</span><span class="cx"> SelectorCheckingContext subContext(context);
</span><del>- subContext.isSubSelector = true;
</del><ins>+ subContext.inFunctionalPseudoClass = true;
</ins><span class="cx"> PseudoId ignoreDynamicPseudo = NOPSEUDO;
</span><span class="cx"> for (subContext.selector = selector->selectorList()->first(); subContext.selector; subContext.selector = CSSSelectorList::next(subContext.selector)) {
</span><ins>+ subContext.firstSelectorOfTheFragment = subContext.selector;
</ins><span class="cx"> if (matchRecursively(subContext, ignoreDynamicPseudo) == SelectorMatches)
</span><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="lines">@@ -612,9 +668,7 @@
</span><span class="cx"> case CSSSelector::PseudoClassFocus:
</span><span class="cx"> return matchesFocusPseudoClass(element);
</span><span class="cx"> case CSSSelector::PseudoClassHover:
</span><del>- // If we're in quirks mode, then hover should never match anchors with no
- // href and *:hover should not match anything. This is important for sites like wsj.com.
- if (m_strictParsing || context.isSubSelector || element->isLink()) {
</del><ins>+ if (m_strictParsing || element->isLink() || canMatchHoverOrActiveInQuirksMode(context)) {
</ins><span class="cx"> if (m_mode == ResolvingStyle) {
</span><span class="cx"> if (context.elementStyle)
</span><span class="cx"> context.elementStyle->setAffectedByHover();
</span><span class="lines">@@ -626,9 +680,7 @@
</span><span class="cx"> }
</span><span class="cx"> break;
</span><span class="cx"> case CSSSelector::PseudoClassActive:
</span><del>- // If we're in quirks mode, then :active should never match anchors with no
- // href and *:active should not match anything.
- if (m_strictParsing || context.isSubSelector || element->isLink()) {
</del><ins>+ if (m_strictParsing || element->isLink() || canMatchHoverOrActiveInQuirksMode(context)) {
</ins><span class="cx"> if (m_mode == ResolvingStyle) {
</span><span class="cx"> if (context.elementStyle)
</span><span class="cx"> context.elementStyle->setAffectedByActive();
</span><span class="lines">@@ -742,11 +794,12 @@
</span><span class="cx"> #if ENABLE(VIDEO_TRACK)
</span><span class="cx"> else if (selector->m_match == CSSSelector::PseudoElement && selector->pseudoElementType() == CSSSelector::PseudoElementCue) {
</span><span class="cx"> SelectorCheckingContext subContext(context);
</span><del>- subContext.isSubSelector = true;
</del><span class="cx">
</span><span class="cx"> PseudoId ignoreDynamicPseudo = NOPSEUDO;
</span><span class="cx"> const CSSSelector* const & selector = context.selector;
</span><span class="cx"> for (subContext.selector = selector->selectorList()->first(); subContext.selector; subContext.selector = CSSSelectorList::next(subContext.selector)) {
</span><ins>+ subContext.firstSelectorOfTheFragment = subContext.selector;
+ subContext.inFunctionalPseudoClass = true;
</ins><span class="cx"> if (matchRecursively(subContext, ignoreDynamicPseudo) == SelectorMatches)
</span><span class="cx"> return true;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCorecssSelectorCheckerh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/SelectorChecker.h (169359 => 169360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/SelectorChecker.h 2014-05-26 20:18:25 UTC (rev 169359)
+++ trunk/Source/WebCore/css/SelectorChecker.h 2014-05-26 21:45:17 UTC (rev 169360)
</span><span class="lines">@@ -2,7 +2,7 @@
</span><span class="cx"> * Copyright (C) 1999 Lars Knoll (knoll@kde.org)
</span><span class="cx"> * (C) 2004-2005 Allan Sandfeld Jensen (kde@carewolf.com)
</span><span class="cx"> * Copyright (C) 2006, 2007 Nicholas Shanks (webkit@nickshanks.com)
</span><del>- * Copyright (C) 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014 Apple Inc. All rights reserved.
</ins><span class="cx"> * Copyright (C) 2007 Alexey Proskuryakov <ap@webkit.org>
</span><span class="cx"> * Copyright (C) 2007, 2008 Eric Seidel <eric@webkit.org>
</span><span class="cx"> * Copyright (C) 2008, 2009 Torch Mobile Inc. All rights reserved. (http://www.torchmobile.com/)
</span><span class="lines">@@ -61,8 +61,9 @@
</span><span class="cx"> , pseudoId(NOPSEUDO)
</span><span class="cx"> , elementStyle(0)
</span><span class="cx"> , scrollbar(0)
</span><ins>+ , firstSelectorOfTheFragment(selector)
</ins><span class="cx"> , scrollbarPart(NoPart)
</span><del>- , isSubSelector(false)
</del><ins>+ , inFunctionalPseudoClass(false)
</ins><span class="cx"> , hasScrollbarPseudo(false)
</span><span class="cx"> , hasSelectionPseudo(false)
</span><span class="cx"> { }
</span><span class="lines">@@ -74,8 +75,9 @@
</span><span class="cx"> PseudoId pseudoId;
</span><span class="cx"> RenderStyle* elementStyle;
</span><span class="cx"> RenderScrollbar* scrollbar;
</span><ins>+ const CSSSelector* firstSelectorOfTheFragment;
</ins><span class="cx"> ScrollbarPart scrollbarPart;
</span><del>- bool isSubSelector;
</del><ins>+ bool inFunctionalPseudoClass;
</ins><span class="cx"> bool hasScrollbarPseudo;
</span><span class="cx"> bool hasSelectionPseudo;
</span><span class="cx"> };
</span></span></pre>
</div>
</div>
</body>
</html>