Multiple :hover/:active incorrectly matching in quirks mode.

third_party/WebKit/LayoutTests/fast/css/hover-active-quirks.html

Index: third_party/WebKit/LayoutTests/fast/css/hover-active-quirks.html
diff --git a/third_party/WebKit/LayoutTests/fast/css/hover-active-quirks.html b/third_party/WebKit/LayoutTests/fast/css/hover-active-quirks.html
new file mode 100644
index 0000000000000000000000000000000000000000..c55604abca09b984a0f16243064695adea801a25
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/css/hover-active-quirks.html
@@ -0,0 +1,141 @@
+<!-- quirks mode -->
+<script src="../../resources/js-test.js"></script>
+<style>
+#sandbox div { width: 30px; height: 30px; }
+#sandbox > div { outline: 1px solid black; display: inline-block }
+#sandbox a { display: block; width: 30px; height: 30px; }
+
+#t1 > div, #t2 > div, #t3 > div, #t4 > div, #t5 > div, #t6 > div { background-color: green }
+
+#t1 :hover,
+#t2 :active,
+#t3 :hover:active,
+#t4 *:hover,
+#t5 *:active,
+#t6 *:active:hover {
+    background-color: red;
+}
+
+#t7 :not(:hover),
+#t8 :not(:active),
+#t9 :hover:not(:active),
+#t10 :not(:active):hover,
+#t11 :active:not(:hover),
+#t12 :not(:hover):active,
+:hover#t13,
+:hover.t14,
+:hover[t15],
+#t16:hover,
+.t17:hover,
+[t18]:hover,
+#t19 :hover,
+:active#t20,
+:active.t21,
+:active[t22],
+#t23:active,
+.t24:active,
+[t25]:active,
+#t26 :active {
+    background-color: green
+}
+</style>
+<div id="sandbox">
+    <span>Should stay green when hovered and/or active:</span>
+    <div id="t1"><div></div></div>
+    <div id="t2"><div></div></div>
+    <div id="t3"><div></div></div>
+    <div id="t4"><div></div></div>
+    <div id="t5"><div onclick=""></div></div>
+    <div id="t6"><div></div></div>
+    <br><span>Should be green when not hovered:</span>
+    <div id="t7"><div></div></div>
+    <br><span>Should be green when not active:</span>
+    <div id="t8"><div></div></div>
+    <br><span>Should be green when hovered and not active:</span>
+    <div id="t9"><div></div></div>
+    <div id="t10"><div></div></div>
+    <br><span>Should be green when active and not hovered:</span>

[rwlbuis, 2016/05/11 21:30:34]

When I tried this part manually it did not work as advertised, i.e. clicking
either div (I assume that is the only way to make it active) it did not turn
green. Can you check?

[rune, 2016/05/11 21:44:17]

They will turn green when active and no longer hovered. That is:

1. Hover the block
2. Mouse button down
3. While mouse button down, move the pointer away from the block => green.

+    <div id="t11"><div onclick=""></div></div>
+    <div id="t12"><div onclick=""></div></div>
+    <br><span>Should be green when hovered:</span>
+    <div id="t13"></div>
+    <div id="t14" class="t14"></div>
+    <div id="t15" t15></div>
+    <div id="t16"></div>
+    <div id="t17" class="t17"></div>
+    <div id="t18" t18></div>
+    <div id="t19"><a href="#" onclick="event.preventDefault()"></a></div>
+    <br><span>Should be green when active:</span>
+    <div id="t20" onclick=""></div>
+    <div id="t21" onclick="" class="t21"></div>
+    <div id="t22" onclick="" t22></div>
+    <div id="t23" onclick=""></div>
+    <div id="t24" onclick="" class="t24"></div>
+    <div id="t25" onclick="" t25></div>
+    <div id="t26"><a href="#" onclick="event.preventDefault()"></a></div>
+</div>
+<script>
+    description("Quirks mode - matching :hover and :active");
+
+    setPrintTestResultsLazily();
+
+    function testElement(element, whileHovering, whileActive) {
+        if (whileActive || whileHovering) {
+            hoverX = element.offsetLeft + 2;
+            hoverY = element.offsetTop + 2;
+            eventSender.mouseMoveTo(hoverX, hoverY);
+            if (whileActive) {
+                eventSender.mouseDown();
+            }
+            if (!whileHovering) {
+                eventSender.mouseMoveTo(1, 1);
+            }
+
+            var result = getComputedStyle(element).backgroundColor;
+
+            if (whileActive) {
+                eventSender.mouseUp();
+                if (!whileHovering) {
+                    eventSender.mouseDown();
+                    eventSender.mouseUp();
+                }
+            }
+
+            return result;
+        }
+        return getComputedStyle(element).backgroundColor;
+    }
+
+    shouldBeDefined("window.eventSender");
+    eventSender.dragMode = false;
+
+    var green = "rgb(0, 128, 0)";
+
+    shouldBe("testElement(t1.firstChild, true, false)", "green");
+    shouldBe("testElement(t2.firstChild, true, true)", "green");
+    shouldBe("testElement(t3.firstChild, true, true)", "green");
+    shouldBe("testElement(t4.firstChild, true, false)", "green");
+    shouldBe("testElement(t5.firstChild, true, true)", "green");
+    shouldBe("testElement(t6.firstChild, true, true)", "green");
+    shouldBe("testElement(t7.firstChild, false, false)", "green");
+    shouldBe("testElement(t8.firstChild, false, false)", "green");
+    shouldBe("testElement(t9.firstChild, true, false)", "green");
+    shouldBe("testElement(t10.firstChild, true, false)", "green");
+    shouldBe("testElement(t11.firstChild, false, true)", "green");
+    shouldBe("testElement(t12.firstChild, false, true)", "green");
+    shouldBe("testElement(t13, true, false)", "green");
+    shouldBe("testElement(t14, true, false)", "green");
+    shouldBe("testElement(t15, true, false)", "green");
+    shouldBe("testElement(t16, true, false)", "green");
+    shouldBe("testElement(t17, true, false)", "green");
+    shouldBe("testElement(t18, true, false)", "green");
+    shouldBe("testElement(t19.firstChild, true, false)", "green");
+    shouldBe("testElement(t20, true, true)", "green");
+    shouldBe("testElement(t21, true, true)", "green");
+    shouldBe("testElement(t22, true, true)", "green");
+    shouldBe("testElement(t23, true, true)", "green");
+    shouldBe("testElement(t24, true, true)", "green");
+    shouldBe("testElement(t25, true, true)", "green");
+    shouldBe("testElement(t26.firstChild, true, true)", "green");
+
+</script>