<!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>[177664] 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/177664">177664</a></dd>
<dt>Author</dt> <dd>benjamin@webkit.org</dd>
<dt>Date</dt> <dd>2014-12-22 16:38:52 -0800 (Mon, 22 Dec 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Form elements should match :valid and :invalid based on their associated elements
https://bugs.webkit.org/show_bug.cgi?id=139850
Patch by Benjamin Poulain <bpoulain@apple.com> on 2014-12-22
Reviewed by Darin Adler.
Source/WebCore:
In the latest HTML spec, form elements can match :valid or :invalid based
on their associated element.
The tricky part is that object lifetime is a mess. When elements are associated
with forms by the parser, the form is set by the constructor of HTMLFormControlElement.
At that point, the real object has not been initialized yet which
makes it impossible to find its validity.
To work around the lifetime problem, the code of HTMLFormControlElement::didChangeForm()
uses m_willValidateInitialized and m_willValidate direclty instead
of invoking willValidate(). That way we don't try to validate an incomplete object.
When the object really validates, HTMLFormControlElement::setNeedsWillValidateCheck()
takes care of updating the form.
Tests: fast/css/pseudo-invalid-form-and-fieldset-basics.html
fast/css/pseudo-invalid-form-basics.html
fast/css/pseudo-invalid-form-dynamically-created-basics.html
fast/css/pseudo-invalid-form-invalidation-optimization.html
fast/css/pseudo-valid-form-and-fieldset-basics.html
fast/css/pseudo-valid-form-basics.html
fast/css/pseudo-valid-form-dynamically-created-basics.html
fast/css/pseudo-valid-form-invalidation-optimization.html
fast/selectors/invalid-form-style-update-1.html
fast/selectors/invalid-form-style-update-2.html
fast/selectors/invalid-form-style-update-3.html
fast/selectors/valid-form-style-update-1.html
fast/selectors/valid-form-style-update-2.html
fast/selectors/valid-form-style-update-3.html
* css/StyleResolver.cpp:
(WebCore::StyleResolver::canShareStyleWithControl):
(WebCore::StyleResolver::canShareStyleWithElement):
HTMLFormElement is not a FormControl, we have to generalize the test
for :valid/:invalid with style sharing.
* html/HTMLFormControlElement.cpp:
(WebCore::HTMLFormControlElement::~HTMLFormControlElement):
Since we now have willChangeForm(), didChangeForm(), we have to null
the form ourself, as documented by FormAssociatedElement.
(WebCore::HTMLFormControlElement::setNeedsWillValidateCheck):
(WebCore::HTMLFormControlElement::willChangeForm):
(WebCore::HTMLFormControlElement::didChangeForm):
(WebCore::HTMLFormControlElement::updateValidity):
Update the owner form when any of the associated form element changes
to invalid.
* html/HTMLFormControlElement.h:
* html/HTMLFormElement.cpp:
(WebCore::HTMLFormElement::registerInvalidAssociatedFormControl):
(WebCore::HTMLFormElement::removeInvalidAssociatedFormControlIfNeeded):
(WebCore::HTMLFormElement::matchesValidPseudoClass):
(WebCore::HTMLFormElement::matchesInvalidPseudoClass):
This is very similar to the code of fieldset, but we have much weaker
invariants due to the insane way FormAssociatedElement initializes.
* html/HTMLFormElement.h:
* html/HTMLInputElement.cpp:
(WebCore::HTMLInputElement::initializeInputType):
For completeness, we should always validate when changing the type.
The code was only doing that when the element was inserted into the tree,
that was too fragile.
LayoutTests:
The style update tests are largely based on the fieldset test suite.
The other tests are for various aspects of the patch.
* fast/css/pseudo-invalid-form-and-fieldset-basics-expected.html: Added.
* fast/css/pseudo-invalid-form-and-fieldset-basics.html: Added.
* fast/css/pseudo-invalid-form-basics-expected.html: Added.
* fast/css/pseudo-invalid-form-basics.html: Added.
* fast/css/pseudo-invalid-form-dynamically-created-basics-expected.html: Added.
* fast/css/pseudo-invalid-form-dynamically-created-basics.html: Added.
* fast/css/pseudo-invalid-form-invalidation-optimization-expected.txt: Added.
* fast/css/pseudo-invalid-form-invalidation-optimization.html: Added.
* fast/css/pseudo-valid-form-and-fieldset-basics-expected.html: Added.
* fast/css/pseudo-valid-form-and-fieldset-basics.html: Added.
* fast/css/pseudo-valid-form-basics-expected.html: Added.
* fast/css/pseudo-valid-form-basics.html: Added.
* fast/css/pseudo-valid-form-dynamically-created-basics-expected.html: Added.
* fast/css/pseudo-valid-form-dynamically-created-basics.html: Added.
* fast/css/pseudo-valid-form-invalidation-optimization-expected.txt: Added.
* fast/css/pseudo-valid-form-invalidation-optimization.html: Added.
* fast/selectors/invalid-form-style-update-1-expected.txt: Added.
* fast/selectors/invalid-form-style-update-1.html: Added.
* fast/selectors/invalid-form-style-update-2-expected.txt: Added.
* fast/selectors/invalid-form-style-update-2.html: Added.
* fast/selectors/invalid-form-style-update-3-expected.txt: Added.
* fast/selectors/invalid-form-style-update-3.html: Added.
* fast/selectors/valid-form-style-update-1-expected.txt: Added.
* fast/selectors/valid-form-style-update-1.html: Added.
* fast/selectors/valid-form-style-update-2-expected.txt: Added.
* fast/selectors/valid-form-style-update-2.html: Added.
* fast/selectors/valid-form-style-update-3-expected.txt: Added.
* fast/selectors/valid-form-style-update-3.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssStyleResolvercpp">trunk/Source/WebCore/css/StyleResolver.cpp</a></li>
<li><a href="#trunkSourceWebCorehtmlHTMLFormControlElementcpp">trunk/Source/WebCore/html/HTMLFormControlElement.cpp</a></li>
<li><a href="#trunkSourceWebCorehtmlHTMLFormControlElementh">trunk/Source/WebCore/html/HTMLFormControlElement.h</a></li>
<li><a href="#trunkSourceWebCorehtmlHTMLFormElementcpp">trunk/Source/WebCore/html/HTMLFormElement.cpp</a></li>
<li><a href="#trunkSourceWebCorehtmlHTMLFormElementh">trunk/Source/WebCore/html/HTMLFormElement.h</a></li>
<li><a href="#trunkSourceWebCorehtmlHTMLInputElementcpp">trunk/Source/WebCore/html/HTMLInputElement.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcsspseudoinvalidformandfieldsetbasicsexpectedhtml">trunk/LayoutTests/fast/css/pseudo-invalid-form-and-fieldset-basics-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoinvalidformandfieldsetbasicshtml">trunk/LayoutTests/fast/css/pseudo-invalid-form-and-fieldset-basics.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoinvalidformbasicsexpectedhtml">trunk/LayoutTests/fast/css/pseudo-invalid-form-basics-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoinvalidformbasicshtml">trunk/LayoutTests/fast/css/pseudo-invalid-form-basics.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoinvalidformdynamicallycreatedbasicsexpectedhtml">trunk/LayoutTests/fast/css/pseudo-invalid-form-dynamically-created-basics-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoinvalidformdynamicallycreatedbasicshtml">trunk/LayoutTests/fast/css/pseudo-invalid-form-dynamically-created-basics.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoinvalidforminvalidationoptimizationexpectedtxt">trunk/LayoutTests/fast/css/pseudo-invalid-form-invalidation-optimization-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudoinvalidforminvalidationoptimizationhtml">trunk/LayoutTests/fast/css/pseudo-invalid-form-invalidation-optimization.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudovalidformandfieldsetbasicsexpectedhtml">trunk/LayoutTests/fast/css/pseudo-valid-form-and-fieldset-basics-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudovalidformandfieldsetbasicshtml">trunk/LayoutTests/fast/css/pseudo-valid-form-and-fieldset-basics.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudovalidformbasicsexpectedhtml">trunk/LayoutTests/fast/css/pseudo-valid-form-basics-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudovalidformbasicshtml">trunk/LayoutTests/fast/css/pseudo-valid-form-basics.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudovalidformdynamicallycreatedbasicsexpectedhtml">trunk/LayoutTests/fast/css/pseudo-valid-form-dynamically-created-basics-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudovalidformdynamicallycreatedbasicshtml">trunk/LayoutTests/fast/css/pseudo-valid-form-dynamically-created-basics.html</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudovalidforminvalidationoptimizationexpectedtxt">trunk/LayoutTests/fast/css/pseudo-valid-form-invalidation-optimization-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcsspseudovalidforminvalidationoptimizationhtml">trunk/LayoutTests/fast/css/pseudo-valid-form-invalidation-optimization.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsinvalidformstyleupdate1expectedtxt">trunk/LayoutTests/fast/selectors/invalid-form-style-update-1-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsinvalidformstyleupdate1html">trunk/LayoutTests/fast/selectors/invalid-form-style-update-1.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsinvalidformstyleupdate2expectedtxt">trunk/LayoutTests/fast/selectors/invalid-form-style-update-2-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsinvalidformstyleupdate2html">trunk/LayoutTests/fast/selectors/invalid-form-style-update-2.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsinvalidformstyleupdate3expectedtxt">trunk/LayoutTests/fast/selectors/invalid-form-style-update-3-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsinvalidformstyleupdate3html">trunk/LayoutTests/fast/selectors/invalid-form-style-update-3.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsvalidformstyleupdate1expectedtxt">trunk/LayoutTests/fast/selectors/valid-form-style-update-1-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsvalidformstyleupdate1html">trunk/LayoutTests/fast/selectors/valid-form-style-update-1.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsvalidformstyleupdate2expectedtxt">trunk/LayoutTests/fast/selectors/valid-form-style-update-2-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsvalidformstyleupdate2html">trunk/LayoutTests/fast/selectors/valid-form-style-update-2.html</a></li>
<li><a href="#trunkLayoutTestsfastselectorsvalidformstyleupdate3expectedtxt">trunk/LayoutTests/fast/selectors/valid-form-style-update-3-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastselectorsvalidformstyleupdate3html">trunk/LayoutTests/fast/selectors/valid-form-style-update-3.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (177663 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-12-23 00:02:45 UTC (rev 177663)
+++ trunk/LayoutTests/ChangeLog 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -1,3 +1,42 @@
</span><ins>+2014-12-22 Benjamin Poulain <bpoulain@apple.com>
+
+ Form elements should match :valid and :invalid based on their associated elements
+ https://bugs.webkit.org/show_bug.cgi?id=139850
+
+ Reviewed by Darin Adler.
+
+ The style update tests are largely based on the fieldset test suite.
+ The other tests are for various aspects of the patch.
+
+ * fast/css/pseudo-invalid-form-and-fieldset-basics-expected.html: Added.
+ * fast/css/pseudo-invalid-form-and-fieldset-basics.html: Added.
+ * fast/css/pseudo-invalid-form-basics-expected.html: Added.
+ * fast/css/pseudo-invalid-form-basics.html: Added.
+ * fast/css/pseudo-invalid-form-dynamically-created-basics-expected.html: Added.
+ * fast/css/pseudo-invalid-form-dynamically-created-basics.html: Added.
+ * fast/css/pseudo-invalid-form-invalidation-optimization-expected.txt: Added.
+ * fast/css/pseudo-invalid-form-invalidation-optimization.html: Added.
+ * fast/css/pseudo-valid-form-and-fieldset-basics-expected.html: Added.
+ * fast/css/pseudo-valid-form-and-fieldset-basics.html: Added.
+ * fast/css/pseudo-valid-form-basics-expected.html: Added.
+ * fast/css/pseudo-valid-form-basics.html: Added.
+ * fast/css/pseudo-valid-form-dynamically-created-basics-expected.html: Added.
+ * fast/css/pseudo-valid-form-dynamically-created-basics.html: Added.
+ * fast/css/pseudo-valid-form-invalidation-optimization-expected.txt: Added.
+ * fast/css/pseudo-valid-form-invalidation-optimization.html: Added.
+ * fast/selectors/invalid-form-style-update-1-expected.txt: Added.
+ * fast/selectors/invalid-form-style-update-1.html: Added.
+ * fast/selectors/invalid-form-style-update-2-expected.txt: Added.
+ * fast/selectors/invalid-form-style-update-2.html: Added.
+ * fast/selectors/invalid-form-style-update-3-expected.txt: Added.
+ * fast/selectors/invalid-form-style-update-3.html: Added.
+ * fast/selectors/valid-form-style-update-1-expected.txt: Added.
+ * fast/selectors/valid-form-style-update-1.html: Added.
+ * fast/selectors/valid-form-style-update-2-expected.txt: Added.
+ * fast/selectors/valid-form-style-update-2.html: Added.
+ * fast/selectors/valid-form-style-update-3-expected.txt: Added.
+ * fast/selectors/valid-form-style-update-3.html: Added.
+
</ins><span class="cx"> 2014-12-22 Alexey Proskuryakov <ap@apple.com>
</span><span class="cx">
</span><span class="cx"> compositing/rtl/rtl-fixed-overflow-scrolled.html had a 1600x1200 expected PNG
</span></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoinvalidformandfieldsetbasicsexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-invalid-form-and-fieldset-basics-expected.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-invalid-form-and-fieldset-basics-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-invalid-form-and-fieldset-basics-expected.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,101 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+ <style>
+ form, fieldset {
+ padding: 5px;
+ margin: 2px;
+ border: 1px solid black;
+ }
+ /* Pack them to fit everything in 800*600 */
+ body > :not(p) {
+ float: left;
+ }
+ </style>
+</head>
+<body>
+ <p>Test the basics of the pseudo class :invalid with the &lt;form&gt; and &lt;fieldset&gt; elements.</p>
+
+ <!-- Empty stuff. -->
+ <form style="background-color: green">
+ <fieldset style="background-color: green"></fieldset>
+ </form>
+
+ <!-- Basic input as a descendant. -->
+ <form style="background-color: green">
+ <fieldset style="background-color: green">
+ <input>
+ </fieldset>
+ </form>
+
+ <!-- Basic input associated. -->
+ <div>
+ <form id="basic_input1" style="background-color: green">
+ <fieldset style="background-color: green"></fieldset>
+ </form>
+ <fieldset form="basic_input1" style="background-color: green">
+ <input>
+ </fieldset>
+ </div>
+
+ <div>
+ <form id="basic_input2" style="background-color: green">
+ <fieldset style="background-color: green"></fieldset>
+ </form>
+ <fieldset style="background-color: green">
+ <input form="basic_input2">
+ </fieldset>
+ </div>
+
+ <!-- Required input as a descendant. -->
+ <form style="background-color: red">
+ <fieldset style="background-color: red">
+ <input required>
+ </fieldset>
+ </form>
+
+ <!-- Required input associated. -->
+ <div>
+ <form id="required_input1" style="background-color: red">
+ <fieldset style="background-color: green"></fieldset>
+ </form>
+ <fieldset style="background-color: red">
+ <input form="required_input1" required>
+ </fieldset>
+ </div>
+
+ <div>
+ <form id="required_input2" style="background-color: green">
+ <fieldset style="background-color: green"></fieldset>
+ </form>
+ <fieldset form="required_input2" style="background-color: red">
+ <input required>
+ </fieldset>
+ </div>
+
+ <!-- Valid required input as a descendant. -->
+ <form style="background-color: green">
+ <fieldset style="background-color: green">
+ <input value="WebKit!" required>
+ </fieldset>
+ </form>
+
+ <!-- Valid required input associated. -->
+ <div>
+ <form id="valid_required_input1" style="background-color: green">
+ <fieldset style="background-color: green"></fieldset>
+ </form>
+ <fieldset style="background-color: green">
+ <input value="WebKit!" form="valid_required_input1" required>
+ </fieldset>
+ </div>
+ <div>
+ <form id="valid_required_input2" style="background-color: green">
+ <fieldset style="background-color: green"></fieldset>
+ </form>
+ <fieldset form="valid_required_input2" style="background-color: green">
+ <input value="WebKit!" required>
+ </fieldset>
+ </div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoinvalidformandfieldsetbasicshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-invalid-form-and-fieldset-basics.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-invalid-form-and-fieldset-basics.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-invalid-form-and-fieldset-basics.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,107 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+ <style>
+ form, fieldset {
+ padding: 5px;
+ margin: 2px;
+ border: 1px solid black;
+ }
+ :matches(form, fieldset):invalid {
+ background-color: red;
+ }
+ :matches(form, fieldset):not(:invalid) {
+ background-color: green;
+ }
+ /* Pack them to fit everything in 800*600 */
+ body > :not(p) {
+ float: left;
+ }
+ </style>
+</head>
+<body>
+ <p>Test the basics of the pseudo class :invalid with the &lt;form&gt; and &lt;fieldset&gt; elements.</p>
+
+ <!-- Empty stuff. -->
+ <form>
+ <fieldset></fieldset>
+ </form>
+
+ <!-- Basic input as a descendant. -->
+ <form>
+ <fieldset>
+ <input>
+ </fieldset>
+ </form>
+
+ <!-- Basic input associated. -->
+ <div>
+ <form id="basic_input1">
+ <fieldset></fieldset>
+ </form>
+ <fieldset form="basic_input1">
+ <input>
+ </fieldset>
+ </div>
+
+ <div>
+ <form id="basic_input2">
+ <fieldset></fieldset>
+ </form>
+ <fieldset>
+ <input form="basic_input2">
+ </fieldset>
+ </div>
+
+ <!-- Required input as a descendant. -->
+ <form>
+ <fieldset>
+ <input required>
+ </fieldset>
+ </form>
+
+ <!-- Required input associated. -->
+ <div>
+ <form id="required_input1">
+ <fieldset></fieldset>
+ </form>
+ <fieldset>
+ <input form="required_input1" required>
+ </fieldset>
+ </div>
+
+ <div>
+ <form id="required_input2">
+ <fieldset></fieldset>
+ </form>
+ <fieldset form="required_input2">
+ <input required>
+ </fieldset>
+ </div>
+
+ <!-- Valid required input as a descendant. -->
+ <form>
+ <fieldset>
+ <input value="WebKit!" required>
+ </fieldset>
+ </form>
+
+ <!-- Valid required input associated. -->
+ <div>
+ <form id="valid_required_input1">
+ <fieldset></fieldset>
+ </form>
+ <fieldset>
+ <input value="WebKit!" form="valid_required_input1" required>
+ </fieldset>
+ </div>
+ <div>
+ <form id="valid_required_input2">
+ <fieldset></fieldset>
+ </form>
+ <fieldset form="valid_required_input2">
+ <input value="WebKit!" required>
+ </fieldset>
+ </div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoinvalidformbasicsexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-invalid-form-basics-expected.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-invalid-form-basics-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-invalid-form-basics-expected.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,52 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+ <style>
+ form {
+ padding: 5px;
+ margin: 2px;
+ border: 1px solid black;
+ }
+ </style>
+</head>
+<body>
+ <p>Test the basics of the pseudo class :invalid with the &lt;form&gt; element.</p>
+
+ <!-- Empty form -->
+ <form style="background-color: green"></form>
+
+ <!-- Basic input as a descendant. -->
+ <form style="background-color: green">
+ <input>
+ </form>
+
+ <!-- Basic input associated. -->
+ <div>
+ <form id="basic_input" style="background-color: green"></form>
+ <input form="basic_input">
+ </div>
+
+ <!-- Required input as a descendant. -->
+ <form style="background-color: red">
+ <input required>
+ </form>
+
+ <!-- Required input associated. -->
+ <div>
+ <form id="required_input" style="background-color: red"></form>
+ <input form="required_input" required>
+ </div>
+
+ <!-- Valid required input as a descendant. -->
+ <form style="background-color: green">
+ <input value="WebKit!" required>
+ </form>
+
+ <!-- Valid required input associated. -->
+ <div>
+ <form id="valid_required_input" style="background-color: green"></form>
+ <input value="WebKit!" form="valid_required_input" required>
+ </div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoinvalidformbasicshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-invalid-form-basics.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-invalid-form-basics.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-invalid-form-basics.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,57 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+ <style>
+ form {
+ padding: 5px;
+ margin: 2px;
+ border: 1px solid black;
+ }
+ form:invalid {
+ background-color: red;
+ }
+ form:not(:invalid) {
+ background-color: green;
+ }
+ </style>
+</head>
+<body>
+ <p>Test the basics of the pseudo class :invalid with the &lt;form&gt; element.</p>
+
+ <!-- Empty form -->
+ <form></form>
+
+ <!-- Basic input as a descendant. -->
+ <form>
+ <input>
+ </form>
+
+ <!-- Basic input associated. -->
+ <div>
+ <form id="basic_input"></form>
+ <input form="basic_input">
+ </div>
+
+ <!-- Required input as a descendant. -->
+ <form>
+ <input required>
+ </form>
+
+ <!-- Required input associated. -->
+ <div>
+ <form id="required_input"></form>
+ <input form="required_input" required>
+ </div>
+
+ <!-- Valid required input as a descendant. -->
+ <form>
+ <input value="WebKit!" required>
+ </form>
+
+ <!-- Valid required input associated. -->
+ <div>
+ <form id="valid_required_input"></form>
+ <input value="WebKit!" form="valid_required_input" required>
+ </div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoinvalidformdynamicallycreatedbasicsexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-invalid-form-dynamically-created-basics-expected.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-invalid-form-dynamically-created-basics-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-invalid-form-dynamically-created-basics-expected.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,52 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+ <style>
+ form {
+ padding: 5px;
+ margin: 2px;
+ border: 1px solid black;
+ }
+ </style>
+</head>
+<body>
+ <p>Test the basics of the pseudo class :invalid with the &lt;form&gt; element. This test creates the test DOM with JavaScript.</p>
+
+ <!-- Empty form -->
+ <form style="background-color: green"></form>
+
+ <!-- Basic input as a descendant. -->
+ <form style="background-color: green">
+ <input>
+ </form>
+
+ <!-- Basic input associated. -->
+ <div>
+ <form id="basic_input" style="background-color: green"></form>
+ <input form="basic_input">
+ </div>
+
+ <!-- Required input as a descendant. -->
+ <form style="background-color: red">
+ <input required>
+ </form>
+
+ <!-- Required input associated. -->
+ <div>
+ <form id="required_input" style="background-color: red"></form>
+ <input form="required_input" required>
+ </div>
+
+ <!-- Valid required input as a descendant. -->
+ <form style="background-color: green">
+ <input value="WebKit!" required>
+ </form>
+
+ <!-- Valid required input associated. -->
+ <div>
+ <form id="valid_required_input" style="background-color: green"></form>
+ <input value="WebKit!" form="valid_required_input" required>
+ </div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoinvalidformdynamicallycreatedbasicshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-invalid-form-dynamically-created-basics.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-invalid-form-dynamically-created-basics.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-invalid-form-dynamically-created-basics.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,90 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+ <style>
+ form {
+ padding: 5px;
+ margin: 2px;
+ border: 1px solid black;
+ }
+ form:invalid {
+ background-color: red;
+ }
+ form:not(:invalid) {
+ background-color: green;
+ }
+ </style>
+ <script>
+ function createTestDOM() {
+ var body = document.body;
+
+ {
+ body.appendChild(document.createElement("form"));
+ }
+ {
+ var form = document.createElement("form");
+ form.appendChild(document.createElement("input"));
+ body.appendChild(form);
+ }
+ {
+ var container = document.createElement("div");
+ var form = document.createElement("form");
+ form.setAttribute("id", "basic_input");
+ container.appendChild(form);
+
+ var input = document.createElement("input");
+ input.setAttribute("form", "basic_input");
+ container.appendChild(input);
+
+ body.appendChild(container);
+ }
+ {
+ var form = document.createElement("form");
+ var input = document.createElement("input");
+ input.setAttribute("required", "");
+ form.appendChild(input);
+ body.appendChild(form);
+ }
+ {
+ var container = document.createElement("div");
+ var form = document.createElement("form");
+ form.setAttribute("id", "required_input");
+ container.appendChild(form);
+
+ var input = document.createElement("input");
+ input.setAttribute("form", "required_input");
+ input.setAttribute("required", "");
+ container.appendChild(input);
+
+ body.appendChild(container);
+ }
+ {
+ var form = document.createElement("form");
+ var input = document.createElement("input");
+ input.setAttribute("required", "");
+ input.value = "WebKit!";
+ form.appendChild(input);
+ body.appendChild(form);
+ }
+ {
+ var container = document.createElement("div");
+ var form = document.createElement("form");
+ form.setAttribute("id", "valid_required_input");
+ container.appendChild(form);
+
+ var input = document.createElement("input");
+ input.setAttribute("form", "valid_required_input");
+ input.setAttribute("required", "");
+ input.value = "WebKit!";
+ container.appendChild(input);
+
+ body.appendChild(container);
+ }
+ }
+ window.addEventListener("load", createTestDOM);
+ </script>
+</head>
+<body>
+ <p>Test the basics of the pseudo class :invalid with the &lt;form&gt; element. This test creates the test DOM with JavaScript.</p>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoinvalidforminvalidationoptimizationexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-invalid-form-invalidation-optimization-expected.txt (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-invalid-form-invalidation-optimization-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-invalid-form-invalidation-optimization-expected.txt 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+Test that we do not invalidate the style of <form> excessively when matching :invalid based on the associated elements.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-with-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-with-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-without-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-without-renderer")) is false
+PASS getComputedStyle(document.getElementById("form1-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("form2-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("form1-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("form2-without-renderer")).color is "rgb(0, 0, 0)"
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-with-renderer")) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-with-renderer")) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-without-renderer")) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-without-renderer")) is true
+PASS getComputedStyle(document.getElementById("form1-with-renderer")).color is "rgb(0, 1, 2)"
+PASS getComputedStyle(document.getElementById("form2-with-renderer")).color is "rgb(0, 1, 2)"
+PASS getComputedStyle(document.getElementById("form1-without-renderer")).color is "rgb(0, 1, 2)"
+PASS getComputedStyle(document.getElementById("form2-without-renderer")).color is "rgb(0, 1, 2)"
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-with-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-with-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-without-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-without-renderer")) is false
+PASS getComputedStyle(document.getElementById("form1-with-renderer")).color is "rgb(0, 1, 2)"
+PASS getComputedStyle(document.getElementById("form2-with-renderer")).color is "rgb(0, 1, 2)"
+PASS getComputedStyle(document.getElementById("form1-without-renderer")).color is "rgb(0, 1, 2)"
+PASS getComputedStyle(document.getElementById("form2-without-renderer")).color is "rgb(0, 1, 2)"
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-with-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-with-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-without-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-without-renderer")) is false
+PASS getComputedStyle(document.getElementById("form1-with-renderer")).color is "rgb(0, 1, 2)"
+PASS getComputedStyle(document.getElementById("form2-with-renderer")).color is "rgb(0, 1, 2)"
+PASS getComputedStyle(document.getElementById("form1-without-renderer")).color is "rgb(0, 1, 2)"
+PASS getComputedStyle(document.getElementById("form2-without-renderer")).color is "rgb(0, 1, 2)"
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-with-renderer")) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-with-renderer")) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-without-renderer")) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-without-renderer")) is true
+PASS getComputedStyle(document.getElementById("form1-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("form2-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("form1-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("form2-without-renderer")).color is "rgb(0, 0, 0)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
+
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudoinvalidforminvalidationoptimizationhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-invalid-form-invalidation-optimization.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-invalid-form-invalidation-optimization.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-invalid-form-invalidation-optimization.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,121 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+form {
+ color: black;
+}
+form:invalid {
+ color: rgb(0, 1, 2);
+}
+</style>
+</head>
+<body>
+ <div>
+ <!-- With renderer -->
+ <form id="form1-with-renderer">
+ <input class="input1" required value="Valid">
+ <input class="input2" required value="Valid">
+ <input class="input3" required value="Valid">
+ <input class="input4" required value="Valid">
+ </form>
+ <form id="form2-with-renderer">
+ <input class="input5" required value="Valid">
+ <input class="input6" required value="Valid">
+ <input class="input7" required value="Valid">
+ <input class="input8" required value="Valid">
+ </form>
+ <input class="input1" required value="Valid" form="form2-with-renderer">
+ <input class="input2" required value="Valid" form="form2-with-renderer">
+ <input class="input3" required value="Valid" form="form2-with-renderer">
+ <input class="input4" required value="Valid" form="form2-with-renderer">
+ </div>
+ <div style="display:none;">
+ <!-- Without renderer -->
+ <form id="form1-without-renderer">
+ <input class="input1" required value="Valid">
+ <input class="input2" required value="Valid">
+ <input class="input3" required value="Valid">
+ <input class="input4" required value="Valid">
+ </form>
+ <form id="form2-without-renderer">
+ <input class="input5" required value="Valid">
+ <input class="input6" required value="Valid">
+ <input class="input7" required value="Valid">
+ <input class="input8" required value="Valid">
+ </form>
+ <input class="input1" required value="Valid" form="form2-without-renderer">
+ <input class="input2" required value="Valid" form="form2-without-renderer">
+ <input class="input3" required value="Valid" form="form2-without-renderer">
+ <input class="input4" required value="Valid" form="form2-without-renderer">
+ </div>
+</body>
+<script>
+
+description('Test that we do not invalidate the style of &lt;form&gt; excessively when matching :invalid based on the associated elements.');
+
+function shouldNeedStyleRecalc(expected) {
+ var testFunction = expected ? shouldBeTrue : shouldBeFalse;
+ testFunction('window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-with-renderer"))');
+ testFunction('window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-with-renderer"))');
+ testFunction('window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-without-renderer"))');
+ testFunction('window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-without-renderer"))');
+}
+
+function checkStyle(expectedColor) {
+ shouldBeEqualToString('getComputedStyle(document.getElementById("form1-with-renderer")).color', expectedColor);
+ shouldBeEqualToString('getComputedStyle(document.getElementById("form2-with-renderer")).color', expectedColor);
+ shouldBeEqualToString('getComputedStyle(document.getElementById("form1-without-renderer")).color', expectedColor);
+ shouldBeEqualToString('getComputedStyle(document.getElementById("form2-without-renderer")).color', expectedColor);
+}
+
+// Force a layout to ensure we don't have dirty styles.
+var offsetTop = document.documentElement.offsetTop;
+
+// Initial state.
+shouldNeedStyleRecalc(false);
+checkStyle('rgb(0, 0, 0)');
+
+// Make input3 invalid, the form should also become invalid.
+var inputs3 = document.querySelectorAll('.input3');
+for (var i = 0; i < inputs3.length; ++i)
+ inputs3[i].value = '';
+
+shouldNeedStyleRecalc(true);
+checkStyle('rgb(0, 1, 2)');
+
+// Making more fields invalid should not invalidate the form's style.
+var inputs = document.querySelectorAll(':matches(.input2, .input4)');
+for (var i = 0; i < inputs.length; ++i)
+ inputs[i].value = '';
+
+shouldNeedStyleRecalc(false);
+checkStyle('rgb(0, 1, 2)');
+
+// Removing valid fields should not invalidate the style.
+var inputs1 = document.querySelectorAll(':matches(.input1)');
+for (var i = 0; i < inputs1.length; ++i)
+ inputs1[i].parentNode.removeChild(inputs1[i]);
+
+// Making all fields valid but one, form still does not need to be invalidated.
+var inputs = document.querySelectorAll(':matches(.input2, .input3)');
+for (var i = 0; i < inputs.length; ++i)
+ inputs[i].removeAttribute('required');
+
+shouldNeedStyleRecalc(false);
+checkStyle('rgb(0, 1, 2)');
+
+// Making the last input valid. The style must update, form must be invalidated.
+var inputs = document.querySelectorAll(':matches(.input4)');
+for (var i = 0; i < inputs.length; ++i)
+ inputs[i].removeAttribute('required');
+
+shouldNeedStyleRecalc(true);
+checkStyle('rgb(0, 0, 0)');
+
+document.getElementById("form1-without-renderer").style.display = 'none';
+document.getElementById("form2-without-renderer").style.display = 'none';
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudovalidformandfieldsetbasicsexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-valid-form-and-fieldset-basics-expected.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-valid-form-and-fieldset-basics-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-valid-form-and-fieldset-basics-expected.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,101 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+ <style>
+ form, fieldset {
+ padding: 5px;
+ margin: 2px;
+ border: 1px solid black;
+ }
+ /* Pack them to fit everything in 800*600 */
+ body > :not(p) {
+ float: left;
+ }
+ </style>
+</head>
+<body>
+ <p>Test the basics of the pseudo class :valid with the &lt;form&gt; and &lt;fieldset&gt; elements.</p>
+
+ <!-- Empty stuff. -->
+ <form style="background-color: green">
+ <fieldset style="background-color: green"></fieldset>
+ </form>
+
+ <!-- Basic input as a descendant. -->
+ <form style="background-color: green">
+ <fieldset style="background-color: green">
+ <input>
+ </fieldset>
+ </form>
+
+ <!-- Basic input associated. -->
+ <div>
+ <form id="basic_input1" style="background-color: green">
+ <fieldset style="background-color: green"></fieldset>
+ </form>
+ <fieldset form="basic_input1" style="background-color: green">
+ <input>
+ </fieldset>
+ </div>
+
+ <div>
+ <form id="basic_input2" style="background-color: green">
+ <fieldset style="background-color: green"></fieldset>
+ </form>
+ <fieldset style="background-color: green">
+ <input form="basic_input2">
+ </fieldset>
+ </div>
+
+ <!-- Required input as a descendant. -->
+ <form style="background-color: red">
+ <fieldset style="background-color: red">
+ <input required>
+ </fieldset>
+ </form>
+
+ <!-- Required input associated. -->
+ <div>
+ <form id="required_input1" style="background-color: red">
+ <fieldset style="background-color: green"></fieldset>
+ </form>
+ <fieldset style="background-color: red">
+ <input form="required_input1" required>
+ </fieldset>
+ </div>
+
+ <div>
+ <form id="required_input2" style="background-color: green">
+ <fieldset style="background-color: green"></fieldset>
+ </form>
+ <fieldset form="required_input2" style="background-color: red">
+ <input required>
+ </fieldset>
+ </div>
+
+ <!-- Valid required input as a descendant. -->
+ <form style="background-color: green">
+ <fieldset style="background-color: green">
+ <input value="WebKit!" required>
+ </fieldset>
+ </form>
+
+ <!-- Valid required input associated. -->
+ <div>
+ <form id="valid_required_input1" style="background-color: green">
+ <fieldset style="background-color: green"></fieldset>
+ </form>
+ <fieldset style="background-color: green">
+ <input value="WebKit!" form="valid_required_input1" required>
+ </fieldset>
+ </div>
+ <div>
+ <form id="valid_required_input2" style="background-color: green">
+ <fieldset style="background-color: green"></fieldset>
+ </form>
+ <fieldset form="valid_required_input2" style="background-color: green">
+ <input value="WebKit!" required>
+ </fieldset>
+ </div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudovalidformandfieldsetbasicshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-valid-form-and-fieldset-basics.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-valid-form-and-fieldset-basics.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-valid-form-and-fieldset-basics.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,107 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+ <style>
+ form, fieldset {
+ padding: 5px;
+ margin: 2px;
+ border: 1px solid black;
+ }
+ :matches(form, fieldset):valid {
+ background-color: green;
+ }
+ :matches(form, fieldset):not(:valid) {
+ background-color: red;
+ }
+ /* Pack them to fit everything in 800*600 */
+ body > :not(p) {
+ float: left;
+ }
+ </style>
+</head>
+<body>
+ <p>Test the basics of the pseudo class :valid with the &lt;form&gt; and &lt;fieldset&gt; elements.</p>
+
+ <!-- Empty stuff. -->
+ <form>
+ <fieldset></fieldset>
+ </form>
+
+ <!-- Basic input as a descendant. -->
+ <form>
+ <fieldset>
+ <input>
+ </fieldset>
+ </form>
+
+ <!-- Basic input associated. -->
+ <div>
+ <form id="basic_input1">
+ <fieldset></fieldset>
+ </form>
+ <fieldset form="basic_input1">
+ <input>
+ </fieldset>
+ </div>
+
+ <div>
+ <form id="basic_input2">
+ <fieldset></fieldset>
+ </form>
+ <fieldset>
+ <input form="basic_input2">
+ </fieldset>
+ </div>
+
+ <!-- Required input as a descendant. -->
+ <form>
+ <fieldset>
+ <input required>
+ </fieldset>
+ </form>
+
+ <!-- Required input associated. -->
+ <div>
+ <form id="required_input1">
+ <fieldset></fieldset>
+ </form>
+ <fieldset>
+ <input form="required_input1" required>
+ </fieldset>
+ </div>
+
+ <div>
+ <form id="required_input2">
+ <fieldset></fieldset>
+ </form>
+ <fieldset form="required_input2">
+ <input required>
+ </fieldset>
+ </div>
+
+ <!-- Valid required input as a descendant. -->
+ <form>
+ <fieldset>
+ <input value="WebKit!" required>
+ </fieldset>
+ </form>
+
+ <!-- Valid required input associated. -->
+ <div>
+ <form id="valid_required_input1">
+ <fieldset></fieldset>
+ </form>
+ <fieldset>
+ <input value="WebKit!" form="valid_required_input1" required>
+ </fieldset>
+ </div>
+ <div>
+ <form id="valid_required_input2">
+ <fieldset></fieldset>
+ </form>
+ <fieldset form="valid_required_input2">
+ <input value="WebKit!" required>
+ </fieldset>
+ </div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudovalidformbasicsexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-valid-form-basics-expected.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-valid-form-basics-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-valid-form-basics-expected.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,52 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+ <style>
+ form {
+ padding: 5px;
+ margin: 2px;
+ border: 1px solid black;
+ }
+ </style>
+</head>
+<body>
+ <p>Test the basics of the pseudo class :valid with the &lt;form&gt; element.</p>
+
+ <!-- Empty form -->
+ <form style="background-color: green"></form>
+
+ <!-- Basic input as a descendant. -->
+ <form style="background-color: green">
+ <input>
+ </form>
+
+ <!-- Basic input associated. -->
+ <div>
+ <form id="basic_input" style="background-color: green"></form>
+ <input form="basic_input">
+ </div>
+
+ <!-- Required input as a descendant. -->
+ <form style="background-color: red">
+ <input required>
+ </form>
+
+ <!-- Required input associated. -->
+ <div>
+ <form id="required_input" style="background-color: red"></form>
+ <input form="required_input" required>
+ </div>
+
+ <!-- Valid required input as a descendant. -->
+ <form style="background-color: green">
+ <input value="WebKit!" required>
+ </form>
+
+ <!-- Valid required input associated. -->
+ <div>
+ <form id="valid_required_input" style="background-color: green"></form>
+ <input value="WebKit!" form="valid_required_input" required>
+ </div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudovalidformbasicshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-valid-form-basics.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-valid-form-basics.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-valid-form-basics.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,58 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+ <style>
+ form {
+ padding: 5px;
+ margin: 2px;
+ border: 1px solid black;
+ }
+ form:valid {
+ background-color: green;
+ }
+ form:not(:valid) {
+ background-color: red;
+ }
+ </style>
+</head>
+<body>
+ <p>Test the basics of the pseudo class :valid with the &lt;form&gt; element.</p>
+
+ <!-- Empty form -->
+ <form></form>
+
+ <!-- Basic input as a descendant. -->
+ <form>
+ <input>
+ </form>
+
+ <!-- Basic input associated. -->
+ <div>
+ <form id="basic_input"></form>
+ <input form="basic_input">
+ </div>
+
+ <!-- Required input as a descendant. -->
+ <form>
+ <input required>
+ </form>
+
+ <!-- Required input associated. -->
+ <div>
+ <form id="required_input"></form>
+ <input form="required_input" required>
+ </div>
+
+ <!-- Valid required input as a descendant. -->
+ <form>
+ <input value="WebKit!" required>
+ </form>
+
+ <!-- Valid required input associated. -->
+ <div>
+ <form id="valid_required_input"></form>
+ <input value="WebKit!" form="valid_required_input" required>
+ </div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudovalidformdynamicallycreatedbasicsexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-valid-form-dynamically-created-basics-expected.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-valid-form-dynamically-created-basics-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-valid-form-dynamically-created-basics-expected.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,52 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+ <style>
+ form {
+ padding: 5px;
+ margin: 2px;
+ border: 1px solid black;
+ }
+ </style>
+</head>
+<body>
+ <p>Test the basics of the pseudo class :valid with the &lt;form&gt; element. This test creates the test DOM with JavaScript.</p>
+
+ <!-- Empty form -->
+ <form style="background-color: green"></form>
+
+ <!-- Basic input as a descendant. -->
+ <form style="background-color: green">
+ <input>
+ </form>
+
+ <!-- Basic input associated. -->
+ <div>
+ <form id="basic_input" style="background-color: green"></form>
+ <input form="basic_input">
+ </div>
+
+ <!-- Required input as a descendant. -->
+ <form style="background-color: red">
+ <input required>
+ </form>
+
+ <!-- Required input associated. -->
+ <div>
+ <form id="required_input" style="background-color: red"></form>
+ <input form="required_input" required>
+ </div>
+
+ <!-- Valid required input as a descendant. -->
+ <form style="background-color: green">
+ <input value="WebKit!" required>
+ </form>
+
+ <!-- Valid required input associated. -->
+ <div>
+ <form id="valid_required_input" style="background-color: green"></form>
+ <input value="WebKit!" form="valid_required_input" required>
+ </div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudovalidformdynamicallycreatedbasicshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-valid-form-dynamically-created-basics.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-valid-form-dynamically-created-basics.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-valid-form-dynamically-created-basics.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,90 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+ <style>
+ form {
+ padding: 5px;
+ margin: 2px;
+ border: 1px solid black;
+ }
+ form:valid {
+ background-color: green;
+ }
+ form:not(:valid) {
+ background-color: red;
+ }
+ </style>
+ <script>
+ function createTestDOM() {
+ var body = document.body;
+
+ {
+ body.appendChild(document.createElement("form"));
+ }
+ {
+ var form = document.createElement("form");
+ form.appendChild(document.createElement("input"));
+ body.appendChild(form);
+ }
+ {
+ var container = document.createElement("div");
+ var form = document.createElement("form");
+ form.setAttribute("id", "basic_input");
+ container.appendChild(form);
+
+ var input = document.createElement("input");
+ input.setAttribute("form", "basic_input");
+ container.appendChild(input);
+
+ body.appendChild(container);
+ }
+ {
+ var form = document.createElement("form");
+ var input = document.createElement("input");
+ input.setAttribute("required", "");
+ form.appendChild(input);
+ body.appendChild(form);
+ }
+ {
+ var container = document.createElement("div");
+ var form = document.createElement("form");
+ form.setAttribute("id", "required_input");
+ container.appendChild(form);
+
+ var input = document.createElement("input");
+ input.setAttribute("form", "required_input");
+ input.setAttribute("required", "");
+ container.appendChild(input);
+
+ body.appendChild(container);
+ }
+ {
+ var form = document.createElement("form");
+ var input = document.createElement("input");
+ input.setAttribute("required", "");
+ input.value = "WebKit!";
+ form.appendChild(input);
+ body.appendChild(form);
+ }
+ {
+ var container = document.createElement("div");
+ var form = document.createElement("form");
+ form.setAttribute("id", "valid_required_input");
+ container.appendChild(form);
+
+ var input = document.createElement("input");
+ input.setAttribute("form", "valid_required_input");
+ input.setAttribute("required", "");
+ input.value = "WebKit!";
+ container.appendChild(input);
+
+ body.appendChild(container);
+ }
+ }
+ window.addEventListener("load", createTestDOM);
+ </script>
+</head>
+<body>
+ <p>Test the basics of the pseudo class :valid with the &lt;form&gt; element. This test creates the test DOM with JavaScript.</p>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudovalidforminvalidationoptimizationexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-valid-form-invalidation-optimization-expected.txt (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-valid-form-invalidation-optimization-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-valid-form-invalidation-optimization-expected.txt 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+Test that we do not invalidate the style of <form> excessively when matching :valid based on the associated elements.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-with-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-with-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-without-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-without-renderer")) is false
+PASS getComputedStyle(document.getElementById("form1-with-renderer")).color is "rgb(0, 1, 2)"
+PASS getComputedStyle(document.getElementById("form2-with-renderer")).color is "rgb(0, 1, 2)"
+PASS getComputedStyle(document.getElementById("form1-without-renderer")).color is "rgb(0, 1, 2)"
+PASS getComputedStyle(document.getElementById("form2-without-renderer")).color is "rgb(0, 1, 2)"
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-with-renderer")) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-with-renderer")) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-without-renderer")) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-without-renderer")) is true
+PASS getComputedStyle(document.getElementById("form1-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("form2-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("form1-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("form2-without-renderer")).color is "rgb(0, 0, 0)"
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-with-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-with-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-without-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-without-renderer")) is false
+PASS getComputedStyle(document.getElementById("form1-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("form2-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("form1-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("form2-without-renderer")).color is "rgb(0, 0, 0)"
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-with-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-with-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-without-renderer")) is false
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-without-renderer")) is false
+PASS getComputedStyle(document.getElementById("form1-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("form2-with-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("form1-without-renderer")).color is "rgb(0, 0, 0)"
+PASS getComputedStyle(document.getElementById("form2-without-renderer")).color is "rgb(0, 0, 0)"
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-with-renderer")) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-with-renderer")) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-without-renderer")) is true
+PASS window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-without-renderer")) is true
+PASS getComputedStyle(document.getElementById("form1-with-renderer")).color is "rgb(0, 1, 2)"
+PASS getComputedStyle(document.getElementById("form2-with-renderer")).color is "rgb(0, 1, 2)"
+PASS getComputedStyle(document.getElementById("form1-without-renderer")).color is "rgb(0, 1, 2)"
+PASS getComputedStyle(document.getElementById("form2-without-renderer")).color is "rgb(0, 1, 2)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
+
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcsspseudovalidforminvalidationoptimizationhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/pseudo-valid-form-invalidation-optimization.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/pseudo-valid-form-invalidation-optimization.html (rev 0)
+++ trunk/LayoutTests/fast/css/pseudo-valid-form-invalidation-optimization.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,121 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+form {
+ color: black;
+}
+form:valid {
+ color: rgb(0, 1, 2);
+}
+</style>
+</head>
+<body>
+ <div>
+ <!-- With renderer -->
+ <form id="form1-with-renderer">
+ <input class="input1" required value="Valid">
+ <input class="input2" required value="Valid">
+ <input class="input3" required value="Valid">
+ <input class="input4" required value="Valid">
+ </form>
+ <form id="form2-with-renderer">
+ <input class="input5" required value="Valid">
+ <input class="input6" required value="Valid">
+ <input class="input7" required value="Valid">
+ <input class="input8" required value="Valid">
+ </form>
+ <input class="input1" required value="Valid" form="form2-with-renderer">
+ <input class="input2" required value="Valid" form="form2-with-renderer">
+ <input class="input3" required value="Valid" form="form2-with-renderer">
+ <input class="input4" required value="Valid" form="form2-with-renderer">
+ </div>
+ <div style="display:none;">
+ <!-- Without renderer -->
+ <form id="form1-without-renderer">
+ <input class="input1" required value="Valid">
+ <input class="input2" required value="Valid">
+ <input class="input3" required value="Valid">
+ <input class="input4" required value="Valid">
+ </form>
+ <form id="form2-without-renderer">
+ <input class="input5" required value="Valid">
+ <input class="input6" required value="Valid">
+ <input class="input7" required value="Valid">
+ <input class="input8" required value="Valid">
+ </form>
+ <input class="input1" required value="Valid" form="form2-without-renderer">
+ <input class="input2" required value="Valid" form="form2-without-renderer">
+ <input class="input3" required value="Valid" form="form2-without-renderer">
+ <input class="input4" required value="Valid" form="form2-without-renderer">
+ </div>
+</body>
+<script>
+
+description('Test that we do not invalidate the style of &lt;form&gt; excessively when matching :valid based on the associated elements.');
+
+function shouldNeedStyleRecalc(expected) {
+ var testFunction = expected ? shouldBeTrue : shouldBeFalse;
+ testFunction('window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-with-renderer"))');
+ testFunction('window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-with-renderer"))');
+ testFunction('window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-without-renderer"))');
+ testFunction('window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-without-renderer"))');
+}
+
+function checkStyle(expectedColor) {
+ shouldBeEqualToString('getComputedStyle(document.getElementById("form1-with-renderer")).color', expectedColor);
+ shouldBeEqualToString('getComputedStyle(document.getElementById("form2-with-renderer")).color', expectedColor);
+ shouldBeEqualToString('getComputedStyle(document.getElementById("form1-without-renderer")).color', expectedColor);
+ shouldBeEqualToString('getComputedStyle(document.getElementById("form2-without-renderer")).color', expectedColor);
+}
+
+// Force a layout to ensure we don't have dirty styles.
+var offsetTop = document.documentElement.offsetTop;
+
+// Initial state.
+shouldNeedStyleRecalc(false);
+checkStyle('rgb(0, 1, 2)');
+
+// Make input3 invalid, the form should also become invalid.
+var inputs3 = document.querySelectorAll('.input3');
+for (var i = 0; i < inputs3.length; ++i)
+ inputs3[i].value = '';
+
+shouldNeedStyleRecalc(true);
+checkStyle('rgb(0, 0, 0)');
+
+// Making more fields invalid should not invalidate the form's style.
+var inputs = document.querySelectorAll(':matches(.input2, .input4)');
+for (var i = 0; i < inputs.length; ++i)
+ inputs[i].value = '';
+
+shouldNeedStyleRecalc(false);
+checkStyle('rgb(0, 0, 0)');
+
+// Removing valid fields should not invalidate the style.
+var inputs1 = document.querySelectorAll(':matches(.input1)');
+for (var i = 0; i < inputs1.length; ++i)
+ inputs1[i].parentNode.removeChild(inputs1[i]);
+
+// Making all fields valid but one, form still does not need to be invalidated.
+var inputs = document.querySelectorAll(':matches(.input2, .input3)');
+for (var i = 0; i < inputs.length; ++i)
+ inputs[i].removeAttribute('required');
+
+shouldNeedStyleRecalc(false);
+checkStyle('rgb(0, 0, 0)');
+
+// Making the last input valid. The style must update, form must be invalidated.
+var inputs = document.querySelectorAll(':matches(.input4)');
+for (var i = 0; i < inputs.length; ++i)
+ inputs[i].removeAttribute('required');
+
+shouldNeedStyleRecalc(true);
+checkStyle('rgb(0, 1, 2)');
+
+document.getElementById("form1-without-renderer").style.display = 'none';
+document.getElementById("form2-without-renderer").style.display = 'none';
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsinvalidformstyleupdate1expectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/invalid-form-style-update-1-expected.txt (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/invalid-form-style-update-1-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/invalid-form-style-update-1-expected.txt 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,259 @@
</span><ins>+Test style update for :invalid applied on a form.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+Initial state
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Make the text area valid.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Back to invalid. We should be in the initial state.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Move the invalid text area into form2.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+
+Make the text area valid.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+
+Make the input invalid.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+
+Move text area as a child of form1.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Move text area as a child of div1.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Make the text area invalid.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Make the input valid.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Make the text area valid, everything should be valid.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Make the input invalid.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Move fieldset1 inside div3
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+
+Destroy the content of div2
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsinvalidformstyleupdate1html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/invalid-form-style-update-1.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/invalid-form-style-update-1.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/invalid-form-style-update-1.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,171 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+:matches(#with-renderer, #without-renderer) * {
+ background-color: rgb(1, 2, 3);
+}
+:matches(#with-renderer, #without-renderer) :invalid {
+ background-color: rgb(4, 5, 6);
+}
+</style>
+</head>
+<body>
+ <template id="test-source">
+ <form class="form1">
+ <div class="div1">
+ <fieldset class="fieldset1">
+ <div class="div2">
+ <input class="input1" required value="valid">
+ </div>
+ </fieldset>
+ <textarea class="textarea1" required></textarea>
+ </div>
+ </form>
+ <form class="form2">
+ <div class="div3">
+ </div>
+ </form>
+ </template>
+ <div id="with-renderer"></div>
+ <div id="without-renderer" style="display:none;"></div>
+</body>
+<script>
+description('Test style update for :invalid applied on a form.');
+
+var withRenderer = document.getElementById("with-renderer");
+var withoutRenderer = document.getElementById("without-renderer");
+var source = document.getElementById("test-source").content;
+
+withRenderer.appendChild(source.cloneNode(true));
+withoutRenderer.appendChild(source.cloneNode(true));
+
+function testStyleAtId(rootId, matchedClass) {
+ var allElements = document.getElementById(rootId).querySelectorAll('*');
+ for (var i = 0; i < allElements.length; ++i) {
+ var expectedStyle = matchedClass.indexOf(allElements[i].className) >= 0 ? 'rgb(4, 5, 6)' : 'rgb(1, 2, 3)';
+ shouldBeEqualToString('getComputedStyle(document.getElementById("' + rootId + '").querySelector(".' + allElements[i].className + '")).backgroundColor', expectedStyle);
+ }
+}
+
+function testStyle(matchedClass) {
+ testStyleAtId('with-renderer', matchedClass);
+ testStyleAtId('without-renderer', matchedClass);
+}
+
+function modifyTree(updateFunction) {
+ updateFunction(withRenderer);
+ updateFunction(withoutRenderer);
+}
+
+debug('');
+debug('Initial state');
+testStyle(['form1', 'textarea1']);
+
+debug('');
+debug("Make the text area valid.");
+modifyTree(function(root) {
+ root.querySelector('.textarea1').value = "Valid";
+});
+testStyle([]);
+
+debug('');
+debug("Back to invalid. We should be in the initial state.");
+modifyTree(function(root) {
+ root.querySelector('.textarea1').value = "";
+});
+testStyle(['form1', 'textarea1']);
+
+
+debug('');
+debug("Move the invalid text area into form2.");
+modifyTree(function(root) {
+ var textArea = root.querySelector('.textarea1');
+ var form2 = root.querySelector('.form2');
+ form2.appendChild(textArea);
+});
+testStyle(['form2', 'textarea1']);
+
+debug('');
+debug("Make the text area valid.");
+modifyTree(function(root) {
+ root.querySelector('.textarea1').value = "Valid";
+});
+testStyle([]);
+
+debug('');
+debug("Make the input invalid.");
+modifyTree(function(root) {
+ root.querySelector('.input1').value = "";
+});
+testStyle(['form1', 'fieldset1', 'input1']);
+
+debug('');
+debug("Move text area as a child of form1.");
+modifyTree(function(root) {
+ var textArea = root.querySelector('.textarea1');
+ var form1 = root.querySelector('.form1');
+ form1.appendChild(textArea);
+});
+testStyle(['form1', 'fieldset1', 'input1']);
+
+debug('');
+debug("Move text area as a child of div1.");
+modifyTree(function(root) {
+ var textArea = root.querySelector('.textarea1');
+ var div1 = root.querySelector('.div1');
+ div1.appendChild(textArea);
+});
+testStyle(['form1', 'fieldset1', 'input1']);
+
+debug('');
+debug("Make the text area invalid.");
+modifyTree(function(root) {
+ root.querySelector('.textarea1').value = "";
+});
+testStyle(['form1', 'fieldset1', 'input1', 'textarea1']);
+
+debug('');
+debug("Make the input valid.");
+modifyTree(function(root) {
+ root.querySelector('.input1').value = "Valid";
+});
+testStyle(['form1', 'textarea1']);
+
+debug('');
+debug("Make the text area valid, everything should be valid.");
+modifyTree(function(root) {
+ root.querySelector('.textarea1').value = "Valid";
+});
+testStyle([]);
+
+debug('');
+debug("Make the input invalid.");
+modifyTree(function(root) {
+ root.querySelector('.input1').value = "";
+});
+testStyle(['form1', 'fieldset1', 'input1']);
+
+
+debug('');
+debug("Move fieldset1 inside div3");
+modifyTree(function(root) {
+ var fieldset1 = root.querySelector('.fieldset1');
+ var div3 = root.querySelector('.div3');
+ div3.appendChild(fieldset1);
+});
+testStyle(['form2', 'fieldset1', 'input1']);
+
+debug('');
+debug("Destroy the content of div2");
+modifyTree(function(root) {
+ root.querySelector('.div2').textContent = '';
+});
+testStyle([]);
+
+// Remove the content otherwise it will appear in the results.
+withRenderer.style.display = 'none';
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsinvalidformstyleupdate2expectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/invalid-form-style-update-2-expected.txt (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/invalid-form-style-update-2-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/invalid-form-style-update-2-expected.txt 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,369 @@
</span><ins>+Test style update for :invalid applied on a form.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+Initial state
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+
+Change the type of input3 to something that validates.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+
+Change the type of input7 to something that validates.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+
+Change the type of input9 to something that does not validate.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+
+Change the type of input5 to something that does not validate.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+
+Change the type of input6 to something that does not validate.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+
+Change the type of input7 to something that does not validate.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+
+Change the type of input10 to something that does not validate.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+
+Disable the text area.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(1, 2, 3)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsinvalidformstyleupdate2html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/invalid-form-style-update-2.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/invalid-form-style-update-2.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/invalid-form-style-update-2.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,136 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+:matches(#with-renderer, #without-renderer) * {
+ background-color: rgb(1, 2, 3);
+}
+:matches(#with-renderer, #without-renderer) :invalid {
+ background-color: rgb(4, 5, 6);
+}
+</style>
+</head>
+<body>
+ <template id="test-source">
+ <form class="form1">
+ <div class="div1">
+ <fieldset class="fieldset1">
+ <div class="div2">
+ <input class="input1" required value="valid">
+ <input class="input2" type="button" required value="valid">
+ <input class="input3" type="hidden" required value="valid">
+ <input class="input4" type="email" required value="awesome@webkit.org">
+ <input class="input5" type="password" required value="valid">
+ <button class="button1">Base button</button>
+ <button class="button2" type="submit">Submit button</button>
+ </div>
+ </fieldset>
+ <textarea class="textarea1" required></textarea>
+ <input class="input6" required>
+ <input class="input7" type="button" required>
+ <input class="input8" type="hidden" required>
+ <input class="input9" type="email" required>
+ <input class="input10" type="password" required>
+ <button class="button3">Base button</button>
+ <button class="button4" type="submit">Submit button</button>
+ </div>
+ </form>
+ </template>
+ <div id="with-renderer"></div>
+ <div id="without-renderer" style="display:none;"></div>
+</body>
+<script>
+description('Test style update for :invalid applied on a form.');
+
+var withRenderer = document.getElementById("with-renderer");
+var withoutRenderer = document.getElementById("without-renderer");
+var source = document.getElementById("test-source").content;
+
+withRenderer.appendChild(source.cloneNode(true));
+withoutRenderer.appendChild(source.cloneNode(true));
+
+function testStyleAtId(rootId, matchedClass) {
+ var allElements = document.getElementById(rootId).querySelectorAll('*');
+ for (var i = 0; i < allElements.length; ++i) {
+ var expectedStyle = matchedClass.indexOf(allElements[i].className) >= 0 ? 'rgb(4, 5, 6)' : 'rgb(1, 2, 3)';
+ shouldBeEqualToString('getComputedStyle(document.getElementById("' + rootId + '").querySelector(".' + allElements[i].className + '")).backgroundColor', expectedStyle);
+ }
+}
+
+function testStyle(matchedClass) {
+ testStyleAtId('with-renderer', matchedClass);
+ testStyleAtId('without-renderer', matchedClass);
+}
+
+function modifyTree(updateFunction) {
+ updateFunction(withRenderer);
+ updateFunction(withoutRenderer);
+}
+
+debug('');
+debug('Initial state');
+testStyle(['form1', 'textarea1', 'input6', 'input9', 'input10']);
+
+debug('');
+debug("Change the type of input3 to something that validates.");
+modifyTree(function(root) {
+ root.querySelector('.input3').type = "search";
+});
+testStyle(['form1', 'textarea1', 'input6', 'input9', 'input10']);
+
+debug('');
+debug("Change the type of input7 to something that validates.");
+modifyTree(function(root) {
+ root.querySelector('.input7').type = "search";
+});
+testStyle(['form1', 'textarea1', 'input6', 'input7', 'input9', 'input10']);
+
+debug('');
+debug("Change the type of input9 to something that does not validate.");
+modifyTree(function(root) {
+ root.querySelector('.input9').type = "hidden";
+});
+testStyle(['form1', 'textarea1', 'input6', 'input7', 'input10']);
+
+debug('');
+debug("Change the type of input5 to something that does not validate.");
+modifyTree(function(root) {
+ root.querySelector('.input5').type = "button";
+});
+testStyle(['form1', 'textarea1', 'input6', 'input7', 'input10']);
+
+// Change everything in the second half of controls without validation, eventually, form1 should validate.
+debug('');
+debug("Change the type of input6 to something that does not validate.");
+modifyTree(function(root) {
+ root.querySelector('.input6').type = "button";
+});
+testStyle(['form1', 'textarea1', 'input7', 'input10']);
+
+debug('');
+debug("Change the type of input7 to something that does not validate.");
+modifyTree(function(root) {
+ root.querySelector('.input7').type = "reset";
+});
+testStyle(['form1', 'textarea1', 'input10']);
+
+debug('');
+debug("Change the type of input10 to something that does not validate.");
+modifyTree(function(root) {
+ root.querySelector('.input10').type = "reset";
+});
+testStyle(['form1', 'textarea1']);
+
+debug('');
+debug("Disable the text area.");
+modifyTree(function(root) {
+ root.querySelector('.textarea1').setAttribute('disabled', '');
+});
+testStyle([]);
+
+// Remove the content otherwise it will appear in the results.
+withRenderer.style.display = 'none';
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsinvalidformstyleupdate3expectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/invalid-form-style-update-3-expected.txt (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/invalid-form-style-update-3-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/invalid-form-style-update-3-expected.txt 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,225 @@
</span><ins>+Test style update for :invalid applied on a form.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+Initial state
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+
+Add input1 to form1.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+
+Add input2 to form1.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+
+Add input3 to form1.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+
+Add input4 to form2.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+
+Add input5 to form2.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+
+Add input6 to form2.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+
+Enable form2.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+
+Add the disabled attribute on form1 (forms can't be disabled).
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+
+Remove input1
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+
+Remove input2
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+
+Remove input3
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+
+Remove input4
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+
+Remove input5
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+
+Remove input6
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsinvalidformstyleupdate3html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/invalid-form-style-update-3.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/invalid-form-style-update-3.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/invalid-form-style-update-3.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,185 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+:matches(#with-renderer, #without-renderer) * {
+ background-color: rgb(1, 2, 3);
+}
+:matches(#with-renderer, #without-renderer) :invalid {
+ background-color: rgb(4, 5, 6);
+}
+</style>
+</head>
+<body>
+ <template id="test-source">
+ <form class="form1">
+ </form>
+ <form class="form2">
+ <fieldset class="form2-disabled-fieldset" disabled>
+ </fieldset>
+ </form>
+ </template>
+ <div id="with-renderer"></div>
+ <div id="without-renderer" style="display:none;"></div>
+</body>
+<script>
+description('Test style update for :invalid applied on a form.');
+
+var withRenderer = document.getElementById("with-renderer");
+var withoutRenderer = document.getElementById("without-renderer");
+var source = document.getElementById("test-source").content;
+
+withRenderer.appendChild(source.cloneNode(true));
+withoutRenderer.appendChild(source.cloneNode(true));
+
+function testStyleAtId(rootId, matchedClass) {
+ var allElements = document.getElementById(rootId).querySelectorAll('*');
+ for (var i = 0; i < allElements.length; ++i) {
+ var expectedStyle = matchedClass.indexOf(allElements[i].className) >= 0 ? 'rgb(4, 5, 6)' : 'rgb(1, 2, 3)';
+ shouldBeEqualToString('getComputedStyle(document.getElementById("' + rootId + '").querySelector(".' + allElements[i].className + '")).backgroundColor', expectedStyle);
+ }
+}
+
+function testStyle(matchedClass) {
+ testStyleAtId('with-renderer', matchedClass);
+ testStyleAtId('without-renderer', matchedClass);
+}
+
+function modifyTree(updateFunction) {
+ updateFunction(withRenderer);
+ updateFunction(withoutRenderer);
+}
+
+debug('');
+debug('Initial state');
+testStyle([]);
+
+debug('');
+debug("Add input1 to form1.");
+modifyTree(function(root) {
+ var input1 = document.createElement('input');
+ input1.className = 'input1';
+ root.querySelector('.form1').appendChild(input1);
+});
+testStyle([]);
+
+debug('');
+debug("Add input2 to form1.");
+modifyTree(function(root) {
+ var input2 = document.createElement('input');
+ input2.className = 'input2';
+ input2.setAttribute('required', '');
+ root.querySelector('.form1').appendChild(input2);
+});
+testStyle(['form1', 'input2']);
+
+debug('');
+debug("Add input3 to form1.");
+modifyTree(function(root) {
+ var input3 = document.createElement('input');
+ input3.className = 'input3';
+ input3.setAttribute('required', '');
+ input3.value = "valid";
+ root.querySelector('.form1').appendChild(input3);
+});
+testStyle(['form1', 'input2']);
+
+debug('');
+debug("Add input4 to form2.");
+modifyTree(function(root) {
+ var input4 = document.createElement('input');
+ input4.className = 'input4';
+ root.querySelector('.form2-disabled-fieldset').appendChild(input4);
+});
+testStyle(['form1', 'input2']);
+
+debug('');
+debug("Add input5 to form2.");
+modifyTree(function(root) {
+ var input5 = document.createElement('input');
+ input5.className = 'input5';
+ input5.setAttribute('required', '');
+ root.querySelector('.form2-disabled-fieldset').appendChild(input5);
+});
+testStyle(['form1', 'input2']);
+
+debug('');
+debug("Add input6 to form2.");
+modifyTree(function(root) {
+ var input6 = document.createElement('input');
+ input6.className = 'input6';
+ input6.setAttribute('required', '');
+ input6.value = "valid"
+ root.querySelector('.form2-disabled-fieldset').appendChild(input6);
+});
+testStyle(['form1', 'input2']);
+
+debug('');
+debug("Enable form2.");
+modifyTree(function(root) {
+ root.querySelector('.form2-disabled-fieldset').removeAttribute('disabled');
+});
+testStyle(['form1', 'input2', 'form2', 'form2-disabled-fieldset', 'input5']);
+
+debug('');
+debug("Add the disabled attribute on form1 (forms can't be disabled).");
+modifyTree(function(root) {
+ root.querySelector('.form1').setAttribute('disabled', '');
+});
+testStyle(['form1', 'input2', 'form2', 'form2-disabled-fieldset', 'input5']);
+
+debug('');
+debug("Remove input1");
+modifyTree(function(root) {
+ var input = root.querySelector('.input1');
+ input.parentNode.removeChild(input);
+});
+testStyle(['form1', 'input2', 'form2', 'form2-disabled-fieldset', 'input5']);
+
+debug('');
+debug("Remove input2");
+modifyTree(function(root) {
+ var input = root.querySelector('.input2');
+ input.parentNode.removeChild(input);
+});
+testStyle(['form2', 'form2-disabled-fieldset', 'input5']);
+
+debug('');
+debug("Remove input3");
+modifyTree(function(root) {
+ var input = root.querySelector('.input3');
+ input.parentNode.removeChild(input);
+});
+testStyle(['form2', 'form2-disabled-fieldset', 'input5']);
+
+debug('');
+debug("Remove input4");
+modifyTree(function(root) {
+ var input = root.querySelector('.input4');
+ input.parentNode.removeChild(input);
+});
+testStyle(['form2', 'form2-disabled-fieldset', 'input5']);
+
+debug('');
+debug("Remove input5");
+modifyTree(function(root) {
+ var input = root.querySelector('.input5');
+ input.parentNode.removeChild(input);
+});
+testStyle([]);
+
+debug('');
+debug("Remove input6");
+modifyTree(function(root) {
+ var input = root.querySelector('.input6');
+ input.parentNode.removeChild(input);
+});
+testStyle([]);
+
+
+// Remove the content otherwise it will appear in the results.
+withRenderer.style.display = 'none';
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsvalidformstyleupdate1expectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/valid-form-style-update-1-expected.txt (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/valid-form-style-update-1-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/valid-form-style-update-1-expected.txt 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,259 @@
</span><ins>+Test style update for :valid applied on a form.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+Initial state
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Make the text area valid.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Back to invalid. We should be in the initial state.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Move the invalid text area into form2.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+
+Make the text area valid.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+
+Make the input invalid.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+
+Move text area as a child of form1.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Move text area as a child of div1.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Make the text area invalid.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Make the input valid.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Make the text area valid, everything should be valid.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Make the input invalid.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+
+Move fieldset1 inside div3
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(1, 2, 3)"
+
+Destroy the content of div2
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsvalidformstyleupdate1html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/valid-form-style-update-1.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/valid-form-style-update-1.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/valid-form-style-update-1.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,171 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+:matches(#with-renderer, #without-renderer) * {
+ background-color: rgb(1, 2, 3);
+}
+:matches(#with-renderer, #without-renderer) :valid {
+ background-color: rgb(4, 5, 6);
+}
+</style>
+</head>
+<body>
+ <template id="test-source">
+ <form class="form1">
+ <div class="div1">
+ <fieldset class="fieldset1">
+ <div class="div2">
+ <input class="input1" required value="valid">
+ </div>
+ </fieldset>
+ <textarea class="textarea1" required></textarea>
+ </div>
+ </form>
+ <form class="form2">
+ <div class="div3">
+ </div>
+ </form>
+ </template>
+ <div id="with-renderer"></div>
+ <div id="without-renderer" style="display:none;"></div>
+</body>
+<script>
+description('Test style update for :valid applied on a form.');
+
+var withRenderer = document.getElementById("with-renderer");
+var withoutRenderer = document.getElementById("without-renderer");
+var source = document.getElementById("test-source").content;
+
+withRenderer.appendChild(source.cloneNode(true));
+withoutRenderer.appendChild(source.cloneNode(true));
+
+function testStyleAtId(rootId, matchedClass) {
+ var allElements = document.getElementById(rootId).querySelectorAll('*');
+ for (var i = 0; i < allElements.length; ++i) {
+ var expectedStyle = matchedClass.indexOf(allElements[i].className) >= 0 ? 'rgb(4, 5, 6)' : 'rgb(1, 2, 3)';
+ shouldBeEqualToString('getComputedStyle(document.getElementById("' + rootId + '").querySelector(".' + allElements[i].className + '")).backgroundColor', expectedStyle);
+ }
+}
+
+function testStyle(matchedClass) {
+ testStyleAtId('with-renderer', matchedClass);
+ testStyleAtId('without-renderer', matchedClass);
+}
+
+function modifyTree(updateFunction) {
+ updateFunction(withRenderer);
+ updateFunction(withoutRenderer);
+}
+
+debug('');
+debug('Initial state');
+testStyle(['fieldset1', 'input1', 'form2']);
+
+debug('');
+debug("Make the text area valid.");
+modifyTree(function(root) {
+ root.querySelector('.textarea1').value = "Valid";
+});
+testStyle(['form1', 'fieldset1', 'input1', 'form2', 'textarea1']);
+
+debug('');
+debug("Back to invalid. We should be in the initial state.");
+modifyTree(function(root) {
+ root.querySelector('.textarea1').value = "";
+});
+testStyle(['fieldset1', 'input1', 'form2']);
+
+
+debug('');
+debug("Move the invalid text area into form2.");
+modifyTree(function(root) {
+ var textArea = root.querySelector('.textarea1');
+ var form2 = root.querySelector('.form2');
+ form2.appendChild(textArea);
+});
+testStyle(['form1', 'fieldset1', 'input1']);
+
+debug('');
+debug("Make the text area valid.");
+modifyTree(function(root) {
+ root.querySelector('.textarea1').value = "Valid";
+});
+testStyle(['form1', 'fieldset1', 'input1', 'form2', 'textarea1']);
+
+debug('');
+debug("Make the input invalid.");
+modifyTree(function(root) {
+ root.querySelector('.input1').value = "";
+});
+testStyle(['form2', 'textarea1']);
+
+debug('');
+debug("Move text area as a child of form1.");
+modifyTree(function(root) {
+ var textArea = root.querySelector('.textarea1');
+ var form1 = root.querySelector('.form1');
+ form1.appendChild(textArea);
+});
+testStyle(['textarea1', 'form2']);
+
+debug('');
+debug("Move text area as a child of div1.");
+modifyTree(function(root) {
+ var textArea = root.querySelector('.textarea1');
+ var div1 = root.querySelector('.div1');
+ div1.appendChild(textArea);
+});
+testStyle(['textarea1', 'form2']);
+
+debug('');
+debug("Make the text area invalid.");
+modifyTree(function(root) {
+ root.querySelector('.textarea1').value = "";
+});
+testStyle(['form2']);
+
+debug('');
+debug("Make the input valid.");
+modifyTree(function(root) {
+ root.querySelector('.input1').value = "Valid";
+});
+testStyle(['fieldset1', 'input1', 'form2']);
+
+debug('');
+debug("Make the text area valid, everything should be valid.");
+modifyTree(function(root) {
+ root.querySelector('.textarea1').value = "Valid";
+});
+testStyle(['form1', 'fieldset1', 'input1', 'textarea1', 'form2']);
+
+debug('');
+debug("Make the input invalid.");
+modifyTree(function(root) {
+ root.querySelector('.input1').value = "";
+});
+testStyle(['form2', 'textarea1']);
+
+
+debug('');
+debug("Move fieldset1 inside div3");
+modifyTree(function(root) {
+ var fieldset1 = root.querySelector('.fieldset1');
+ var div3 = root.querySelector('.div3');
+ div3.appendChild(fieldset1);
+});
+testStyle(['form1', 'textarea1']);
+
+debug('');
+debug("Destroy the content of div2");
+modifyTree(function(root) {
+ root.querySelector('.div2').textContent = '';
+});
+testStyle(['form1', 'textarea1', 'form2', 'fieldset1']);
+
+// Remove the content otherwise it will appear in the results.
+withRenderer.style.display = 'none';
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsvalidformstyleupdate2expectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/valid-form-style-update-2-expected.txt (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/valid-form-style-update-2-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/valid-form-style-update-2-expected.txt 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,369 @@
</span><ins>+Test style update for :valid applied on a form.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+Initial state
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+
+Change the type of input3 to something that validates.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+
+Change the type of input7 to something that validates.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+
+Change the type of input9 to something that does not validate.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+
+Change the type of input5 to something that does not validate.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+
+Change the type of input6 to something that does not validate.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+
+Change the type of input7 to something that does not validate.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+
+Change the type of input10 to something that does not validate.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+
+Disable the text area.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".fieldset1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".div2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".textarea1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input7")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input8")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input9")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input10")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".button4")).backgroundColor is "rgb(4, 5, 6)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsvalidformstyleupdate2html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/valid-form-style-update-2.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/valid-form-style-update-2.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/valid-form-style-update-2.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,136 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+:matches(#with-renderer, #without-renderer) * {
+ background-color: rgb(1, 2, 3);
+}
+:matches(#with-renderer, #without-renderer) :valid {
+ background-color: rgb(4, 5, 6);
+}
+</style>
+</head>
+<body>
+ <template id="test-source">
+ <form class="form1">
+ <div class="div1">
+ <fieldset class="fieldset1">
+ <div class="div2">
+ <input class="input1" required value="valid">
+ <input class="input2" type="button" required value="valid">
+ <input class="input3" type="hidden" required value="valid">
+ <input class="input4" type="email" required value="awesome@webkit.org">
+ <input class="input5" type="password" required value="valid">
+ <button class="button1">Base button</button>
+ <button class="button2" type="submit">Submit button</button>
+ </div>
+ </fieldset>
+ <textarea class="textarea1" required></textarea>
+ <input class="input6" required>
+ <input class="input7" type="button" required>
+ <input class="input8" type="hidden" required>
+ <input class="input9" type="email" required>
+ <input class="input10" type="password" required>
+ <button class="button3">Base button</button>
+ <button class="button4" type="submit">Submit button</button>
+ </div>
+ </form>
+ </template>
+ <div id="with-renderer"></div>
+ <div id="without-renderer" style="display:none;"></div>
+</body>
+<script>
+description('Test style update for :valid applied on a form.');
+
+var withRenderer = document.getElementById("with-renderer");
+var withoutRenderer = document.getElementById("without-renderer");
+var source = document.getElementById("test-source").content;
+
+withRenderer.appendChild(source.cloneNode(true));
+withoutRenderer.appendChild(source.cloneNode(true));
+
+function testStyleAtId(rootId, matchedClass) {
+ var allElements = document.getElementById(rootId).querySelectorAll('*');
+ for (var i = 0; i < allElements.length; ++i) {
+ var expectedStyle = matchedClass.indexOf(allElements[i].className) >= 0 ? 'rgb(4, 5, 6)' : 'rgb(1, 2, 3)';
+ shouldBeEqualToString('getComputedStyle(document.getElementById("' + rootId + '").querySelector(".' + allElements[i].className + '")).backgroundColor', expectedStyle);
+ }
+}
+
+function testStyle(matchedClass) {
+ testStyleAtId('with-renderer', matchedClass);
+ testStyleAtId('without-renderer', matchedClass);
+}
+
+function modifyTree(updateFunction) {
+ updateFunction(withRenderer);
+ updateFunction(withoutRenderer);
+}
+
+debug('');
+debug('Initial state');
+testStyle(['fieldset1', 'input1', 'input4', 'input5', 'button1', 'button2', 'button3', 'button4']);
+
+debug('');
+debug("Change the type of input3 to something that validates.");
+modifyTree(function(root) {
+ root.querySelector('.input3').type = "search";
+});
+testStyle(['fieldset1', 'input1', 'input3', 'input4', 'input5', 'button1', 'button2', 'button3', 'button4']);
+
+debug('');
+debug("Change the type of input7 to something that validates.");
+modifyTree(function(root) {
+ root.querySelector('.input7').type = "search";
+});
+testStyle(['fieldset1', 'input1', 'input3', 'input4', 'input5', 'button1', 'button2', 'button3', 'button4']);
+
+debug('');
+debug("Change the type of input9 to something that does not validate.");
+modifyTree(function(root) {
+ root.querySelector('.input9').type = "hidden";
+});
+testStyle(['fieldset1', 'input1', 'input3', 'input4', 'input5', 'button1', 'button2', 'button3', 'button4']);
+
+debug('');
+debug("Change the type of input5 to something that does not validate.");
+modifyTree(function(root) {
+ root.querySelector('.input5').type = "button";
+});
+testStyle(['fieldset1', 'input1', 'input3', 'input4', 'button1', 'button2', 'button3', 'button4']);
+
+// Change everything in the second half of controls without validation, eventually, form1 should validate.
+debug('');
+debug("Change the type of input6 to something that does not validate.");
+modifyTree(function(root) {
+ root.querySelector('.input6').type = "button";
+});
+testStyle(['fieldset1', 'input1', 'input3', 'input4', 'button1', 'button2', 'button3', 'button4']);
+
+debug('');
+debug("Change the type of input7 to something that does not validate.");
+modifyTree(function(root) {
+ root.querySelector('.input7').type = "reset";
+});
+testStyle(['fieldset1', 'input1', 'input3', 'input4', 'button1', 'button2', 'button3', 'button4']);
+
+debug('');
+debug("Change the type of input10 to something that does not validate.");
+modifyTree(function(root) {
+ root.querySelector('.input10').type = "reset";
+});
+testStyle(['fieldset1', 'input1', 'input3', 'input4', 'button1', 'button2', 'button3', 'button4']);
+
+debug('');
+debug("Disable the text area.");
+modifyTree(function(root) {
+ root.querySelector('.textarea1').setAttribute('disabled', '');
+});
+testStyle(['form1', 'fieldset1', 'input1', 'input3', 'input4', 'button1', 'button2', 'button3', 'button4']);
+
+// Remove the content otherwise it will appear in the results.
+withRenderer.style.display = 'none';
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsvalidformstyleupdate3expectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/valid-form-style-update-3-expected.txt (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/valid-form-style-update-3-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/selectors/valid-form-style-update-3-expected.txt 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,225 @@
</span><ins>+Test style update for :valid applied on a form.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+Initial state
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+
+Add input1 to form1.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+
+Add input2 to form1.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+
+Add input3 to form1.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+
+Add input4 to form2.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+
+Add input5 to form2.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+
+Add input6 to form2.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(1, 2, 3)"
+
+Enable form2.
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+
+Add the disabled attribute on form1 (forms can't be disabled).
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+
+Remove input1
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+
+Remove input2
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input3")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+
+Remove input3
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input4")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+
+Remove input4
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input5")).backgroundColor is "rgb(1, 2, 3)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+
+Remove input5
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".input6")).backgroundColor is "rgb(4, 5, 6)"
+
+Remove input6
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("with-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form1")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2")).backgroundColor is "rgb(4, 5, 6)"
+PASS getComputedStyle(document.getElementById("without-renderer").querySelector(".form2-disabled-fieldset")).backgroundColor is "rgb(4, 5, 6)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastselectorsvalidformstyleupdate3html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/selectors/valid-form-style-update-3.html (0 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/selectors/valid-form-style-update-3.html (rev 0)
+++ trunk/LayoutTests/fast/selectors/valid-form-style-update-3.html 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -0,0 +1,185 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+:matches(#with-renderer, #without-renderer) * {
+ background-color: rgb(1, 2, 3);
+}
+:matches(#with-renderer, #without-renderer) :valid {
+ background-color: rgb(4, 5, 6);
+}
+</style>
+</head>
+<body>
+ <template id="test-source">
+ <form class="form1">
+ </form>
+ <form class="form2">
+ <fieldset class="form2-disabled-fieldset" disabled>
+ </fieldset>
+ </form>
+ </template>
+ <div id="with-renderer"></div>
+ <div id="without-renderer" style="display:none;"></div>
+</body>
+<script>
+description('Test style update for :valid applied on a form.');
+
+var withRenderer = document.getElementById("with-renderer");
+var withoutRenderer = document.getElementById("without-renderer");
+var source = document.getElementById("test-source").content;
+
+withRenderer.appendChild(source.cloneNode(true));
+withoutRenderer.appendChild(source.cloneNode(true));
+
+function testStyleAtId(rootId, matchedClass) {
+ var allElements = document.getElementById(rootId).querySelectorAll('*');
+ for (var i = 0; i < allElements.length; ++i) {
+ var expectedStyle = matchedClass.indexOf(allElements[i].className) >= 0 ? 'rgb(4, 5, 6)' : 'rgb(1, 2, 3)';
+ shouldBeEqualToString('getComputedStyle(document.getElementById("' + rootId + '").querySelector(".' + allElements[i].className + '")).backgroundColor', expectedStyle);
+ }
+}
+
+function testStyle(matchedClass) {
+ testStyleAtId('with-renderer', matchedClass);
+ testStyleAtId('without-renderer', matchedClass);
+}
+
+function modifyTree(updateFunction) {
+ updateFunction(withRenderer);
+ updateFunction(withoutRenderer);
+}
+
+debug('');
+debug('Initial state');
+testStyle(['form1', 'form2', 'form2-disabled-fieldset']);
+
+debug('');
+debug("Add input1 to form1.");
+modifyTree(function(root) {
+ var input1 = document.createElement('input');
+ input1.className = 'input1';
+ root.querySelector('.form1').appendChild(input1);
+});
+testStyle(['form1', 'input1', 'form2', 'form2-disabled-fieldset']);
+
+debug('');
+debug("Add input2 to form1.");
+modifyTree(function(root) {
+ var input2 = document.createElement('input');
+ input2.className = 'input2';
+ input2.setAttribute('required', '');
+ root.querySelector('.form1').appendChild(input2);
+});
+testStyle(['input1', 'form2', 'form2-disabled-fieldset']);
+
+debug('');
+debug("Add input3 to form1.");
+modifyTree(function(root) {
+ var input3 = document.createElement('input');
+ input3.className = 'input3';
+ input3.setAttribute('required', '');
+ input3.value = "valid";
+ root.querySelector('.form1').appendChild(input3);
+});
+testStyle(['input1', 'input3', 'form2', 'form2-disabled-fieldset']);
+
+debug('');
+debug("Add input4 to form2.");
+modifyTree(function(root) {
+ var input4 = document.createElement('input');
+ input4.className = 'input4';
+ root.querySelector('.form2-disabled-fieldset').appendChild(input4);
+});
+testStyle(['input1', 'input3', 'form2', 'form2-disabled-fieldset']);
+
+debug('');
+debug("Add input5 to form2.");
+modifyTree(function(root) {
+ var input5 = document.createElement('input');
+ input5.className = 'input5';
+ input5.setAttribute('required', '');
+ root.querySelector('.form2-disabled-fieldset').appendChild(input5);
+});
+testStyle(['input1', 'input3', 'form2', 'form2-disabled-fieldset']);
+
+debug('');
+debug("Add input6 to form2.");
+modifyTree(function(root) {
+ var input6 = document.createElement('input');
+ input6.className = 'input6';
+ input6.setAttribute('required', '');
+ input6.value = "valid"
+ root.querySelector('.form2-disabled-fieldset').appendChild(input6);
+});
+testStyle(['input1', 'input3', 'form2', 'form2-disabled-fieldset']);
+
+debug('');
+debug("Enable form2.");
+modifyTree(function(root) {
+ root.querySelector('.form2-disabled-fieldset').removeAttribute('disabled');
+});
+testStyle(['input1', 'input3', 'input4', 'input6']);
+
+debug('');
+debug("Add the disabled attribute on form1 (forms can't be disabled).");
+modifyTree(function(root) {
+ root.querySelector('.form1').setAttribute('disabled', '');
+});
+testStyle(['input1', 'input3', 'input4', 'input6']);
+
+debug('');
+debug("Remove input1");
+modifyTree(function(root) {
+ var input = root.querySelector('.input1');
+ input.parentNode.removeChild(input);
+});
+testStyle(['input1', 'input3', 'input4', 'input6']);
+
+debug('');
+debug("Remove input2");
+modifyTree(function(root) {
+ var input = root.querySelector('.input2');
+ input.parentNode.removeChild(input);
+});
+testStyle(['form1', 'input1', 'input3', 'input4', 'input6']);
+
+debug('');
+debug("Remove input3");
+modifyTree(function(root) {
+ var input = root.querySelector('.input3');
+ input.parentNode.removeChild(input);
+});
+testStyle(['form1', 'input4', 'input6']);
+
+debug('');
+debug("Remove input4");
+modifyTree(function(root) {
+ var input = root.querySelector('.input4');
+ input.parentNode.removeChild(input);
+});
+testStyle(['form1', 'input6']);
+
+debug('');
+debug("Remove input5");
+modifyTree(function(root) {
+ var input = root.querySelector('.input5');
+ input.parentNode.removeChild(input);
+});
+testStyle(['form1', 'form2', 'form2-disabled-fieldset', 'input6']);
+
+debug('');
+debug("Remove input6");
+modifyTree(function(root) {
+ var input = root.querySelector('.input6');
+ input.parentNode.removeChild(input);
+});
+testStyle(['form1', 'form2', 'form2-disabled-fieldset']);
+
+
+// Remove the content otherwise it will appear in the results.
+withRenderer.style.display = 'none';
+</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 (177663 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-12-23 00:02:45 UTC (rev 177663)
+++ trunk/Source/WebCore/ChangeLog 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -1,3 +1,74 @@
</span><ins>+2014-12-22 Benjamin Poulain <bpoulain@apple.com>
+
+ Form elements should match :valid and :invalid based on their associated elements
+ https://bugs.webkit.org/show_bug.cgi?id=139850
+
+ Reviewed by Darin Adler.
+
+ In the latest HTML spec, form elements can match :valid or :invalid based
+ on their associated element.
+
+ The tricky part is that object lifetime is a mess. When elements are associated
+ with forms by the parser, the form is set by the constructor of HTMLFormControlElement.
+ At that point, the real object has not been initialized yet which
+ makes it impossible to find its validity.
+
+ To work around the lifetime problem, the code of HTMLFormControlElement::didChangeForm()
+ uses m_willValidateInitialized and m_willValidate direclty instead
+ of invoking willValidate(). That way we don't try to validate an incomplete object.
+
+ When the object really validates, HTMLFormControlElement::setNeedsWillValidateCheck()
+ takes care of updating the form.
+
+ Tests: fast/css/pseudo-invalid-form-and-fieldset-basics.html
+ fast/css/pseudo-invalid-form-basics.html
+ fast/css/pseudo-invalid-form-dynamically-created-basics.html
+ fast/css/pseudo-invalid-form-invalidation-optimization.html
+ fast/css/pseudo-valid-form-and-fieldset-basics.html
+ fast/css/pseudo-valid-form-basics.html
+ fast/css/pseudo-valid-form-dynamically-created-basics.html
+ fast/css/pseudo-valid-form-invalidation-optimization.html
+ fast/selectors/invalid-form-style-update-1.html
+ fast/selectors/invalid-form-style-update-2.html
+ fast/selectors/invalid-form-style-update-3.html
+ fast/selectors/valid-form-style-update-1.html
+ fast/selectors/valid-form-style-update-2.html
+ fast/selectors/valid-form-style-update-3.html
+
+ * css/StyleResolver.cpp:
+ (WebCore::StyleResolver::canShareStyleWithControl):
+ (WebCore::StyleResolver::canShareStyleWithElement):
+ HTMLFormElement is not a FormControl, we have to generalize the test
+ for :valid/:invalid with style sharing.
+
+ * html/HTMLFormControlElement.cpp:
+ (WebCore::HTMLFormControlElement::~HTMLFormControlElement):
+ Since we now have willChangeForm(), didChangeForm(), we have to null
+ the form ourself, as documented by FormAssociatedElement.
+
+ (WebCore::HTMLFormControlElement::setNeedsWillValidateCheck):
+ (WebCore::HTMLFormControlElement::willChangeForm):
+ (WebCore::HTMLFormControlElement::didChangeForm):
+ (WebCore::HTMLFormControlElement::updateValidity):
+ Update the owner form when any of the associated form element changes
+ to invalid.
+
+ * html/HTMLFormControlElement.h:
+ * html/HTMLFormElement.cpp:
+ (WebCore::HTMLFormElement::registerInvalidAssociatedFormControl):
+ (WebCore::HTMLFormElement::removeInvalidAssociatedFormControlIfNeeded):
+ (WebCore::HTMLFormElement::matchesValidPseudoClass):
+ (WebCore::HTMLFormElement::matchesInvalidPseudoClass):
+ This is very similar to the code of fieldset, but we have much weaker
+ invariants due to the insane way FormAssociatedElement initializes.
+
+ * html/HTMLFormElement.h:
+ * html/HTMLInputElement.cpp:
+ (WebCore::HTMLInputElement::initializeInputType):
+ For completeness, we should always validate when changing the type.
+ The code was only doing that when the element was inserted into the tree,
+ that was too fragile.
+
</ins><span class="cx"> 2014-12-22 Anders Carlsson <andersca@apple.com>
</span><span class="cx">
</span><span class="cx"> Try to fix the Windows build.
</span></span></pre></div>
<a id="trunkSourceWebCorecssStyleResolvercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleResolver.cpp (177663 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleResolver.cpp 2014-12-23 00:02:45 UTC (rev 177663)
+++ trunk/Source/WebCore/css/StyleResolver.cpp 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -520,12 +520,6 @@
</span><span class="cx"> if (element->isDefaultButtonForForm() != state.element()->isDefaultButtonForForm())
</span><span class="cx"> return false;
</span><span class="cx">
</span><del>- if (element->matchesValidPseudoClass() != state.element()->matchesValidPseudoClass())
- return false;
-
- if (element->matchesInvalidPseudoClass() != state.element()->matchesValidPseudoClass())
- return false;
-
</del><span class="cx"> if (element->isInRange() != state.element()->isInRange())
</span><span class="cx"> return false;
</span><span class="cx">
</span><span class="lines">@@ -652,6 +646,12 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ if (element->matchesValidPseudoClass() != state.element()->matchesValidPseudoClass())
+ return false;
+
+ if (element->matchesInvalidPseudoClass() != state.element()->matchesValidPseudoClass())
+ return false;
+
</ins><span class="cx"> #if ENABLE(VIDEO_TRACK)
</span><span class="cx"> // Deny sharing styles between WebVTT and non-WebVTT nodes.
</span><span class="cx"> if (is<WebVTTElement>(*state.element()))
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlHTMLFormControlElementcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/HTMLFormControlElement.cpp (177663 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/html/HTMLFormControlElement.cpp 2014-12-23 00:02:45 UTC (rev 177663)
+++ trunk/Source/WebCore/html/HTMLFormControlElement.cpp 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -67,6 +67,9 @@
</span><span class="cx">
</span><span class="cx"> HTMLFormControlElement::~HTMLFormControlElement()
</span><span class="cx"> {
</span><ins>+ // The calls willChangeForm() and didChangeForm() are virtual, we want the
+ // form to be reset while this object still exists.
+ setForm(nullptr);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> String HTMLFormControlElement::formEnctype() const
</span><span class="lines">@@ -417,8 +420,11 @@
</span><span class="cx"> updateValidity();
</span><span class="cx"> setNeedsStyleRecalc();
</span><span class="cx">
</span><del>- if (!m_willValidate && !wasValid)
</del><ins>+ if (!m_willValidate && !wasValid) {
</ins><span class="cx"> removeInvalidElementToAncestorFromInsertionPoint(*this, parentNode());
</span><ins>+ if (HTMLFormElement* form = this->form())
+ form->removeInvalidAssociatedFormControlIfNeeded(*this);
+ }
</ins><span class="cx">
</span><span class="cx"> if (!m_willValidate)
</span><span class="cx"> hideVisibleValidationMessage();
</span><span class="lines">@@ -464,6 +470,22 @@
</span><span class="cx"> return m_isValid;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+void HTMLFormControlElement::willChangeForm()
+{
+ if (HTMLFormElement* form = this->form())
+ form->removeInvalidAssociatedFormControlIfNeeded(*this);
+ FormAssociatedElement::willChangeForm();
+}
+
+void HTMLFormControlElement::didChangeForm()
+{
+ FormAssociatedElement::didChangeForm();
+ if (HTMLFormElement* form = this->form()) {
+ if (m_willValidateInitialized && m_willValidate && !isValidFormControlElement())
+ form->registerInvalidAssociatedFormControl(*this);
+ }
+}
+
</ins><span class="cx"> void HTMLFormControlElement::updateValidity()
</span><span class="cx"> {
</span><span class="cx"> bool willValidate = this->willValidate();
</span><span class="lines">@@ -475,10 +497,15 @@
</span><span class="cx"> // Update style for pseudo classes such as :valid :invalid.
</span><span class="cx"> setNeedsStyleRecalc();
</span><span class="cx">
</span><del>- if (!m_isValid)
</del><ins>+ if (!m_isValid) {
</ins><span class="cx"> addInvalidElementToAncestorFromInsertionPoint(*this, parentNode());
</span><del>- else
</del><ins>+ if (HTMLFormElement* form = this->form())
+ form->registerInvalidAssociatedFormControl(*this);
+ } else {
</ins><span class="cx"> removeInvalidElementToAncestorFromInsertionPoint(*this, parentNode());
</span><ins>+ if (HTMLFormElement* form = this->form())
+ form->removeInvalidAssociatedFormControlIfNeeded(*this);
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Updates only if this control already has a validtion message.
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlHTMLFormControlElementh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/HTMLFormControlElement.h (177663 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/html/HTMLFormControlElement.h 2014-12-23 00:02:45 UTC (rev 177663)
+++ trunk/Source/WebCore/html/HTMLFormControlElement.h 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -146,6 +146,9 @@
</span><span class="cx">
</span><span class="cx"> bool validationMessageShadowTreeContains(const Node&) const;
</span><span class="cx">
</span><ins>+ virtual void willChangeForm() override;
+ virtual void didChangeForm() override;
+
</ins><span class="cx"> private:
</span><span class="cx"> virtual void refFormAssociatedElement() override { ref(); }
</span><span class="cx"> virtual void derefFormAssociatedElement() override { deref(); }
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlHTMLFormElementcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/HTMLFormElement.cpp (177663 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/html/HTMLFormElement.cpp 2014-12-23 00:02:45 UTC (rev 177663)
+++ trunk/Source/WebCore/html/HTMLFormElement.cpp 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -622,6 +622,24 @@
</span><span class="cx"> removeFromVector(m_associatedElements, e);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+void HTMLFormElement::registerInvalidAssociatedFormControl(const HTMLFormControlElement& formControlElement)
+{
+ ASSERT_WITH_MESSAGE(!is<HTMLFieldSetElement>(formControlElement), "FieldSet are never candidates for constraint validation.");
+ ASSERT(static_cast<const Element&>(formControlElement).matchesInvalidPseudoClass());
+
+ if (m_invalidAssociatedFormControls.isEmpty())
+ setNeedsStyleRecalc();
+ m_invalidAssociatedFormControls.add(&formControlElement);
+}
+
+void HTMLFormElement::removeInvalidAssociatedFormControlIfNeeded(const HTMLFormControlElement& formControlElement)
+{
+ if (m_invalidAssociatedFormControls.remove(&formControlElement)) {
+ if (m_invalidAssociatedFormControls.isEmpty())
+ setNeedsStyleRecalc();
+ }
+}
+
</ins><span class="cx"> bool HTMLFormElement::isURLAttribute(const Attribute& attribute) const
</span><span class="cx"> {
</span><span class="cx"> return attribute.name() == actionAttr || HTMLElement::isURLAttribute(attribute);
</span><span class="lines">@@ -787,6 +805,16 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+bool HTMLFormElement::matchesValidPseudoClass() const
+{
+ return m_invalidAssociatedFormControls.isEmpty();
+}
+
+bool HTMLFormElement::matchesInvalidPseudoClass() const
+{
+ return !m_invalidAssociatedFormControls.isEmpty();
+}
+
</ins><span class="cx"> bool HTMLFormElement::hasNamedElement(const AtomicString& name)
</span><span class="cx"> {
</span><span class="cx"> return elements()->hasNamedItem(name) || elementFromPastNamesMap(name);
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlHTMLFormElementh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/HTMLFormElement.h (177663 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/html/HTMLFormElement.h 2014-12-23 00:02:45 UTC (rev 177663)
+++ trunk/Source/WebCore/html/HTMLFormElement.h 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -78,6 +78,9 @@
</span><span class="cx"> void registerFormElement(FormAssociatedElement*);
</span><span class="cx"> void removeFormElement(FormAssociatedElement*);
</span><span class="cx">
</span><ins>+ void registerInvalidAssociatedFormControl(const HTMLFormControlElement&);
+ void removeInvalidAssociatedFormControlIfNeeded(const HTMLFormControlElement&);
+
</ins><span class="cx"> void registerImgElement(HTMLImageElement*);
</span><span class="cx"> void removeImgElement(HTMLImageElement*);
</span><span class="cx">
</span><span class="lines">@@ -173,6 +176,9 @@
</span><span class="cx"> void assertItemCanBeInPastNamesMap(FormNamedItem*) const;
</span><span class="cx"> void removeFromPastNamesMap(FormNamedItem*);
</span><span class="cx">
</span><ins>+ virtual bool matchesValidPseudoClass() const override;
+ virtual bool matchesInvalidPseudoClass() const override;
+
</ins><span class="cx"> typedef HashMap<RefPtr<AtomicStringImpl>, FormNamedItem*> PastNamesMap;
</span><span class="cx">
</span><span class="cx"> FormSubmission::Attributes m_attributes;
</span><span class="lines">@@ -184,6 +190,7 @@
</span><span class="cx"> unsigned m_associatedElementsAfterIndex;
</span><span class="cx"> Vector<FormAssociatedElement*> m_associatedElements;
</span><span class="cx"> Vector<HTMLImageElement*> m_imageElements;
</span><ins>+ HashSet<const HTMLFormControlElement*> m_invalidAssociatedFormControls;
</ins><span class="cx">
</span><span class="cx"> bool m_wasUserSubmitted;
</span><span class="cx"> bool m_isSubmittingOrPreparingForSubmission;
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlHTMLInputElementcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/HTMLInputElement.cpp (177663 => 177664)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/html/HTMLInputElement.cpp 2014-12-23 00:02:45 UTC (rev 177663)
+++ trunk/Source/WebCore/html/HTMLInputElement.cpp 2014-12-23 00:38:52 UTC (rev 177664)
</span><span class="lines">@@ -616,12 +616,14 @@
</span><span class="cx"> if (type.isNull()) {
</span><span class="cx"> m_inputType = InputType::createText(*this);
</span><span class="cx"> ensureUserAgentShadowRoot();
</span><ins>+ setNeedsWillValidateCheck();
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> m_hasType = true;
</span><span class="cx"> m_inputType = InputType::create(*this, type);
</span><span class="cx"> ensureUserAgentShadowRoot();
</span><ins>+ setNeedsWillValidateCheck();
</ins><span class="cx"> registerForSuspensionCallbackIfNeeded();
</span><span class="cx"> runPostTypeUpdateTasks();
</span><span class="cx"> }
</span></span></pre>
</div>
</div>
</body>
</html>