Form elements should match :valid and :invalid based on their associated elements
authorbenjamin@webkit.org <benjamin@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 23 Dec 2014 00:38:52 +0000 (00:38 +0000)
committerbenjamin@webkit.org <benjamin@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 23 Dec 2014 00:38:52 +0000 (00:38 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@177664 268f45cc-cd09-0410-ab3c-d52691b4dbfc

36 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css/pseudo-invalid-form-and-fieldset-basics-expected.html [new file with mode: 0644]
LayoutTests/fast/css/pseudo-invalid-form-and-fieldset-basics.html [new file with mode: 0644]
LayoutTests/fast/css/pseudo-invalid-form-basics-expected.html [new file with mode: 0644]
LayoutTests/fast/css/pseudo-invalid-form-basics.html [new file with mode: 0644]
LayoutTests/fast/css/pseudo-invalid-form-dynamically-created-basics-expected.html [new file with mode: 0644]
LayoutTests/fast/css/pseudo-invalid-form-dynamically-created-basics.html [new file with mode: 0644]
LayoutTests/fast/css/pseudo-invalid-form-invalidation-optimization-expected.txt [new file with mode: 0644]
LayoutTests/fast/css/pseudo-invalid-form-invalidation-optimization.html [new file with mode: 0644]
LayoutTests/fast/css/pseudo-valid-form-and-fieldset-basics-expected.html [new file with mode: 0644]
LayoutTests/fast/css/pseudo-valid-form-and-fieldset-basics.html [new file with mode: 0644]
LayoutTests/fast/css/pseudo-valid-form-basics-expected.html [new file with mode: 0644]
LayoutTests/fast/css/pseudo-valid-form-basics.html [new file with mode: 0644]
LayoutTests/fast/css/pseudo-valid-form-dynamically-created-basics-expected.html [new file with mode: 0644]
LayoutTests/fast/css/pseudo-valid-form-dynamically-created-basics.html [new file with mode: 0644]
LayoutTests/fast/css/pseudo-valid-form-invalidation-optimization-expected.txt [new file with mode: 0644]
LayoutTests/fast/css/pseudo-valid-form-invalidation-optimization.html [new file with mode: 0644]
LayoutTests/fast/selectors/invalid-form-style-update-1-expected.txt [new file with mode: 0644]
LayoutTests/fast/selectors/invalid-form-style-update-1.html [new file with mode: 0644]
LayoutTests/fast/selectors/invalid-form-style-update-2-expected.txt [new file with mode: 0644]
LayoutTests/fast/selectors/invalid-form-style-update-2.html [new file with mode: 0644]
LayoutTests/fast/selectors/invalid-form-style-update-3-expected.txt [new file with mode: 0644]
LayoutTests/fast/selectors/invalid-form-style-update-3.html [new file with mode: 0644]
LayoutTests/fast/selectors/valid-form-style-update-1-expected.txt [new file with mode: 0644]
LayoutTests/fast/selectors/valid-form-style-update-1.html [new file with mode: 0644]
LayoutTests/fast/selectors/valid-form-style-update-2-expected.txt [new file with mode: 0644]
LayoutTests/fast/selectors/valid-form-style-update-2.html [new file with mode: 0644]
LayoutTests/fast/selectors/valid-form-style-update-3-expected.txt [new file with mode: 0644]
LayoutTests/fast/selectors/valid-form-style-update-3.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/css/StyleResolver.cpp
Source/WebCore/html/HTMLFormControlElement.cpp
Source/WebCore/html/HTMLFormControlElement.h
Source/WebCore/html/HTMLFormElement.cpp
Source/WebCore/html/HTMLFormElement.h
Source/WebCore/html/HTMLInputElement.cpp

index edac69b..dee68de 100644 (file)
@@ -1,3 +1,42 @@
+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.
+
 2014-12-22  Alexey Proskuryakov  <ap@apple.com>
 
         compositing/rtl/rtl-fixed-overflow-scrolled.html had a 1600x1200 expected PNG
diff --git a/LayoutTests/fast/css/pseudo-invalid-form-and-fieldset-basics-expected.html b/LayoutTests/fast/css/pseudo-invalid-form-and-fieldset-basics-expected.html
new file mode 100644 (file)
index 0000000..390366b
--- /dev/null
@@ -0,0 +1,101 @@
+<!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>
diff --git a/LayoutTests/fast/css/pseudo-invalid-form-and-fieldset-basics.html b/LayoutTests/fast/css/pseudo-invalid-form-and-fieldset-basics.html
new file mode 100644 (file)
index 0000000..6c5071d
--- /dev/null
@@ -0,0 +1,107 @@
+<!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>
diff --git a/LayoutTests/fast/css/pseudo-invalid-form-basics-expected.html b/LayoutTests/fast/css/pseudo-invalid-form-basics-expected.html
new file mode 100644 (file)
index 0000000..a02c3f8
--- /dev/null
@@ -0,0 +1,52 @@
+<!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>
diff --git a/LayoutTests/fast/css/pseudo-invalid-form-basics.html b/LayoutTests/fast/css/pseudo-invalid-form-basics.html
new file mode 100644 (file)
index 0000000..606fb51
--- /dev/null
@@ -0,0 +1,57 @@
+<!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>
diff --git a/LayoutTests/fast/css/pseudo-invalid-form-dynamically-created-basics-expected.html b/LayoutTests/fast/css/pseudo-invalid-form-dynamically-created-basics-expected.html
new file mode 100644 (file)
index 0000000..4605f52
--- /dev/null
@@ -0,0 +1,52 @@
+<!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>
diff --git a/LayoutTests/fast/css/pseudo-invalid-form-dynamically-created-basics.html b/LayoutTests/fast/css/pseudo-invalid-form-dynamically-created-basics.html
new file mode 100644 (file)
index 0000000..ca3bb1f
--- /dev/null
@@ -0,0 +1,90 @@
+<!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>
diff --git a/LayoutTests/fast/css/pseudo-invalid-form-invalidation-optimization-expected.txt b/LayoutTests/fast/css/pseudo-invalid-form-invalidation-optimization-expected.txt
new file mode 100644 (file)
index 0000000..c0dea3b
--- /dev/null
@@ -0,0 +1,51 @@
+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
+     
+      
+     
diff --git a/LayoutTests/fast/css/pseudo-invalid-form-invalidation-optimization.html b/LayoutTests/fast/css/pseudo-invalid-form-invalidation-optimization.html
new file mode 100644 (file)
index 0000000..ac0e837
--- /dev/null
@@ -0,0 +1,121 @@
+<!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>
diff --git a/LayoutTests/fast/css/pseudo-valid-form-and-fieldset-basics-expected.html b/LayoutTests/fast/css/pseudo-valid-form-and-fieldset-basics-expected.html
new file mode 100644 (file)
index 0000000..c1f2d07
--- /dev/null
@@ -0,0 +1,101 @@
+<!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>
diff --git a/LayoutTests/fast/css/pseudo-valid-form-and-fieldset-basics.html b/LayoutTests/fast/css/pseudo-valid-form-and-fieldset-basics.html
new file mode 100644 (file)
index 0000000..3633614
--- /dev/null
@@ -0,0 +1,107 @@
+<!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>
diff --git a/LayoutTests/fast/css/pseudo-valid-form-basics-expected.html b/LayoutTests/fast/css/pseudo-valid-form-basics-expected.html
new file mode 100644 (file)
index 0000000..041a837
--- /dev/null
@@ -0,0 +1,52 @@
+<!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>
diff --git a/LayoutTests/fast/css/pseudo-valid-form-basics.html b/LayoutTests/fast/css/pseudo-valid-form-basics.html
new file mode 100644 (file)
index 0000000..c7a025c
--- /dev/null
@@ -0,0 +1,58 @@
+<!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>
diff --git a/LayoutTests/fast/css/pseudo-valid-form-dynamically-created-basics-expected.html b/LayoutTests/fast/css/pseudo-valid-form-dynamically-created-basics-expected.html
new file mode 100644 (file)
index 0000000..0b9b0d4
--- /dev/null
@@ -0,0 +1,52 @@
+<!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>
diff --git a/LayoutTests/fast/css/pseudo-valid-form-dynamically-created-basics.html b/LayoutTests/fast/css/pseudo-valid-form-dynamically-created-basics.html
new file mode 100644 (file)
index 0000000..49da041
--- /dev/null
@@ -0,0 +1,90 @@
+<!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>
diff --git a/LayoutTests/fast/css/pseudo-valid-form-invalidation-optimization-expected.txt b/LayoutTests/fast/css/pseudo-valid-form-invalidation-optimization-expected.txt
new file mode 100644 (file)
index 0000000..2af2453
--- /dev/null
@@ -0,0 +1,51 @@
+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
+     
+      
+     
diff --git a/LayoutTests/fast/css/pseudo-valid-form-invalidation-optimization.html b/LayoutTests/fast/css/pseudo-valid-form-invalidation-optimization.html
new file mode 100644 (file)
index 0000000..9faf252
--- /dev/null
@@ -0,0 +1,121 @@
+<!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>
diff --git a/LayoutTests/fast/selectors/invalid-form-style-update-1-expected.txt b/LayoutTests/fast/selectors/invalid-form-style-update-1-expected.txt
new file mode 100644 (file)
index 0000000..56977bb
--- /dev/null
@@ -0,0 +1,259 @@
+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
+
diff --git a/LayoutTests/fast/selectors/invalid-form-style-update-1.html b/LayoutTests/fast/selectors/invalid-form-style-update-1.html
new file mode 100644 (file)
index 0000000..734c1b1
--- /dev/null
@@ -0,0 +1,171 @@
+<!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>
diff --git a/LayoutTests/fast/selectors/invalid-form-style-update-2-expected.txt b/LayoutTests/fast/selectors/invalid-form-style-update-2-expected.txt
new file mode 100644 (file)
index 0000000..88715b7
--- /dev/null
@@ -0,0 +1,369 @@
+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
+
diff --git a/LayoutTests/fast/selectors/invalid-form-style-update-2.html b/LayoutTests/fast/selectors/invalid-form-style-update-2.html
new file mode 100644 (file)
index 0000000..fddfaa2
--- /dev/null
@@ -0,0 +1,136 @@
+<!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>
diff --git a/LayoutTests/fast/selectors/invalid-form-style-update-3-expected.txt b/LayoutTests/fast/selectors/invalid-form-style-update-3-expected.txt
new file mode 100644 (file)
index 0000000..c684975
--- /dev/null
@@ -0,0 +1,225 @@
+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
+
diff --git a/LayoutTests/fast/selectors/invalid-form-style-update-3.html b/LayoutTests/fast/selectors/invalid-form-style-update-3.html
new file mode 100644 (file)
index 0000000..cd10741
--- /dev/null
@@ -0,0 +1,185 @@
+<!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>
diff --git a/LayoutTests/fast/selectors/valid-form-style-update-1-expected.txt b/LayoutTests/fast/selectors/valid-form-style-update-1-expected.txt
new file mode 100644 (file)
index 0000000..dd3b7e4
--- /dev/null
@@ -0,0 +1,259 @@
+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
+
diff --git a/LayoutTests/fast/selectors/valid-form-style-update-1.html b/LayoutTests/fast/selectors/valid-form-style-update-1.html
new file mode 100644 (file)
index 0000000..3f6151d
--- /dev/null
@@ -0,0 +1,171 @@
+<!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>
diff --git a/LayoutTests/fast/selectors/valid-form-style-update-2-expected.txt b/LayoutTests/fast/selectors/valid-form-style-update-2-expected.txt
new file mode 100644 (file)
index 0000000..77cd9a5
--- /dev/null
@@ -0,0 +1,369 @@
+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
+
diff --git a/LayoutTests/fast/selectors/valid-form-style-update-2.html b/LayoutTests/fast/selectors/valid-form-style-update-2.html
new file mode 100644 (file)
index 0000000..c452dd8
--- /dev/null
@@ -0,0 +1,136 @@
+<!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>
diff --git a/LayoutTests/fast/selectors/valid-form-style-update-3-expected.txt b/LayoutTests/fast/selectors/valid-form-style-update-3-expected.txt
new file mode 100644 (file)
index 0000000..999bb67
--- /dev/null
@@ -0,0 +1,225 @@
+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
+
diff --git a/LayoutTests/fast/selectors/valid-form-style-update-3.html b/LayoutTests/fast/selectors/valid-form-style-update-3.html
new file mode 100644 (file)
index 0000000..b9ccbe4
--- /dev/null
@@ -0,0 +1,185 @@
+<!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>
index d15c3b6..7255d0e 100644 (file)
@@ -1,3 +1,74 @@
+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.
+
 2014-12-22  Anders Carlsson  <andersca@apple.com>
 
         Try to fix the Windows build.
index 09332d0..e4a84e7 100644 (file)
@@ -520,12 +520,6 @@ bool StyleResolver::canShareStyleWithControl(StyledElement* element) const
     if (element->isDefaultButtonForForm() != state.element()->isDefaultButtonForForm())
         return false;
 
-    if (element->matchesValidPseudoClass() != state.element()->matchesValidPseudoClass())
-        return false;
-
-    if (element->matchesInvalidPseudoClass() != state.element()->matchesValidPseudoClass())
-        return false;
-
     if (element->isInRange() != state.element()->isInRange())
         return false;
 
@@ -652,6 +646,12 @@ bool StyleResolver::canShareStyleWithElement(StyledElement* element) const
         }
     }
 
+    if (element->matchesValidPseudoClass() != state.element()->matchesValidPseudoClass())
+        return false;
+
+    if (element->matchesInvalidPseudoClass() != state.element()->matchesValidPseudoClass())
+        return false;
+
 #if ENABLE(VIDEO_TRACK)
     // Deny sharing styles between WebVTT and non-WebVTT nodes.
     if (is<WebVTTElement>(*state.element()))
index 38f71ac..69da62d 100644 (file)
@@ -67,6 +67,9 @@ HTMLFormControlElement::HTMLFormControlElement(const QualifiedName& tagName, Doc
 
 HTMLFormControlElement::~HTMLFormControlElement()
 {
+    // The calls willChangeForm() and didChangeForm() are virtual, we want the
+    // form to be reset while this object still exists.
+    setForm(nullptr);
 }
 
 String HTMLFormControlElement::formEnctype() const
@@ -417,8 +420,11 @@ void HTMLFormControlElement::setNeedsWillValidateCheck()
     updateValidity();
     setNeedsStyleRecalc();
 
-    if (!m_willValidate && !wasValid)
+    if (!m_willValidate && !wasValid) {
         removeInvalidElementToAncestorFromInsertionPoint(*this, parentNode());
+        if (HTMLFormElement* form = this->form())
+            form->removeInvalidAssociatedFormControlIfNeeded(*this);
+    }
 
     if (!m_willValidate)
         hideVisibleValidationMessage();
@@ -464,6 +470,22 @@ inline bool HTMLFormControlElement::isValidFormControlElement() const
     return m_isValid;
 }
 
+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);
+    }
+}
+
 void HTMLFormControlElement::updateValidity()
 {
     bool willValidate = this->willValidate();
@@ -475,10 +497,15 @@ void HTMLFormControlElement::updateValidity()
         // Update style for pseudo classes such as :valid :invalid.
         setNeedsStyleRecalc();
 
-        if (!m_isValid)
+        if (!m_isValid) {
             addInvalidElementToAncestorFromInsertionPoint(*this, parentNode());
-        else
+            if (HTMLFormElement* form = this->form())
+                form->registerInvalidAssociatedFormControl(*this);
+        } else {
             removeInvalidElementToAncestorFromInsertionPoint(*this, parentNode());
+            if (HTMLFormElement* form = this->form())
+                form->removeInvalidAssociatedFormControlIfNeeded(*this);
+        }
     }
 
     // Updates only if this control already has a validtion message.
index 7b00d2f..23fdc08 100644 (file)
@@ -146,6 +146,9 @@ protected:
 
     bool validationMessageShadowTreeContains(const Node&) const;
 
+    virtual void willChangeForm() override;
+    virtual void didChangeForm() override;
+
 private:
     virtual void refFormAssociatedElement() override { ref(); }
     virtual void derefFormAssociatedElement() override { deref(); }
index 63b8732..221f184 100644 (file)
@@ -622,6 +622,24 @@ void HTMLFormElement::removeFormElement(FormAssociatedElement* e)
     removeFromVector(m_associatedElements, e);
 }
 
+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();
+    }
+}
+
 bool HTMLFormElement::isURLAttribute(const Attribute& attribute) const
 {
     return attribute.name() == actionAttr || HTMLElement::isURLAttribute(attribute);
@@ -787,6 +805,16 @@ void HTMLFormElement::removeFromPastNamesMap(FormNamedItem* item)
     }
 }
 
+bool HTMLFormElement::matchesValidPseudoClass() const
+{
+    return m_invalidAssociatedFormControls.isEmpty();
+}
+
+bool HTMLFormElement::matchesInvalidPseudoClass() const
+{
+    return !m_invalidAssociatedFormControls.isEmpty();
+}
+
 bool HTMLFormElement::hasNamedElement(const AtomicString& name)
 {
     return elements()->hasNamedItem(name) || elementFromPastNamesMap(name);
index 38aab49..9a369e4 100644 (file)
@@ -78,6 +78,9 @@ public:
     void registerFormElement(FormAssociatedElement*);
     void removeFormElement(FormAssociatedElement*);
 
+    void registerInvalidAssociatedFormControl(const HTMLFormControlElement&);
+    void removeInvalidAssociatedFormControlIfNeeded(const HTMLFormControlElement&);
+
     void registerImgElement(HTMLImageElement*);
     void removeImgElement(HTMLImageElement*);
 
@@ -173,6 +176,9 @@ private:
     void assertItemCanBeInPastNamesMap(FormNamedItem*) const;
     void removeFromPastNamesMap(FormNamedItem*);
 
+    virtual bool matchesValidPseudoClass() const override;
+    virtual bool matchesInvalidPseudoClass() const override;
+
     typedef HashMap<RefPtr<AtomicStringImpl>, FormNamedItem*> PastNamesMap;
 
     FormSubmission::Attributes m_attributes;
@@ -184,6 +190,7 @@ private:
     unsigned m_associatedElementsAfterIndex;
     Vector<FormAssociatedElement*> m_associatedElements;
     Vector<HTMLImageElement*> m_imageElements;
+    HashSet<const HTMLFormControlElement*> m_invalidAssociatedFormControls;
 
     bool m_wasUserSubmitted;
     bool m_isSubmittingOrPreparingForSubmission;
index a219b9f..47e92ce 100644 (file)
@@ -616,12 +616,14 @@ inline void HTMLInputElement::initializeInputType()
     if (type.isNull()) {
         m_inputType = InputType::createText(*this);
         ensureUserAgentShadowRoot();
+        setNeedsWillValidateCheck();
         return;
     }
 
     m_hasType = true;
     m_inputType = InputType::create(*this, type);
     ensureUserAgentShadowRoot();
+    setNeedsWillValidateCheck();
     registerForSuspensionCallbackIfNeeded();
     runPostTypeUpdateTasks();
 }