<!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>[173229] 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/173229">173229</a></dd>
<dt>Author</dt> <dd>benjamin@webkit.org</dd>
<dt>Date</dt> <dd>2014-09-03 14:30:31 -0700 (Wed, 03 Sep 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Fix style invalidation of elements with multiple siblings dependencies
https://bugs.webkit.org/show_bug.cgi?id=136472
Reviewed by Andreas Kling.
Source/WebCore:
Previously, style invalidation of siblings was driven by a pair of flags:
-ChildrenAffectedByDirectAdjacentRules.
-ChildrenAffectedByForwardPositionalRules.
When ChildrenAffectedByDirectAdjacentRules was set, the element after an element
with "needsStyleRecalc" was also recomputed. While this work for pair of elements:
a + b
It does not work for more than that. For example, with
a.propery + b + c
When the state of <a> changes, the style of <b> was updated, which is useless. The style
of <c> was untouched, which is incorrect.
When ChildrenAffectedByForwardPositionalRules, all elements after one with "needsStyleRecalc"
were invalidated. While more correct, it caused avalanche of style recalc and was not a very
useful "optimization".
To fix the correctness issues (e.g. "a + b + c"), I could have gone two ways:
1) Invalidate the parent of a, b, c. The children would always get a correct style
when their parent's style would be resolved.
2) Create invalidation relations to enforce that the right siblings are invalidated.
I have decided for a weak version of (2). The reason is that most DOM trees are very
shallow while being very wide. Invalidating the parent generally causes massive style
recalculation.
To keep things simple for now, there is no explicit dependency list between siblings.
Instead, each element has a pair of flag:
1) The element's style depends on the state of a previous sibling.
2) The element's state affects following siblings.
With the notation "<-" for (1), "->" for (2), the selector "a + b + c" create this kind
of marking:
a + b + c
-> ->
<-
When <a> is invalidated, the style resolver will go through the chain of dependent elements
and invalidate any element that can be affected by a prior invalidation, here <c>.
Overlaps are possible. For example with the two selector, "a + b + c", "b ~ d"
the marking would be
a + b + c + d
-> -> ->
<- <-
A change in <a> would invalidate both <c> and <d>. This is overkill, but the end result
is correct and it is a net improvement over the previous flags.
As usual, the CSS JIT makes an effort at compile time to reduce tree marking. SelectorChecker
marks everything as usual.
Tests: fast/css/direct-adjacent-style-update-optimization.html
fast/css/indirect-adjacent-style-update-optimization.html
fast/css/non-matching-adjacent-style-update.html
fast/selectors/first-of-type-direct-adjacent-style-update.html
fast/selectors/first-of-type-sibling-style-update.html
fast/selectors/id-direct-adjacent-style-update.html
fast/selectors/id-sibling-style-update.html
fast/selectors/nth-child-as-first-simple-selector-style-update.html
fast/selectors/nth-child-direct-adjacent-style-update.html
fast/selectors/nth-child-style-update.html
* css/SelectorChecker.cpp:
(WebCore::isFirstOfType):
(WebCore::countElementsBefore):
(WebCore::countElementsOfTypeBefore):
Counting selectors are not unlike adjacent combinators, they are handled the exact same way.
For example a :nth-child(4) would generate somewhat similar marking as
:first-child + * + * + *
Everything prior to the element with the counter affects the style of the element.
(WebCore::hasScrollbarPseudoElement):
The assertion was incorrect. You can get an scrollbar pseudo ID on an element without scrollbar.
It will never match, but such case is possible.
(WebCore::SelectorChecker::matchRecursively):
(WebCore::SelectorChecker::checkOne):
* css/StyleResolver.cpp:
(WebCore::StyleResolver::canShareStyleWithElement):
Previously, any subtree affected by sibling selectors were unshareable. That was done by checking
for Element::hasFlagsSetDuringStylingOfChildren().
Now that sibling relation are local, they no longer prevent sharing of all children. Instead, we can
test locally for subgroup with sibling relations.
* cssjit/SelectorCompiler.cpp:
(WebCore::SelectorCompiler::isAdjacentRelation):
(WebCore::SelectorCompiler::shouldMarkStyleIsAffectedByPreviousSibling):
(WebCore::SelectorCompiler::SelectorCodeGenerator::generateSelectorChecker):
(WebCore::SelectorCompiler::SelectorCodeGenerator::generateDirectAdjacentTreeWalker):
(WebCore::SelectorCompiler::SelectorCodeGenerator::generateIndirectAdjacentTreeWalker):
(WebCore::SelectorCompiler::SelectorCodeGenerator::markElementIfResolvingStyle):
(WebCore::SelectorCompiler::SelectorCodeGenerator::generateElementIsNthChild):
(WebCore::SelectorCompiler::SelectorCodeGenerator::markParentElementIfResolvingStyle): Deleted.
* dom/Document.cpp:
(WebCore::nodeOrItsAncestorNeedsStyleRecalc):
* dom/Element.cpp:
(WebCore::checkForSiblingStyleChanges):
(WebCore::Element::hasFlagsSetDuringStylingOfChildren):
(WebCore::Element::setChildrenAffectedByForwardPositionalRules): Deleted.
(WebCore::Element::rareDataChildrenAffectedByForwardPositionalRules): Deleted.
* dom/Element.h:
(WebCore::Element::affectsNextSiblingElementStyle):
(WebCore::Element::setAffectsNextSiblingElementStyle):
(WebCore::Element::setStyleIsAffectedByPreviousSibling):
(WebCore::Element::childrenAffectedByPositionalRules): Deleted.
(WebCore::Element::childrenAffectedByDirectAdjacentRules): Deleted.
(WebCore::Element::childrenAffectedByForwardPositionalRules): Deleted.
(WebCore::Element::setChildrenAffectedByDirectAdjacentRules): Deleted.
(WebCore::Element::setChildrenAffectedByForwardPositionalRules): Deleted.
* dom/ElementRareData.h:
(WebCore::ElementRareData::ElementRareData):
(WebCore::ElementRareData::resetDynamicRestyleObservations):
(WebCore::ElementRareData::childrenAffectedByForwardPositionalRules): Deleted.
(WebCore::ElementRareData::setChildrenAffectedByForwardPositionalRules): Deleted.
* dom/Node.h:
(WebCore::Node::styleIsAffectedByPreviousSibling):
(WebCore::Node::flagAffectsNextSiblingElementStyle):
(WebCore::Node::flagStyleIsAffectedByPreviousSibling):
(WebCore::Node::flagChildrenAffectedByDirectAdjacentRulesFlag): Deleted.
* html/HTMLElement.h:
(WebCore::HTMLElement::isHTMLUnknownElement):
* html/HTMLUnknownElement.h:
* style/StyleResolveTree.cpp:
(WebCore::Style::resetStyleForNonRenderedDescendants):
(WebCore::Style::resolveTree):
LayoutTests:
The test coverage was pretty bad. :(
I tried to cover the most obvious problems.
* fast/css/direct-adjacent-style-update-optimization-expected.txt: Added.
* fast/css/direct-adjacent-style-update-optimization.html: Added.
* fast/css/indirect-adjacent-style-update-optimization-expected.txt: Added.
* fast/css/indirect-adjacent-style-update-optimization.html: Added.
* fast/css/non-matching-adjacent-style-update-expected.txt: Added.
* fast/css/non-matching-adjacent-style-update.html: Added.
* fast/selectors/attribute-direct-adjacent-style-update-expected.txt:
* fast/selectors/class-direct-adjacent-style-update-expected.txt:
* fast/selectors/first-child-direct-adjacent-style-update-expected.txt:
* fast/selectors/first-of-type-direct-adjacent-style-update-expected.txt: Copied from LayoutTests/fast/selectors/attribute-direct-adjacent-style-update-expected.txt.
* fast/selectors/first-of-type-direct-adjacent-style-update.html: Added.
* fast/selectors/first-of-type-sibling-style-update-expected.txt: Added.
* fast/selectors/first-of-type-sibling-style-update.html: Added.
* fast/selectors/id-direct-adjacent-style-update-expected.txt: Copied from LayoutTests/fast/selectors/attribute-direct-adjacent-style-update-expected.txt.
* fast/selectors/id-direct-adjacent-style-update.html: Added.
* fast/selectors/id-sibling-style-update-expected.txt: Added.
* fast/selectors/id-sibling-style-update.html: Added.
* fast/selectors/nth-child-as-first-simple-selector-style-update-expected.txt: Added.
* fast/selectors/nth-child-as-first-simple-selector-style-update.html: Added.
* fast/selectors/nth-child-direct-adjacent-style-update-expected.txt: Copied from LayoutTests/fast/selectors/attribute-direct-adjacent-style-update-expected.txt.
* fast/selectors/nth-child-direct-adjacent-style-update.html: Added.
* fast/selectors/nth-child-style-update-expected.txt: Added.
* fast/selectors/nth-child-style-update.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastselectorsattributedirectadjacentstyleupdateexpectedtxt">trunk/LayoutTests/fast/selectors/attribute-direct-adjacent-style-update-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsclassdirectadjacentstyleupdateexpectedtxt">trunk/LayoutTests/fast/selectors/class-direct-adjacent-style-update-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsfirstchilddirectadjacentstyleupdateexpectedtxt">trunk/LayoutTests/fast/selectors/first-child-direct-adjacent-style-update-expected.txt</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssSelectorCheckercpp">trunk/Source/WebCore/css/SelectorChecker.cpp</a></li>
<li><a href="#trunkSourceWebCorecssStyleResolvercpp">trunk/Source/WebCore/css/StyleResolver.cpp</a></li>
<li><a href="#trunkSourceWebCorecssjitSelectorCompilercpp">trunk/Source/WebCore/cssjit/SelectorCompiler.cpp</a></li>
<li><a href="#trunkSourceWebCoredomDocumentcpp">trunk/Source/WebCore/dom/Document.cpp</a></li>
<li><a href="#trunkSourceWebCoredomElementcpp">trunk/Source/WebCore/dom/Element.cpp</a></li>
<li><a href="#trunkSourceWebCoredomElementh">trunk/Source/WebCore/dom/Element.h</a></li>
<li><a href="#trunkSourceWebCoredomElementRareDatah">trunk/Source/WebCore/dom/ElementRareData.h</a></li>
<li><a href="#trunkSourceWebCoredomNodeh">trunk/Source/WebCore/dom/Node.h</a></li>
<li><a href="#trunkSourceWebCorehtmlHTMLElementh">trunk/Source/WebCore/html/HTMLElement.h</a></li>
<li><a href="#trunkSourceWebCorehtmlHTMLUnknownElementh">trunk/Source/WebCore/html/HTMLUnknownElement.h</a></li>
<li><a href="#trunkSourceWebCorestyleStyleResolveTreecpp">trunk/Source/WebCore/style/StyleResolveTree.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssdirectadjacentstyleupdateoptimizationexpectedtxt">trunk/LayoutTests/fast/css/direct-adjacent-style-update-optimization-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssdirectadjacentstyleupdateoptimizationhtml">trunk/LayoutTests/fast/css/direct-adjacent-style-update-optimization.html</a></li>
<li><a href="#trunkLayoutTestsfastcssindirectadjacentstyleupdateoptimizationexpectedtxt">trunk/LayoutTests/fast/css/indirect-adjacent-style-update-optimization-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssindirectadjacentstyleupdateoptimizationhtml">trunk/LayoutTests/fast/css/indirect-adjacent-style-update-optimization.html</a></li>
<li><a href="#trunkLayoutTestsfastcssnonmatchingadjacentstyleupdateexpectedtxt">trunk/LayoutTests/fast/css/non-matching-adjacent-style-update-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssnonmatchingadjacentstyleupdatehtml">trunk/LayoutTests/fast/css/non-matching-adjacent-style-update.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsfirstoftypedirectadjacentstyleupdateexpectedtxt">trunk/LayoutTests/fast/selectors/first-of-type-direct-adjacent-style-update-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsfirstoftypedirectadjacentstyleupdatehtml">trunk/LayoutTests/fast/selectors/first-of-type-direct-adjacent-style-update.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsfirstoftypesiblingstyleupdateexpectedtxt">trunk/LayoutTests/fast/selectors/first-of-type-sibling-style-update-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsfirstoftypesiblingstyleupdatehtml">trunk/LayoutTests/fast/selectors/first-of-type-sibling-style-update.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsiddirectadjacentstyleupdateexpectedtxt">trunk/LayoutTests/fast/selectors/id-direct-adjacent-style-update-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsiddirectadjacentstyleupdatehtml">trunk/LayoutTests/fast/selectors/id-direct-adjacent-style-update.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsidsiblingstyleupdateexpectedtxt">trunk/LayoutTests/fast/selectors/id-sibling-style-update-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsidsiblingstyleupdatehtml">trunk/LayoutTests/fast/selectors/id-sibling-style-update.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsnthchildasfirstsimpleselectorstyleupdateexpectedtxt">trunk/LayoutTests/fast/selectors/nth-child-as-first-simple-selector-style-update-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsnthchildasfirstsimpleselectorstyleupdatehtml">trunk/LayoutTests/fast/selectors/nth-child-as-first-simple-selector-style-update.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsnthchilddirectadjacentstyleupdateexpectedtxt">trunk/LayoutTests/fast/selectors/nth-child-direct-adjacent-style-update-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsnthchilddirectadjacentstyleupdatehtml">trunk/LayoutTests/fast/selectors/nth-child-direct-adjacent-style-update.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsnthchildstyleupdateexpectedtxt">trunk/LayoutTests/fast/selectors/nth-child-style-update-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsnthchildstyleupdatehtml">trunk/LayoutTests/fast/selectors/nth-child-style-update.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (173228 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-09-03 21:29:52 UTC (rev 173228)
+++ trunk/LayoutTests/ChangeLog 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -1,5 +1,39 @@
</span><span class="cx"> 2014-09-03 Benjamin Poulain <benjamin@webkit.org>
</span><span class="cx">
</span><ins>+ Fix style invalidation of elements with multiple siblings dependencies
+ https://bugs.webkit.org/show_bug.cgi?id=136472
+
+ Reviewed by Andreas Kling.
+
+ The test coverage was pretty bad. :(
+ I tried to cover the most obvious problems.
+
+ * fast/css/direct-adjacent-style-update-optimization-expected.txt: Added.
+ * fast/css/direct-adjacent-style-update-optimization.html: Added.
+ * fast/css/indirect-adjacent-style-update-optimization-expected.txt: Added.
+ * fast/css/indirect-adjacent-style-update-optimization.html: Added.
+ * fast/css/non-matching-adjacent-style-update-expected.txt: Added.
+ * fast/css/non-matching-adjacent-style-update.html: Added.
+ * fast/selectors/attribute-direct-adjacent-style-update-expected.txt:
+ * fast/selectors/class-direct-adjacent-style-update-expected.txt:
+ * fast/selectors/first-child-direct-adjacent-style-update-expected.txt:
+ * fast/selectors/first-of-type-direct-adjacent-style-update-expected.txt: Copied from LayoutTests/fast/selectors/attribute-direct-adjacent-style-update-expected.txt.
+ * fast/selectors/first-of-type-direct-adjacent-style-update.html: Added.
+ * fast/selectors/first-of-type-sibling-style-update-expected.txt: Added.
+ * fast/selectors/first-of-type-sibling-style-update.html: Added.
+ * fast/selectors/id-direct-adjacent-style-update-expected.txt: Copied from LayoutTests/fast/selectors/attribute-direct-adjacent-style-update-expected.txt.
+ * fast/selectors/id-direct-adjacent-style-update.html: Added.
+ * fast/selectors/id-sibling-style-update-expected.txt: Added.
+ * fast/selectors/id-sibling-style-update.html: Added.
+ * fast/selectors/nth-child-as-first-simple-selector-style-update-expected.txt: Added.
+ * fast/selectors/nth-child-as-first-simple-selector-style-update.html: Added.
+ * fast/selectors/nth-child-direct-adjacent-style-update-expected.txt: Copied from LayoutTests/fast/selectors/attribute-direct-adjacent-style-update-expected.txt.
+ * fast/selectors/nth-child-direct-adjacent-style-update.html: Added.
+ * fast/selectors/nth-child-style-update-expected.txt: Added.
+ * fast/selectors/nth-child-style-update.html: Added.
+
+2014-09-03 Benjamin Poulain <benjamin@webkit.org>
+
</ins><span class="cx"> Add a test case for Element.matches() with :scope
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=136475
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssdirectadjacentstyleupdateoptimizationexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/direct-adjacent-style-update-optimization-expected.txt (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/direct-adjacent-style-update-optimization-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/direct-adjacent-style-update-optimization-expected.txt 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,66 @@
</span><ins>+This test checks the style invalidation does not dirty elements that cannot be affected by the changes.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Initially, we should have a match. After getting the style, nothing should require a style recalc.
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[0]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[1]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[2]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[3]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[4]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[5]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[6]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[7]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[8]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[9]).backgroundColor is "rgb(255, 254, 253)"
+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 elementsWithTagnameNeedsStyleRecalc([]) is true
+Let's remove the class "property".
+Source should require a style recalc.
+PASS elementsWithTagnameNeedsStyleRecalc(["SOURCE"]) is true
+We should no longer have a match. Let's add back the class "property". Then we get the style of everything except <source> and <target>. Since none of the style touched above are related to the dirty elements, <source> should still require a style recalc.
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[0]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[1]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[2]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[3]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[4]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[5]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[6]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[7]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[8]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[9]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 254, 253)"
+PASS elementsWithTagnameNeedsStyleRecalc(["SOURCE"]) is true
+We should match again now that property is back.
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[0]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[1]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[2]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[3]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[4]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[5]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[6]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[7]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[8]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[9]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+Removing the <source> should invalidate the <target>, and nothing else.
+PASS elementsWithTagnameNeedsStyleRecalc(["TARGET"]) is true
+We should no longer match.
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[0]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[1]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[2]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[3]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[4]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[5]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[6]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[7]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 254, 253)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssdirectadjacentstyleupdateoptimizationhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/direct-adjacent-style-update-optimization.html (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/direct-adjacent-style-update-optimization.html (rev 0)
+++ trunk/LayoutTests/fast/css/direct-adjacent-style-update-optimization.html 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,99 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+* {
+ background-color: rgb(255, 254, 253);
+}
+source.property + intermediary + target {
+ background-color: rgb(1, 2, 3);
+}
+</style>
+</head>
+<body>
+ <div class="test-case">
+ <padding></padding>
+ <source class="foo property bar"></source>
+ <intermediary></intermediary>
+ <target></target>
+ <padding></padding>
+ </div>
+ <div class="test-case" style="display:none;">
+ <padding></padding>
+ <source class="foo property bar"></source>
+ <intermediary></intermediary>
+ <target></target>
+ <padding></padding>
+ </div>
+</body>
+<script>
+description('This test checks the style invalidation does not dirty elements that cannot be affected by the changes.');
+
+function testColor(expectedMatch)
+{
+ var others = document.querySelectorAll(".test-case, .test-case :not(target)");
+ for (var i = 0; i < others.length; ++i)
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[' + i + ']).backgroundColor', 'rgb(255, 254, 253)');
+ var targets = document.querySelectorAll("target");
+ for (var i = 0; i < targets.length; ++i)
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[' + i + ']).backgroundColor', expectedMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 254, 253)');
+}
+
+function elementsWithTagnameNeedsStyleRecalc(expectedTagnameNeedingStyleRecalc)
+{
+ // We cannot modify the DOM here or we could cause a style recalculation.
+ var allContent = document.querySelectorAll(".test-case, .test-case *");
+ for (var i = 0; i < allContent.length; ++i) {
+ var expected = expectedTagnameNeedingStyleRecalc.indexOf(allContent[i].tagName) >= 0;
+ if (internals.nodeNeedsStyleRecalc(allContent[i]) != expected) {
+ debug("Expected &lt;" + allContent[i].tagName + "&gt; to be " + expected + ", it wasn't :(");
+ return false;
+ }
+ }
+ return true;
+}
+
+debug("Initially, we should have a match. After getting the style, nothing should require a style recalc.");
+testColor(true);
+shouldBeTrue('elementsWithTagnameNeedsStyleRecalc([])');
+
+debug("Let's remove the class \"property\".");
+var allSources = document.querySelectorAll("source");
+for (var i = 0; i < allSources.length; ++i)
+ allSources[i].classList.remove("property");
+
+debug("Source should require a style recalc.");
+shouldBeTrue('elementsWithTagnameNeedsStyleRecalc(["SOURCE"])');
+
+debug("We should no longer have a match. Let's add back the class \"property\". Then we get the style of everything except &lt;source&gt; and &lt;target&gt;. Since none of the style touched above are related to the dirty elements, &lt;source&gt; should still require a style recalc.");
+
+// This should clear the dirty style.
+testColor(false);
+
+// Add the class without touching anything else
+var allSources = document.querySelectorAll("source");
+for (var i = 0; i < allSources.length; ++i)
+ allSources[i].classList.add("property");
+
+var others = document.querySelectorAll(".test-case, .test-case :not(target):not(source)");
+for (var i = 0; i < others.length; ++i) {
+ if (getComputedStyle(others[i]).backgroundColor != 'rgb(255, 254, 253)')
+ debug("Something horribly wrong is happening.");
+}
+
+shouldBeTrue('elementsWithTagnameNeedsStyleRecalc(["SOURCE"])');
+
+debug("We should match again now that property is back.");
+testColor(true);
+
+debug("Removing the &lt;source&gt; should invalidate the &lt;target&gt;, and nothing else.");
+for (var i = 0; i < allSources.length; ++i)
+ allSources[i].parentElement.removeChild(allSources[i]);
+shouldBeTrue('elementsWithTagnameNeedsStyleRecalc(["TARGET"])');
+
+debug("We should no longer match.");
+testColor(false);
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssindirectadjacentstyleupdateoptimizationexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/indirect-adjacent-style-update-optimization-expected.txt (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/indirect-adjacent-style-update-optimization-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/indirect-adjacent-style-update-optimization-expected.txt 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,66 @@
</span><ins>+This test checks the style invalidation does not dirty elements that cannot be affected by the changes.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Initially, we should have a match. After getting the style, nothing should require a style recalc.
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[0]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[1]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[2]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[3]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[4]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[5]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[6]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[7]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[8]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[9]).backgroundColor is "rgb(255, 254, 253)"
+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 elementsWithTagnameNeedsStyleRecalc([]) is true
+Let's remove the class "property".
+Source should require a style recalc.
+PASS elementsWithTagnameNeedsStyleRecalc(["SOURCE"]) is true
+We should no longer have a match. Let's add back the class "property". Then we get the style of everything except <source> and <target>. Since none of the style touched above are related to the dirty elements, <source> should still require a style recalc.
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[0]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[1]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[2]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[3]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[4]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[5]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[6]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[7]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[8]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[9]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 254, 253)"
+PASS elementsWithTagnameNeedsStyleRecalc(["SOURCE"]) is true
+We should match again now that property is back.
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[0]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[1]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[2]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[3]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[4]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[5]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[6]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[7]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[8]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[9]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+Removing the <source> should invalidate the <target>, and nothing else.
+PASS elementsWithTagnameNeedsStyleRecalc(["TARGET"]) is true
+We should no longer match.
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[0]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[1]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[2]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[3]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[4]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[5]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[6]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[7]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(255, 254, 253)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssindirectadjacentstyleupdateoptimizationhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/indirect-adjacent-style-update-optimization.html (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/indirect-adjacent-style-update-optimization.html (rev 0)
+++ trunk/LayoutTests/fast/css/indirect-adjacent-style-update-optimization.html 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,99 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+* {
+ background-color: rgb(255, 254, 253);
+}
+source.property ~ target {
+ background-color: rgb(1, 2, 3);
+}
+</style>
+</head>
+<body>
+ <div class="test-case">
+ <padding></padding>
+ <source class="foo property bar"></source>
+ <intermediary></intermediary>
+ <target></target>
+ <padding></padding>
+ </div>
+ <div class="test-case" style="display:none;">
+ <padding></padding>
+ <source class="foo property bar"></source>
+ <intermediary></intermediary>
+ <target></target>
+ <padding></padding>
+ </div>
+</body>
+<script>
+description('This test checks the style invalidation does not dirty elements that cannot be affected by the changes.');
+
+function testColor(expectedMatch)
+{
+ var others = document.querySelectorAll(".test-case, .test-case :not(target)");
+ for (var i = 0; i < others.length; ++i)
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll(".test-case, .test-case :not(target)")[' + i + ']).backgroundColor', 'rgb(255, 254, 253)');
+ var targets = document.querySelectorAll("target");
+ for (var i = 0; i < targets.length; ++i)
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[' + i + ']).backgroundColor', expectedMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 254, 253)');
+}
+
+function elementsWithTagnameNeedsStyleRecalc(expectedTagnameNeedingStyleRecalc)
+{
+ // We cannot modify the DOM here or we could cause a style recalculation.
+ var allContent = document.querySelectorAll(".test-case, .test-case *");
+ for (var i = 0; i < allContent.length; ++i) {
+ var expected = expectedTagnameNeedingStyleRecalc.indexOf(allContent[i].tagName) >= 0;
+ if (internals.nodeNeedsStyleRecalc(allContent[i]) != expected) {
+ debug("Expected &lt;" + allContent[i].tagName + "&gt; to be " + expected + ", it wasn't :(");
+ return false;
+ }
+ }
+ return true;
+}
+
+debug("Initially, we should have a match. After getting the style, nothing should require a style recalc.");
+testColor(true);
+shouldBeTrue('elementsWithTagnameNeedsStyleRecalc([])');
+
+debug("Let's remove the class \"property\".");
+var allSources = document.querySelectorAll("source");
+for (var i = 0; i < allSources.length; ++i)
+ allSources[i].classList.remove("property");
+
+debug("Source should require a style recalc.");
+shouldBeTrue('elementsWithTagnameNeedsStyleRecalc(["SOURCE"])');
+
+debug("We should no longer have a match. Let's add back the class \"property\". Then we get the style of everything except &lt;source&gt; and &lt;target&gt;. Since none of the style touched above are related to the dirty elements, &lt;source&gt; should still require a style recalc.");
+
+// This should clear the dirty style.
+testColor(false);
+
+// Add the class without touching anything else
+var allSources = document.querySelectorAll("source");
+for (var i = 0; i < allSources.length; ++i)
+ allSources[i].classList.add("property");
+
+var others = document.querySelectorAll(".test-case, .test-case :not(target):not(source)");
+for (var i = 0; i < others.length; ++i) {
+ if (getComputedStyle(others[i]).backgroundColor != 'rgb(255, 254, 253)')
+ debug("Something horribly wrong is happening.");
+}
+
+shouldBeTrue('elementsWithTagnameNeedsStyleRecalc(["SOURCE"])');
+
+debug("We should match again now that property is back.");
+testColor(true);
+
+debug("Removing the &lt;source&gt; should invalidate the &lt;target&gt;, and nothing else.");
+for (var i = 0; i < allSources.length; ++i)
+ allSources[i].parentElement.removeChild(allSources[i]);
+shouldBeTrue('elementsWithTagnameNeedsStyleRecalc(["TARGET"])');
+
+debug("We should no longer match.");
+testColor(false);
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssnonmatchingadjacentstyleupdateexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/non-matching-adjacent-style-update-expected.txt (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/non-matching-adjacent-style-update-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/non-matching-adjacent-style-update-expected.txt 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,60 @@
</span><ins>+Selectors' sibling combinators ("+" or "~") create style update relation between elements. This test the case were such relation exists and is removed. This test relies on WebCore's internals.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Initially, the direct adjacent relation is satisfied and we have a match.
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[0]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[1]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[2]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[3]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[4]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[5]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[6]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[7]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(1, 2, 3)"
+We remove <bar>, there is nothing matching the rightmost compound selector.
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case *")[0]) is false
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case *")[1]) is false
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case *")[2]) is false
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case *")[3]) is false
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case *")[4]) is false
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case *")[5]) is false
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case *")[6]) is false
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case *")[7]) is false
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case *")[8]) is false
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case *")[9]) is false
+PASS document.getElementById("bar-with-renderer") is null
+PASS document.getElementById("bar-without-renderer") is null
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[0]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[1]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[2]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[3]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[4]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[5]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[6]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[7]).backgroundColor is "rgb(255, 254, 253)"
+Now we change a property of <foo>. Doing that can invalidate foo, but not the other elements.
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case :not(foo)")[0]) is false
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case :not(foo)")[1]) is false
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case :not(foo)")[2]) is false
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case :not(foo)")[3]) is false
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case :not(foo)")[4]) is false
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case :not(foo)")[5]) is false
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case :not(foo)")[6]) is false
+PASS internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case :not(foo)")[7]) is false
+PASS document.getElementById("bar-with-renderer") is null
+PASS document.getElementById("bar-without-renderer") is null
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[0]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[1]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[2]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[3]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[4]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[5]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[6]).backgroundColor is "rgb(255, 254, 253)"
+PASS getComputedStyle(document.querySelectorAll("foo, padding")[7]).backgroundColor is "rgb(255, 254, 253)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssnonmatchingadjacentstyleupdatehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/non-matching-adjacent-style-update.html (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/non-matching-adjacent-style-update.html (rev 0)
+++ trunk/LayoutTests/fast/css/non-matching-adjacent-style-update.html 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,82 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+* {
+ background-color: rgb(255, 254, 253);
+}
+foo.property+padding+padding+padding+bar {
+ background-color: rgb(1, 2, 3);
+}
+</style>
+</head>
+<body>
+ <div class="test-case">
+ <foo class="foo property bar"></foo>
+ <padding></padding>
+ <padding></padding>
+ <padding></padding>
+ <bar id="bar-with-renderer"></bar>
+ </div>
+ <div class="test-case" style="display:none;">
+ <foo class="foo property bar"></foo>
+ <padding></padding>
+ <padding></padding>
+ <padding></padding>
+ <bar id="bar-without-renderer"></bar>
+ </div>
+</body>
+<script>
+description('Selectors\' sibling combinators ("+" or "~") create style update relation between elements. This test the case were such relation exists and is removed. This test relies on WebCore\'s internals.');
+
+function testUnrelatedElementsAreUnchanged()
+{
+ var others = document.querySelectorAll("foo, padding");
+ for (var i = 0; i < others.length; ++i)
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("foo, padding")[' + i + ']).backgroundColor', 'rgb(255, 254, 253)');
+}
+
+debug("Initially, the direct adjacent relation is satisfied and we have a match.");
+testUnrelatedElementsAreUnchanged();
+shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor', 'rgb(1, 2, 3)');
+shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor', 'rgb(1, 2, 3)');
+
+
+debug("We remove &lt;bar&gt;, there is nothing matching the rightmost compound selector.");
+var barWithRenderer = document.getElementById("bar-with-renderer");
+barWithRenderer.parentElement.removeChild(barWithRenderer);
+var barWithoutRenderer = document.getElementById("bar-without-renderer");
+barWithoutRenderer.parentElement.removeChild(barWithoutRenderer);
+
+// No element should be dirty after the removal. This is testing the invalidation optimization, not correctness.
+if (window.internals) {
+ var allContent = document.querySelectorAll(".test-case, .test-case *");
+ for (var i = 0; i < allContent.length; ++i)
+ shouldBeFalse('internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case *")[' + i + '])');
+}
+
+shouldBeNull('document.getElementById("bar-with-renderer")');
+shouldBeNull('document.getElementById("bar-without-renderer")');
+testUnrelatedElementsAreUnchanged();
+
+
+debug("Now we change a property of &lt;foo&gt;. Doing that can invalidate foo, but not the other elements.");
+
+var allFoos = document.querySelectorAll("foo");
+for (var i = 0; i < allFoos.length; ++i)
+ allFoos[i].classList.remove("property");
+
+// No element should be dirty after the removal. This is testing the invalidation optimization, not correctness.
+if (window.internals) {
+ var allContent = document.querySelectorAll(".test-case, .test-case :not(foo)");
+ for (var i = 0; i < allContent.length; ++i)
+ shouldBeFalse('internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case :not(foo)")[' + i + '])');
+}
+
+shouldBeNull('document.getElementById("bar-with-renderer")');
+shouldBeNull('document.getElementById("bar-without-renderer")');
+testUnrelatedElementsAreUnchanged();
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsattributedirectadjacentstyleupdateexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/selectors/attribute-direct-adjacent-style-update-expected.txt (173228 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/attribute-direct-adjacent-style-update-expected.txt 2014-09-03 21:29:52 UTC (rev 173228)
+++ trunk/LayoutTests/fast/selectors/attribute-direct-adjacent-style-update-expected.txt 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -13,21 +13,21 @@
</span><span class="cx"> PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
</span><span class="cx"> Adding the attribute, the extra rules should match.
</span><del>-FAIL getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor should be rgb(1, 2, 3). Was rgb(255, 255, 255).
</del><ins>+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(1, 2, 3)"
</ins><span class="cx"> PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(1, 2, 3)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
</span><del>-FAIL getComputedStyle(document.getElementById("baz-with-renderer")).color should be rgb(4, 5, 6). Was rgb(0, 0, 0).
</del><ins>+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(4, 5, 6)"
</ins><span class="cx"> PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(4, 5, 6)"
</span><span class="cx"> Emptying the attribute, the extra rules should still match.
</span><del>-FAIL getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor should be rgb(1, 2, 3). Was rgb(255, 255, 255).
</del><ins>+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(1, 2, 3)"
</ins><span class="cx"> PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(1, 2, 3)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
</span><del>-FAIL getComputedStyle(document.getElementById("baz-with-renderer")).color should be rgb(4, 5, 6). Was rgb(0, 0, 0).
</del><ins>+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(4, 5, 6)"
</ins><span class="cx"> PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(4, 5, 6)"
</span><span class="cx"> Removing the attribute, we should not longer match.
</span></span></pre></div>
<a id="trunkLayoutTestsfastselectorsclassdirectadjacentstyleupdateexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/selectors/class-direct-adjacent-style-update-expected.txt (173228 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/class-direct-adjacent-style-update-expected.txt 2014-09-03 21:29:52 UTC (rev 173228)
+++ trunk/LayoutTests/fast/selectors/class-direct-adjacent-style-update-expected.txt 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -13,12 +13,12 @@
</span><span class="cx"> PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
</span><span class="cx"> Adding the class, the extra rules should match.
</span><del>-FAIL getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor should be rgb(1, 2, 3). Was rgb(255, 255, 255).
</del><ins>+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(1, 2, 3)"
</ins><span class="cx"> PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(1, 2, 3)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
</span><del>-FAIL getComputedStyle(document.getElementById("baz-with-renderer")).color should be rgb(4, 5, 6). Was rgb(0, 0, 0).
</del><ins>+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(4, 5, 6)"
</ins><span class="cx"> PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(4, 5, 6)"
</span><span class="cx"> Removing the class, we should be back to the original state.
</span></span></pre></div>
<a id="trunkLayoutTestsfastselectorsfirstchilddirectadjacentstyleupdateexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/selectors/first-child-direct-adjacent-style-update-expected.txt (173228 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/first-child-direct-adjacent-style-update-expected.txt 2014-09-03 21:29:52 UTC (rev 173228)
+++ trunk/LayoutTests/fast/selectors/first-child-direct-adjacent-style-update-expected.txt 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -13,12 +13,12 @@
</span><span class="cx"> PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(4, 5, 6)"
</span><span class="cx"> Adding an element as first child should clear the style.
</span><del>-FAIL getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor should be rgb(255, 255, 255). Was rgb(1, 2, 3).
</del><ins>+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
</ins><span class="cx"> PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
</span><del>-FAIL getComputedStyle(document.getElementById("baz-with-renderer")).color should be rgb(0, 0, 0). Was rgb(4, 5, 6).
</del><ins>+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(0, 0, 0)"
</ins><span class="cx"> PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
</span><span class="cx"> Removing that first element put back the style.
</span><span class="lines">@@ -31,12 +31,12 @@
</span><span class="cx"> PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(4, 5, 6)"
</span><span class="cx"> Removing <foo> should clear the style.
</span><del>-FAIL getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor should be rgb(255, 255, 255). Was rgb(1, 2, 3).
</del><ins>+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
</ins><span class="cx"> PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
</span><del>-FAIL getComputedStyle(document.getElementById("baz-with-renderer")).color should be rgb(0, 0, 0). Was rgb(4, 5, 6).
</del><ins>+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(0, 0, 0)"
</ins><span class="cx"> PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
</span><span class="cx"> PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
</span><span class="cx"> PASS successfullyParsed is true
</span></span></pre></div>
<a id="trunkLayoutTestsfastselectorsfirstoftypedirectadjacentstyleupdateexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/first-of-type-direct-adjacent-style-update-expected.txt (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/first-of-type-direct-adjacent-style-update-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/first-of-type-direct-adjacent-style-update-expected.txt 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,54 @@
</span><ins>+Test style update caused by tree changes with the selector :first-of-type. This test does not use any sibling "~" combinator to avoid its more generic marking.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Initialy, <foo> is the first of its type, the style should match.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(4, 5, 6)"
+Adding a few elements that are not <foo> do not invalidate the :first-of-type.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(4, 5, 6)"
+Adding a second <foo>. This should breat the rules because the new foo does not match "+ padding".
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
+Adding a few elements that are not <foo>, we should still not match because of the previously added <foo>.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
+Removing the <foo> blocking foo:first-of-type+padding.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(4, 5, 6)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsfirstoftypedirectadjacentstyleupdatehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/first-of-type-direct-adjacent-style-update.html (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/first-of-type-direct-adjacent-style-update.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/first-of-type-direct-adjacent-style-update.html 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,93 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+* {
+ background-color: white;
+ color: black;
+ fill-opacity: 1;
+ min-width: 0px;
+}
+foo:first-of-type+padding+padding+padding+bar {
+ background-color: rgb(1, 2, 3);
+}
+foo:first-of-type+padding+padding+padding+bar baz {
+ color: rgb(4, 5, 6);
+}
+</style>
+</head>
+<body>
+ <div>
+ <foo></foo>
+ <padding></padding>
+ <padding></padding>
+ <padding></padding>
+ <bar id="bar-with-renderer">
+ <baz id="baz-with-renderer"></baz>
+ </bar>
+ </div>
+ <div style="display:none;">
+ <foo></foo>
+ <padding></padding>
+ <padding></padding>
+ <padding></padding>
+ <bar id="bar-without-renderer">
+ <baz id="baz-without-renderer"></baz>
+ </bar>
+ </div>
+</body>
+<script>
+description('Test style update caused by tree changes with the selector :first-of-type. This test does not use any sibling "~" combinator to avoid its more generic marking.');
+
+function testColor(expectMatch) {
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor', 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor', 'rgb(255, 255, 255)');
+
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).color', 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).color', expectMatch ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).color', 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).color', expectMatch ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
+}
+
+function addElementAsFirstChild(tagName, className)
+{
+ var allFoos = document.querySelectorAll("foo");
+ for (var i = 0; i < allFoos.length; ++i) {
+ var newElement = document.createElement(tagName);
+ newElement.className = className;
+ allFoos[i].parentElement.insertBefore(newElement, allFoos[i]);
+ }
+}
+
+debug("Initialy, &lt;foo&gt; is the first of its type, the style should match.");
+testColor(true);
+
+debug("Adding a few elements that are not &lt;foo&gt; do not invalidate the :first-of-type.");
+addElementAsFirstChild("notfoo");
+addElementAsFirstChild("notfoo");
+addElementAsFirstChild("notfoo");
+addElementAsFirstChild("notfoo");
+testColor(true);
+
+debug("Adding a second &lt;foo&gt;. This should breat the rules because the new foo does not match \"+ padding\".");
+addElementAsFirstChild("foo", "extra-foo");
+testColor(false);
+
+debug("Adding a few elements that are not &lt;foo&gt;, we should still not match because of the previously added &lt;foo&gt;.");
+addElementAsFirstChild("notfoo");
+addElementAsFirstChild("notfoo");
+addElementAsFirstChild("notfoo");
+addElementAsFirstChild("notfoo");
+testColor(false);
+
+debug("Removing the &lt;foo&gt; blocking foo:first-of-type+padding.");
+var extraFoos = document.querySelectorAll(".extra-foo");
+for (var i = 0; i < extraFoos.length; ++i)
+ extraFoos[i].parentElement.removeChild(extraFoos[i]);
+testColor(true);
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsfirstoftypesiblingstyleupdateexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/first-of-type-sibling-style-update-expected.txt (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/first-of-type-sibling-style-update-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/first-of-type-sibling-style-update-expected.txt 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,94 @@
</span><ins>+Test style update caused by tree changes with the selector :first-of-type.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Initialy, <foo> is the first of its type, the style should match.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).fillOpacity is "0.5"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).fillOpacity is "0.5"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).minWidth is "1px"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).minWidth is "1px"
+Adding a few elements that are not <foo> do not invalidate the :first-of-type.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).fillOpacity is "0.5"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).fillOpacity is "0.5"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).minWidth is "1px"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).minWidth is "1px"
+Adding a second <foo>. This should breat the rules because the new foo does not match "+ padding".
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).minWidth is "0px"
+Adding a few elements that are not <foo>, we should still not match because of the previously added <foo>.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).minWidth is "0px"
+Removing the <foo> blocking foo:first-of-type+padding.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).fillOpacity is "0.5"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).fillOpacity is "0.5"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).minWidth is "1px"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).minWidth is "1px"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsfirstoftypesiblingstyleupdatehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/first-of-type-sibling-style-update.html (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/first-of-type-sibling-style-update.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/first-of-type-sibling-style-update.html 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,109 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+* {
+ background-color: white;
+ color: black;
+ fill-opacity: 1;
+ min-width: 0px;
+}
+foo:first-of-type+padding+padding+padding+bar {
+ background-color: rgb(1, 2, 3);
+}
+foo:first-of-type+padding~bar {
+ fill-opacity: 0.5;
+}
+foo:first-of-type+padding+padding+padding+bar baz {
+ color: rgb(4, 5, 6);
+}
+foo:first-of-type+padding~bar baz {
+ min-width: 1px;
+}
+</style>
+</head>
+<body>
+ <div>
+ <foo></foo>
+ <padding></padding>
+ <padding></padding>
+ <padding></padding>
+ <bar id="bar-with-renderer">
+ <baz id="baz-with-renderer"></baz>
+ </bar>
+ </div>
+ <div style="display:none;">
+ <foo></foo>
+ <padding></padding>
+ <padding></padding>
+ <padding></padding>
+ <bar id="bar-without-renderer">
+ <baz id="baz-without-renderer"></baz>
+ </bar>
+ </div>
+</body>
+<script>
+description('Test style update caused by tree changes with the selector :first-of-type.');
+
+function testColor(expectMatch) {
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor', 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor', 'rgb(255, 255, 255)');
+
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).fillOpacity', expectMatch ? '0.5' : '1');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).fillOpacity', '1');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).fillOpacity', expectMatch ? '0.5' : '1');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).fillOpacity', '1');
+
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).color', 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).color', expectMatch ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).color', 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).color', expectMatch ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
+
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).minWidth', '0px');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).minWidth', expectMatch ? '1px': '0px');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).minWidth', '0px');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).minWidth', expectMatch ? '1px': '0px');
+}
+
+function addElementAsFirstChild(tagName, className)
+{
+ var allFoos = document.querySelectorAll("foo");
+ for (var i = 0; i < allFoos.length; ++i) {
+ var newElement = document.createElement(tagName);
+ newElement.className = className;
+ allFoos[i].parentElement.insertBefore(newElement, allFoos[i]);
+ }
+}
+
+debug("Initialy, &lt;foo&gt; is the first of its type, the style should match.");
+testColor(true);
+
+debug("Adding a few elements that are not &lt;foo&gt; do not invalidate the :first-of-type.");
+addElementAsFirstChild("notfoo");
+addElementAsFirstChild("notfoo");
+addElementAsFirstChild("notfoo");
+addElementAsFirstChild("notfoo");
+testColor(true);
+
+debug("Adding a second &lt;foo&gt;. This should breat the rules because the new foo does not match \"+ padding\".");
+addElementAsFirstChild("foo", "extra-foo");
+testColor(false);
+
+debug("Adding a few elements that are not &lt;foo&gt;, we should still not match because of the previously added &lt;foo&gt;.");
+addElementAsFirstChild("notfoo");
+addElementAsFirstChild("notfoo");
+addElementAsFirstChild("notfoo");
+addElementAsFirstChild("notfoo");
+testColor(false);
+
+debug("Removing the &lt;foo&gt; blocking foo:first-of-type+padding.");
+var extraFoos = document.querySelectorAll(".extra-foo");
+for (var i = 0; i < extraFoos.length; ++i)
+ extraFoos[i].parentElement.removeChild(extraFoos[i]);
+testColor(true);
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsiddirectadjacentstyleupdateexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/id-direct-adjacent-style-update-expected.txt (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/id-direct-adjacent-style-update-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/id-direct-adjacent-style-update-expected.txt 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,45 @@
</span><ins>+Test style update caused by id changes on a direct adjacent. This test does not use any sibling "~" combinator to avoid its more generic marking.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Initial state does not match, there is no id defined.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
+Adding the id, we should have a match.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(4, 5, 6)"
+Removing the id, we should not longer match.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
+Setting the id to a different value, we should not match.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsiddirectadjacentstyleupdatehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/id-direct-adjacent-style-update.html (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/id-direct-adjacent-style-update.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/id-direct-adjacent-style-update.html 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,77 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+* {
+ background-color: white;
+ color: black;
+}
+#webkit+padding+padding+padding+bar {
+ background-color: rgb(1, 2, 3);
+}
+#webkit+padding+padding+padding+bar baz {
+ color: rgb(4, 5, 6);
+}
+</style>
+</head>
+<body>
+ <div>
+ <foo></foo>
+ <padding></padding>
+ <padding></padding>
+ <padding></padding>
+ <bar id="bar-with-renderer">
+ <baz id="baz-with-renderer"></baz>
+ </bar>
+ </div>
+ <div style="display:none;">
+ <foo></foo>
+ <padding></padding>
+ <padding></padding>
+ <padding></padding>
+ <bar id="bar-without-renderer">
+ <baz id="baz-without-renderer"></baz>
+ </bar>
+ </div>
+</body>
+<script>
+description('Test style update caused by id changes on a direct adjacent. This test does not use any sibling "~" combinator to avoid its more generic marking.');
+
+function testColor(expectMatch) {
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor', 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor', 'rgb(255, 255, 255)');
+
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).color', 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).color', expectMatch ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).color', 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).color', expectMatch ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
+}
+
+// Attributes are covered in a separate test, here we only use the id property.
+function setId(value) {
+ var allFoos = document.querySelectorAll("foo");
+ for (var i = 0; i < allFoos.length; ++i)
+ allFoos[i].id =value;
+}
+
+debug("Initial state does not match, there is no id defined.");
+testColor(false);
+
+debug("Adding the id, we should have a match.");
+setId("webkit");
+testColor(true);
+
+debug("Removing the id, we should not longer match.");
+setId("");
+testColor(false);
+
+debug("Setting the id to a different value, we should not match.");
+setId("notwebkit");
+testColor(false);
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsidsiblingstyleupdateexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/id-sibling-style-update-expected.txt (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/id-sibling-style-update-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/id-sibling-style-update-expected.txt 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,77 @@
</span><ins>+Test style update caused by id changes on a sibling.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Initial state does not match, there is no id defined.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).minWidth is "0px"
+Adding the id, we should have a match.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).fillOpacity is "0.5"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).fillOpacity is "0.5"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).minWidth is "1px"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).minWidth is "1px"
+Removing the id, we should not longer match.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).minWidth is "0px"
+Setting the id to a different value, we should not match.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).fillOpacity is "1"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).minWidth is "0px"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).minWidth is "0px"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsidsiblingstyleupdatehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/id-sibling-style-update.html (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/id-sibling-style-update.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/id-sibling-style-update.html 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,95 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+* {
+ background-color: white;
+ color: black;
+ fill-opacity: 1;
+ min-width: 0px;
+}
+#webkit+padding+padding+padding+bar {
+ background-color: rgb(1, 2, 3);
+}
+#webkit~bar {
+ fill-opacity: 0.5;
+}
+#webkit+padding+padding+padding+bar baz {
+ color: rgb(4, 5, 6);
+}
+#webkit~bar baz {
+ min-width: 1px;
+}
+</style>
+</head>
+<body>
+ <div>
+ <foo></foo>
+ <padding></padding>
+ <padding></padding>
+ <padding></padding>
+ <bar id="bar-with-renderer">
+ <baz id="baz-with-renderer"></baz>
+ </bar>
+ </div>
+ <div style="display:none;">
+ <foo></foo>
+ <padding></padding>
+ <padding></padding>
+ <padding></padding>
+ <bar id="bar-without-renderer">
+ <baz id="baz-without-renderer"></baz>
+ </bar>
+ </div>
+</body>
+<script>
+description('Test style update caused by id changes on a sibling.');
+
+function testColor(expectMatch) {
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor', 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor', 'rgb(255, 255, 255)');
+
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).fillOpacity', expectMatch ? '0.5' : '1');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).fillOpacity', '1');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).fillOpacity', expectMatch ? '0.5' : '1');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).fillOpacity', '1');
+
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).color', 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).color', expectMatch ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).color', 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).color', expectMatch ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
+
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).minWidth', '0px');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).minWidth', expectMatch ? '1px': '0px');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).minWidth', '0px');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).minWidth', expectMatch ? '1px': '0px');
+}
+
+// Attributes are covered in a separate test, here we only use the id property.
+function setId(value) {
+ var allFoos = document.querySelectorAll("foo");
+ for (var i = 0; i < allFoos.length; ++i)
+ allFoos[i].id =value;
+}
+
+debug("Initial state does not match, there is no id defined.");
+testColor(false);
+
+debug("Adding the id, we should have a match.");
+setId("webkit");
+testColor(true);
+
+debug("Removing the id, we should not longer match.");
+setId("");
+testColor(false);
+
+debug("Setting the id to a different value, we should not match.");
+setId("notwebkit");
+testColor(false);
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsnthchildasfirstsimpleselectorstyleupdateexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/nth-child-as-first-simple-selector-style-update-expected.txt (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/nth-child-as-first-simple-selector-style-update-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/nth-child-as-first-simple-selector-style-update-expected.txt 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,189 @@
</span><ins>+Test style update of :nth-child() when the tree structure is modified. In this case, :nth-child() is not the last component of the compound selector, which is a bit less common.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Initialy, <foo> is the first of its type, the style should match.
+PASS getComputedStyle(document.querySelectorAll("testnode")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[9]).backgroundColor is "rgb(1, 2, 3)"
+Adding an element <testnode> on top, we should now match 4 and 5.
+PASS getComputedStyle(document.querySelectorAll("testnode")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[11]).backgroundColor is "rgb(1, 2, 3)"
+Adding an element <nottestnode> on top, we should now match 3, 4 and 5.
+PASS getComputedStyle(document.querySelectorAll("testnode")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[10]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[11]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[12]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[13]).backgroundColor is "rgb(1, 2, 3)"
+Adding an element <nottestnode> on top, we should now match 2, 3, 4 and 5.
+PASS getComputedStyle(document.querySelectorAll("testnode")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[7]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[10]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[11]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[12]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[13]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[14]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[15]).backgroundColor is "rgb(1, 2, 3)"
+Adding an element <testnode> on top, we should now match 1, 2, 3, 4 and 5.
+PASS getComputedStyle(document.querySelectorAll("testnode")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[7]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[8]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[10]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[11]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[12]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[13]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[14]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[15]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[16]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[17]).backgroundColor is "rgb(1, 2, 3)"
+Adding an element <nottestnode> on top, we should now match 0, 1, 2, 3, 4 and 5.
+PASS getComputedStyle(document.querySelectorAll("testnode")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[7]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[8]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[9]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[10]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[11]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[12]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[13]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[14]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[15]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[16]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[17]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[18]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[19]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <nottestnode>, 0 should no longer match.
+PASS getComputedStyle(document.querySelectorAll("testnode")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[7]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[8]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[10]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[11]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[12]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[13]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[14]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[15]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[16]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[17]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <testnode>, 1 should no longer match.
+PASS getComputedStyle(document.querySelectorAll("testnode")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[7]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[10]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[11]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[12]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[13]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[14]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[15]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <notestnode>, 2 should no longer match.
+PASS getComputedStyle(document.querySelectorAll("testnode")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[10]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[11]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[12]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[13]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <testnode>, 3 should no longer match.
+PASS getComputedStyle(document.querySelectorAll("testnode")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[11]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <testnode>, 4 should no longer match.
+PASS getComputedStyle(document.querySelectorAll("testnode")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[9]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <testnode>, there are only 4 siblings left, nothing can match.
+PASS getComputedStyle(document.querySelectorAll("testnode")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[1]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[4]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("testnode")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsnthchildasfirstsimpleselectorstyleupdatehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/nth-child-as-first-simple-selector-style-update.html (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/nth-child-as-first-simple-selector-style-update.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/nth-child-as-first-simple-selector-style-update.html 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,110 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+testnode {
+ background-color: white;
+}
+:nth-child(n+5).target {
+ background-color: rgb(1, 2, 3);
+}
+</style>
+</head>
+<body>
+ <div id="with-renderer">
+ <testnode class="element_1 target"></testnode>
+ <testnode class="element_2 target"></testnode>
+ <testnode class="element_3 target"></testnode>
+ <testnode class="element_4 target"></testnode>
+ <testnode class="element_5 target"></testnode>
+ </div>
+ <div id="without-renderer" style="display:none;">
+ <testnode class="element_1 target"></testnode>
+ <testnode class="element_2 target"></testnode>
+ <testnode class="element_3 target"></testnode>
+ <testnode class="element_4 target"></testnode>
+ <testnode class="element_5 target"></testnode>
+ </div>
+</body>
+<script>
+description('Test style update of :nth-child() when the tree structure is modified. In this case, :nth-child() is not the last component of the compound selector, which is a bit less common.');
+
+function testColor(classesThatShouldMatch) {
+ var alltestnodes = document.querySelectorAll("testnode");
+ for (var i = 0; i < alltestnodes.length; ++i) {
+ var expectMath = classesThatShouldMatch.indexOf(alltestnodes[i].classList[0]) != -1;
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("testnode")[' + i + ']).backgroundColor', expectMath ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+ }
+}
+
+function addElementAsFirstChild(tagName, className)
+{
+ var newElement = document.createElement(tagName);
+ newElement.className = className;
+
+ var withRenderer = document.getElementById("with-renderer");
+ withRenderer.insertBefore(newElement, withRenderer.firstChild);
+
+ var withoutRenderer = document.getElementById("without-renderer");
+ withoutRenderer.insertBefore(newElement.cloneNode(), withoutRenderer.firstChild);
+}
+
+function removeElementsOfClass(className)
+{
+ var allElementsToRemove = document.querySelectorAll('.' + className);
+ for (var i = 0; i < allElementsToRemove.length; ++i)
+ allElementsToRemove[i].parentElement.removeChild(allElementsToRemove[i]);
+}
+
+debug("Initialy, &lt;foo&gt; is the first of its type, the style should match.");
+testColor(["element_5"]);
+
+debug("Adding an element &lt;testnode&gt; on top, we should now match 4 and 5.");
+addElementAsFirstChild("testnode", "element_0 target")
+testColor(["element_4", "element_5"]);
+
+// Using nottestnode is interesting because the ':nth-child()' part is not matched for those elements.
+debug("Adding an element &lt;nottestnode&gt; on top, we should now match 3, 4 and 5.");
+addElementAsFirstChild("testnode", "element_-1 target")
+testColor(["element_3", "element_4", "element_5"]);
+
+debug("Adding an element &lt;nottestnode&gt; on top, we should now match 2, 3, 4 and 5.");
+addElementAsFirstChild("testnode", "element_-2 target")
+testColor(["element_2", "element_3", "element_4", "element_5"]);
+
+debug("Adding an element &lt;testnode&gt; on top, we should now match 1, 2, 3, 4 and 5.");
+addElementAsFirstChild("testnode", "element_-3 target")
+testColor(["element_1", "element_2", "element_3", "element_4", "element_5"]);
+
+debug("Adding an element &lt;nottestnode&gt; on top, we should now match 0, 1, 2, 3, 4 and 5.");
+addElementAsFirstChild("testnode", "element_-4 target")
+testColor(["element_0", "element_1", "element_2", "element_3", "element_4", "element_5"]);
+
+debug("Removing one of the &lt;nottestnode&gt;, 0 should no longer match.");
+removeElementsOfClass("element_-2");
+testColor(["element_1", "element_2", "element_3", "element_4", "element_5"]);
+
+debug("Removing one of the &lt;testnode&gt;, 1 should no longer match.");
+removeElementsOfClass("element_-4");
+testColor(["element_2", "element_3", "element_4", "element_5"]);
+
+debug("Removing one of the &lt;notestnode&gt;, 2 should no longer match.");
+removeElementsOfClass("element_-1");
+testColor(["element_3", "element_4", "element_5"]);
+
+debug("Removing one of the &lt;testnode&gt;, 3 should no longer match.");
+removeElementsOfClass("element_-3");
+testColor(["element_4", "element_5"]);
+
+debug("Removing one of the &lt;testnode&gt;, 4 should no longer match.");
+removeElementsOfClass("element_0");
+testColor(["element_5"]);
+
+debug("Removing one of the &lt;testnode&gt;, there are only 4 siblings left, nothing can match.");
+removeElementsOfClass("element_1");
+testColor([]);
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsnthchilddirectadjacentstyleupdateexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/nth-child-direct-adjacent-style-update-expected.txt (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/nth-child-direct-adjacent-style-update-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/nth-child-direct-adjacent-style-update-expected.txt 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,54 @@
</span><ins>+Test style update caused by :nth-child() changes on a direct adjacent. This test does not use any sibling "~" combinator to avoid its more generic marking.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Initially, <foo> is the third child and does not match.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
+Adding one element before moves <foo> to the fourth position, we should have a match.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(4, 5, 6)"
+Adding one more element before moves <foo> to the fifth position, we should no longer match.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
+Removing one element, we should be back to 4 and have a match.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(4, 5, 6)"
+Removing one more element, we should be back to the initial state.
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.getElementById("bar-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("bar-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("baz-without-renderer")).color is "rgb(0, 0, 0)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsnthchilddirectadjacentstyleupdatehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/nth-child-direct-adjacent-style-update.html (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/nth-child-direct-adjacent-style-update.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/nth-child-direct-adjacent-style-update.html 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,96 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+* {
+ background-color: white;
+ color: black;
+}
+:nth-child(4)+padding+padding+padding+bar {
+ background-color: rgb(1, 2, 3);
+}
+:nth-child(4)+padding+padding+padding+bar baz {
+ color: rgb(4, 5, 6);
+}
+</style>
+</head>
+<body>
+ <div id="with-renderer">
+ <padding></padding>
+ <padding></padding>
+ <foo></foo>
+ <padding></padding>
+ <padding></padding>
+ <padding></padding>
+ <bar id="bar-with-renderer">
+ <baz id="baz-with-renderer"></baz>
+ </bar>
+ </div>
+ <div id="without-renderer" style="display:none;">
+ <padding></padding>
+ <padding></padding>
+ <foo></foo>
+ <padding></padding>
+ <padding></padding>
+ <padding></padding>
+ <bar id="bar-without-renderer">
+ <baz id="baz-without-renderer"></baz>
+ </bar>
+ </div>
+</body>
+<script>
+description('Test style update caused by :nth-child() changes on a direct adjacent. This test does not use any sibling "~" combinator to avoid its more generic marking.');
+
+function testColor(expectMatch) {
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor', 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor', 'rgb(255, 255, 255)');
+
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).color', 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).color', expectMatch ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).color', 'rgb(0, 0, 0)');
+ shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).color', expectMatch ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
+}
+
+function addElementAsFirstChild(tagName, className)
+{
+ var newElement = document.createElement(tagName);
+ newElement.className = className;
+
+ var withRenderer = document.getElementById("with-renderer");
+ withRenderer.insertBefore(newElement, withRenderer.firstChild);
+
+ var withoutRenderer = document.getElementById("without-renderer");
+ withoutRenderer.insertBefore(newElement.cloneNode(), withoutRenderer.firstChild);
+}
+
+function removeElementsOfClass(className)
+{
+ var allElementsToRemove = document.querySelectorAll('.' + className);
+ for (var i = 0; i < allElementsToRemove.length; ++i)
+ allElementsToRemove[i].parentElement.removeChild(allElementsToRemove[i]);
+}
+
+debug("Initially, &lt;foo&gt; is the third child and does not match.");
+testColor(false);
+
+debug("Adding one element before moves &lt;foo&gt; to the fourth position, we should have a match.");
+addElementAsFirstChild("padding", "padding1")
+testColor(true);
+
+debug("Adding one more element before moves &lt;foo&gt; to the fifth position, we should no longer match.");
+addElementAsFirstChild("padding", "padding2")
+testColor(false);
+
+debug("Removing one element, we should be back to 4 and have a match.");
+removeElementsOfClass("padding1");
+testColor(true);
+
+debug("Removing one more element, we should be back to the initial state.");
+removeElementsOfClass("padding2");
+testColor(false);
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsnthchildstyleupdateexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/nth-child-style-update-expected.txt (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/nth-child-style-update-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/nth-child-style-update-expected.txt 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,167 @@
</span><ins>+Test style update of :nth-child() when the tree structure is modified.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Initialy, <foo> is the first of its type, the style 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")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+Adding an element <target> on top, we should now match 4 and 5.
+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")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+Adding an element <nottarget> on top, we should now match 3, 4 and 5.
+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")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+Adding an element <nottarget> on top, we should now match 2, 3, 4 and 5.
+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")[2]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+Adding an element <target> on top, we should now match 1, 2, 3, 4 and 5.
+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")[2]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[12]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[13]).backgroundColor is "rgb(1, 2, 3)"
+Adding an element <nottarget> on top, we should now match 0, 1, 2, 3, 4 and 5.
+PASS getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[2]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[12]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[13]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <nottarget>, 0 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")[2]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[12]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[13]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <target>, 1 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")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[12]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[13]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <notarget>, 2 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")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[12]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[13]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <target>, 3 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")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[10]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[11]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <target>, 4 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")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[8]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[9]).backgroundColor is "rgb(1, 2, 3)"
+Removing one of the <target>, there are only 4 siblings left, nothing can 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")[2]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[3]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[4]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[5]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[6]).backgroundColor is "rgb(255, 255, 255)"
+PASS getComputedStyle(document.querySelectorAll("target")[7]).backgroundColor is "rgb(255, 255, 255)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsnthchildstyleupdatehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/nth-child-style-update.html (0 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/nth-child-style-update.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/nth-child-style-update.html 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -0,0 +1,110 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+target {
+ background-color: white;
+}
+target:nth-child(n+5) {
+ background-color: rgb(1, 2, 3);
+}
+</style>
+</head>
+<body>
+ <div id="with-renderer">
+ <target class="element_1"></target>
+ <target class="element_2"></target>
+ <target class="element_3"></target>
+ <target class="element_4"></target>
+ <target class="element_5"></target>
+ </div>
+ <div id="without-renderer" style="display:none;">
+ <target class="element_1"></target>
+ <target class="element_2"></target>
+ <target class="element_3"></target>
+ <target class="element_4"></target>
+ <target class="element_5"></target>
+ </div>
+</body>
+<script>
+description('Test style update of :nth-child() when the tree structure is modified.');
+
+function testColor(classesThatShouldMatch) {
+ var allTargets = document.querySelectorAll("target");
+ for (var i = 0; i < allTargets.length; ++i) {
+ var expectMath = classesThatShouldMatch.indexOf(allTargets[i].className) != -1;
+ shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[' + i + ']).backgroundColor', expectMath ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
+ }
+}
+
+function addElementAsFirstChild(tagName, className)
+{
+ var newElement = document.createElement(tagName);
+ newElement.className = className;
+
+ var withRenderer = document.getElementById("with-renderer");
+ withRenderer.insertBefore(newElement, withRenderer.firstChild);
+
+ var withoutRenderer = document.getElementById("without-renderer");
+ withoutRenderer.insertBefore(newElement.cloneNode(), withoutRenderer.firstChild);
+}
+
+function removeElementsOfClass(className)
+{
+ var allElementsToRemove = document.querySelectorAll('.' + className);
+ for (var i = 0; i < allElementsToRemove.length; ++i)
+ allElementsToRemove[i].parentElement.removeChild(allElementsToRemove[i]);
+}
+
+debug("Initialy, &lt;foo&gt; is the first of its type, the style should match.");
+testColor(["element_5"]);
+
+debug("Adding an element &lt;target&gt; on top, we should now match 4 and 5.");
+addElementAsFirstChild("target", "element_0")
+testColor(["element_4", "element_5"]);
+
+// Using nottarget is interesting because the ':nth-child()' part is not matched for those elements.
+debug("Adding an element &lt;nottarget&gt; on top, we should now match 3, 4 and 5.");
+addElementAsFirstChild("nottarget", "element_-1")
+testColor(["element_3", "element_4", "element_5"]);
+
+debug("Adding an element &lt;nottarget&gt; on top, we should now match 2, 3, 4 and 5.");
+addElementAsFirstChild("nottarget", "element_-2")
+testColor(["element_2", "element_3", "element_4", "element_5"]);
+
+debug("Adding an element &lt;target&gt; on top, we should now match 1, 2, 3, 4 and 5.");
+addElementAsFirstChild("target", "element_-3")
+testColor(["element_1", "element_2", "element_3", "element_4", "element_5"]);
+
+debug("Adding an element &lt;nottarget&gt; on top, we should now match 0, 1, 2, 3, 4 and 5.");
+addElementAsFirstChild("nottarget", "element_-4")
+testColor(["element_0", "element_1", "element_2", "element_3", "element_4", "element_5"]);
+
+debug("Removing one of the &lt;nottarget&gt;, 0 should no longer match.");
+removeElementsOfClass("element_-2");
+testColor(["element_1", "element_2", "element_3", "element_4", "element_5"]);
+
+debug("Removing one of the &lt;target&gt;, 1 should no longer match.");
+removeElementsOfClass("element_-4");
+testColor(["element_2", "element_3", "element_4", "element_5"]);
+
+debug("Removing one of the &lt;notarget&gt;, 2 should no longer match.");
+removeElementsOfClass("element_-1");
+testColor(["element_3", "element_4", "element_5"]);
+
+debug("Removing one of the &lt;target&gt;, 3 should no longer match.");
+removeElementsOfClass("element_-3");
+testColor(["element_4", "element_5"]);
+
+debug("Removing one of the &lt;target&gt;, 4 should no longer match.");
+removeElementsOfClass("element_0");
+testColor(["element_5"]);
+
+debug("Removing one of the &lt;target&gt;, there are only 4 siblings left, nothing can match.");
+removeElementsOfClass("element_1");
+testColor([]);
+
+</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 (173228 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-09-03 21:29:52 UTC (rev 173228)
+++ trunk/Source/WebCore/ChangeLog 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -1,3 +1,140 @@
</span><ins>+2014-09-03 Benjamin Poulain <benjamin@webkit.org>
+
+ Fix style invalidation of elements with multiple siblings dependencies
+ https://bugs.webkit.org/show_bug.cgi?id=136472
+
+ Reviewed by Andreas Kling.
+
+ Previously, style invalidation of siblings was driven by a pair of flags:
+ -ChildrenAffectedByDirectAdjacentRules.
+ -ChildrenAffectedByForwardPositionalRules.
+
+ When ChildrenAffectedByDirectAdjacentRules was set, the element after an element
+ with "needsStyleRecalc" was also recomputed. While this work for pair of elements:
+ a + b
+ It does not work for more than that. For example, with
+ a.propery + b + c
+ When the state of <a> changes, the style of <b> was updated, which is useless. The style
+ of <c> was untouched, which is incorrect.
+
+ When ChildrenAffectedByForwardPositionalRules, all elements after one with "needsStyleRecalc"
+ were invalidated. While more correct, it caused avalanche of style recalc and was not a very
+ useful "optimization".
+
+
+ To fix the correctness issues (e.g. "a + b + c"), I could have gone two ways:
+ 1) Invalidate the parent of a, b, c. The children would always get a correct style
+ when their parent's style would be resolved.
+ 2) Create invalidation relations to enforce that the right siblings are invalidated.
+
+ I have decided for a weak version of (2). The reason is that most DOM trees are very
+ shallow while being very wide. Invalidating the parent generally causes massive style
+ recalculation.
+
+ To keep things simple for now, there is no explicit dependency list between siblings.
+ Instead, each element has a pair of flag:
+ 1) The element's style depends on the state of a previous sibling.
+ 2) The element's state affects following siblings.
+
+ With the notation "<-" for (1), "->" for (2), the selector "a + b + c" create this kind
+ of marking:
+ a + b + c
+ -> ->
+ <-
+
+ When <a> is invalidated, the style resolver will go through the chain of dependent elements
+ and invalidate any element that can be affected by a prior invalidation, here <c>.
+
+ Overlaps are possible. For example with the two selector, "a + b + c", "b ~ d"
+ the marking would be
+ a + b + c + d
+ -> -> ->
+ <- <-
+
+ A change in <a> would invalidate both <c> and <d>. This is overkill, but the end result
+ is correct and it is a net improvement over the previous flags.
+
+
+ As usual, the CSS JIT makes an effort at compile time to reduce tree marking. SelectorChecker
+ marks everything as usual.
+
+ Tests: fast/css/direct-adjacent-style-update-optimization.html
+ fast/css/indirect-adjacent-style-update-optimization.html
+ fast/css/non-matching-adjacent-style-update.html
+ fast/selectors/first-of-type-direct-adjacent-style-update.html
+ fast/selectors/first-of-type-sibling-style-update.html
+ fast/selectors/id-direct-adjacent-style-update.html
+ fast/selectors/id-sibling-style-update.html
+ fast/selectors/nth-child-as-first-simple-selector-style-update.html
+ fast/selectors/nth-child-direct-adjacent-style-update.html
+ fast/selectors/nth-child-style-update.html
+
+ * css/SelectorChecker.cpp:
+ (WebCore::isFirstOfType):
+ (WebCore::countElementsBefore):
+ (WebCore::countElementsOfTypeBefore):
+ Counting selectors are not unlike adjacent combinators, they are handled the exact same way.
+ For example a :nth-child(4) would generate somewhat similar marking as
+ :first-child + * + * + *
+
+ Everything prior to the element with the counter affects the style of the element.
+
+ (WebCore::hasScrollbarPseudoElement):
+ The assertion was incorrect. You can get an scrollbar pseudo ID on an element without scrollbar.
+ It will never match, but such case is possible.
+
+ (WebCore::SelectorChecker::matchRecursively):
+ (WebCore::SelectorChecker::checkOne):
+ * css/StyleResolver.cpp:
+ (WebCore::StyleResolver::canShareStyleWithElement):
+ Previously, any subtree affected by sibling selectors were unshareable. That was done by checking
+ for Element::hasFlagsSetDuringStylingOfChildren().
+
+ Now that sibling relation are local, they no longer prevent sharing of all children. Instead, we can
+ test locally for subgroup with sibling relations.
+
+ * cssjit/SelectorCompiler.cpp:
+ (WebCore::SelectorCompiler::isAdjacentRelation):
+ (WebCore::SelectorCompiler::shouldMarkStyleIsAffectedByPreviousSibling):
+ (WebCore::SelectorCompiler::SelectorCodeGenerator::generateSelectorChecker):
+ (WebCore::SelectorCompiler::SelectorCodeGenerator::generateDirectAdjacentTreeWalker):
+ (WebCore::SelectorCompiler::SelectorCodeGenerator::generateIndirectAdjacentTreeWalker):
+ (WebCore::SelectorCompiler::SelectorCodeGenerator::markElementIfResolvingStyle):
+ (WebCore::SelectorCompiler::SelectorCodeGenerator::generateElementIsNthChild):
+ (WebCore::SelectorCompiler::SelectorCodeGenerator::markParentElementIfResolvingStyle): Deleted.
+ * dom/Document.cpp:
+ (WebCore::nodeOrItsAncestorNeedsStyleRecalc):
+ * dom/Element.cpp:
+ (WebCore::checkForSiblingStyleChanges):
+ (WebCore::Element::hasFlagsSetDuringStylingOfChildren):
+ (WebCore::Element::setChildrenAffectedByForwardPositionalRules): Deleted.
+ (WebCore::Element::rareDataChildrenAffectedByForwardPositionalRules): Deleted.
+ * dom/Element.h:
+ (WebCore::Element::affectsNextSiblingElementStyle):
+ (WebCore::Element::setAffectsNextSiblingElementStyle):
+ (WebCore::Element::setStyleIsAffectedByPreviousSibling):
+ (WebCore::Element::childrenAffectedByPositionalRules): Deleted.
+ (WebCore::Element::childrenAffectedByDirectAdjacentRules): Deleted.
+ (WebCore::Element::childrenAffectedByForwardPositionalRules): Deleted.
+ (WebCore::Element::setChildrenAffectedByDirectAdjacentRules): Deleted.
+ (WebCore::Element::setChildrenAffectedByForwardPositionalRules): Deleted.
+ * dom/ElementRareData.h:
+ (WebCore::ElementRareData::ElementRareData):
+ (WebCore::ElementRareData::resetDynamicRestyleObservations):
+ (WebCore::ElementRareData::childrenAffectedByForwardPositionalRules): Deleted.
+ (WebCore::ElementRareData::setChildrenAffectedByForwardPositionalRules): Deleted.
+ * dom/Node.h:
+ (WebCore::Node::styleIsAffectedByPreviousSibling):
+ (WebCore::Node::flagAffectsNextSiblingElementStyle):
+ (WebCore::Node::flagStyleIsAffectedByPreviousSibling):
+ (WebCore::Node::flagChildrenAffectedByDirectAdjacentRulesFlag): Deleted.
+ * html/HTMLElement.h:
+ (WebCore::HTMLElement::isHTMLUnknownElement):
+ * html/HTMLUnknownElement.h:
+ * style/StyleResolveTree.cpp:
+ (WebCore::Style::resetStyleForNonRenderedDescendants):
+ (WebCore::Style::resolveTree):
+
</ins><span class="cx"> 2014-09-03 Simon Fraser <simon.fraser@apple.com>
</span><span class="cx">
</span><span class="cx"> Dump SimpleLineLayout info in showRenderTree() output
</span></span></pre></div>
<a id="trunkSourceWebCorecssSelectorCheckercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/SelectorChecker.cpp (173228 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/SelectorChecker.cpp 2014-09-03 21:29:52 UTC (rev 173228)
+++ trunk/Source/WebCore/css/SelectorChecker.cpp 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -68,9 +68,11 @@
</span><span class="cx"> return !ElementTraversal::nextSibling(element);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-static inline bool isFirstOfType(const Element* element, const QualifiedName& type)
</del><ins>+static inline bool isFirstOfType(Element* element, const QualifiedName& type, bool isResolvingStyle)
</ins><span class="cx"> {
</span><del>- for (const Element* sibling = ElementTraversal::previousSibling(element); sibling; sibling = ElementTraversal::previousSibling(sibling)) {
</del><ins>+ for (Element* sibling = ElementTraversal::previousSibling(element); sibling; sibling = ElementTraversal::previousSibling(sibling)) {
+ if (isResolvingStyle)
+ sibling->setAffectsNextSiblingElementStyle();
</ins><span class="cx"> if (sibling->hasTagName(type))
</span><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="lines">@@ -86,10 +88,13 @@
</span><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-static inline int countElementsBefore(const Element* element)
</del><ins>+static inline int countElementsBefore(Element* element, bool isResolvingStyle)
</ins><span class="cx"> {
</span><span class="cx"> int count = 0;
</span><del>- for (const Element* sibling = ElementTraversal::previousSibling(element); sibling; sibling = ElementTraversal::previousSibling(sibling)) {
</del><ins>+ for (Element* sibling = ElementTraversal::previousSibling(element); sibling; sibling = ElementTraversal::previousSibling(sibling)) {
+ if (isResolvingStyle)
+ sibling->setAffectsNextSiblingElementStyle();
+
</ins><span class="cx"> unsigned index = sibling->childIndex();
</span><span class="cx"> if (index) {
</span><span class="cx"> count += index;
</span><span class="lines">@@ -100,10 +105,13 @@
</span><span class="cx"> return count;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-static inline int countElementsOfTypeBefore(const Element* element, const QualifiedName& type)
</del><ins>+static inline int countElementsOfTypeBefore(Element* element, const QualifiedName& type, bool isResolvingStyle)
</ins><span class="cx"> {
</span><span class="cx"> int count = 0;
</span><del>- for (const Element* sibling = ElementTraversal::previousSibling(element); sibling; sibling = ElementTraversal::previousSibling(sibling)) {
</del><ins>+ for (Element* sibling = ElementTraversal::previousSibling(element); sibling; sibling = ElementTraversal::previousSibling(sibling)) {
+ if (isResolvingStyle)
+ sibling->setAffectsNextSiblingElementStyle();
+
</ins><span class="cx"> if (sibling->hasTagName(type))
</span><span class="cx"> ++count;
</span><span class="cx"> }
</span><span class="lines">@@ -152,7 +160,7 @@
</span><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-inline static bool hasScrollbarPseudoElement(const SelectorChecker::SelectorCheckingContext& context, PseudoId& dynamicPseudo)
</del><ins>+inline static bool hasScrollbarPseudoElement(PseudoId& dynamicPseudo)
</ins><span class="cx"> {
</span><span class="cx"> if (dynamicPseudo == SCROLLBAR
</span><span class="cx"> || dynamicPseudo == SCROLLBAR_THUMB
</span><span class="lines">@@ -160,7 +168,6 @@
</span><span class="cx"> || dynamicPseudo == SCROLLBAR_TRACK
</span><span class="cx"> || dynamicPseudo == SCROLLBAR_TRACK_PIECE
</span><span class="cx"> || dynamicPseudo == SCROLLBAR_CORNER) {
</span><del>- ASSERT_UNUSED(context, context.scrollbar);
</del><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -266,26 +273,30 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> case CSSSelector::DirectAdjacent:
</span><del>- if (context.resolvingMode == Mode::ResolvingStyle) {
- if (Element* parentElement = context.element->parentElement())
- parentElement->setChildrenAffectedByDirectAdjacentRules();
</del><ins>+ {
+ if (context.resolvingMode == Mode::ResolvingStyle)
+ context.element->setStyleIsAffectedByPreviousSibling();
+
+ Element* previousElement = context.element->previousElementSibling();
+ if (!previousElement)
+ return SelectorFailsAllSiblings;
+ if (context.resolvingMode == Mode::ResolvingStyle)
+ previousElement->setAffectsNextSiblingElementStyle();
+ nextContext.element = previousElement;
+ nextContext.firstSelectorOfTheFragment = nextContext.selector;
+ nextContext.elementStyle = 0;
+ return matchRecursively(nextContext, ignoreDynamicPseudo);
</ins><span class="cx"> }
</span><del>- nextContext.element = context.element->previousElementSibling();
- if (!nextContext.element)
- return SelectorFailsAllSiblings;
- nextContext.firstSelectorOfTheFragment = nextContext.selector;
- nextContext.elementStyle = 0;
- return matchRecursively(nextContext, ignoreDynamicPseudo);
-
</del><span class="cx"> case CSSSelector::IndirectAdjacent:
</span><del>- if (context.resolvingMode == Mode::ResolvingStyle) {
- if (Element* parentElement = context.element->parentElement())
- parentElement->setChildrenAffectedByForwardPositionalRules();
- }
</del><ins>+ if (context.resolvingMode == Mode::ResolvingStyle)
+ context.element->setStyleIsAffectedByPreviousSibling();
</ins><span class="cx"> nextContext.element = context.element->previousElementSibling();
</span><span class="cx"> nextContext.firstSelectorOfTheFragment = nextContext.selector;
</span><span class="cx"> nextContext.elementStyle = 0;
</span><span class="cx"> for (; nextContext.element; nextContext.element = nextContext.element->previousElementSibling()) {
</span><ins>+ if (context.resolvingMode == Mode::ResolvingStyle)
+ context.element->setAffectsNextSiblingElementStyle();
+
</ins><span class="cx"> Match match = this->matchRecursively(nextContext, ignoreDynamicPseudo);
</span><span class="cx"> if (match == SelectorMatches || match == SelectorFailsAllSiblings || match == SelectorFailsCompletely)
</span><span class="cx"> return match;
</span><span class="lines">@@ -296,7 +307,7 @@
</span><span class="cx"> // a selector is invalid if something follows a pseudo-element
</span><span class="cx"> // We make an exception for scrollbar pseudo elements and allow a set of pseudo classes (but nothing else)
</span><span class="cx"> // to follow the pseudo elements.
</span><del>- nextContext.hasScrollbarPseudo = hasScrollbarPseudoElement(context, dynamicPseudo);
</del><ins>+ nextContext.hasScrollbarPseudo = hasScrollbarPseudoElement(dynamicPseudo);
</ins><span class="cx"> nextContext.hasSelectionPseudo = dynamicPseudo == SELECTION;
</span><span class="cx"> if ((context.elementStyle || context.resolvingMode == Mode::CollectingRules) && dynamicPseudo != NOPSEUDO
</span><span class="cx"> && !nextContext.hasSelectionPseudo
</span><span class="lines">@@ -553,11 +564,11 @@
</span><span class="cx"> break;
</span><span class="cx"> case CSSSelector::PseudoClassFirstOfType:
</span><span class="cx"> // first-of-type matches the first element of its type
</span><del>- if (Element* parentElement = element->parentElement()) {
- bool result = isFirstOfType(element, element->tagQName());
</del><ins>+ if (element->parentElement()) {
</ins><span class="cx"> if (context.resolvingMode == Mode::ResolvingStyle)
</span><del>- parentElement->setChildrenAffectedByForwardPositionalRules();
- return result;
</del><ins>+ element->setStyleIsAffectedByPreviousSibling();
+
+ return isFirstOfType(element, element->tagQName(), context.resolvingMode == Mode::ResolvingStyle);
</ins><span class="cx"> }
</span><span class="cx"> break;
</span><span class="cx"> case CSSSelector::PseudoClassLastChild:
</span><span class="lines">@@ -603,12 +614,12 @@
</span><span class="cx"> // FIXME: This selector is very slow.
</span><span class="cx"> if (Element* parentElement = element->parentElement()) {
</span><span class="cx"> if (context.resolvingMode == Mode::ResolvingStyle) {
</span><del>- parentElement->setChildrenAffectedByForwardPositionalRules();
</del><ins>+ element->setStyleIsAffectedByPreviousSibling();
</ins><span class="cx"> parentElement->setChildrenAffectedByBackwardPositionalRules();
</span><span class="cx"> }
</span><span class="cx"> if (!parentElement->isFinishedParsingChildren())
</span><span class="cx"> return false;
</span><del>- return isFirstOfType(element, element->tagQName()) && isLastOfType(element, element->tagQName());
</del><ins>+ return isFirstOfType(element, element->tagQName(), context.resolvingMode == Mode::ResolvingStyle) && isLastOfType(element, element->tagQName());
</ins><span class="cx"> }
</span><span class="cx"> break;
</span><span class="cx"> #if ENABLE(CSS_SELECTORS_LEVEL4)
</span><span class="lines">@@ -625,14 +636,16 @@
</span><span class="cx"> case CSSSelector::PseudoClassNthChild:
</span><span class="cx"> if (!selector->parseNth())
</span><span class="cx"> break;
</span><del>- if (Element* parentElement = element->parentElement()) {
- int count = 1 + countElementsBefore(element);
</del><ins>+ if (element->parentElement()) {
+ if (context.resolvingMode == Mode::ResolvingStyle)
+ element->setStyleIsAffectedByPreviousSibling();
+
+ int count = 1 + countElementsBefore(element, context.resolvingMode == Mode::ResolvingStyle);
</ins><span class="cx"> if (context.resolvingMode == Mode::ResolvingStyle) {
</span><span class="cx"> RenderStyle* childStyle = context.elementStyle ? context.elementStyle : element->renderStyle();
</span><span class="cx"> element->setChildIndex(count);
</span><span class="cx"> if (childStyle)
</span><span class="cx"> childStyle->setUnique();
</span><del>- parentElement->setChildrenAffectedByForwardPositionalRules();
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (selector->matchNth(count))
</span><span class="lines">@@ -642,11 +655,12 @@
</span><span class="cx"> case CSSSelector::PseudoClassNthOfType:
</span><span class="cx"> if (!selector->parseNth())
</span><span class="cx"> break;
</span><del>- if (Element* parentElement = element->parentElement()) {
- int count = 1 + countElementsOfTypeBefore(element, element->tagQName());
</del><ins>+
+ if (element->parentElement()) {
</ins><span class="cx"> if (context.resolvingMode == Mode::ResolvingStyle)
</span><del>- parentElement->setChildrenAffectedByForwardPositionalRules();
</del><ins>+ element->setStyleIsAffectedByPreviousSibling();
</ins><span class="cx">
</span><ins>+ int count = 1 + countElementsOfTypeBefore(element, element->tagQName(), context.resolvingMode == Mode::ResolvingStyle);
</ins><span class="cx"> if (selector->matchNth(count))
</span><span class="cx"> return true;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCorecssStyleResolvercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleResolver.cpp (173228 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleResolver.cpp 2014-09-03 21:29:52 UTC (rev 173228)
+++ trunk/Source/WebCore/css/StyleResolver.cpp 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -624,6 +624,8 @@
</span><span class="cx"> return false;
</span><span class="cx"> if (element->additionalPresentationAttributeStyle() != state.styledElement()->additionalPresentationAttributeStyle())
</span><span class="cx"> return false;
</span><ins>+ if (element->affectsNextSiblingElementStyle() || element->styleIsAffectedByPreviousSibling())
+ return false;
</ins><span class="cx">
</span><span class="cx"> if (element->hasID() && m_ruleSets.features().idsInRules.contains(element->idForStyleResolution().impl()))
</span><span class="cx"> return false;
</span></span></pre></div>
<a id="trunkSourceWebCorecssjitSelectorCompilercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/cssjit/SelectorCompiler.cpp (173228 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/cssjit/SelectorCompiler.cpp 2014-09-03 21:29:52 UTC (rev 173228)
+++ trunk/Source/WebCore/cssjit/SelectorCompiler.cpp 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -224,8 +224,6 @@
</span><span class="cx"> void generateWalkToPreviousAdjacent(Assembler::JumpList& failureCases, const SelectorFragment&);
</span><span class="cx"> void generateDirectAdjacentTreeWalker(Assembler::JumpList& failureCases, const SelectorFragment&);
</span><span class="cx"> void generateIndirectAdjacentTreeWalker(Assembler::JumpList& failureCases, const SelectorFragment&);
</span><del>- void markParentElementIfResolvingStyle(int32_t);
- void markParentElementIfResolvingStyle(JSC::FunctionPtr);
</del><span class="cx">
</span><span class="cx"> void linkFailures(Assembler::JumpList& globalFailureCases, BacktrackingAction, Assembler::JumpList& localFailureCases);
</span><span class="cx"> void generateAdjacentBacktrackingTail();
</span><span class="lines">@@ -273,6 +271,7 @@
</span><span class="cx"> void generateMarkPseudoStyleForPseudoElement(Assembler::JumpList& failureCases, const SelectorFragment&);
</span><span class="cx"> void generateRequestedPseudoElementEqualsToSelectorPseudoElement(Assembler::JumpList& failureCases, const SelectorFragment&, Assembler::RegisterID checkingContext);
</span><span class="cx"> void generateSpecialFailureInQuirksModeForActiveAndHoverIfNeeded(Assembler::JumpList& failureCases, const SelectorFragment&);
</span><ins>+ void markElementIfResolvingStyle(Assembler::RegisterID, int32_t);
</ins><span class="cx"> Assembler::JumpList jumpIfNoPreviousAdjacentElement();
</span><span class="cx"> Assembler::JumpList jumpIfNoNextAdjacentElement();
</span><span class="cx"> Assembler::Jump jumpIfNotResolvingStyle(Assembler::RegisterID checkingContextRegister);
</span><span class="lines">@@ -1339,6 +1338,16 @@
</span><span class="cx"> #endif
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+static bool isAdjacentRelation(FragmentRelation relation)
+{
+ return relation == FragmentRelation::DirectAdjacent || relation == FragmentRelation::IndirectAdjacent;
+}
+
+static bool shouldMarkStyleIsAffectedByPreviousSibling(const SelectorFragment& fragment)
+{
+ return isAdjacentRelation(fragment.relationToLeftFragment) && !isAdjacentRelation(fragment.relationToRightFragment);
+}
+
</ins><span class="cx"> void SelectorCodeGenerator::generateSelectorChecker()
</span><span class="cx"> {
</span><span class="cx"> StackAllocator::StackReferenceVector calleeSavedRegisterStackReferences;
</span><span class="lines">@@ -1401,6 +1410,8 @@
</span><span class="cx"> generateIndirectAdjacentTreeWalker(failureCases, fragment);
</span><span class="cx"> break;
</span><span class="cx"> }
</span><ins>+ if (shouldMarkStyleIsAffectedByPreviousSibling(fragment))
+ markElementIfResolvingStyle(elementAddressRegister, Node::flagStyleIsAffectedByPreviousSibling());
</ins><span class="cx"> generateBacktrackingTailsIfNeeded(failureCases, fragment);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1560,9 +1571,8 @@
</span><span class="cx">
</span><span class="cx"> void SelectorCodeGenerator::generateDirectAdjacentTreeWalker(Assembler::JumpList& failureCases, const SelectorFragment& fragment)
</span><span class="cx"> {
</span><del>- markParentElementIfResolvingStyle(Node::flagChildrenAffectedByDirectAdjacentRulesFlag());
-
</del><span class="cx"> generateWalkToPreviousAdjacent(failureCases, fragment);
</span><ins>+ markElementIfResolvingStyle(elementAddressRegister, Node::flagAffectsNextSiblingElementStyle());
</ins><span class="cx">
</span><span class="cx"> Assembler::JumpList matchingTagNameFailureCases;
</span><span class="cx"> Assembler::JumpList matchingPostTagNameFailureCases;
</span><span class="lines">@@ -1578,14 +1588,13 @@
</span><span class="cx">
</span><span class="cx"> void SelectorCodeGenerator::generateIndirectAdjacentTreeWalker(Assembler::JumpList& failureCases, const SelectorFragment& fragment)
</span><span class="cx"> {
</span><del>- markParentElementIfResolvingStyle(Element::setChildrenAffectedByForwardPositionalRules);
-
</del><span class="cx"> Assembler::Label loopStart(m_assembler.label());
</span><span class="cx">
</span><span class="cx"> if (fragment.backtrackingFlags & BacktrackingFlag::IndirectAdjacentEntryPoint)
</span><span class="cx"> m_indirectAdjacentTreeWalkerBacktrackingPoint = m_assembler.label();
</span><span class="cx">
</span><span class="cx"> generateWalkToPreviousAdjacent(failureCases, fragment);
</span><ins>+ markElementIfResolvingStyle(elementAddressRegister, Node::flagAffectsNextSiblingElementStyle());
</ins><span class="cx">
</span><span class="cx"> if (fragment.backtrackingFlags & BacktrackingFlag::IndirectAdjacentEntryPoint)
</span><span class="cx"> m_indirectAdjacentEntryPoint = m_assembler.label();
</span><span class="lines">@@ -1827,7 +1836,7 @@
</span><span class="cx"> assembler.or32(Assembler::TrustedImm32(flag), Assembler::Address(elementAddress, Node::nodeFlagsMemoryOffset()));
</span><span class="cx"> }
</span><span class="cx">
</span><del>-void SelectorCodeGenerator::markParentElementIfResolvingStyle(int32_t nodeFlag)
</del><ins>+void SelectorCodeGenerator::markElementIfResolvingStyle(Assembler::RegisterID element, int32_t nodeFlag)
</ins><span class="cx"> {
</span><span class="cx"> if (m_selectorContext == SelectorContext::QuerySelector)
</span><span class="cx"> return;
</span><span class="lines">@@ -1838,48 +1847,11 @@
</span><span class="cx"> skipMarking.append(jumpIfNotResolvingStyle(checkingContext));
</span><span class="cx"> }
</span><span class="cx">
</span><del>- LocalRegister parentElement(m_registerAllocator);
- generateWalkToParentElement(skipMarking, parentElement);
</del><ins>+ setNodeFlag(m_assembler, element, nodeFlag);
</ins><span class="cx">
</span><del>- setNodeFlag(m_assembler, parentElement, nodeFlag);
-
</del><span class="cx"> skipMarking.link(&m_assembler);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-void SelectorCodeGenerator::markParentElementIfResolvingStyle(JSC::FunctionPtr markingFunction)
-{
- if (m_selectorContext == SelectorContext::QuerySelector)
- return;
-
- // if (checkingContext.resolvingMode == ResolvingStyle) {
- // Element* parent = element->parentNode();
- // markingFunction(parent);
- // }
-
- Assembler::JumpList skipMarking;
- {
- LocalRegister checkingContext(m_registerAllocator);
- skipMarking.append(jumpIfNotResolvingStyle(checkingContext));
- }
-
- // Get the parent element in a temporary register.
- Assembler::RegisterID parentElement = m_registerAllocator.allocateRegister();
- generateWalkToParentElement(skipMarking, parentElement);
-
- // Return the register parentElement just before the function call since we don't need it to be preserved
- // on the stack.
- m_registerAllocator.deallocateRegister(parentElement);
-
- // Invoke the marking function on the parent element.
- FunctionCall functionCall(m_assembler, m_registerAllocator, m_stackAllocator, m_functionCalls);
- functionCall.setFunctionAddress(markingFunction);
- functionCall.setOneArgument(parentElement);
- functionCall.call();
-
- skipMarking.link(&m_assembler);
-}
-
-
</del><span class="cx"> void SelectorCodeGenerator::linkFailures(Assembler::JumpList& globalFailureCases, BacktrackingAction backtrackingAction, Assembler::JumpList& localFailureCases)
</span><span class="cx"> {
</span><span class="cx"> switch (backtrackingAction) {
</span><span class="lines">@@ -2943,8 +2915,10 @@
</span><span class="cx">
</span><span class="cx"> void SelectorCodeGenerator::generateElementIsNthChild(Assembler::JumpList& failureCases, const SelectorFragment& fragment)
</span><span class="cx"> {
</span><del>- Assembler::RegisterID parentElement = m_registerAllocator.allocateRegister();
- generateWalkToParentElement(failureCases, parentElement);
</del><ins>+ {
+ LocalRegister parentElement(m_registerAllocator);
+ generateWalkToParentElement(failureCases, parentElement);
+ }
</ins><span class="cx">
</span><span class="cx"> Vector<std::pair<int, int>, 32> validSubsetFilters;
</span><span class="cx"> validSubsetFilters.reserveInitialCapacity(fragment.nthChildFilters.size());
</span><span class="lines">@@ -2957,13 +2931,12 @@
</span><span class="cx"> continue;
</span><span class="cx"> validSubsetFilters.uncheckedAppend(slot);
</span><span class="cx"> }
</span><del>- if (validSubsetFilters.isEmpty()) {
- m_registerAllocator.deallocateRegister(parentElement);
</del><ins>+ if (validSubsetFilters.isEmpty())
</ins><span class="cx"> return;
</span><del>- }
- if (m_selectorContext == SelectorContext::QuerySelector)
- m_registerAllocator.deallocateRegister(parentElement);
</del><span class="cx">
</span><ins>+ if (!isAdjacentRelation(fragment.relationToRightFragment))
+ markElementIfResolvingStyle(elementAddressRegister, Node::flagStyleIsAffectedByPreviousSibling());
+
</ins><span class="cx"> // Setup the counter at 1.
</span><span class="cx"> LocalRegisterWithPreference elementCounter(m_registerAllocator, JSC::GPRInfo::argumentGPR1);
</span><span class="cx"> m_assembler.move(Assembler::TrustedImm32(1), elementCounter);
</span><span class="lines">@@ -2980,6 +2953,7 @@
</span><span class="cx">
</span><span class="cx"> Assembler::JumpList noCachedChildIndexCases;
</span><span class="cx"> generateWalkToPreviousAdjacentElement(noMoreSiblingsCases, previousSibling);
</span><ins>+ markElementIfResolvingStyle(previousSibling, Node::flagAffectsNextSiblingElementStyle());
</ins><span class="cx"> noCachedChildIndexCases.append(m_assembler.branchTest32(Assembler::Zero, Assembler::Address(previousSibling, Node::nodeFlagsMemoryOffset()), Assembler::TrustedImm32(Node::flagHasRareData())));
</span><span class="cx"> {
</span><span class="cx"> LocalRegister elementRareData(m_registerAllocator);
</span><span class="lines">@@ -2995,6 +2969,7 @@
</span><span class="cx">
</span><span class="cx"> Assembler::Label loopStart = m_assembler.label();
</span><span class="cx"> generateWalkToPreviousAdjacentElement(noMoreSiblingsCases, previousSibling);
</span><ins>+ markElementIfResolvingStyle(previousSibling, Node::flagAffectsNextSiblingElementStyle());
</ins><span class="cx"> m_assembler.add32(Assembler::TrustedImm32(1), elementCounter);
</span><span class="cx"> m_assembler.jump().linkTo(loopStart, &m_assembler);
</span><span class="cx"> noMoreSiblingsCases.link(&m_assembler);
</span><span class="lines">@@ -3005,12 +2980,6 @@
</span><span class="cx"> LocalRegister checkingContext(m_registerAllocator);
</span><span class="cx"> Assembler::Jump notResolvingStyle = jumpIfNotResolvingStyle(checkingContext);
</span><span class="cx">
</span><del>- m_registerAllocator.deallocateRegister(parentElement);
- FunctionCall functionCall(m_assembler, m_registerAllocator, m_stackAllocator, m_functionCalls);
- functionCall.setFunctionAddress(Element::setChildrenAffectedByForwardPositionalRules);
- functionCall.setOneArgument(parentElement);
- functionCall.call();
-
</del><span class="cx"> if (fragmentMatchesTheRightmostElement(m_selectorContext, fragment)) {
</span><span class="cx"> addFlagsToElementStyleFromContext(checkingContext, RenderStyle::NonInheritedFlags::flagIsUnique());
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoredomDocumentcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/dom/Document.cpp (173228 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/dom/Document.cpp 2014-09-03 21:29:52 UTC (rev 173228)
+++ trunk/Source/WebCore/dom/Document.cpp 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -6154,12 +6154,17 @@
</span><span class="cx"> if (node.needsStyleRecalc())
</span><span class="cx"> return true;
</span><span class="cx">
</span><del>- for (const Element* ancestor = node.parentOrShadowHostElement(); ancestor; ancestor = ancestor->parentOrShadowHostElement()) {
</del><ins>+ const Node* currentNode = &node;
+ const Element* ancestor = currentNode->parentOrShadowHostElement();
+ while (ancestor) {
</ins><span class="cx"> if (ancestor->needsStyleRecalc())
</span><span class="cx"> return true;
</span><span class="cx">
</span><del>- if (ancestor->directChildNeedsStyleRecalc() && (ancestor->childrenAffectedByDirectAdjacentRules() || ancestor->childrenAffectedByForwardPositionalRules()))
</del><ins>+ if (ancestor->directChildNeedsStyleRecalc() && currentNode->styleIsAffectedByPreviousSibling())
</ins><span class="cx"> return true;
</span><ins>+
+ currentNode = ancestor;
+ ancestor = currentNode->parentOrShadowHostElement();
</ins><span class="cx"> }
</span><span class="cx"> return false;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoredomElementcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/dom/Element.cpp (173228 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/dom/Element.cpp 2014-09-03 21:29:52 UTC (rev 173228)
+++ trunk/Source/WebCore/dom/Element.cpp 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -1540,8 +1540,8 @@
</span><span class="cx"> {
</span><span class="cx"> // :empty selector.
</span><span class="cx"> checkForEmptyStyleChange(*parent);
</span><del>-
- if (parent->needsStyleRecalc() && parent->childrenAffectedByPositionalRules())
</del><ins>+
+ if (parent->styleChangeType() >= FullStyleChange)
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> // :first-child. In the parser callback case, we don't have to check anything, since we were right the first time.
</span><span class="lines">@@ -1588,20 +1588,26 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // The + selector. We need to invalidate the first element following the insertion point. It is the only possible element
- // that could be affected by this DOM change.
- if (parent->childrenAffectedByDirectAdjacentRules() && elementAfterChange)
- elementAfterChange->setNeedsStyleRecalc();
</del><ins>+ if (elementAfterChange) {
+ if (elementAfterChange->styleIsAffectedByPreviousSibling())
+ elementAfterChange->setNeedsStyleRecalc();
+ else if (elementAfterChange->affectsNextSiblingElementStyle()) {
+ Element* elementToInvalidate = elementAfterChange;
+ do {
+ elementToInvalidate = elementToInvalidate->nextElementSibling();
+ } while (elementToInvalidate && !elementToInvalidate->styleIsAffectedByPreviousSibling());
</ins><span class="cx">
</span><del>- // Forward positional selectors include the ~ selector, nth-child, nth-of-type, first-of-type and only-of-type.
</del><ins>+ if (elementToInvalidate)
+ elementToInvalidate->setNeedsStyleRecalc();
+ }
+ }
+
</ins><span class="cx"> // Backward positional selectors include nth-last-child, nth-last-of-type, last-of-type and only-of-type.
</span><span class="cx"> // We have to invalidate everything following the insertion point in the forward case, and everything before the insertion point in the
</span><span class="cx"> // backward case.
</span><span class="cx"> // |afterChange| is 0 in the parser callback case, so we won't do any work for the forward case if we don't have to.
</span><span class="cx"> // For performance reasons we just mark the parent node as changed, since we don't want to make childrenChanged O(n^2) by crawling all our kids
</span><span class="cx"> // here. recalcStyle will then force a walk of the children when it sees that this has happened.
</span><del>- if (parent->childrenAffectedByForwardPositionalRules() && elementAfterChange)
- parent->setNeedsStyleRecalc();
</del><span class="cx"> if (parent->childrenAffectedByBackwardPositionalRules() && elementBeforeChange)
</span><span class="cx"> parent->setNeedsStyleRecalc();
</span><span class="cx"> }
</span><span class="lines">@@ -2108,11 +2114,6 @@
</span><span class="cx"> ensureElementRareData().setChildrenAffectedByDrag(true);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-void Element::setChildrenAffectedByForwardPositionalRules(Element* element)
-{
- element->ensureElementRareData().setChildrenAffectedByForwardPositionalRules(true);
-}
-
</del><span class="cx"> void Element::setChildrenAffectedByBackwardPositionalRules()
</span><span class="cx"> {
</span><span class="cx"> ensureElementRareData().setChildrenAffectedByBackwardPositionalRules(true);
</span><span class="lines">@@ -2128,14 +2129,13 @@
</span><span class="cx">
</span><span class="cx"> bool Element::hasFlagsSetDuringStylingOfChildren() const
</span><span class="cx"> {
</span><del>- if (childrenAffectedByHover() || childrenAffectedByFirstChildRules() || childrenAffectedByLastChildRules() || childrenAffectedByDirectAdjacentRules())
</del><ins>+ if (childrenAffectedByHover() || childrenAffectedByFirstChildRules() || childrenAffectedByLastChildRules())
</ins><span class="cx"> return true;
</span><span class="cx">
</span><span class="cx"> if (!hasRareData())
</span><span class="cx"> return false;
</span><span class="cx"> return rareDataChildrenAffectedByActive()
</span><span class="cx"> || rareDataChildrenAffectedByDrag()
</span><del>- || rareDataChildrenAffectedByForwardPositionalRules()
</del><span class="cx"> || rareDataChildrenAffectedByBackwardPositionalRules();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -2157,12 +2157,6 @@
</span><span class="cx"> return elementRareData()->childrenAffectedByDrag();
</span><span class="cx"> }
</span><span class="cx">
</span><del>-bool Element::rareDataChildrenAffectedByForwardPositionalRules() const
-{
- ASSERT(hasRareData());
- return elementRareData()->childrenAffectedByForwardPositionalRules();
-}
-
</del><span class="cx"> bool Element::rareDataChildrenAffectedByBackwardPositionalRules() const
</span><span class="cx"> {
</span><span class="cx"> ASSERT(hasRareData());
</span></span></pre></div>
<a id="trunkSourceWebCoredomElementh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/dom/Element.h (173228 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/dom/Element.h 2014-09-03 21:29:52 UTC (rev 173228)
+++ trunk/Source/WebCore/dom/Element.h 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -360,12 +360,10 @@
</span><span class="cx"> bool childrenAffectedByHover() const { return getFlag(ChildrenAffectedByHoverRulesFlag); }
</span><span class="cx"> bool childrenAffectedByActive() const { return hasRareData() && rareDataChildrenAffectedByActive(); }
</span><span class="cx"> bool childrenAffectedByDrag() const { return hasRareData() && rareDataChildrenAffectedByDrag(); }
</span><del>- bool childrenAffectedByPositionalRules() const { return hasRareData() && (rareDataChildrenAffectedByForwardPositionalRules() || rareDataChildrenAffectedByBackwardPositionalRules()); }
</del><span class="cx"> bool childrenAffectedByFirstChildRules() const { return getFlag(ChildrenAffectedByFirstChildRulesFlag); }
</span><span class="cx"> bool childrenAffectedByLastChildRules() const { return getFlag(ChildrenAffectedByLastChildRulesFlag); }
</span><del>- bool childrenAffectedByDirectAdjacentRules() const { return getFlag(ChildrenAffectedByDirectAdjacentRulesFlag); }
- bool childrenAffectedByForwardPositionalRules() const { return hasRareData() && rareDataChildrenAffectedByForwardPositionalRules(); }
</del><span class="cx"> bool childrenAffectedByBackwardPositionalRules() const { return hasRareData() && rareDataChildrenAffectedByBackwardPositionalRules(); }
</span><ins>+ bool affectsNextSiblingElementStyle() const { return getFlag(AffectsNextSiblingElementStyle); }
</ins><span class="cx"> unsigned childIndex() const { return hasRareData() ? rareDataChildIndex() : 0; }
</span><span class="cx">
</span><span class="cx"> bool hasFlagsSetDuringStylingOfChildren() const;
</span><span class="lines">@@ -376,10 +374,9 @@
</span><span class="cx"> void setChildrenAffectedByDrag();
</span><span class="cx"> void setChildrenAffectedByFirstChildRules() { setFlag(ChildrenAffectedByFirstChildRulesFlag); }
</span><span class="cx"> void setChildrenAffectedByLastChildRules() { setFlag(ChildrenAffectedByLastChildRulesFlag); }
</span><del>- void setChildrenAffectedByDirectAdjacentRules() { setFlag(ChildrenAffectedByDirectAdjacentRulesFlag); }
- static void setChildrenAffectedByForwardPositionalRules(Element*);
- void setChildrenAffectedByForwardPositionalRules() { setChildrenAffectedByForwardPositionalRules(this); }
</del><span class="cx"> void setChildrenAffectedByBackwardPositionalRules();
</span><ins>+ void setAffectsNextSiblingElementStyle() { setFlag(AffectsNextSiblingElementStyle); }
+ void setStyleIsAffectedByPreviousSibling() { setFlag(StyleIsAffectedByPreviousSibling); }
</ins><span class="cx"> void setChildIndex(unsigned);
</span><span class="cx">
</span><span class="cx"> void setRegionOversetState(RegionOversetState);
</span><span class="lines">@@ -650,7 +647,6 @@
</span><span class="cx"> bool rareDataChildrenAffectedByActive() const;
</span><span class="cx"> bool rareDataChildrenAffectedByDrag() const;
</span><span class="cx"> bool rareDataChildrenAffectedByLastChildRules() const;
</span><del>- bool rareDataChildrenAffectedByForwardPositionalRules() const;
</del><span class="cx"> bool rareDataChildrenAffectedByBackwardPositionalRules() const;
</span><span class="cx"> unsigned rareDataChildIndex() const;
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoredomElementRareDatah"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/dom/ElementRareData.h (173228 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/dom/ElementRareData.h 2014-09-03 21:29:52 UTC (rev 173228)
+++ trunk/Source/WebCore/dom/ElementRareData.h 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -75,8 +75,6 @@
</span><span class="cx">
</span><span class="cx"> bool childrenAffectedByLastChildRules() const { return m_childrenAffectedByLastChildRules; }
</span><span class="cx"> void setChildrenAffectedByLastChildRules(bool value) { m_childrenAffectedByLastChildRules = value; }
</span><del>- bool childrenAffectedByForwardPositionalRules() const { return m_childrenAffectedByForwardPositionalRules; }
- void setChildrenAffectedByForwardPositionalRules(bool value) { m_childrenAffectedByForwardPositionalRules = value; }
</del><span class="cx"> bool childrenAffectedByBackwardPositionalRules() const { return m_childrenAffectedByBackwardPositionalRules; }
</span><span class="cx"> void setChildrenAffectedByBackwardPositionalRules(bool value) { m_childrenAffectedByBackwardPositionalRules = value; }
</span><span class="cx">
</span><span class="lines">@@ -132,7 +130,6 @@
</span><span class="cx"> // We optimize for :first-child and :last-child. The other positional child selectors like nth-child or
</span><span class="cx"> // *-child-of-type, we will just give up and re-evaluate whenever children change at all.
</span><span class="cx"> unsigned m_childrenAffectedByLastChildRules : 1;
</span><del>- unsigned m_childrenAffectedByForwardPositionalRules : 1;
</del><span class="cx"> unsigned m_childrenAffectedByBackwardPositionalRules : 1;
</span><span class="cx">
</span><span class="cx"> RegionOversetState m_regionOversetState;
</span><span class="lines">@@ -173,7 +170,6 @@
</span><span class="cx"> , m_childrenAffectedByActive(false)
</span><span class="cx"> , m_childrenAffectedByDrag(false)
</span><span class="cx"> , m_childrenAffectedByLastChildRules(false)
</span><del>- , m_childrenAffectedByForwardPositionalRules(false)
</del><span class="cx"> , m_childrenAffectedByBackwardPositionalRules(false)
</span><span class="cx"> , m_regionOversetState(RegionUndefined)
</span><span class="cx"> , m_minimumSizeForResizing(defaultMinimumSizeForResizing())
</span><span class="lines">@@ -211,7 +207,6 @@
</span><span class="cx"> setChildrenAffectedByActive(false);
</span><span class="cx"> setChildrenAffectedByDrag(false);
</span><span class="cx"> setChildrenAffectedByLastChildRules(false);
</span><del>- setChildrenAffectedByForwardPositionalRules(false);
</del><span class="cx"> setChildrenAffectedByBackwardPositionalRules(false);
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoredomNodeh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/dom/Node.h (173228 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/dom/Node.h 2014-09-03 21:29:52 UTC (rev 173228)
+++ trunk/Source/WebCore/dom/Node.h 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -325,6 +325,7 @@
</span><span class="cx"> bool needsStyleRecalc() const { return styleChangeType() != NoStyleChange; }
</span><span class="cx"> StyleChangeType styleChangeType() const { return static_cast<StyleChangeType>(m_nodeFlags & StyleChangeMask); }
</span><span class="cx"> bool childNeedsStyleRecalc() const { return getFlag(ChildNeedsStyleRecalcFlag); }
</span><ins>+ bool styleIsAffectedByPreviousSibling() const { return getFlag(StyleIsAffectedByPreviousSibling); }
</ins><span class="cx"> bool isLink() const { return getFlag(IsLinkFlag); }
</span><span class="cx"> bool isEditingText() const { return getFlag(IsEditingTextFlag); }
</span><span class="cx">
</span><span class="lines">@@ -578,7 +579,9 @@
</span><span class="cx"> static int32_t flagIsParsingChildrenFinished() { return IsParsingChildrenFinishedFlag; }
</span><span class="cx"> static int32_t flagChildrenAffectedByFirstChildRulesFlag() { return ChildrenAffectedByFirstChildRulesFlag; }
</span><span class="cx"> static int32_t flagChildrenAffectedByLastChildRulesFlag() { return ChildrenAffectedByLastChildRulesFlag; }
</span><del>- static int32_t flagChildrenAffectedByDirectAdjacentRulesFlag() { return ChildrenAffectedByDirectAdjacentRulesFlag; }
</del><ins>+
+ static int32_t flagAffectsNextSiblingElementStyle() { return AffectsNextSiblingElementStyle; }
+ static int32_t flagStyleIsAffectedByPreviousSibling() { return StyleIsAffectedByPreviousSibling; }
</ins><span class="cx"> #endif // ENABLE(CSS_SELECTOR_JIT)
</span><span class="cx">
</span><span class="cx"> protected:
</span><span class="lines">@@ -612,13 +615,13 @@
</span><span class="cx">
</span><span class="cx"> ChildrenAffectedByFirstChildRulesFlag = 1 << 25,
</span><span class="cx"> ChildrenAffectedByLastChildRulesFlag = 1 << 26,
</span><del>- ChildrenAffectedByDirectAdjacentRulesFlag = 1 << 27,
- ChildrenAffectedByHoverRulesFlag = 1 << 28,
- DirectChildNeedsStyleRecalcFlag = 1 << 29,
</del><ins>+ ChildrenAffectedByHoverRulesFlag = 1 << 27,
</ins><span class="cx">
</span><del>- SelfOrAncestorHasDirAutoFlag = 1 << 30,
</del><ins>+ DirectChildNeedsStyleRecalcFlag = 1 << 28,
+ AffectsNextSiblingElementStyle = 1 << 29,
+ StyleIsAffectedByPreviousSibling = 1 << 30,
</ins><span class="cx">
</span><del>- IsHTMLUnknownElementFlag = 1 << 31,
</del><ins>+ SelfOrAncestorHasDirAutoFlag = 1 << 31,
</ins><span class="cx">
</span><span class="cx"> DefaultNodeFlags = IsParsingChildrenFinishedFlag
</span><span class="cx"> };
</span><span class="lines">@@ -642,8 +645,7 @@
</span><span class="cx"> CreateDocument = CreateContainer | InDocumentFlag,
</span><span class="cx"> CreateInsertionPoint = CreateHTMLElement | NeedsNodeRenderingTraversalSlowPathFlag,
</span><span class="cx"> CreateEditingText = CreateText | IsEditingTextFlag,
</span><del>- CreateMathMLElement = CreateStyledElement | IsMathMLFlag,
- CreateHTMLUnknownElement = CreateHTMLElement | IsHTMLUnknownElementFlag,
</del><ins>+ CreateMathMLElement = CreateStyledElement | IsMathMLFlag
</ins><span class="cx"> };
</span><span class="cx"> Node(Document&, ConstructionType);
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlHTMLElementh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/HTMLElement.h (173228 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/html/HTMLElement.h 2014-09-03 21:29:52 UTC (rev 173228)
+++ trunk/Source/WebCore/html/HTMLElement.h 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -88,7 +88,7 @@
</span><span class="cx"> bool hasDirectionAuto() const;
</span><span class="cx"> TextDirection directionalityIfhasDirAutoAttribute(bool& isAuto) const;
</span><span class="cx">
</span><del>- bool isHTMLUnknownElement() const { return getFlag(IsHTMLUnknownElementFlag); }
</del><ins>+ virtual bool isHTMLUnknownElement() const { return false; }
</ins><span class="cx"> virtual bool isTextControlInnerTextElement() const { return false; }
</span><span class="cx">
</span><span class="cx"> virtual bool willRespondToMouseMoveEvents() override;
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlHTMLUnknownElementh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/HTMLUnknownElement.h (173228 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/html/HTMLUnknownElement.h 2014-09-03 21:29:52 UTC (rev 173228)
+++ trunk/Source/WebCore/html/HTMLUnknownElement.h 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -41,9 +41,11 @@
</span><span class="cx"> return adoptRef(new HTMLUnknownElement(tagName, document));
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ virtual bool isHTMLUnknownElement() const override { return true; }
+
</ins><span class="cx"> private:
</span><span class="cx"> HTMLUnknownElement(const QualifiedName& tagName, Document& document)
</span><del>- : HTMLElement(tagName, document, CreateHTMLUnknownElement)
</del><ins>+ : HTMLElement(tagName, document, CreateHTMLElement)
</ins><span class="cx"> {
</span><span class="cx"> }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebCorestyleStyleResolveTreecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/style/StyleResolveTree.cpp (173228 => 173229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/style/StyleResolveTree.cpp 2014-09-03 21:29:52 UTC (rev 173228)
+++ trunk/Source/WebCore/style/StyleResolveTree.cpp 2014-09-03 21:30:31 UTC (rev 173229)
</span><span class="lines">@@ -552,13 +552,21 @@
</span><span class="cx"> static void resetStyleForNonRenderedDescendants(Element& current)
</span><span class="cx"> {
</span><span class="cx"> ASSERT(!current.renderer());
</span><del>- bool shouldInvalidateDirectChildren = current.directChildNeedsStyleRecalc() && (current.childrenAffectedByDirectAdjacentRules() || current.childrenAffectedByForwardPositionalRules());
</del><ins>+ bool elementNeedingStyleRecalcAffectsNextSiblingElementStyle = false;
</ins><span class="cx"> for (auto& child : childrenOfType<Element>(current)) {
</span><span class="cx"> ASSERT(!child.renderer());
</span><del>- if (shouldInvalidateDirectChildren || child.needsStyleRecalc()) {
</del><ins>+ if (elementNeedingStyleRecalcAffectsNextSiblingElementStyle) {
+ if (child.styleIsAffectedByPreviousSibling())
+ child.setNeedsStyleRecalc();
+ elementNeedingStyleRecalcAffectsNextSiblingElementStyle = child.affectsNextSiblingElementStyle();
+ }
+
+ if (child.needsStyleRecalc()) {
</ins><span class="cx"> child.resetComputedStyle();
</span><span class="cx"> child.clearNeedsStyleRecalc();
</span><ins>+ elementNeedingStyleRecalcAffectsNextSiblingElementStyle = child.affectsNextSiblingElementStyle();
</ins><span class="cx"> }
</span><ins>+
</ins><span class="cx"> if (child.childNeedsStyleRecalc()) {
</span><span class="cx"> resetStyleForNonRenderedDescendants(child);
</span><span class="cx"> child.clearChildNeedsStyleRecalc();
</span><span class="lines">@@ -897,9 +905,6 @@
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- bool hasDirectAdjacentRules = current.childrenAffectedByDirectAdjacentRules();
- bool hasIndirectAdjacentRules = current.childrenAffectedByForwardPositionalRules();
-
</del><span class="cx"> #if PLATFORM(IOS)
</span><span class="cx"> CheckForVisibilityChangeOnRecalcStyle checkForVisibilityChange(&current, current.renderStyle());
</span><span class="cx"> #endif
</span><span class="lines">@@ -925,11 +930,7 @@
</span><span class="cx"> RenderTreePosition childRenderTreePosition(*renderer);
</span><span class="cx"> updateBeforeOrAfterPseudoElement(current, change, BEFORE, childRenderTreePosition);
</span><span class="cx">
</span><del>- // FIXME: This check is good enough for :hover + foo, but it is not good enough for :hover + foo + bar.
- // For now we will just worry about the common case, since it's a lot trickier to get the second case right
- // without doing way too much re-resolution.
- bool forceCheckOfNextElementSibling = false;
- bool forceCheckOfAnyElementSibling = false;
</del><ins>+ bool elementNeedingStyleRecalcAffectsNextSiblingElementStyle = false;
</ins><span class="cx"> for (Node* child = current.firstChild(); child; child = child->nextSibling()) {
</span><span class="cx"> if (RenderObject* childRenderer = child->renderer())
</span><span class="cx"> childRenderTreePosition.invalidateNextSibling(*childRenderer);
</span><span class="lines">@@ -939,16 +940,18 @@
</span><span class="cx"> }
</span><span class="cx"> if (!child->isElementNode())
</span><span class="cx"> continue;
</span><ins>+
</ins><span class="cx"> Element* childElement = toElement(child);
</span><del>- bool childRulesChanged = childElement->needsStyleRecalc() && childElement->styleChangeType() == FullStyleChange;
- if ((forceCheckOfNextElementSibling || forceCheckOfAnyElementSibling))
- childElement->setNeedsStyleRecalc();
</del><ins>+ if (elementNeedingStyleRecalcAffectsNextSiblingElementStyle) {
+ if (childElement->styleIsAffectedByPreviousSibling())
+ childElement->setNeedsStyleRecalc();
+ elementNeedingStyleRecalcAffectsNextSiblingElementStyle = childElement->affectsNextSiblingElementStyle();
+ } else if (childElement->styleChangeType() >= FullStyleChange)
+ elementNeedingStyleRecalcAffectsNextSiblingElementStyle = childElement->affectsNextSiblingElementStyle();
</ins><span class="cx"> if (change >= Inherit || childElement->childNeedsStyleRecalc() || childElement->needsStyleRecalc()) {
</span><span class="cx"> parentPusher.push();
</span><span class="cx"> resolveTree(*childElement, renderer->style(), childRenderTreePosition, change);
</span><span class="cx"> }
</span><del>- forceCheckOfNextElementSibling = childRulesChanged && hasDirectAdjacentRules;
- forceCheckOfAnyElementSibling = forceCheckOfAnyElementSibling || (childRulesChanged && hasIndirectAdjacentRules);
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> updateBeforeOrAfterPseudoElement(current, change, AFTER, childRenderTreePosition);
</span></span></pre>
</div>
</div>
</body>
</html>