<!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>[202517] 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/202517">202517</a></dd>
<dt>Author</dt> <dd>benjamin@webkit.org</dd>
<dt>Date</dt> <dd>2016-06-27 15:20:17 -0700 (Mon, 27 Jun 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Fix style invalidation for :active when the activated node has no renderer
https://bugs.webkit.org/show_bug.cgi?id=159125
Reviewed by Antti Koivisto.
Source/WebCore:
Same old bug: a style invalidation path was depending
on the style.
Here we really need both flags. An element can have
childrenAffectedByActive() false and renderStyle->affectedByActive() true
if it was subject to style sharing.
The element state "childrenAffectedByActive" should be renamed
"styleAffectedByActive" since it is not a parent invalidation flag.
That will be done separately.
Tests: fast/css/pseudo-active-on-labeled-control-without-renderer.html
fast/css/pseudo-active-style-sharing-1.html
fast/css/pseudo-active-style-sharing-2.html
fast/css/pseudo-active-style-sharing-3.html
fast/css/pseudo-active-style-sharing-4.html
fast/css/pseudo-active-style-sharing-5.html
fast/css/pseudo-active-style-sharing-6.html
* dom/Element.cpp:
(WebCore::Element::setActive):
* style/StyleRelations.cpp:
(WebCore::Style::commitRelationsToRenderStyle):
LayoutTests:
There was no bug with style sharing but I wanted that covered anyway.
Style sharing depends on 2 flags which is uncommon.
There was no test coverage whatsoever, breaking it did not fail any test.
* fast/css/pseudo-active-on-labeled-control-without-renderer-expected.txt: Added.
* fast/css/pseudo-active-on-labeled-control-without-renderer.html: Added.
* fast/css/pseudo-active-style-sharing-1-expected.txt: Added.
* fast/css/pseudo-active-style-sharing-1.html: Added.
* fast/css/pseudo-active-style-sharing-2-expected.txt: Added.
* fast/css/pseudo-active-style-sharing-2.html: Added.
* fast/css/pseudo-active-style-sharing-3-expected.txt: Added.
* fast/css/pseudo-active-style-sharing-3.html: Added.
* fast/css/pseudo-active-style-sharing-4-expected.txt: Added.
* fast/css/pseudo-active-style-sharing-4.html: Added.
* fast/css/pseudo-active-style-sharing-5-expected.txt: Added.
* fast/css/pseudo-active-style-sharing-5.html: Added.
* fast/css/pseudo-active-style-sharing-6-expected.txt: Added.
* fast/css/pseudo-active-style-sharing-6.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsplatformiossimulatorTestExpectations">trunk/LayoutTests/platform/ios-simulator/TestExpectations</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoredomElementcpp">trunk/Source/WebCore/dom/Element.cpp</a></li>
<li><a href="#trunkSourceWebCorestyleStyleRelationscpp">trunk/Source/WebCore/style/StyleRelations.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcsspseudoactiveonlabeledcontrolwithoutrendererexpectedtxt">trunk/LayoutTests/fast/css/pseudo-active-on-labeled-control-without-renderer-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoactiveonlabeledcontrolwithoutrendererhtml">trunk/LayoutTests/fast/css/pseudo-active-on-labeled-control-without-renderer.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoactivestylesharing1expectedtxt">trunk/LayoutTests/fast/css/pseudo-active-style-sharing-1-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoactivestylesharing1html">trunk/LayoutTests/fast/css/pseudo-active-style-sharing-1.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoactivestylesharing2expectedtxt">trunk/LayoutTests/fast/css/pseudo-active-style-sharing-2-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoactivestylesharing2html">trunk/LayoutTests/fast/css/pseudo-active-style-sharing-2.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoactivestylesharing3expectedtxt">trunk/LayoutTests/fast/css/pseudo-active-style-sharing-3-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoactivestylesharing3html">trunk/LayoutTests/fast/css/pseudo-active-style-sharing-3.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoactivestylesharing4expectedtxt">trunk/LayoutTests/fast/css/pseudo-active-style-sharing-4-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoactivestylesharing4html">trunk/LayoutTests/fast/css/pseudo-active-style-sharing-4.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoactivestylesharing5expectedtxt">trunk/LayoutTests/fast/css/pseudo-active-style-sharing-5-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoactivestylesharing5html">trunk/LayoutTests/fast/css/pseudo-active-style-sharing-5.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoactivestylesharing6expectedtxt">trunk/LayoutTests/fast/css/pseudo-active-style-sharing-6-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoactivestylesharing6html">trunk/LayoutTests/fast/css/pseudo-active-style-sharing-6.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (202516 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-06-27 22:13:16 UTC (rev 202516)
+++ trunk/LayoutTests/ChangeLog 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -1,3 +1,29 @@
</span><ins>+2016-06-27 Benjamin Poulain <benjamin@webkit.org>
+
+ Fix style invalidation for :active when the activated node has no renderer
+ https://bugs.webkit.org/show_bug.cgi?id=159125
+
+ Reviewed by Antti Koivisto.
+
+ There was no bug with style sharing but I wanted that covered anyway.
+ Style sharing depends on 2 flags which is uncommon.
+ There was no test coverage whatsoever, breaking it did not fail any test.
+
+ * fast/css/pseudo-active-on-labeled-control-without-renderer-expected.txt: Added.
+ * fast/css/pseudo-active-on-labeled-control-without-renderer.html: Added.
+ * fast/css/pseudo-active-style-sharing-1-expected.txt: Added.
+ * fast/css/pseudo-active-style-sharing-1.html: Added.
+ * fast/css/pseudo-active-style-sharing-2-expected.txt: Added.
+ * fast/css/pseudo-active-style-sharing-2.html: Added.
+ * fast/css/pseudo-active-style-sharing-3-expected.txt: Added.
+ * fast/css/pseudo-active-style-sharing-3.html: Added.
+ * fast/css/pseudo-active-style-sharing-4-expected.txt: Added.
+ * fast/css/pseudo-active-style-sharing-4.html: Added.
+ * fast/css/pseudo-active-style-sharing-5-expected.txt: Added.
+ * fast/css/pseudo-active-style-sharing-5.html: Added.
+ * fast/css/pseudo-active-style-sharing-6-expected.txt: Added.
+ * fast/css/pseudo-active-style-sharing-6.html: Added.
+
</ins><span class="cx"> 2016-06-27 Joanmarie Diggs <jdiggs@igalia.com>
</span><span class="cx">
</span><span class="cx"> AX: REGRESSION (r202063): ARIA role attribute is being ignored for label element
</span></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoactiveonlabeledcontrolwithoutrendererexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-active-on-labeled-control-without-renderer-expected.txt (0 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-active-on-labeled-control-without-renderer-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-active-on-labeled-control-without-renderer-expected.txt 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -0,0 +1,49 @@
</span><ins>+Verify that a labeled elemed gets the :active state even if it has no renderer.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+ Initial state
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+On Mouse Down
+PASS elementsWithActiveStyle() is ["target", "labelable"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target", "labelable"]
+After Mouse Down
+PASS elementsWithActiveStyle() is ["target", "labelable"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target", "labelable"]
+On Mouse Up
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+After Mouse Up
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+On Mouse Down
+PASS elementsWithActiveStyle() is ["target", "labelable"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target", "labelable"]
+After Mouse Down
+PASS elementsWithActiveStyle() is ["target", "labelable"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target", "labelable"]
+On Mouse Up
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+After Mouse Up
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+On Mouse Down
+PASS elementsWithActiveStyle() is ["target", "labelable"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target", "labelable"]
+After Mouse Down
+PASS elementsWithActiveStyle() is ["target", "labelable"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target", "labelable"]
+On Mouse Up
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+After Mouse Up
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoactiveonlabeledcontrolwithoutrendererhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-active-on-labeled-control-without-renderer.html (0 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-active-on-labeled-control-without-renderer.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-active-on-labeled-control-without-renderer.html 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -0,0 +1,124 @@
</span><ins>+<!DOCTYPE html>
+<html id="html">
+<head>
+<style id="custom-style">
+ * {
+ background-color: white;
+ margin: 0;
+ padding: 0;
+ }
+ /* The order of evalution is important here. The simple selector ":active" must be evaluated last */
+ label:active, input:active {
+ background-color: rgb(50, 100, 150) !important;
+ }
+ #target {
+ display: block;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ }
+</style>
+</head>
+<script src="../../resources/js-test-pre.js"></script>
+<body id="body">
+ <div id="webkit-test">
+ <div id="labelable-ancestor">
+ <div id="labelable-parent">
+ <label for="labelable" id="target">Label</label>
+ </div>
+ </div>
+ <div id="next-group" style="display:none">
+ <div id="sibling1">Sibling1</div>
+ <input id="labelable" value="Labelable Input">
+ <div id="sibling2">Sibling2</div>
+ </div>
+ </div>
+ <div id="console">
+ </div>
+ <script>
+ description("Verify that a labeled elemed gets the :active state even if it has no renderer.");
+ window.jsTestIsAsync = true;
+
+ function elementsWithActiveStyle() {
+ let elements = [];
+ for (let element of document.querySelectorAll("*")) {
+ if (getComputedStyle(element).backgroundColor === "rgb(50, 100, 150)")
+ elements.push(element.id);
+ }
+ return elements;
+ }
+ function elementsMatchingActiveSelector() {
+ let elements = [];
+ for (let element of document.querySelectorAll(":active")) {
+ elements.push(element.id);
+ }
+ return elements;
+ }
+
+ if (window.eventSender) {
+ eventSender.mouseMoveTo(50, 50);
+ } else {
+ debug("");
+ debug("To run Manually, click-hold-release 3 times on the green rect. All the results below should say PASS.")
+ debug("");
+ }
+
+ function sendMouseDown() {
+ if (window.eventSender) {
+ eventSender.mouseDown();
+ }
+ }
+
+ function sendMouseUp() {
+ if (window.eventSender) {
+ eventSender.mouseUp();
+ }
+ }
+
+ function mouseDownHandler(event, delayed = false) {
+ debug(delayed ? "After Mouse Down" : "On Mouse Down");
+ shouldBe('elementsWithActiveStyle()', '["target", "labelable"]');
+ shouldBe('elementsMatchingActiveSelector()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target", "labelable"]');
+
+ // The current spec does not defined the order in which elements are activated.
+ // It is reasonable to have the activation after the mouseDown dispatch. That's what Firefox does at this time.
+ // This delayed handler ensure we cover both possibilities. The first handler fails on Firefox but that's not
+ // necessarily wrong, just undefined. The result is fine as long as one of the two handler succeed.
+ if (!delayed) {
+ setTimeout(function() { mouseDownHandler(event, true); }, 0);
+ } else {
+ sendMouseUp();
+ }
+ }
+ var target = document.getElementById('target');
+ target.addEventListener('mousedown', mouseDownHandler);
+
+ let mouseUpCount = 0;
+ function mouseUpHandler(event, delayed = false) {
+ debug(delayed ? "After Mouse Up" : "On Mouse Up");
+ shouldBe('elementsWithActiveStyle()', '[]');
+ shouldBe('elementsMatchingActiveSelector()', '[]');
+ if (++mouseUpCount === 6) {
+ document.getElementById("webkit-test").style.display = "none";
+ document.getElementById("custom-style").innerText = "";
+ finishJSTest();
+ } else {
+ if (!delayed) {
+ setTimeout(function() { mouseUpHandler(event, true); }, 0);
+ } else {
+ sendMouseDown();
+ }
+ }
+ }
+ target.addEventListener('mouseup', mouseUpHandler);
+
+
+ debug("Initial state");
+ shouldBe('elementsWithActiveStyle()', '[]');
+ shouldBe('elementsMatchingActiveSelector()', '[]');
+
+ sendMouseDown();
+ </script>
+ <script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoactivestylesharing1expectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-active-style-sharing-1-expected.txt (0 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-active-style-sharing-1-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-active-style-sharing-1-expected.txt 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -0,0 +1,22 @@
</span><ins>+Verify that a labeled elemed gets the :active state even if it has no renderer.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+ Initial state
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+On Mouse Down
+PASS elementsWithActiveStyle() is ["#labelable-parent >> label:nth-child(1)", "#next-group >> input:nth-child(1)"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(1)", "#next-group >> input:nth-child(1)"]
+After Mouse Down
+PASS elementsWithActiveStyle() is ["#labelable-parent >> label:nth-child(1)", "#next-group >> input:nth-child(1)"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(1)", "#next-group >> input:nth-child(1)"]
+On Mouse Up
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoactivestylesharing1html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-active-style-sharing-1.html (0 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-active-style-sharing-1.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-active-style-sharing-1.html 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -0,0 +1,125 @@
</span><ins>+<!DOCTYPE html>
+<html id="html">
+<head>
+<style id="custom-style">
+ * {
+ background-color: white;
+ margin: 0;
+ padding: 0;
+ }
+ label:active, input:active {
+ background-color: rgb(50, 100, 150) !important;
+ }
+ label {
+ display: block;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ border: 2px solid black;
+ }
+</style>
+</head>
+<script src="../../resources/js-test-pre.js"></script>
+<body id="body">
+ <div id="webkit-test">
+ <div id="labelable-ancestor">
+ <div id="labelable-parent">
+ <label for="labelable">Label</label>
+ <label for="labelable">Label</label>
+ <label for="labelable">Label</label>
+ </div>
+ </div>
+ <div id="next-group" style="display:none">
+ <input id="labelable" value="Labelable Input">
+ <input id="labelable" value="Labelable Input">
+ <input id="labelable" value="Labelable Input">
+ </div>
+ </div>
+ <div id="console">
+ </div>
+ <script>
+ description("Verify that a labeled elemed gets the :active state even if it has no renderer.");
+ window.jsTestIsAsync = true;
+
+ function generateName(element) {
+ if (element.id && element.id != "labelable")
+ return element.id;
+
+ let childPosition = 1;
+ while (element.previousElementSibling) {
+ element = element.previousElementSibling;
+ ++childPosition;
+ }
+ return "#" + element.parentElement.id + " >> " + element.tagName.toLowerCase() + ":nth-child(" + childPosition + ")";
+ }
+
+ function elementsWithActiveStyle() {
+ let elements = [];
+ for (let element of document.querySelectorAll("*")) {
+ if (getComputedStyle(element).backgroundColor === "rgb(50, 100, 150)")
+ elements.push(generateName(element));
+ }
+ return elements;
+ }
+ function elementsMatchingActiveSelector() {
+ let elements = [];
+ for (let element of document.querySelectorAll(":active")) {
+ elements.push(generateName(element));
+ }
+ return elements;
+ }
+
+ if (window.eventSender) {
+ eventSender.mouseMoveTo(50, 50);
+ } else {
+ debug("");
+ debug("To run Manually, click-hold-release on the first green rect. All the results below should say PASS.")
+ debug("");
+ }
+
+ function sendMouseDown() {
+ if (window.eventSender) {
+ eventSender.mouseDown();
+ }
+ }
+
+ function sendMouseUp() {
+ if (window.eventSender) {
+ eventSender.mouseUp();
+ }
+ }
+
+ function mouseDownHandler(event, delayed = false) {
+ debug(delayed ? "After Mouse Down" : "On Mouse Down");
+ shouldBe('elementsWithActiveStyle()', '["#labelable-parent >> label:nth-child(1)", "#next-group >> input:nth-child(1)"]');
+ shouldBe('elementsMatchingActiveSelector()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(1)", "#next-group >> input:nth-child(1)"]');
+
+ if (!delayed) {
+ setTimeout(function() { mouseDownHandler(event, true); }, 0);
+ } else {
+ sendMouseUp();
+ }
+ }
+ var target = document.querySelector('label:nth-child(1)');
+ target.addEventListener('mousedown', mouseDownHandler);
+
+ function mouseUpHandler(event, delayed = false) {
+ debug(delayed ? "After Mouse Up" : "On Mouse Up");
+ shouldBe('elementsWithActiveStyle()', '[]');
+ shouldBe('elementsMatchingActiveSelector()', '[]');
+ document.getElementById("webkit-test").style.display = "none";
+ document.getElementById("custom-style").innerText = "";
+ finishJSTest();
+ }
+ target.addEventListener('mouseup', mouseUpHandler);
+
+
+ debug("Initial state");
+ shouldBe('elementsWithActiveStyle()', '[]');
+ shouldBe('elementsMatchingActiveSelector()', '[]');
+
+ sendMouseDown();
+ </script>
+ <script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoactivestylesharing2expectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-active-style-sharing-2-expected.txt (0 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-active-style-sharing-2-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-active-style-sharing-2-expected.txt 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -0,0 +1,22 @@
</span><ins>+Verify that a labeled elemed gets the :active state even if it has no renderer.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+ Initial state
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+On Mouse Down
+PASS elementsWithActiveStyle() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(1)", "#next-group >> input:nth-child(1)"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(1)", "#next-group >> input:nth-child(1)"]
+After Mouse Down
+PASS elementsWithActiveStyle() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(1)", "#next-group >> input:nth-child(1)"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(1)", "#next-group >> input:nth-child(1)"]
+On Mouse Up
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoactivestylesharing2html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-active-style-sharing-2.html (0 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-active-style-sharing-2.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-active-style-sharing-2.html 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -0,0 +1,125 @@
</span><ins>+<!DOCTYPE html>
+<html id="html">
+<head>
+<style id="custom-style">
+ * {
+ background-color: white;
+ margin: 0;
+ padding: 0;
+ }
+ :active {
+ background-color: rgb(50, 100, 150) !important;
+ }
+ label {
+ display: block;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ border: 2px solid black;
+ }
+</style>
+</head>
+<script src="../../resources/js-test-pre.js"></script>
+<body id="body">
+ <div id="webkit-test">
+ <div id="labelable-ancestor">
+ <div id="labelable-parent">
+ <label for="labelable">Label</label>
+ <label for="labelable">Label</label>
+ <label for="labelable">Label</label>
+ </div>
+ </div>
+ <div id="next-group" style="display:none">
+ <input id="labelable" value="Labelable Input">
+ <input id="labelable" value="Labelable Input">
+ <input id="labelable" value="Labelable Input">
+ </div>
+ </div>
+ <div id="console">
+ </div>
+ <script>
+ description("Verify that a labeled elemed gets the :active state even if it has no renderer.");
+ window.jsTestIsAsync = true;
+
+ function generateName(element) {
+ if (element.id && element.id != "labelable")
+ return element.id;
+
+ let childPosition = 1;
+ while (element.previousElementSibling) {
+ element = element.previousElementSibling;
+ ++childPosition;
+ }
+ return "#" + element.parentElement.id + " >> " + element.tagName.toLowerCase() + ":nth-child(" + childPosition + ")";
+ }
+
+ function elementsWithActiveStyle() {
+ let elements = [];
+ for (let element of document.querySelectorAll("*")) {
+ if (getComputedStyle(element).backgroundColor === "rgb(50, 100, 150)")
+ elements.push(generateName(element));
+ }
+ return elements;
+ }
+ function elementsMatchingActiveSelector() {
+ let elements = [];
+ for (let element of document.querySelectorAll(":active")) {
+ elements.push(generateName(element));
+ }
+ return elements;
+ }
+
+ if (window.eventSender) {
+ eventSender.mouseMoveTo(50, 50);
+ } else {
+ debug("");
+ debug("To run Manually, click-hold-release on the first green rect. All the results below should say PASS.")
+ debug("");
+ }
+
+ function sendMouseDown() {
+ if (window.eventSender) {
+ eventSender.mouseDown();
+ }
+ }
+
+ function sendMouseUp() {
+ if (window.eventSender) {
+ eventSender.mouseUp();
+ }
+ }
+
+ function mouseDownHandler(event, delayed = false) {
+ debug(delayed ? "After Mouse Down" : "On Mouse Down");
+ shouldBe('elementsWithActiveStyle()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(1)", "#next-group >> input:nth-child(1)"]');
+ shouldBe('elementsMatchingActiveSelector()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(1)", "#next-group >> input:nth-child(1)"]');
+
+ if (!delayed) {
+ setTimeout(function() { mouseDownHandler(event, true); }, 0);
+ } else {
+ sendMouseUp();
+ }
+ }
+ var target = document.querySelector('label:nth-child(1)');
+ target.addEventListener('mousedown', mouseDownHandler);
+
+ function mouseUpHandler(event, delayed = false) {
+ debug(delayed ? "After Mouse Up" : "On Mouse Up");
+ shouldBe('elementsWithActiveStyle()', '[]');
+ shouldBe('elementsMatchingActiveSelector()', '[]');
+ document.getElementById("webkit-test").style.display = "none";
+ document.getElementById("custom-style").innerText = "";
+ finishJSTest();
+ }
+ target.addEventListener('mouseup', mouseUpHandler);
+
+
+ debug("Initial state");
+ shouldBe('elementsWithActiveStyle()', '[]');
+ shouldBe('elementsMatchingActiveSelector()', '[]');
+
+ sendMouseDown();
+ </script>
+ <script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoactivestylesharing3expectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-active-style-sharing-3-expected.txt (0 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-active-style-sharing-3-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-active-style-sharing-3-expected.txt 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -0,0 +1,22 @@
</span><ins>+Verify that a labeled elemed gets the :active state even if it has no renderer.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+ Initial state
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+On Mouse Down
+PASS elementsWithActiveStyle() is ["#labelable-parent >> label:nth-child(1)", "#next-group >> input:nth-child(1)"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(1)", "target1", "#next-group >> input:nth-child(1)"]
+After Mouse Down
+PASS elementsWithActiveStyle() is ["#labelable-parent >> label:nth-child(1)", "#next-group >> input:nth-child(1)"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(1)", "target1", "#next-group >> input:nth-child(1)"]
+On Mouse Up
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoactivestylesharing3html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-active-style-sharing-3.html (0 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-active-style-sharing-3.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-active-style-sharing-3.html 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -0,0 +1,125 @@
</span><ins>+<!DOCTYPE html>
+<html id="html">
+ <head>
+ <style id="custom-style">
+ * {
+ background-color: white;
+ margin: 0;
+ padding: 0;
+ }
+ label:active, input:active {
+ background-color: rgb(50, 100, 150) !important;
+ }
+ #target1, #target2, #target3 {
+ display: block;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ border: 2px solid black;
+ }
+ </style>
+ </head>
+ <script src="../../resources/js-test-pre.js"></script>
+ <body id="body">
+ <div id="webkit-test">
+ <div id="labelable-ancestor">
+ <div id="labelable-parent">
+ <label for="labelable"><div id="target1">Target</div></label>
+ <label for="labelable"><div id="target2"></div></label>
+ <label for="labelable"><div id="target3"></div></label>
+ </div>
+ </div>
+ <div id="next-group" style="display:none">
+ <input id="labelable" value="Labelable Input">
+ <input id="labelable" value="Labelable Input">
+ <input id="labelable" value="Labelable Input">
+ </div>
+ </div>
+ <div id="console">
+ </div>
+ <script>
+ description("Verify that a labeled elemed gets the :active state even if it has no renderer.");
+ window.jsTestIsAsync = true;
+
+ function generateName(element) {
+ if (element.id && element.id !== "labelable")
+ return element.id;
+
+ let childPosition = 1;
+ while (element.previousElementSibling) {
+ element = element.previousElementSibling;
+ ++childPosition;
+ }
+ return "#" + element.parentElement.id + " >> " + element.tagName.toLowerCase() + ":nth-child(" + childPosition + ")";
+ }
+
+ function elementsWithActiveStyle() {
+ let elements = [];
+ for (let element of document.querySelectorAll("*")) {
+ if (getComputedStyle(element).backgroundColor === "rgb(50, 100, 150)")
+ elements.push(generateName(element));
+ }
+ return elements;
+ }
+ function elementsMatchingActiveSelector() {
+ let elements = [];
+ for (let element of document.querySelectorAll(":active")) {
+ elements.push(generateName(element));
+ }
+ return elements;
+ }
+
+ if (window.eventSender) {
+ eventSender.mouseMoveTo(50, 50);
+ } else {
+ debug("");
+ debug("To run Manually, click-hold-release on the first green rect. All the results below should say PASS.")
+ debug("");
+ }
+
+ function sendMouseDown() {
+ if (window.eventSender) {
+ eventSender.mouseDown();
+ }
+ }
+
+ function sendMouseUp() {
+ if (window.eventSender) {
+ eventSender.mouseUp();
+ }
+ }
+
+ function mouseDownHandler(event, delayed = false) {
+ debug(delayed ? "After Mouse Down" : "On Mouse Down");
+ shouldBe('elementsWithActiveStyle()', '["#labelable-parent >> label:nth-child(1)", "#next-group >> input:nth-child(1)"]');
+ shouldBe('elementsMatchingActiveSelector()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(1)", "target1", "#next-group >> input:nth-child(1)"]');
+
+ if (!delayed) {
+ setTimeout(function() { mouseDownHandler(event, true); }, 0);
+ } else {
+ sendMouseUp();
+ }
+ }
+ var target = document.querySelector('label:nth-child(1)');
+ target.addEventListener('mousedown', mouseDownHandler);
+
+ function mouseUpHandler(event, delayed = false) {
+ debug(delayed ? "After Mouse Up" : "On Mouse Up");
+ shouldBe('elementsWithActiveStyle()', '[]');
+ shouldBe('elementsMatchingActiveSelector()', '[]');
+ document.getElementById("webkit-test").style.display = "none";
+ document.getElementById("custom-style").innerText = "";
+ finishJSTest();
+ }
+ target.addEventListener('mouseup', mouseUpHandler);
+
+
+ debug("Initial state");
+ shouldBe('elementsWithActiveStyle()', '[]');
+ shouldBe('elementsMatchingActiveSelector()', '[]');
+
+ sendMouseDown();
+ </script>
+ <script src="../../resources/js-test-post.js"></script>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoactivestylesharing4expectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-active-style-sharing-4-expected.txt (0 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-active-style-sharing-4-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-active-style-sharing-4-expected.txt 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -0,0 +1,22 @@
</span><ins>+Verify that a labeled elemed gets the :active state even if it has no renderer.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+ Initial state
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+On Mouse Down
+PASS elementsWithActiveStyle() is ["#labelable-parent >> label:nth-child(2)", "#next-group >> input:nth-child(1)"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(2)", "#next-group >> input:nth-child(1)"]
+After Mouse Down
+PASS elementsWithActiveStyle() is ["#labelable-parent >> label:nth-child(2)", "#next-group >> input:nth-child(1)"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(2)", "#next-group >> input:nth-child(1)"]
+On Mouse Up
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoactivestylesharing4html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-active-style-sharing-4.html (0 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-active-style-sharing-4.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-active-style-sharing-4.html 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -0,0 +1,125 @@
</span><ins>+<!DOCTYPE html>
+<html id="html">
+<head>
+<style id="custom-style">
+ * {
+ background-color: white;
+ margin: 0;
+ padding: 0;
+ }
+ label:active, input:active {
+ background-color: rgb(50, 100, 150) !important;
+ }
+ label {
+ display: block;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ border: 2px solid black;
+ }
+</style>
+</head>
+<script src="../../resources/js-test-pre.js"></script>
+<body id="body">
+ <div id="webkit-test">
+ <div id="labelable-ancestor">
+ <div id="labelable-parent">
+ <label for="labelable">Label</label>
+ <label for="labelable">Label</label>
+ <label for="labelable">Label</label>
+ </div>
+ </div>
+ <div id="next-group" style="display:none">
+ <input id="labelable" value="Labelable Input">
+ <input id="labelable" value="Labelable Input">
+ <input id="labelable" value="Labelable Input">
+ </div>
+ </div>
+ <div id="console">
+ </div>
+ <script>
+ description("Verify that a labeled elemed gets the :active state even if it has no renderer.");
+ window.jsTestIsAsync = true;
+
+ function generateName(element) {
+ if (element.id && element.id != "labelable")
+ return element.id;
+
+ let childPosition = 1;
+ while (element.previousElementSibling) {
+ element = element.previousElementSibling;
+ ++childPosition;
+ }
+ return "#" + element.parentElement.id + " >> " + element.tagName.toLowerCase() + ":nth-child(" + childPosition + ")";
+ }
+
+ function elementsWithActiveStyle() {
+ let elements = [];
+ for (let element of document.querySelectorAll("*")) {
+ if (getComputedStyle(element).backgroundColor === "rgb(50, 100, 150)")
+ elements.push(generateName(element));
+ }
+ return elements;
+ }
+ function elementsMatchingActiveSelector() {
+ let elements = [];
+ for (let element of document.querySelectorAll(":active")) {
+ elements.push(generateName(element));
+ }
+ return elements;
+ }
+
+ if (window.eventSender) {
+ eventSender.mouseMoveTo(50, 150);
+ } else {
+ debug("");
+ debug("To run Manually, click-hold-release on the second green rect. All the results below should say PASS.")
+ debug("");
+ }
+
+ function sendMouseDown() {
+ if (window.eventSender) {
+ eventSender.mouseDown();
+ }
+ }
+
+ function sendMouseUp() {
+ if (window.eventSender) {
+ eventSender.mouseUp();
+ }
+ }
+
+ function mouseDownHandler(event, delayed = false) {
+ debug(delayed ? "After Mouse Down" : "On Mouse Down");
+ shouldBe('elementsWithActiveStyle()', '["#labelable-parent >> label:nth-child(2)", "#next-group >> input:nth-child(1)"]');
+ shouldBe('elementsMatchingActiveSelector()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(2)", "#next-group >> input:nth-child(1)"]');
+
+ if (!delayed) {
+ setTimeout(function() { mouseDownHandler(event, true); }, 0);
+ } else {
+ sendMouseUp();
+ }
+ }
+ var target = document.querySelector('label:nth-child(2)');
+ target.addEventListener('mousedown', mouseDownHandler);
+
+ function mouseUpHandler(event, delayed = false) {
+ debug(delayed ? "After Mouse Up" : "On Mouse Up");
+ shouldBe('elementsWithActiveStyle()', '[]');
+ shouldBe('elementsMatchingActiveSelector()', '[]');
+ document.getElementById("webkit-test").style.display = "none";
+ document.getElementById("custom-style").innerText = "";
+ finishJSTest();
+ }
+ target.addEventListener('mouseup', mouseUpHandler);
+
+
+ debug("Initial state");
+ shouldBe('elementsWithActiveStyle()', '[]');
+ shouldBe('elementsMatchingActiveSelector()', '[]');
+
+ sendMouseDown();
+ </script>
+ <script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoactivestylesharing5expectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-active-style-sharing-5-expected.txt (0 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-active-style-sharing-5-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-active-style-sharing-5-expected.txt 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -0,0 +1,22 @@
</span><ins>+Verify that a labeled elemed gets the :active state even if it has no renderer.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+ Initial state
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+On Mouse Down
+PASS elementsWithActiveStyle() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(2)", "#next-group >> input:nth-child(1)"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(2)", "#next-group >> input:nth-child(1)"]
+After Mouse Down
+PASS elementsWithActiveStyle() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(2)", "#next-group >> input:nth-child(1)"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(2)", "#next-group >> input:nth-child(1)"]
+On Mouse Up
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoactivestylesharing5html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-active-style-sharing-5.html (0 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-active-style-sharing-5.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-active-style-sharing-5.html 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -0,0 +1,125 @@
</span><ins>+<!DOCTYPE html>
+<html id="html">
+<head>
+<style id="custom-style">
+ * {
+ background-color: white;
+ margin: 0;
+ padding: 0;
+ }
+ :active {
+ background-color: rgb(50, 100, 150) !important;
+ }
+ label {
+ display: block;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ border: 2px solid black;
+ }
+</style>
+</head>
+<script src="../../resources/js-test-pre.js"></script>
+<body id="body">
+ <div id="webkit-test">
+ <div id="labelable-ancestor">
+ <div id="labelable-parent">
+ <label for="labelable">Label</label>
+ <label for="labelable">Label</label>
+ <label for="labelable">Label</label>
+ </div>
+ </div>
+ <div id="next-group" style="display:none">
+ <input id="labelable" value="Labelable Input">
+ <input id="labelable" value="Labelable Input">
+ <input id="labelable" value="Labelable Input">
+ </div>
+ </div>
+ <div id="console">
+ </div>
+ <script>
+ description("Verify that a labeled elemed gets the :active state even if it has no renderer.");
+ window.jsTestIsAsync = true;
+
+ function generateName(element) {
+ if (element.id && element.id != "labelable")
+ return element.id;
+
+ let childPosition = 1;
+ while (element.previousElementSibling) {
+ element = element.previousElementSibling;
+ ++childPosition;
+ }
+ return "#" + element.parentElement.id + " >> " + element.tagName.toLowerCase() + ":nth-child(" + childPosition + ")";
+ }
+
+ function elementsWithActiveStyle() {
+ let elements = [];
+ for (let element of document.querySelectorAll("*")) {
+ if (getComputedStyle(element).backgroundColor === "rgb(50, 100, 150)")
+ elements.push(generateName(element));
+ }
+ return elements;
+ }
+ function elementsMatchingActiveSelector() {
+ let elements = [];
+ for (let element of document.querySelectorAll(":active")) {
+ elements.push(generateName(element));
+ }
+ return elements;
+ }
+
+ if (window.eventSender) {
+ eventSender.mouseMoveTo(50, 150);
+ } else {
+ debug("");
+ debug("To run Manually, click-hold-release on the second green rect. All the results below should say PASS.")
+ debug("");
+ }
+
+ function sendMouseDown() {
+ if (window.eventSender) {
+ eventSender.mouseDown();
+ }
+ }
+
+ function sendMouseUp() {
+ if (window.eventSender) {
+ eventSender.mouseUp();
+ }
+ }
+
+ function mouseDownHandler(event, delayed = false) {
+ debug(delayed ? "After Mouse Down" : "On Mouse Down");
+ shouldBe('elementsWithActiveStyle()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(2)", "#next-group >> input:nth-child(1)"]');
+ shouldBe('elementsMatchingActiveSelector()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(2)", "#next-group >> input:nth-child(1)"]');
+
+ if (!delayed) {
+ setTimeout(function() { mouseDownHandler(event, true); }, 0);
+ } else {
+ sendMouseUp();
+ }
+ }
+ var target = document.querySelector('label:nth-child(2)');
+ target.addEventListener('mousedown', mouseDownHandler);
+
+ function mouseUpHandler(event, delayed = false) {
+ debug(delayed ? "After Mouse Up" : "On Mouse Up");
+ shouldBe('elementsWithActiveStyle()', '[]');
+ shouldBe('elementsMatchingActiveSelector()', '[]');
+ document.getElementById("webkit-test").style.display = "none";
+ document.getElementById("custom-style").innerText = "";
+ finishJSTest();
+ }
+ target.addEventListener('mouseup', mouseUpHandler);
+
+
+ debug("Initial state");
+ shouldBe('elementsWithActiveStyle()', '[]');
+ shouldBe('elementsMatchingActiveSelector()', '[]');
+
+ sendMouseDown();
+ </script>
+ <script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoactivestylesharing6expectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-active-style-sharing-6-expected.txt (0 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-active-style-sharing-6-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-active-style-sharing-6-expected.txt 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -0,0 +1,22 @@
</span><ins>+Verify that a labeled elemed gets the :active state even if it has no renderer.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+ Initial state
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+On Mouse Down
+PASS elementsWithActiveStyle() is ["#labelable-parent >> label:nth-child(2)", "labelable2"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(2)", "target2", "labelable2"]
+After Mouse Down
+PASS elementsWithActiveStyle() is ["#labelable-parent >> label:nth-child(2)", "labelable2"]
+PASS elementsMatchingActiveSelector() is ["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(2)", "target2", "labelable2"]
+On Mouse Up
+PASS elementsWithActiveStyle() is []
+PASS elementsMatchingActiveSelector() is []
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoactivestylesharing6html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-active-style-sharing-6.html (0 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-active-style-sharing-6.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-active-style-sharing-6.html 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -0,0 +1,125 @@
</span><ins>+<!DOCTYPE html>
+<html id="html">
+ <head>
+ <style id="custom-style">
+ * {
+ background-color: white;
+ margin: 0;
+ padding: 0;
+ }
+ label:active, input:active {
+ background-color: rgb(50, 100, 150) !important;
+ }
+ #target1, #target2, #target3 {
+ display: block;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ border: 2px solid black;
+ }
+ </style>
+ </head>
+ <script src="../../resources/js-test-pre.js"></script>
+ <body id="body">
+ <div id="webkit-test">
+ <div id="labelable-ancestor">
+ <div id="labelable-parent">
+ <label for="labelable1"><div id="target1"></div></label>
+ <label for="labelable2"><div id="target2">Target</div></label>
+ <label for="labelable3"><div id="target3"></div></label>
+ </div>
+ </div>
+ <div id="next-group" style="display:none">
+ <input id="labelable1" value="Labelable Input">
+ <input id="labelable2" value="Labelable Input">
+ <input id="labelable3" value="Labelable Input">
+ </div>
+ </div>
+ <div id="console">
+ </div>
+ <script>
+ description("Verify that a labeled elemed gets the :active state even if it has no renderer.");
+ window.jsTestIsAsync = true;
+
+ function generateName(element) {
+ if (element.id)
+ return element.id;
+
+ let childPosition = 1;
+ while (element.previousElementSibling) {
+ element = element.previousElementSibling;
+ ++childPosition;
+ }
+ return "#" + element.parentElement.id + " >> " + element.tagName.toLowerCase() + ":nth-child(" + childPosition + ")";
+ }
+
+ function elementsWithActiveStyle() {
+ let elements = [];
+ for (let element of document.querySelectorAll("*")) {
+ if (getComputedStyle(element).backgroundColor === "rgb(50, 100, 150)")
+ elements.push(generateName(element));
+ }
+ return elements;
+ }
+ function elementsMatchingActiveSelector() {
+ let elements = [];
+ for (let element of document.querySelectorAll(":active")) {
+ elements.push(generateName(element));
+ }
+ return elements;
+ }
+
+ if (window.eventSender) {
+ eventSender.mouseMoveTo(50, 150);
+ } else {
+ debug("");
+ debug("To run Manually, click-hold-release on the second green rect. All the results below should say PASS.")
+ debug("");
+ }
+
+ function sendMouseDown() {
+ if (window.eventSender) {
+ eventSender.mouseDown();
+ }
+ }
+
+ function sendMouseUp() {
+ if (window.eventSender) {
+ eventSender.mouseUp();
+ }
+ }
+
+ function mouseDownHandler(event, delayed = false) {
+ debug(delayed ? "After Mouse Down" : "On Mouse Down");
+ shouldBe('elementsWithActiveStyle()', '["#labelable-parent >> label:nth-child(2)", "labelable2"]');
+ shouldBe('elementsMatchingActiveSelector()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(2)", "target2", "labelable2"]');
+
+ if (!delayed) {
+ setTimeout(function() { mouseDownHandler(event, true); }, 0);
+ } else {
+ sendMouseUp();
+ }
+ }
+ var target = document.querySelector('label:nth-child(2)');
+ target.addEventListener('mousedown', mouseDownHandler);
+
+ function mouseUpHandler(event, delayed = false) {
+ debug(delayed ? "After Mouse Up" : "On Mouse Up");
+ shouldBe('elementsWithActiveStyle()', '[]');
+ shouldBe('elementsMatchingActiveSelector()', '[]');
+ document.getElementById("webkit-test").style.display = "none";
+ document.getElementById("custom-style").innerText = "";
+ finishJSTest();
+ }
+ target.addEventListener('mouseup', mouseUpHandler);
+
+
+ debug("Initial state");
+ shouldBe('elementsWithActiveStyle()', '[]');
+ shouldBe('elementsMatchingActiveSelector()', '[]');
+
+ sendMouseDown();
+ </script>
+ <script src="../../resources/js-test-post.js"></script>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsplatformiossimulatorTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (202516 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/ios-simulator/TestExpectations 2016-06-27 22:13:16 UTC (rev 202516)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -254,7 +254,14 @@
</span><span class="cx"> fast/scrolling/scroll-animator-select-list-events.html [ Skip ]
</span><span class="cx"> fast/events/prevent-default-prevents-interaction-with-scrollbars.html [ Skip ]
</span><span class="cx"> fast/text/text-disappear-on-deselect.html [ ImageOnlyFailure ]
</span><ins>+fast/css/pseudo-active-on-labeled-control-without-renderer.html [ Skip ]
</ins><span class="cx"> fast/css/pseudo-active-on-labeled-element-not-canceled-by-focus.html [ Skip ]
</span><ins>+fast/css/pseudo-active-style-sharing-1.html [ Skip ]
+fast/css/pseudo-active-style-sharing-2.html [ Skip ]
+fast/css/pseudo-active-style-sharing-3.html [ Skip ]
+fast/css/pseudo-active-style-sharing-4.html [ Skip ]
+fast/css/pseudo-active-style-sharing-5.html [ Skip ]
+fast/css/pseudo-active-style-sharing-6.html [ Skip ]
</ins><span class="cx"> fast/css/pseudo-active-with-programmatic-focus.html [ Skip ]
</span><span class="cx">
</span><span class="cx"> webkit.org/b/148695 fast/shadow-dom [ Pass ]
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (202516 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-06-27 22:13:16 UTC (rev 202516)
+++ trunk/Source/WebCore/ChangeLog 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -1,3 +1,34 @@
</span><ins>+2016-06-27 Benjamin Poulain <benjamin@webkit.org>
+
+ Fix style invalidation for :active when the activated node has no renderer
+ https://bugs.webkit.org/show_bug.cgi?id=159125
+
+ Reviewed by Antti Koivisto.
+
+ Same old bug: a style invalidation path was depending
+ on the style.
+
+ Here we really need both flags. An element can have
+ childrenAffectedByActive() false and renderStyle->affectedByActive() true
+ if it was subject to style sharing.
+
+ The element state "childrenAffectedByActive" should be renamed
+ "styleAffectedByActive" since it is not a parent invalidation flag.
+ That will be done separately.
+
+ Tests: fast/css/pseudo-active-on-labeled-control-without-renderer.html
+ fast/css/pseudo-active-style-sharing-1.html
+ fast/css/pseudo-active-style-sharing-2.html
+ fast/css/pseudo-active-style-sharing-3.html
+ fast/css/pseudo-active-style-sharing-4.html
+ fast/css/pseudo-active-style-sharing-5.html
+ fast/css/pseudo-active-style-sharing-6.html
+
+ * dom/Element.cpp:
+ (WebCore::Element::setActive):
+ * style/StyleRelations.cpp:
+ (WebCore::Style::commitRelationsToRenderStyle):
+
</ins><span class="cx"> 2016-06-27 Joanmarie Diggs <jdiggs@igalia.com>
</span><span class="cx">
</span><span class="cx"> AX: REGRESSION (r202063): ARIA role attribute is being ignored for label element
</span></span></pre></div>
<a id="trunkSourceWebCoredomElementcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/dom/Element.cpp (202516 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/dom/Element.cpp 2016-06-27 22:13:16 UTC (rev 202516)
+++ trunk/Source/WebCore/dom/Element.cpp 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -553,13 +553,14 @@
</span><span class="cx">
</span><span class="cx"> document().userActionElements().setActive(this, flag);
</span><span class="cx">
</span><ins>+ const RenderStyle* renderStyle = this->renderStyle();
+ bool reactsToPress = (renderStyle && renderStyle->affectedByActive()) || childrenAffectedByActive();
+ if (reactsToPress)
+ setNeedsStyleRecalc();
+
</ins><span class="cx"> if (!renderer())
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- bool reactsToPress = renderStyle()->affectedByActive() || childrenAffectedByActive();
- if (reactsToPress)
- setNeedsStyleRecalc();
-
</del><span class="cx"> if (renderer()->style().hasAppearance() && renderer()->theme().stateChanged(*renderer(), ControlStates::PressedState))
</span><span class="cx"> reactsToPress = true;
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorestyleStyleRelationscpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/style/StyleRelations.cpp (202516 => 202517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/style/StyleRelations.cpp 2016-06-27 22:13:16 UTC (rev 202516)
+++ trunk/Source/WebCore/style/StyleRelations.cpp 2016-06-27 22:20:17 UTC (rev 202517)
</span><span class="lines">@@ -52,6 +52,7 @@
</span><span class="cx"> switch (relation.type) {
</span><span class="cx"> case Relation::AffectedByActive:
</span><span class="cx"> style.setAffectedByActive();
</span><ins>+ appendStyleRelation(relation);
</ins><span class="cx"> break;
</span><span class="cx"> case Relation::AffectedByDrag:
</span><span class="cx"> style.setAffectedByDrag();
</span></span></pre>
</div>
</div>
</body>
</html>