<!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>[173012] 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/173012">173012</a></dd>
<dt>Author</dt> <dd>benjamin@webkit.org</dd>
<dt>Date</dt> <dd>2014-08-27 12:16:51 -0700 (Wed, 27 Aug 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Updating attributes on HTML elements do not invalidate the style correctly unless the attribute name is lowercase in the stylesheet
https://bugs.webkit.org/show_bug.cgi?id=136270
Source/WebCore:
Patch by Benjamin Poulain <bpoulain@apple.com> on 2014-08-27
Reviewed by Andreas Kling.
In HTML, WebKit treats every attribute name lowercase to implement case-insensitive matching.
When invalidating style, the StyleResolver was ignoring HTML and always using the XML names.
This patch split the names on RuleFeatureSet in two sets: one for XML, one for HTML.
In StyleResolver, the name used depends on the type of the element being updated.
This patch also adds nodeNeedsStyleRecalc() to Internals to test the optimization and various cases
of style update.
Tests: fast/css/attribute-for-content-property-style-update-html.html
fast/css/attribute-for-content-property-style-update-xhtml.xhtml
fast/css/attribute-style-invalidation-optimization-html.html
fast/css/attribute-style-invalidation-optimization-xhtml.xhtml
fast/css/attribute-style-update-html.html
fast/selectors/attribute-style-update-html.html
fast/selectors/attribute-style-update-svg-in-html.html
fast/selectors/attribute-style-update-xhtml.xhtml
* css/RuleFeature.cpp:
(WebCore::RuleFeatureSet::collectFeaturesFromSelector):
(WebCore::RuleFeatureSet::add):
(WebCore::RuleFeatureSet::clear):
* css/RuleFeature.h:
* css/StyleResolver.cpp:
(WebCore::StyleResolver::applyProperty):
* css/StyleResolver.h:
(WebCore::StyleResolver::hasSelectorForAttribute):
* dom/Element.cpp:
(WebCore::Element::willModifyAttribute):
* testing/Internals.cpp:
(WebCore::Internals::address):
(WebCore::Internals::nodeNeedsStyleRecalc):
* testing/Internals.h:
* testing/Internals.idl:
LayoutTests:
rdar://problem/16190617
Patch by Benjamin Poulain <bpoulain@apple.com> on 2014-08-27
Reviewed by Andreas Kling.
The test coverage for attribute update was abysmal. This adds the basic cases for HTML and XML.
* fast/css/attribute-for-content-property-style-update-html-expected.html: Added.
* fast/css/attribute-for-content-property-style-update-html.html: Added.
* fast/css/attribute-for-content-property-style-update-xhtml-expected.html: Added.
* fast/css/attribute-for-content-property-style-update-xhtml.xhtml: Added.
* fast/css/attribute-style-invalidation-optimization-html-expected.txt: Added.
* fast/css/attribute-style-invalidation-optimization-html.html: Added.
* fast/css/attribute-style-invalidation-optimization-xhtml-expected.txt: Added.
* fast/css/attribute-style-invalidation-optimization-xhtml.xhtml: Added.
* fast/css/attribute-style-update-html-expected.html: Added.
* fast/css/attribute-style-update-html.html: Added.
* fast/selectors/attribute-style-update-html-expected.txt: Added.
* fast/selectors/attribute-style-update-html.html: Added.
* fast/selectors/attribute-style-update-svg-in-html-expected.txt: Added.
* fast/selectors/attribute-style-update-svg-in-html.html: Added.
* fast/selectors/attribute-style-update-xhtml-expected.txt: Added.
* fast/selectors/attribute-style-update-xhtml.xhtml: 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="#trunkSourceWebCorecssRuleFeaturecpp">trunk/Source/WebCore/css/RuleFeature.cpp</a></li>
<li><a href="#trunkSourceWebCorecssRuleFeatureh">trunk/Source/WebCore/css/RuleFeature.h</a></li>
<li><a href="#trunkSourceWebCorecssStyleResolvercpp">trunk/Source/WebCore/css/StyleResolver.cpp</a></li>
<li><a href="#trunkSourceWebCorecssStyleResolverh">trunk/Source/WebCore/css/StyleResolver.h</a></li>
<li><a href="#trunkSourceWebCoredomElementcpp">trunk/Source/WebCore/dom/Element.cpp</a></li>
<li><a href="#trunkSourceWebCoretestingInternalscpp">trunk/Source/WebCore/testing/Internals.cpp</a></li>
<li><a href="#trunkSourceWebCoretestingInternalsh">trunk/Source/WebCore/testing/Internals.h</a></li>
<li><a href="#trunkSourceWebCoretestingInternalsidl">trunk/Source/WebCore/testing/Internals.idl</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssattributeforcontentpropertystyleupdatehtmlexpectedhtml">trunk/LayoutTests/fast/css/attribute-for-content-property-style-update-html-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssattributeforcontentpropertystyleupdatehtmlhtml">trunk/LayoutTests/fast/css/attribute-for-content-property-style-update-html.html</a></li>
<li><a href="#trunkLayoutTestsfastcssattributeforcontentpropertystyleupdatexhtmlexpectedhtml">trunk/LayoutTests/fast/css/attribute-for-content-property-style-update-xhtml-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssattributeforcontentpropertystyleupdatexhtmlxhtml">trunk/LayoutTests/fast/css/attribute-for-content-property-style-update-xhtml.xhtml</a></li>
<li><a href="#trunkLayoutTestsfastcssattributestyleinvalidationoptimizationhtmlexpectedtxt">trunk/LayoutTests/fast/css/attribute-style-invalidation-optimization-html-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssattributestyleinvalidationoptimizationhtmlhtml">trunk/LayoutTests/fast/css/attribute-style-invalidation-optimization-html.html</a></li>
<li><a href="#trunkLayoutTestsfastcssattributestyleinvalidationoptimizationxhtmlexpectedtxt">trunk/LayoutTests/fast/css/attribute-style-invalidation-optimization-xhtml-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssattributestyleinvalidationoptimizationxhtmlxhtml">trunk/LayoutTests/fast/css/attribute-style-invalidation-optimization-xhtml.xhtml</a></li>
<li><a href="#trunkLayoutTestsfastcssattributestyleupdatehtmlexpectedhtml">trunk/LayoutTests/fast/css/attribute-style-update-html-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssattributestyleupdatehtmlhtml">trunk/LayoutTests/fast/css/attribute-style-update-html.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsattributestyleupdatehtmlexpectedtxt">trunk/LayoutTests/fast/selectors/attribute-style-update-html-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsattributestyleupdatehtmlhtml">trunk/LayoutTests/fast/selectors/attribute-style-update-html.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsattributestyleupdatesvginhtmlexpectedtxt">trunk/LayoutTests/fast/selectors/attribute-style-update-svg-in-html-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsattributestyleupdatesvginhtmlhtml">trunk/LayoutTests/fast/selectors/attribute-style-update-svg-in-html.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsattributestyleupdatexhtmlexpectedtxt">trunk/LayoutTests/fast/selectors/attribute-style-update-xhtml-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsattributestyleupdatexhtmlxhtml">trunk/LayoutTests/fast/selectors/attribute-style-update-xhtml.xhtml</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (173011 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-08-27 19:15:52 UTC (rev 173011)
+++ trunk/LayoutTests/ChangeLog 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -1,3 +1,30 @@
</span><ins>+2014-08-27 Benjamin Poulain <bpoulain@apple.com>
+
+ Updating attributes on HTML elements do not invalidate the style correctly unless the attribute name is lowercase in the stylesheet
+ https://bugs.webkit.org/show_bug.cgi?id=136270
+ rdar://problem/16190617
+
+ Reviewed by Andreas Kling.
+
+ The test coverage for attribute update was abysmal. This adds the basic cases for HTML and XML.
+
+ * fast/css/attribute-for-content-property-style-update-html-expected.html: Added.
+ * fast/css/attribute-for-content-property-style-update-html.html: Added.
+ * fast/css/attribute-for-content-property-style-update-xhtml-expected.html: Added.
+ * fast/css/attribute-for-content-property-style-update-xhtml.xhtml: Added.
+ * fast/css/attribute-style-invalidation-optimization-html-expected.txt: Added.
+ * fast/css/attribute-style-invalidation-optimization-html.html: Added.
+ * fast/css/attribute-style-invalidation-optimization-xhtml-expected.txt: Added.
+ * fast/css/attribute-style-invalidation-optimization-xhtml.xhtml: Added.
+ * fast/css/attribute-style-update-html-expected.html: Added.
+ * fast/css/attribute-style-update-html.html: Added.
+ * fast/selectors/attribute-style-update-html-expected.txt: Added.
+ * fast/selectors/attribute-style-update-html.html: Added.
+ * fast/selectors/attribute-style-update-svg-in-html-expected.txt: Added.
+ * fast/selectors/attribute-style-update-svg-in-html.html: Added.
+ * fast/selectors/attribute-style-update-xhtml-expected.txt: Added.
+ * fast/selectors/attribute-style-update-xhtml.xhtml: Added.
+
</ins><span class="cx"> 2014-08-27 Mihnea Ovidenie <mihnea@adobe.com>
</span><span class="cx">
</span><span class="cx"> [CSS Regions] Move generated content tests into fast/regions/generated-content
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssattributeforcontentpropertystyleupdatehtmlexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/attribute-for-content-property-style-update-html-expected.html (0 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/attribute-for-content-property-style-update-html-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/attribute-for-content-property-style-update-html-expected.html 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -0,0 +1,27 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.valid::before {
+ content: "WebKit!"
+}
+</style>
+</head>
+<body>
+ <p>This test checks the styling and style update of attributes that are only used by the "content" propery of a rule. HTML should match the attribute regardless of the case.</p>
+ <div id="initial">
+ <target>No attribute</target>
+
+ <target class="valid">CamelCase initial attribute</target>
+ <target class="valid">camelcase initial attribute</target>
+ <target class="valid">CAMELCASE initial attribute</target>
+ </div>
+ <div id="dynamic">
+ <target>No attribute</target>
+
+ <target class="valid">CamelCase initial attribute</target>
+ <target class="valid">camelcase initial attribute</target>
+ <target class="valid">CAMELCASE initial attribute</target>
+ </div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssattributeforcontentpropertystyleupdatehtmlhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/attribute-for-content-property-style-update-html.html (0 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/attribute-for-content-property-style-update-html.html (rev 0)
+++ trunk/LayoutTests/fast/css/attribute-for-content-property-style-update-html.html 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -0,0 +1,37 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<style>
+target::before {
+ content: attr(CamelCase)
+}
+</style>
+</head>
+<body>
+ <p>This test checks the styling and style update of attributes that are only used by the "content" propery of a rule. HTML should match the attribute regardless of the case.</p>
+ <div id="initial">
+ <target>No attribute</target>
+
+ <target CamelCase="WebKit!">CamelCase initial attribute</target>
+ <target camelcase="WebKit!">camelcase initial attribute</target>
+ <target CAMELCASE="WebKit!">CAMELCASE initial attribute</target>
+ </div>
+ <div id="dynamic">
+ <target>No attribute</target>
+
+ <target>CamelCase initial attribute</target>
+ <target>camelcase initial attribute</target>
+ <target>CAMELCASE initial attribute</target>
+ </div>
+</body>
+<script>
+window.addEventListener("load", function() {
+ forcedLayout = document.documentElement.offsetTop;
+
+ var allDynamicTargets = document.querySelectorAll("#dynamic>target");
+ allDynamicTargets[1].setAttribute("CamelCase", "WebKit!");
+ allDynamicTargets[2].setAttribute("camelcase", "WebKit!");
+ allDynamicTargets[3].setAttribute("CAMELCASE", "WebKit!");
+});
+</script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssattributeforcontentpropertystyleupdatexhtmlexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/attribute-for-content-property-style-update-xhtml-expected.html (0 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/attribute-for-content-property-style-update-xhtml-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/attribute-for-content-property-style-update-xhtml-expected.html 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -0,0 +1,27 @@
</span><ins>+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<style>
+.valid::before {
+ content: "WebKit!"
+}
+</style>
+</head>
+<body>
+ <p>This test checks the styling and style update of attributes that are only used by the "content" propery of a rule.</p>
+ <div id="initial">
+ <target>No attribute</target>
+
+ <target class="valid">CamelCase initial attribute</target>
+ <target>camelcase initial attribute</target>
+ <target>CAMELCASE initial attribute</target>
+ </div>
+ <div id="dynamic">
+ <target>No attribute</target>
+
+ <target class="valid">CamelCase initial attribute</target>
+ <target>camelcase initial attribute</target>
+ <target>CAMELCASE initial attribute</target>
+ </div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssattributeforcontentpropertystyleupdatexhtmlxhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/attribute-for-content-property-style-update-xhtml.xhtml (0 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/attribute-for-content-property-style-update-xhtml.xhtml (rev 0)
+++ trunk/LayoutTests/fast/css/attribute-for-content-property-style-update-xhtml.xhtml 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -0,0 +1,37 @@
</span><ins>+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<style>
+target::before {
+ content: attr(CamelCase)
+}
+</style>
+</head>
+<body>
+ <p>This test checks the styling and style update of attributes that are only used by the "content" propery of a rule.</p>
+ <div id="initial">
+ <target>No attribute</target>
+
+ <target CamelCase="WebKit!">CamelCase initial attribute</target>
+ <target camelcase="WebKit!">camelcase initial attribute</target>
+ <target CAMELCASE="WebKit!">CAMELCASE initial attribute</target>
+ </div>
+ <div id="dynamic">
+ <target>No attribute</target>
+
+ <target>CamelCase initial attribute</target>
+ <target>camelcase initial attribute</target>
+ <target>CAMELCASE initial attribute</target>
+ </div>
+</body>
+<script><![CDATA[
+window.addEventListener("load", function() {
+ forcedLayout = document.documentElement.offsetTop;
+
+ var allDynamicTargets = document.querySelectorAll("#dynamic>target");
+ allDynamicTargets[1].setAttribute("CamelCase", "WebKit!");
+ allDynamicTargets[2].setAttribute("camelcase", "WebKit!");
+ allDynamicTargets[3].setAttribute("CAMELCASE", "WebKit!");
+});
+]]></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssattributestyleinvalidationoptimizationhtmlexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/attribute-style-invalidation-optimization-html-expected.txt (0 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/attribute-style-invalidation-optimization-html-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/attribute-style-invalidation-optimization-html-expected.txt 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -0,0 +1,41 @@
</span><ins>+Test that we only invalidate the style when changing an attribute referenced by a stylesheet. This test requires the internals object to work properly.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is false
+Changing the attribute 'foo', it is not referenced by any stylesheet and should not cause any invalidation.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is false
+Changing the attribute 'CamelCase'. It is used by the stylesheet and should cause the target to be invalidated.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is true
+Getting the computed style should for the style to be resolved.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is false
+Removing the attribute should also invalidate the style.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is true
+Getting the computed style should for the style to be resolved.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is false
+Changing the attribute 'camelcase'. It is not used as such by the stylesheet, but in HTML attribute names are case-insensitive and we should still invalidate the style.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is true
+Getting the computed style should for the style to be resolved.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is false
+Removing the attribute should also invalidate the style.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is true
+Getting the computed style should for the style to be resolved.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is false
+Changing the attribute 'CAMELCASE'. It is not used as such by the stylesheet, but in HTML attribute names are case-insensitive and we should still invalidate the style.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssattributestyleinvalidationoptimizationhtmlhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/attribute-style-invalidation-optimization-html.html (0 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/attribute-style-invalidation-optimization-html.html (rev 0)
+++ trunk/LayoutTests/fast/css/attribute-style-invalidation-optimization-html.html 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -0,0 +1,97 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+* {
+ color: black;
+}
+[CamelCase] {
+ color: pink;
+}
+</style>
+</head>
+<body>
+ <div>
+ <!-- With renderer -->
+ <target></target>
+ </div>
+ <div style="display:none;">
+ <!-- Without renderer -->
+ <target></target>
+ </div>
+</body>
+<script>
+// It is okay to increase the amount of invalidation in this test for correctness if necessary.
+description('Test that we only invalidate the style when changing an attribute referenced by a stylesheet. This test requires the internals object to work properly.');
+
+function shouldNeedStyleRecalc(expected) {
+ var testFunction = expected ? shouldBeTrue : shouldBeFalse;
+ testFunction("window.internals.nodeNeedsStyleRecalc(document.querySelectorAll(\"target\")[0])");
+ testFunction("window.internals.nodeNeedsStyleRecalc(document.querySelectorAll(\"target\")[1])");
+}
+
+function setAttribute(name, value) {
+ var allTargets = document.querySelectorAll("target");
+ allTargets[0].setAttribute(name, value);
+ allTargets[1].setAttribute(name, value);
+}
+
+function removeAttribute(name) {
+ var allTargets = document.querySelectorAll("target");
+ allTargets[0].removeAttribute(name);
+ allTargets[1].removeAttribute(name);
+}
+
+function getStyle() {
+ var allTargets = document.querySelectorAll("target");
+ getComputedStyle(allTargets[0]).color;
+ getComputedStyle(allTargets[1]).color;
+}
+
+// Force a layout to ensure we don't have dirty styles.
+var offsetTop = document.documentElement.offsetTop;
+shouldNeedStyleRecalc(false);
+
+debug("Changing the attribute 'foo', it is not referenced by any stylesheet and should not cause any invalidation.");
+setAttribute("foo", "bar");
+shouldNeedStyleRecalc(false);
+
+debug("Changing the attribute 'CamelCase'. It is used by the stylesheet and should cause the target to be invalidated.");
+setAttribute("CamelCase", "");
+shouldNeedStyleRecalc(true);
+
+debug("Getting the computed style should for the style to be resolved.");
+getStyle();
+shouldNeedStyleRecalc(false);
+
+debug("Removing the attribute should also invalidate the style.");
+removeAttribute("CamelCase");
+shouldNeedStyleRecalc(true);
+
+debug("Getting the computed style should for the style to be resolved.");
+getStyle();
+shouldNeedStyleRecalc(false)
+
+debug("Changing the attribute 'camelcase'. It is not used as such by the stylesheet, but in HTML attribute names are case-insensitive and we should still invalidate the style.");
+setAttribute("camelcase", "");
+shouldNeedStyleRecalc(true);
+
+debug("Getting the computed style should for the style to be resolved.");
+getStyle();
+shouldNeedStyleRecalc(false);
+
+debug("Removing the attribute should also invalidate the style.");
+removeAttribute("CamelCase");
+shouldNeedStyleRecalc(true);
+
+debug("Getting the computed style should for the style to be resolved.");
+getStyle();
+shouldNeedStyleRecalc(false)
+
+debug("Changing the attribute 'CAMELCASE'. It is not used as such by the stylesheet, but in HTML attribute names are case-insensitive and we should still invalidate the style.");
+setAttribute("CAMELCASE", "");
+shouldNeedStyleRecalc(true);
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssattributestyleinvalidationoptimizationxhtmlexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/attribute-style-invalidation-optimization-xhtml-expected.txt (0 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/attribute-style-invalidation-optimization-xhtml-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/attribute-style-invalidation-optimization-xhtml-expected.txt 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -0,0 +1,32 @@
</span><ins>+Test that we only invalidate the style when changing an attribute referenced by a stylesheet. This test requires the internals object to work properly.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is false
+Changing the attribute 'foo', it is not referenced by any stylesheet and should not cause any invalidation.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is false
+Changing the attribute 'CamelCase'. It is used by the stylesheet and should cause the target to be invalidated.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is true
+Getting the computed style should for the style to be resolved.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is false
+Removing the attribute should also invalidate the style.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is true
+Getting the computed style should for the style to be resolved.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is false
+Changing the attribute 'camelcase'. Since XML attributes are case sensitive, this does not invalidate the style since it is a different attribute.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is false
+Changing the attribute 'CAMELCASE'. Same deal, this is a different attribute.
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[0]) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.querySelectorAll("target")[1]) is false
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssattributestyleinvalidationoptimizationxhtmlxhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/attribute-style-invalidation-optimization-xhtml.xhtml (0 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/attribute-style-invalidation-optimization-xhtml.xhtml (rev 0)
+++ trunk/LayoutTests/fast/css/attribute-style-invalidation-optimization-xhtml.xhtml 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -0,0 +1,85 @@
</span><ins>+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+* {
+ color: black;
+}
+[CamelCase] {
+ color: pink;
+}
+</style>
+</head>
+<body>
+ <div>
+ <!-- With renderer -->
+ <target></target>
+ </div>
+ <div style="display:none;">
+ <!-- Without renderer -->
+ <target></target>
+ </div>
+</body>
+<script><![CDATA[
+// It is okay to increase the amount of invalidation in this test for correctness if necessary.
+description('Test that we only invalidate the style when changing an attribute referenced by a stylesheet. This test requires the internals object to work properly.');
+
+function shouldNeedStyleRecalc(expected) {
+ var testFunction = expected ? shouldBeTrue : shouldBeFalse;
+ testFunction("window.internals.nodeNeedsStyleRecalc(document.querySelectorAll(\"target\")[0])");
+ testFunction("window.internals.nodeNeedsStyleRecalc(document.querySelectorAll(\"target\")[1])");
+}
+
+function setAttribute(name, value) {
+ var allTargets = document.querySelectorAll("target");
+ allTargets[0].setAttribute(name, value);
+ allTargets[1].setAttribute(name, value);
+}
+
+function removeAttribute(name) {
+ var allTargets = document.querySelectorAll("target");
+ allTargets[0].removeAttribute(name);
+ allTargets[1].removeAttribute(name);
+}
+
+function getStyle() {
+ var allTargets = document.querySelectorAll("target");
+ getComputedStyle(allTargets[0]).color;
+ getComputedStyle(allTargets[1]).color;
+}
+
+// Force a layout to ensure we don't have dirty styles.
+var offsetTop = document.documentElement.offsetTop;
+shouldNeedStyleRecalc(false);
+
+debug("Changing the attribute 'foo', it is not referenced by any stylesheet and should not cause any invalidation.");
+setAttribute("foo", "bar");
+shouldNeedStyleRecalc(false);
+
+debug("Changing the attribute 'CamelCase'. It is used by the stylesheet and should cause the target to be invalidated.");
+setAttribute("CamelCase", "");
+shouldNeedStyleRecalc(true);
+
+debug("Getting the computed style should for the style to be resolved.");
+getStyle();
+shouldNeedStyleRecalc(false);
+
+debug("Removing the attribute should also invalidate the style.");
+removeAttribute("CamelCase");
+shouldNeedStyleRecalc(true);
+
+debug("Getting the computed style should for the style to be resolved.");
+getStyle();
+shouldNeedStyleRecalc(false)
+
+debug("Changing the attribute 'camelcase'. Since XML attributes are case sensitive, this does not invalidate the style since it is a different attribute.");
+setAttribute("camelcase", "");
+shouldNeedStyleRecalc(false);
+
+debug("Changing the attribute 'CAMELCASE'. Same deal, this is a different attribute.");
+setAttribute("CAMELCASE", "");
+shouldNeedStyleRecalc(false);
+]]></script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssattributestyleupdatehtmlexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/attribute-style-update-html-expected.html (0 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/attribute-style-update-html-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/attribute-style-update-html-expected.html 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -0,0 +1,60 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<style>
+* {
+ background-color: white;
+ color: black;
+ fill-opacity: 1;
+}
+.background {
+ background-color: rgb(1, 2, 3);
+}
+.border {
+ border: 1px black solid;
+}
+.color {
+ color: pink;
+}
+</style>
+</head>
+<body>
+ <p>This test checks the styling of elements based on their attributes. Since HTML processes attribute as case-insensitive, any case varation should work. This test passes if every triplet looks the same in both series and if it matches the reference.</p>
+ <div>
+ <target>No attribute</target>
+ <target class="background">lowercase initial attribute</target>
+ <target class="background">LOWERCASE initial attribute</target>
+ <target class="background">LowerCase initial attribute</target>
+
+ <target class="border">UPPERCASE initial attribute</target>
+ <target class="border">uppercase initial attribute</target>
+ <target class="border">UpperCase initial attribute</target>
+
+ <target class="color">CamelCase initial attribute</target>
+ <target class="color">camelcase initial attribute</target>
+ <target class="color">CAMELCASE initial attribute</target>
+
+ <target class="background border color">LowerCase UpperCase CAMELCASE initial attributes</target>
+ <target class="background border color">LowerCase UpperCase CAMELCASE initial attributes</target>
+ <target class="background border color">LowerCase UpperCase CAMELCASE initial attributes</target>
+ </div>
+ <div>
+ <target>No attribute</target>
+ <target class="background">lowercase dynamic attribute</target>
+ <target class="background">LOWERCASE dynamic attribute</target>
+ <target class="background">LowerCase dynamic attribute</target>
+
+ <target class="border">UPPERCASE dynamic attribute</target>
+ <target class="border">uppercase dynamic attribute</target>
+ <target class="border">UpperCase dynamic attribute</target>
+
+ <target class="color">CamelCase dynamic attribute</target>
+ <target class="color">camelcase dynamic attribute</target>
+ <target class="color">CAMELCASE dynamic attribute</target>
+
+ <target class="background border color">LowerCase UpperCase CAMELCASE dynamic attributes</target>
+ <target class="background border color">LowerCase UpperCase CAMELCASE dynamic attributes</target>
+ <target class="background border color">LowerCase UpperCase CAMELCASE dynamic attributes</target>
+ </div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssattributestyleupdatehtmlhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/attribute-style-update-html.html (0 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/attribute-style-update-html.html (rev 0)
+++ trunk/LayoutTests/fast/css/attribute-style-update-html.html 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -0,0 +1,88 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<style>
+* {
+ background-color: white;
+ color: black;
+ fill-opacity: 1;
+}
+[lowercase] {
+ background-color: rgb(1, 2, 3);
+}
+[UPPERCASE] {
+ border: 1px black solid;
+}
+[CamelCase] {
+ color: pink;
+}
+</style>
+</head>
+<body>
+ <p>This test checks the styling of elements based on their attributes. Since HTML processes attribute as case-insensitive, any case varation should work. This test passes if every triplet looks the same in both series and if it matches the reference.</p>
+ <div id="initial">
+ <target>No attribute</target>
+ <target lowercase>lowercase initial attribute</target>
+ <target LOWERCASE>LOWERCASE initial attribute</target>
+ <target LowerCase>LowerCase initial attribute</target>
+
+ <target UPPERCASE>UPPERCASE initial attribute</target>
+ <target uppercase>uppercase initial attribute</target>
+ <target UpperCase>UpperCase initial attribute</target>
+
+ <target CamelCase>CamelCase initial attribute</target>
+ <target camelcase>camelcase initial attribute</target>
+ <target CAMELCASE>CAMELCASE initial attribute</target>
+
+ <target lowercase UPPERCASE CamelCase>LowerCase UpperCase CAMELCASE initial attributes</target>
+ <target LOWERCASE uppercase camelcase>LowerCase UpperCase CAMELCASE initial attributes</target>
+ <target LowerCase UpperCase CAMELCASE>LowerCase UpperCase CAMELCASE initial attributes</target>
+ </div>
+ <div id="dynamic">
+ <target>No attribute</target>
+ <target>lowercase dynamic attribute</target>
+ <target>LOWERCASE dynamic attribute</target>
+ <target>LowerCase dynamic attribute</target>
+
+ <target>UPPERCASE dynamic attribute</target>
+ <target>uppercase dynamic attribute</target>
+ <target>UpperCase dynamic attribute</target>
+
+ <target>CamelCase dynamic attribute</target>
+ <target>camelcase dynamic attribute</target>
+ <target>CAMELCASE dynamic attribute</target>
+
+ <target>LowerCase UpperCase CAMELCASE dynamic attributes</target>
+ <target>LowerCase UpperCase CAMELCASE dynamic attributes</target>
+ <target>LowerCase UpperCase CAMELCASE dynamic attributes</target>
+ </div>
+</body>
+<script>
+window.addEventListener("load", function() {
+ forcedLayout = document.documentElement.offsetTop;
+
+ var allDynamicTargets = document.querySelectorAll("#dynamic>target");
+ allDynamicTargets[1].setAttribute("lowercase", "");
+ allDynamicTargets[2].setAttribute("LOWERCASE", "");
+ allDynamicTargets[3].setAttribute("LowerCase", "");
+
+ allDynamicTargets[4].setAttribute("UPPERCASE", "");
+ allDynamicTargets[5].setAttribute("uppercase", "");
+ allDynamicTargets[6].setAttribute("UpperCase", "");
+
+ allDynamicTargets[7].setAttribute("CamelCase", "");
+ allDynamicTargets[8].setAttribute("camelcase", "");
+ allDynamicTargets[9].setAttribute("CAMELCASE", "");
+
+ allDynamicTargets[10].setAttribute("lowercase", "");
+ allDynamicTargets[10].setAttribute("UPPERCASE", "");
+ allDynamicTargets[10].setAttribute("CamelCase", "");
+ allDynamicTargets[11].setAttribute("LOWERCASE", "");
+ allDynamicTargets[11].setAttribute("uppercase", "");
+ allDynamicTargets[11].setAttribute("camelcase", "");
+ allDynamicTargets[12].setAttribute("LowerCase", "");
+ allDynamicTargets[12].setAttribute("UpperCase", "");
+ allDynamicTargets[12].setAttribute("CAMELCASE", "");
+});
+</script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsattributestyleupdatehtmlexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/attribute-style-update-html-expected.txt (0 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/attribute-style-update-html-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/attribute-style-update-html-expected.txt 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -0,0 +1,121 @@
</span><ins>+Test the basic cases of style update for attribute selectors for HTML.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Initial state does not match anything, there are no attributes on the targets.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "lowercase", the background-color should match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Removing "lowercase", the background-color should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "LOWERCASE", the background-color should match because the document is HTML and has case-insensitive attribute matching.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Removing "LOWERCASE", the background-color should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "LowerCase", the background-color should match because the document is HTML and has case-insensitive attribute matching.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "UPPERCASE", the fill-opacity should match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Removing "UPPERCASE", the fill-opacity should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "uppercase", the fill-opacity should match because the document is HTML and has case-insensitive attribute matching.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Removing "uppercase", the fill-opacity should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "UpperCase", the fill-opacity should match because the document is HTML and has case-insensitive attribute matching.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "CamelCase", the color should match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(4, 5, 6)"
+Removing "CamelCase", the color should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "camelcase", the color should match because the document is HTML and has case-insensitive attribute matching.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(4, 5, 6)"
+Removing "camelcase", the color should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "CAMELCASE", the color should match because the document is HTML and has case-insensitive attribute matching.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(4, 5, 6)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsattributestyleupdatehtmlhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/attribute-style-update-html.html (0 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/attribute-style-update-html.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/attribute-style-update-html.html 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -0,0 +1,129 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+* {
+ background-color: white;
+ color: black;
+ fill-opacity: 1;
+}
+[lowercase] {
+ background-color: rgb(1, 2, 3);
+}
+[UPPERCASE] {
+ fill-opacity: 0.5;
+}
+[CamelCase] {
+ color: rgb(4, 5, 6);
+}
+</style>
+</head>
+<body>
+ <div>
+ <!-- With renderer -->
+ <target></target>
+ </div>
+ <div style="display:none;">
+ <!-- Without renderer -->
+ <target></target>
+ </div>
+</body>
+<script>
+description('Test the basic cases of style update for attribute selectors for HTML.');
+
+var noMatch = 0;
+var matchLowerCase = 1;
+var matchUpperCase = 1 << 1;
+var matchCamelCase = 1 << 2;
+
+function testColor(mask) {
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor', (mask & matchLowerCase) ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor', (mask & matchLowerCase) ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity', (mask & matchUpperCase) ? '0.5' : '1');
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity', (mask & matchUpperCase) ? '0.5' : '1');
+
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[0]).color', (mask & matchCamelCase) ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[1]).color', (mask & matchCamelCase) ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
+}
+
+function setAttribute(attribute, value) {
+ var allTargets = document.querySelectorAll("target");
+ for (var i = 0; i < allTargets.length; ++i)
+ allTargets[i].setAttribute(attribute, value);
+}
+
+function removeAttribute(attribute) {
+ var allTargets = document.querySelectorAll("target");
+ for (var i = 0; i < allTargets.length; ++i)
+ allTargets[i].removeAttribute(attribute);
+}
+
+debug("Initial state does not match anything, there are no attributes on the targets.");
+testColor(noMatch);
+
+debug("Adding \"lowercase\", the background-color should match.");
+setAttribute("lowercase");
+testColor(matchLowerCase);
+
+debug("Removing \"lowercase\", the background-color should no longer match.");
+removeAttribute("lowercase");
+testColor(noMatch);
+
+debug("Adding \"LOWERCASE\", the background-color should match because the document is HTML and has case-insensitive attribute matching.");
+setAttribute("LOWERCASE");
+testColor(matchLowerCase);
+
+debug("Removing \"LOWERCASE\", the background-color should no longer match.");
+removeAttribute("LOWERCASE");
+testColor(noMatch);
+
+debug("Adding \"LowerCase\", the background-color should match because the document is HTML and has case-insensitive attribute matching.");
+setAttribute("LOWERCASE");
+testColor(matchLowerCase);
+
+
+debug("Adding \"UPPERCASE\", the fill-opacity should match.");
+setAttribute("UPPERCASE");
+testColor(matchLowerCase | matchUpperCase);
+
+debug("Removing \"UPPERCASE\", the fill-opacity should no longer match.");
+removeAttribute("UPPERCASE");
+testColor(matchLowerCase);
+
+debug("Adding \"uppercase\", the fill-opacity should match because the document is HTML and has case-insensitive attribute matching.");
+setAttribute("uppercase");
+testColor(matchLowerCase | matchUpperCase);
+
+debug("Removing \"uppercase\", the fill-opacity should no longer match.");
+removeAttribute("uppercase");
+testColor(matchLowerCase);
+
+debug("Adding \"UpperCase\", the fill-opacity should match because the document is HTML and has case-insensitive attribute matching.");
+setAttribute("UpperCase");
+testColor(matchLowerCase | matchUpperCase);
+
+
+debug("Adding \"CamelCase\", the color should match.");
+setAttribute("CamelCase");
+testColor(matchLowerCase | matchUpperCase | matchCamelCase);
+
+debug("Removing \"CamelCase\", the color should no longer match.");
+removeAttribute("CamelCase");
+testColor(matchLowerCase | matchUpperCase);
+
+debug("Adding \"camelcase\", the color should match because the document is HTML and has case-insensitive attribute matching.");
+setAttribute("camelcase");
+testColor(matchLowerCase | matchUpperCase | matchCamelCase);
+
+debug("Removing \"camelcase\", the color should no longer match.");
+removeAttribute("camelcase");
+testColor(matchLowerCase | matchUpperCase);
+
+debug("Adding \"CAMELCASE\", the color should match because the document is HTML and has case-insensitive attribute matching.");
+setAttribute("CAMELCASE");
+testColor(matchLowerCase | matchUpperCase | matchCamelCase);
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsattributestyleupdatesvginhtmlexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/attribute-style-update-svg-in-html-expected.txt (0 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/attribute-style-update-svg-in-html-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/attribute-style-update-svg-in-html-expected.txt 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -0,0 +1,121 @@
</span><ins>+Test the basic cases of style update for attribute selectors for SVG inside a HTML document.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Initial state does not match anything, there are no attributes on the targets.
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)"
+Adding "lowercase", the background-color should match.
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)"
+Removing "lowercase", the background-color should no longer match.
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)"
+Adding "LOWERCASE", the background-color should not match because SVG elements are XML, their attribute names are case sensitive.
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)"
+Removing "LOWERCASE", the background-color should no longer match.
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)"
+Adding "LowerCase", the background-color should not match because SVG elements are XML, their attribute names are case sensitive.
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)"
+Adding "UPPERCASE", the fill-opacity should match.
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)"
+Removing "UPPERCASE", the fill-opacity should no longer match.
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)"
+Adding "uppercase", the fill-opacity should not match because SVG elements are XML, their attribute names are case sensitive.
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)"
+Removing "uppercase", the fill-opacity should no longer match.
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)"
+Adding "UpperCase", the fill-opacity should not match because SVG elements are XML, their attribute names are case sensitive.
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)"
+Adding "CamelCase", the color should match.
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(4, 5, 6)"
+Removing "CamelCase", the color should no longer match.
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)"
+Adding "camelcase", the color should not match because SVG elements are XML, their attribute names are case sensitive.
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)"
+Removing "camelcase", the color should no longer match.
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)"
+Adding "CAMELCASE", the color should not match because SVG elements are XML, their attribute names are case sensitive.
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsattributestyleupdatesvginhtmlhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/attribute-style-update-svg-in-html.html (0 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/attribute-style-update-svg-in-html.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/attribute-style-update-svg-in-html.html 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -0,0 +1,133 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+* {
+ background-color: white;
+ color: black;
+ fill-opacity: 1;
+}
+[lowercase] {
+ background-color: rgb(1, 2, 3);
+}
+[UPPERCASE] {
+ fill-opacity: 0.5;
+}
+[CamelCase] {
+ color: rgb(4, 5, 6);
+}
+</style>
+</head>
+<body>
+ <div>
+ <!-- With renderer -->
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" style="margin-top:50px">
+ <rect id=rect2 x="0" y="0" width="50" height="50" style="fill:green" />
+ </svg>
+ </div>
+ <div style="display:none;">
+ <!-- Without renderer -->
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" style="margin-top:50px">
+ <rect id=rect2 x="0" y="0" width="50" height="50" style="fill:green" />
+ </svg>
+ </div>
+</body>
+<script>
+description('Test the basic cases of style update for attribute selectors for SVG inside a HTML document.');
+
+var noMatch = 0;
+var matchLowerCase = 1;
+var matchUpperCase = 1 << 1;
+var matchCamelCase = 1 << 2;
+
+function testColor(mask) {
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor', (mask & matchLowerCase) ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor', (mask & matchLowerCase) ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity', (mask & matchUpperCase) ? '0.5' : '1');
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity', (mask & matchUpperCase) ? '0.5' : '1');
+
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("rect")[0]).color', (mask & matchCamelCase) ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("rect")[1]).color', (mask & matchCamelCase) ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
+}
+
+function setAttribute(attribute, value) {
+ var allTargets = document.querySelectorAll("rect");
+ for (var i = 0; i < allTargets.length; ++i)
+ allTargets[i].setAttribute(attribute, value);
+}
+
+function removeAttribute(attribute) {
+ var allTargets = document.querySelectorAll("rect");
+ for (var i = 0; i < allTargets.length; ++i)
+ allTargets[i].removeAttribute(attribute);
+}
+
+debug("Initial state does not match anything, there are no attributes on the targets.");
+testColor(noMatch);
+
+debug("Adding \"lowercase\", the background-color should match.");
+setAttribute("lowercase");
+testColor(matchLowerCase);
+
+debug("Removing \"lowercase\", the background-color should no longer match.");
+removeAttribute("lowercase");
+testColor(noMatch);
+
+debug("Adding \"LOWERCASE\", the background-color should not match because SVG elements are XML, their attribute names are case sensitive.");
+setAttribute("LOWERCASE");
+testColor(noMatch);
+
+debug("Removing \"LOWERCASE\", the background-color should no longer match.");
+removeAttribute("LOWERCASE");
+testColor(noMatch);
+
+debug("Adding \"LowerCase\", the background-color should not match because SVG elements are XML, their attribute names are case sensitive.");
+setAttribute("LOWERCASE");
+testColor(noMatch);
+
+
+debug("Adding \"UPPERCASE\", the fill-opacity should match.");
+setAttribute("UPPERCASE");
+testColor(matchUpperCase);
+
+debug("Removing \"UPPERCASE\", the fill-opacity should no longer match.");
+removeAttribute("UPPERCASE");
+testColor(noMatch);
+
+debug("Adding \"uppercase\", the fill-opacity should not match because SVG elements are XML, their attribute names are case sensitive.");
+setAttribute("uppercase");
+testColor(noMatch);
+
+debug("Removing \"uppercase\", the fill-opacity should no longer match.");
+removeAttribute("uppercase");
+testColor(noMatch);
+
+debug("Adding \"UpperCase\", the fill-opacity should not match because SVG elements are XML, their attribute names are case sensitive.");
+setAttribute("UpperCase");
+testColor(noMatch);
+
+
+debug("Adding \"CamelCase\", the color should match.");
+setAttribute("CamelCase");
+testColor(matchCamelCase);
+
+debug("Removing \"CamelCase\", the color should no longer match.");
+removeAttribute("CamelCase");
+testColor(noMatch);
+
+debug("Adding \"camelcase\", the color should not match because SVG elements are XML, their attribute names are case sensitive.");
+setAttribute("camelcase");
+testColor(noMatch);
+
+debug("Removing \"camelcase\", the color should no longer match.");
+removeAttribute("camelcase");
+testColor(noMatch);
+
+debug("Adding \"CAMELCASE\", the color should not match because SVG elements are XML, their attribute names are case sensitive.");
+setAttribute("CAMELCASE");
+testColor(noMatch);
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsattributestyleupdatexhtmlexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/attribute-style-update-xhtml-expected.txt (0 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/attribute-style-update-xhtml-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/attribute-style-update-xhtml-expected.txt 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -0,0 +1,121 @@
</span><ins>+Test the basic cases of style update for attribute selectors for XHTML. Unlike HTML, XHTML attribute matching is case sensitive.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Initial state does not match anything, there are no attributes on the targets.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "lowercase", the background-color should match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Removing "lowercase", the background-color should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "LOWERCASE", the background-color should match because XML uses case-sensitive attributes.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Removing "LOWERCASE", the background-color should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "LowerCase", the background-color should match because XML uses case-sensitive attributes.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "UPPERCASE", the fill-opacity should match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "0.5"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Removing "UPPERCASE", the fill-opacity should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "uppercase", the fill-opacity should match because XML uses case-sensitive attributes.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Removing "uppercase", the fill-opacity should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "UpperCase", the fill-opacity should match because XML uses case-sensitive attributes.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "CamelCase", the color should match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(4, 5, 6)"
+Removing "CamelCase", the color should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "camelcase", the color should match because XML uses case-sensitive attributes.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Removing "camelcase", the color should no longer match.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+Adding "CAMELCASE", the color should match because XML uses case-sensitive attributes.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity is "1"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).color is "rgb(0, 0, 0)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsattributestyleupdatexhtmlxhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/attribute-style-update-xhtml.xhtml (0 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/attribute-style-update-xhtml.xhtml (rev 0)
+++ trunk/LayoutTests/fast/selectors/attribute-style-update-xhtml.xhtml 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -0,0 +1,129 @@
</span><ins>+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+* {
+ background-color: white;
+ color: black;
+ fill-opacity: 1;
+}
+[lowercase] {
+ background-color: rgb(1, 2, 3);
+}
+[UPPERCASE] {
+ fill-opacity: 0.5;
+}
+[CamelCase] {
+ color: rgb(4, 5, 6);
+}
+</style>
+</head>
+<body>
+ <div>
+ <!-- With renderer -->
+ <target></target>
+ </div>
+ <div style="display:none;">
+ <!-- Without renderer -->
+ <target></target>
+ </div>
+</body>
+<script><![CDATA[
+description('Test the basic cases of style update for attribute selectors for XHTML. Unlike HTML, XHTML attribute matching is case sensitive.');
+
+var noMatch = 0;
+var matchLowerCase = 1;
+var matchUpperCase = 1 << 1;
+var matchCamelCase = 1 << 2;
+
+function testColor(mask) {
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor', (mask & matchLowerCase) ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor', (mask & matchLowerCase) ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[0]).fillOpacity', (mask & matchUpperCase) ? '0.5' : '1');
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[1]).fillOpacity', (mask & matchUpperCase) ? '0.5' : '1');
+
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[0]).color', (mask & matchCamelCase) ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[1]).color', (mask & matchCamelCase) ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
+}
+
+function setAttribute(attribute, value) {
+ var allTargets = document.querySelectorAll("target");
+ for (var i = 0; i < allTargets.length; ++i)
+ allTargets[i].setAttribute(attribute, value);
+}
+
+function removeAttribute(attribute) {
+ var allTargets = document.querySelectorAll("target");
+ for (var i = 0; i < allTargets.length; ++i)
+ allTargets[i].removeAttribute(attribute);
+}
+
+debug("Initial state does not match anything, there are no attributes on the targets.");
+testColor(noMatch);
+
+debug("Adding \"lowercase\", the background-color should match.");
+setAttribute("lowercase");
+testColor(matchLowerCase);
+
+debug("Removing \"lowercase\", the background-color should no longer match.");
+removeAttribute("lowercase");
+testColor(noMatch);
+
+debug("Adding \"LOWERCASE\", the background-color should match because XML uses case-sensitive attributes.");
+setAttribute("LOWERCASE");
+testColor(noMatch);
+
+debug("Removing \"LOWERCASE\", the background-color should no longer match.");
+removeAttribute("LOWERCASE");
+testColor(noMatch);
+
+debug("Adding \"LowerCase\", the background-color should match because XML uses case-sensitive attributes.");
+setAttribute("LOWERCASE");
+testColor(noMatch);
+
+
+debug("Adding \"UPPERCASE\", the fill-opacity should match.");
+setAttribute("UPPERCASE");
+testColor(matchUpperCase);
+
+debug("Removing \"UPPERCASE\", the fill-opacity should no longer match.");
+removeAttribute("UPPERCASE");
+testColor(noMatch);
+
+debug("Adding \"uppercase\", the fill-opacity should match because XML uses case-sensitive attributes.");
+setAttribute("uppercase");
+testColor(noMatch);
+
+debug("Removing \"uppercase\", the fill-opacity should no longer match.");
+removeAttribute("uppercase");
+testColor(noMatch);
+
+debug("Adding \"UpperCase\", the fill-opacity should match because XML uses case-sensitive attributes.");
+setAttribute("UpperCase");
+testColor(noMatch);
+
+
+debug("Adding \"CamelCase\", the color should match.");
+setAttribute("CamelCase");
+testColor(matchCamelCase);
+
+debug("Removing \"CamelCase\", the color should no longer match.");
+removeAttribute("CamelCase");
+testColor(noMatch);
+
+debug("Adding \"camelcase\", the color should match because XML uses case-sensitive attributes.");
+setAttribute("camelcase");
+testColor(noMatch);
+
+debug("Removing \"camelcase\", the color should no longer match.");
+removeAttribute("camelcase");
+testColor(noMatch);
+
+debug("Adding \"CAMELCASE\", the color should match because XML uses case-sensitive attributes.");
+setAttribute("CAMELCASE");
+testColor(noMatch);
+]]></script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (173011 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-08-27 19:15:52 UTC (rev 173011)
+++ trunk/Source/WebCore/ChangeLog 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -1,5 +1,47 @@
</span><span class="cx"> 2014-08-27 Benjamin Poulain <bpoulain@apple.com>
</span><span class="cx">
</span><ins>+ Updating attributes on HTML elements do not invalidate the style correctly unless the attribute name is lowercase in the stylesheet
+ https://bugs.webkit.org/show_bug.cgi?id=136270
+
+ Reviewed by Andreas Kling.
+
+ In HTML, WebKit treats every attribute name lowercase to implement case-insensitive matching.
+ When invalidating style, the StyleResolver was ignoring HTML and always using the XML names.
+
+ This patch split the names on RuleFeatureSet in two sets: one for XML, one for HTML.
+ In StyleResolver, the name used depends on the type of the element being updated.
+
+ This patch also adds nodeNeedsStyleRecalc() to Internals to test the optimization and various cases
+ of style update.
+
+ Tests: fast/css/attribute-for-content-property-style-update-html.html
+ fast/css/attribute-for-content-property-style-update-xhtml.xhtml
+ fast/css/attribute-style-invalidation-optimization-html.html
+ fast/css/attribute-style-invalidation-optimization-xhtml.xhtml
+ fast/css/attribute-style-update-html.html
+ fast/selectors/attribute-style-update-html.html
+ fast/selectors/attribute-style-update-svg-in-html.html
+ fast/selectors/attribute-style-update-xhtml.xhtml
+
+ * css/RuleFeature.cpp:
+ (WebCore::RuleFeatureSet::collectFeaturesFromSelector):
+ (WebCore::RuleFeatureSet::add):
+ (WebCore::RuleFeatureSet::clear):
+ * css/RuleFeature.h:
+ * css/StyleResolver.cpp:
+ (WebCore::StyleResolver::applyProperty):
+ * css/StyleResolver.h:
+ (WebCore::StyleResolver::hasSelectorForAttribute):
+ * dom/Element.cpp:
+ (WebCore::Element::willModifyAttribute):
+ * testing/Internals.cpp:
+ (WebCore::Internals::address):
+ (WebCore::Internals::nodeNeedsStyleRecalc):
+ * testing/Internals.h:
+ * testing/Internals.idl:
+
+2014-08-27 Benjamin Poulain <bpoulain@apple.com>
+
</ins><span class="cx"> Update the CSS Grammar selector names to get closer to the latest terminology
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=136277
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorecssRuleFeaturecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/RuleFeature.cpp (173011 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/RuleFeature.cpp 2014-08-27 19:15:52 UTC (rev 173011)
+++ trunk/Source/WebCore/css/RuleFeature.cpp 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -39,9 +39,10 @@
</span><span class="cx"> idsInRules.add(selector->value().impl());
</span><span class="cx"> else if (selector->m_match == CSSSelector::Class)
</span><span class="cx"> classesInRules.add(selector->value().impl());
</span><del>- else if (selector->isAttributeSelector())
- attrsInRules.add(selector->attribute().localName().impl());
- else if (selector->m_match == CSSSelector::PseudoElement) {
</del><ins>+ else if (selector->isAttributeSelector()) {
+ attributeCanonicalLocalNamesInRules.add(selector->attributeCanonicalLocalName().impl());
+ attributeLocalNamesInRules.add(selector->attribute().localName().impl());
+ } else if (selector->m_match == CSSSelector::PseudoElement) {
</ins><span class="cx"> switch (selector->pseudoElementType()) {
</span><span class="cx"> case CSSSelector::PseudoElementFirstLine:
</span><span class="cx"> usesFirstLineRules = true;
</span><span class="lines">@@ -61,15 +62,10 @@
</span><span class="cx">
</span><span class="cx"> void RuleFeatureSet::add(const RuleFeatureSet& other)
</span><span class="cx"> {
</span><del>- HashSet<AtomicStringImpl*>::const_iterator end = other.idsInRules.end();
- for (HashSet<AtomicStringImpl*>::const_iterator it = other.idsInRules.begin(); it != end; ++it)
- idsInRules.add(*it);
- end = other.classesInRules.end();
- for (HashSet<AtomicStringImpl*>::const_iterator it = other.classesInRules.begin(); it != end; ++it)
- classesInRules.add(*it);
- end = other.attrsInRules.end();
- for (HashSet<AtomicStringImpl*>::const_iterator it = other.attrsInRules.begin(); it != end; ++it)
- attrsInRules.add(*it);
</del><ins>+ idsInRules.add(other.idsInRules.begin(), other.idsInRules.end());
+ classesInRules.add(other.classesInRules.begin(), other.classesInRules.end());
+ attributeCanonicalLocalNamesInRules.add(other.attributeCanonicalLocalNamesInRules.begin(), other.attributeCanonicalLocalNamesInRules.end());
+ attributeLocalNamesInRules.add(other.attributeLocalNamesInRules.begin(), other.attributeLocalNamesInRules.end());
</ins><span class="cx"> siblingRules.appendVector(other.siblingRules);
</span><span class="cx"> uncommonAttributeRules.appendVector(other.uncommonAttributeRules);
</span><span class="cx"> usesFirstLineRules = usesFirstLineRules || other.usesFirstLineRules;
</span><span class="lines">@@ -81,7 +77,8 @@
</span><span class="cx"> {
</span><span class="cx"> idsInRules.clear();
</span><span class="cx"> classesInRules.clear();
</span><del>- attrsInRules.clear();
</del><ins>+ attributeCanonicalLocalNamesInRules.clear();
+ attributeLocalNamesInRules.clear();
</ins><span class="cx"> siblingRules.clear();
</span><span class="cx"> uncommonAttributeRules.clear();
</span><span class="cx"> usesFirstLineRules = false;
</span></span></pre></div>
<a id="trunkSourceWebCorecssRuleFeatureh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/RuleFeature.h (173011 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/RuleFeature.h 2014-08-27 19:15:52 UTC (rev 173011)
+++ trunk/Source/WebCore/css/RuleFeature.h 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -58,7 +58,8 @@
</span><span class="cx">
</span><span class="cx"> HashSet<AtomicStringImpl*> idsInRules;
</span><span class="cx"> HashSet<AtomicStringImpl*> classesInRules;
</span><del>- HashSet<AtomicStringImpl*> attrsInRules;
</del><ins>+ HashSet<AtomicStringImpl*> attributeCanonicalLocalNamesInRules;
+ HashSet<AtomicStringImpl*> attributeLocalNamesInRules;
</ins><span class="cx"> Vector<RuleFeature> siblingRules;
</span><span class="cx"> Vector<RuleFeature> uncommonAttributeRules;
</span><span class="cx"> bool usesFirstLineRules;
</span></span></pre></div>
<a id="trunkSourceWebCorecssStyleResolvercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleResolver.cpp (173011 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleResolver.cpp 2014-08-27 19:15:52 UTC (rev 173011)
+++ trunk/Source/WebCore/css/StyleResolver.cpp 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -2147,7 +2147,8 @@
</span><span class="cx"> state.style()->setContent(value.isNull() ? emptyAtom : value.impl(), didSet);
</span><span class="cx"> didSet = true;
</span><span class="cx"> // Register the fact that the attribute value affects the style.
</span><del>- m_ruleSets.features().attrsInRules.add(attr.localName().impl());
</del><ins>+ m_ruleSets.features().attributeCanonicalLocalNamesInRules.add(attr.localName().impl());
+ m_ruleSets.features().attributeLocalNamesInRules.add(attr.localName().impl());
</ins><span class="cx"> } else if (contentValue->isCounter()) {
</span><span class="cx"> Counter* counterValue = contentValue->getCounterValue();
</span><span class="cx"> EListStyleType listStyleType = NoneListStyle;
</span><span class="lines">@@ -2202,7 +2203,8 @@
</span><span class="cx"> state.style()->setContentAltText(value.isNull() ? emptyAtom : value.impl());
</span><span class="cx"> didSet = true;
</span><span class="cx"> // Register the fact that the attribute value affects the style.
</span><del>- m_ruleSets.features().attrsInRules.add(attr.localName().impl());
</del><ins>+ m_ruleSets.features().attributeCanonicalLocalNamesInRules.add(attr.localName().impl());
+ m_ruleSets.features().attributeLocalNamesInRules.add(attr.localName().impl());
</ins><span class="cx"> }
</span><span class="cx"> if (!didSet)
</span><span class="cx"> state.style()->setContentAltText(emptyAtom);
</span></span></pre></div>
<a id="trunkSourceWebCorecssStyleResolverh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleResolver.h (173011 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleResolver.h 2014-08-27 19:15:52 UTC (rev 173011)
+++ trunk/Source/WebCore/css/StyleResolver.h 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -214,7 +214,7 @@
</span><span class="cx">
</span><span class="cx"> bool hasSelectorForId(const AtomicString&) const;
</span><span class="cx"> bool hasSelectorForClass(const AtomicString&) const;
</span><del>- bool hasSelectorForAttribute(const AtomicString&) const;
</del><ins>+ bool hasSelectorForAttribute(const Element&, const AtomicString&) const;
</ins><span class="cx">
</span><span class="cx"> CSSFontSelector* fontSelector() const { return m_fontSelector.get(); }
</span><span class="cx"> #if ENABLE(CSS_DEVICE_ADAPTATION)
</span><span class="lines">@@ -547,10 +547,12 @@
</span><span class="cx"> friend bool operator!=(const MatchRanges&, const MatchRanges&);
</span><span class="cx"> };
</span><span class="cx">
</span><del>-inline bool StyleResolver::hasSelectorForAttribute(const AtomicString &attributeName) const
</del><ins>+inline bool StyleResolver::hasSelectorForAttribute(const Element& element, const AtomicString &attributeName) const
</ins><span class="cx"> {
</span><span class="cx"> ASSERT(!attributeName.isEmpty());
</span><del>- return m_ruleSets.features().attrsInRules.contains(attributeName.impl());
</del><ins>+ if (element.isHTMLElement())
+ return m_ruleSets.features().attributeCanonicalLocalNamesInRules.contains(attributeName.impl());
+ return m_ruleSets.features().attributeLocalNamesInRules.contains(attributeName.impl());
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> inline bool StyleResolver::hasSelectorForClass(const AtomicString& classValue) const
</span></span></pre></div>
<a id="trunkSourceWebCoredomElementcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/dom/Element.cpp (173011 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/dom/Element.cpp 2014-08-27 19:15:52 UTC (rev 173011)
+++ trunk/Source/WebCore/dom/Element.cpp 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -2707,7 +2707,7 @@
</span><span class="cx">
</span><span class="cx"> if (oldValue != newValue) {
</span><span class="cx"> auto styleResolver = document().styleResolverIfExists();
</span><del>- if (styleResolver && styleResolver->hasSelectorForAttribute(name.localName()))
</del><ins>+ if (styleResolver && styleResolver->hasSelectorForAttribute(*this, name.localName()))
</ins><span class="cx"> setNeedsStyleRecalc();
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoretestingInternalscpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/testing/Internals.cpp (173011 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/testing/Internals.cpp 2014-08-27 19:15:52 UTC (rev 173011)
+++ trunk/Source/WebCore/testing/Internals.cpp 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -347,10 +347,17 @@
</span><span class="cx">
</span><span class="cx"> String Internals::address(Node* node)
</span><span class="cx"> {
</span><del>- char buf[32];
- sprintf(buf, "%p", node);
</del><ins>+ return String::format("%p", node);
+}
</ins><span class="cx">
</span><del>- return String(buf);
</del><ins>+bool Internals::nodeNeedsStyleRecalc(Node* node, ExceptionCode& exception)
+{
+ if (!node) {
+ exception = INVALID_ACCESS_ERR;
+ return false;
+ }
+
+ return node->needsStyleRecalc();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> String Internals::description(Deprecated::ScriptValue value)
</span></span></pre></div>
<a id="trunkSourceWebCoretestingInternalsh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/testing/Internals.h (173011 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/testing/Internals.h 2014-08-27 19:15:52 UTC (rev 173011)
+++ trunk/Source/WebCore/testing/Internals.h 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -1,6 +1,6 @@
</span><span class="cx"> /*
</span><span class="cx"> * Copyright (C) 2012 Google Inc. All rights reserved.
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -75,6 +75,7 @@
</span><span class="cx"> String elementRenderTreeAsText(Element*, ExceptionCode&);
</span><span class="cx">
</span><span class="cx"> String address(Node*);
</span><ins>+ bool nodeNeedsStyleRecalc(Node*, ExceptionCode&);
</ins><span class="cx"> String description(Deprecated::ScriptValue);
</span><span class="cx">
</span><span class="cx"> bool isPreloaded(const String& url);
</span><span class="lines">@@ -107,10 +108,6 @@
</span><span class="cx">
</span><span class="cx"> Node* treeScopeRootNode(Node*, ExceptionCode&);
</span><span class="cx"> Node* parentTreeScope(Node*, ExceptionCode&);
</span><del>- bool hasSelectorForIdInShadow(Element* host, const String& idValue, ExceptionCode&);
- bool hasSelectorForClassInShadow(Element* host, const String& className, ExceptionCode&);
- bool hasSelectorForAttributeInShadow(Element* host, const String& attributeName, ExceptionCode&);
- bool hasSelectorForPseudoClassInShadow(Element* host, const String& pseudoClass, ExceptionCode&);
</del><span class="cx">
</span><span class="cx"> bool attached(Node*, ExceptionCode&);
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoretestingInternalsidl"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/testing/Internals.idl (173011 => 173012)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/testing/Internals.idl 2014-08-27 19:15:52 UTC (rev 173011)
+++ trunk/Source/WebCore/testing/Internals.idl 2014-08-27 19:16:51 UTC (rev 173012)
</span><span class="lines">@@ -1,6 +1,6 @@
</span><span class="cx"> /*
</span><span class="cx"> * Copyright (C) 2012 Google Inc. All rights reserved.
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -28,6 +28,7 @@
</span><span class="cx"> NoInterfaceObject,
</span><span class="cx"> ] interface Internals {
</span><span class="cx"> DOMString address(Node node);
</span><ins>+ [RaisesException] boolean nodeNeedsStyleRecalc(Node node);
</ins><span class="cx"> DOMString description(any value);
</span><span class="cx">
</span><span class="cx"> [RaisesException] DOMString elementRenderTreeAsText(Element element);
</span></span></pre>
</div>
</div>
</body>
</html>