summaryrefslogtreecommitdiff
path: root/layout/reftests/css-invalid
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/css-invalid')
-rw-r--r--layout/reftests/css-invalid/button/button-button.html9
-rw-r--r--layout/reftests/css-invalid/button/button-disabled-fieldset-1.html22
-rw-r--r--layout/reftests/css-invalid/button/button-disabled-fieldset-2.html25
-rw-r--r--layout/reftests/css-invalid/button/button-disabled-ref.html6
-rw-r--r--layout/reftests/css-invalid/button/button-disabled.html9
-rw-r--r--layout/reftests/css-invalid/button/button-dyn-disabled.html18
-rw-r--r--layout/reftests/css-invalid/button/button-dyn-not-disabled.html19
-rw-r--r--layout/reftests/css-invalid/button/button-fieldset-legend-ref.html10
-rw-r--r--layout/reftests/css-invalid/button/button-fieldset-legend.html22
-rw-r--r--layout/reftests/css-invalid/button/button-fieldset-ref.html10
-rw-r--r--layout/reftests/css-invalid/button/button-invalid.html9
-rw-r--r--layout/reftests/css-invalid/button/button-ref.html6
-rw-r--r--layout/reftests/css-invalid/button/button-reset.html9
-rw-r--r--layout/reftests/css-invalid/button/button-type-barred.html19
-rw-r--r--layout/reftests/css-invalid/button/button-type-invalid.html19
-rw-r--r--layout/reftests/css-invalid/button/button-valid.html9
-rw-r--r--layout/reftests/css-invalid/button/reftest-stylo.list13
-rw-r--r--layout/reftests/css-invalid/button/reftest.list12
-rw-r--r--layout/reftests/css-invalid/button/style.css18
-rw-r--r--layout/reftests/css-invalid/default-style/button-ref.html7
-rw-r--r--layout/reftests/css-invalid/default-style/button.html14
-rw-r--r--layout/reftests/css-invalid/default-style/fieldset-ref.html7
-rw-r--r--layout/reftests/css-invalid/default-style/fieldset.html14
-rw-r--r--layout/reftests/css-invalid/default-style/input-ref.html7
-rw-r--r--layout/reftests/css-invalid/default-style/input.html14
-rw-r--r--layout/reftests/css-invalid/default-style/reftest-stylo.list6
-rw-r--r--layout/reftests/css-invalid/default-style/reftest.list5
-rw-r--r--layout/reftests/css-invalid/default-style/select-ref.html7
-rw-r--r--layout/reftests/css-invalid/default-style/select.html14
-rw-r--r--layout/reftests/css-invalid/default-style/style.css9
-rw-r--r--layout/reftests/css-invalid/default-style/textarea-ref.html7
-rw-r--r--layout/reftests/css-invalid/default-style/textarea.html14
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-add-invalid-barred.html22
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-add-invalid-element-dynamic.html21
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-add-invalid-element.html22
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-add-invalid-with-valid-element.html22
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-add-valid-element.html22
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-add-valid-with-invalid-element.html22
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-add-valid-with-no-element.html21
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-div-invalid.html17
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-dynamic-invalid-barred.html22
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-dynamic-invalid-not-barred.html20
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-dynamic-invalid.html21
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-dynamic-valid.html21
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-invalid-and-barred-remove-barred.html23
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-invalid-and-barred-remove-invalid.html23
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-invalid-and-barred.html15
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-invalid.html12
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-is-barred.html11
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-nested-barred-ref.html11
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-nested-barred.html24
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-nested-invalid.html17
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-nested-valid-invalid-ref.html22
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-nested-valid-invalid.html21
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-remove-invalid-element.html21
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-static-invalid-barred.html13
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-static-invalid.html14
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-static-valid.html14
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-valid-and-barred-remove-barred.html23
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-valid-and-barred.html15
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-valid.html14
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-with-invalid-element-add-barred-dynamic.html23
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-with-valid-and-invalid.html15
-rw-r--r--layout/reftests/css-invalid/fieldset/fieldset-with-valid-element-add-barred-dynamic.html23
-rw-r--r--layout/reftests/css-invalid/fieldset/reftest-stylo.list30
-rw-r--r--layout/reftests/css-invalid/fieldset/reftest.list29
-rw-r--r--layout/reftests/css-invalid/form/form-add-control.html22
-rw-r--r--layout/reftests/css-invalid/form/form-add-invalid-element-dynamic.html21
-rw-r--r--layout/reftests/css-invalid/form/form-add-invalid-element.html22
-rw-r--r--layout/reftests/css-invalid/form/form-add-invalid-with-valid-element.html22
-rw-r--r--layout/reftests/css-invalid/form/form-add-valid-element.html22
-rw-r--r--layout/reftests/css-invalid/form/form-add-valid-with-invalid-element.html22
-rw-r--r--layout/reftests/css-invalid/form/form-add-valid-with-no-element.html21
-rw-r--r--layout/reftests/css-invalid/form/form-dynamic-invalid-barred.html22
-rw-r--r--layout/reftests/css-invalid/form/form-dynamic-invalid-not-barred.html20
-rw-r--r--layout/reftests/css-invalid/form/form-dynamic-invalid.html22
-rw-r--r--layout/reftests/css-invalid/form/form-dynamic-valid.html21
-rw-r--r--layout/reftests/css-invalid/form/form-invalid-and-barred-remove-barred.html23
-rw-r--r--layout/reftests/css-invalid/form/form-invalid-and-barred.html15
-rw-r--r--layout/reftests/css-invalid/form/form-invalid-barred-ref.html8
-rw-r--r--layout/reftests/css-invalid/form/form-invalid-barred.html15
-rw-r--r--layout/reftests/css-invalid/form/form-invalid-ref-2.html8
-rw-r--r--layout/reftests/css-invalid/form/form-invalid-ref.html5
-rw-r--r--layout/reftests/css-invalid/form/form-remove-invalid-element.html21
-rw-r--r--layout/reftests/css-invalid/form/form-static-invalid-barred.html13
-rw-r--r--layout/reftests/css-invalid/form/form-static-invalid.html14
-rw-r--r--layout/reftests/css-invalid/form/form-static-valid.html14
-rw-r--r--layout/reftests/css-invalid/form/form-valid-and-barred-ref.html9
-rw-r--r--layout/reftests/css-invalid/form/form-valid-and-barred-remove-barred.html23
-rw-r--r--layout/reftests/css-invalid/form/form-valid-and-barred.html15
-rw-r--r--layout/reftests/css-invalid/form/form-valid-ref-2.html7
-rw-r--r--layout/reftests/css-invalid/form/form-valid-ref-4.html9
-rw-r--r--layout/reftests/css-invalid/form/form-valid-ref.html8
-rw-r--r--layout/reftests/css-invalid/form/form-with-invalid-element-add-barred-dynamic.html23
-rw-r--r--layout/reftests/css-invalid/form/form-with-valid-and-invalid.html15
-rw-r--r--layout/reftests/css-invalid/form/form-with-valid-element-add-barred-dynamic.html23
-rw-r--r--layout/reftests/css-invalid/form/reftest-stylo.list25
-rw-r--r--layout/reftests/css-invalid/form/reftest.list24
-rw-r--r--layout/reftests/css-invalid/input/input-button-ref.html7
-rw-r--r--layout/reftests/css-invalid/input/input-button.html9
-rw-r--r--layout/reftests/css-invalid/input/input-customerror.html18
-rw-r--r--layout/reftests/css-invalid/input/input-disabled-fieldset-1.html14
-rw-r--r--layout/reftests/css-invalid/input/input-disabled-fieldset-2.html23
-rw-r--r--layout/reftests/css-invalid/input/input-disabled.html9
-rw-r--r--layout/reftests/css-invalid/input/input-dyn-disabled.html18
-rw-r--r--layout/reftests/css-invalid/input/input-dyn-not-disabled.html19
-rw-r--r--layout/reftests/css-invalid/input/input-dyn-not-readonly.html9
-rw-r--r--layout/reftests/css-invalid/input/input-dyn-readonly.html9
-rw-r--r--layout/reftests/css-invalid/input/input-email-invalid.html10
-rw-r--r--layout/reftests/css-invalid/input/input-email-ref.html7
-rw-r--r--layout/reftests/css-invalid/input/input-email-valid.html10
-rw-r--r--layout/reftests/css-invalid/input/input-fieldset-legend-ref.html11
-rw-r--r--layout/reftests/css-invalid/input/input-fieldset-legend.html14
-rw-r--r--layout/reftests/css-invalid/input/input-fieldset-ref.html11
-rw-r--r--layout/reftests/css-invalid/input/input-image-ref.html7
-rw-r--r--layout/reftests/css-invalid/input/input-image.html9
-rw-r--r--layout/reftests/css-invalid/input/input-pattern-invalid.html10
-rw-r--r--layout/reftests/css-invalid/input/input-pattern-valid.html10
-rw-r--r--layout/reftests/css-invalid/input/input-radio-checked-ref.html8
-rw-r--r--layout/reftests/css-invalid/input/input-radio-customerror.html11
-rw-r--r--layout/reftests/css-invalid/input/input-radio-dyn-valid-1.html11
-rw-r--r--layout/reftests/css-invalid/input/input-radio-dyn-valid-2.html11
-rw-r--r--layout/reftests/css-invalid/input/input-radio-focus-click.html30
-rw-r--r--layout/reftests/css-invalid/input/input-radio-nogroup-required-invalid.html8
-rw-r--r--layout/reftests/css-invalid/input/input-radio-nogroup-required-valid.html8
-rw-r--r--layout/reftests/css-invalid/input/input-radio-ref.html8
-rw-r--r--layout/reftests/css-invalid/input/input-radio-required.html10
-rw-r--r--layout/reftests/css-invalid/input/input-readonly.html9
-rw-r--r--layout/reftests/css-invalid/input/input-ref.html7
-rw-r--r--layout/reftests/css-invalid/input/input-required-invalid.html10
-rw-r--r--layout/reftests/css-invalid/input/input-required-valid.html10
-rw-r--r--layout/reftests/css-invalid/input/input-reset.html10
-rw-r--r--layout/reftests/css-invalid/input/input-submit-ref.html7
-rw-r--r--layout/reftests/css-invalid/input/input-submit.html9
-rw-r--r--layout/reftests/css-invalid/input/input-type-barred.html10
-rw-r--r--layout/reftests/css-invalid/input/input-type-invalid.html20
-rw-r--r--layout/reftests/css-invalid/input/input-url-invalid.html10
-rw-r--r--layout/reftests/css-invalid/input/input-url-ref.html7
-rw-r--r--layout/reftests/css-invalid/input/input-url-valid.html10
-rw-r--r--layout/reftests/css-invalid/input/input-valid.html9
-rw-r--r--layout/reftests/css-invalid/input/input-withtext-ref.html7
-rw-r--r--layout/reftests/css-invalid/input/reftest-stylo.list38
-rw-r--r--layout/reftests/css-invalid/input/reftest.list33
-rw-r--r--layout/reftests/css-invalid/input/style.css26
-rw-r--r--layout/reftests/css-invalid/output/output-invalid.html9
-rw-r--r--layout/reftests/css-invalid/output/output-ref.html7
-rw-r--r--layout/reftests/css-invalid/output/output-valid.html9
-rw-r--r--layout/reftests/css-invalid/output/reftest-stylo.list3
-rw-r--r--layout/reftests/css-invalid/output/reftest.list2
-rw-r--r--layout/reftests/css-invalid/output/style.css22
-rw-r--r--layout/reftests/css-invalid/reftest-stylo.list15
-rw-r--r--layout/reftests/css-invalid/reftest.list14
-rw-r--r--layout/reftests/css-invalid/select/reftest-stylo.list16
-rw-r--r--layout/reftests/css-invalid/select/reftest.list12
-rw-r--r--layout/reftests/css-invalid/select/select-disabled-fieldset-1.html22
-rw-r--r--layout/reftests/css-invalid/select/select-disabled-fieldset-2.html25
-rw-r--r--layout/reftests/css-invalid/select/select-disabled-ref.html6
-rw-r--r--layout/reftests/css-invalid/select/select-disabled.html9
-rw-r--r--layout/reftests/css-invalid/select/select-dyn-disabled.html18
-rw-r--r--layout/reftests/css-invalid/select/select-dyn-not-disabled.html19
-rw-r--r--layout/reftests/css-invalid/select/select-fieldset-legend-ref.html10
-rw-r--r--layout/reftests/css-invalid/select/select-fieldset-legend.html22
-rw-r--r--layout/reftests/css-invalid/select/select-fieldset-ref.html10
-rw-r--r--layout/reftests/css-invalid/select/select-invalid.html9
-rw-r--r--layout/reftests/css-invalid/select/select-ref.html6
-rw-r--r--layout/reftests/css-invalid/select/select-required-invalid.html11
-rw-r--r--layout/reftests/css-invalid/select/select-required-multiple-invalid.html12
-rw-r--r--layout/reftests/css-invalid/select/select-required-multiple-ref.html10
-rw-r--r--layout/reftests/css-invalid/select/select-required-multiple-valid.html12
-rw-r--r--layout/reftests/css-invalid/select/select-required-ref.html9
-rw-r--r--layout/reftests/css-invalid/select/select-required-valid.html11
-rw-r--r--layout/reftests/css-invalid/select/select-valid.html9
-rw-r--r--layout/reftests/css-invalid/select/style.css18
-rw-r--r--layout/reftests/css-invalid/textarea/reftest-stylo.list16
-rw-r--r--layout/reftests/css-invalid/textarea/reftest.list13
-rw-r--r--layout/reftests/css-invalid/textarea/style.css26
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-customerror.html18
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-disabled-fieldset-1.html14
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-disabled-fieldset-2.html23
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-disabled.html9
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-dyn-disabled.html19
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-dyn-not-disabled.html20
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-dyn-not-readonly.html18
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-dyn-readonly.html18
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-fieldset-legend-ref.html11
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-fieldset-legend.html14
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-fieldset-ref.html11
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-readonly.html9
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-ref.html7
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-required-invalid.html10
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-required-valid.html10
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-valid.html9
-rw-r--r--layout/reftests/css-invalid/textarea/textarea-withtext-ref.html7
193 files changed, 2819 insertions, 0 deletions
diff --git a/layout/reftests/css-invalid/button/button-button.html b/layout/reftests/css-invalid/button/button-button.html
new file mode 100644
index 0000000000..41e76115b0
--- /dev/null
+++ b/layout/reftests/css-invalid/button/button-button.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if button is of the button type, it is barred from constraint
+ validation and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body onload="document.getElementById('b').setCustomValidity('foo'); document.documentElement.className='';">
+ <button class='notinvalid' id='b' type='button'></button>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/button/button-disabled-fieldset-1.html b/layout/reftests/css-invalid/button/button-disabled-fieldset-1.html
new file mode 100644
index 0000000000..4ce9b30dc3
--- /dev/null
+++ b/layout/reftests/css-invalid/button/button-disabled-fieldset-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if button has a disabled fieldset ancestor, it is barred from
+ constraint validation and should not be affected by :invalid
+ pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onLoadHandler()
+ {
+ var e = document.getElementById('b');
+ e.setCustomValidity('foo');
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onLoadHandler();">
+ <fieldset disabled>
+ <fieldset>
+ <button class='notinvalid' id='b'></button>
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/button/button-disabled-fieldset-2.html b/layout/reftests/css-invalid/button/button-disabled-fieldset-2.html
new file mode 100644
index 0000000000..f5b2a9e7d6
--- /dev/null
+++ b/layout/reftests/css-invalid/button/button-disabled-fieldset-2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if button has a disabled fieldset ancestor, it is barred from
+ constraint validation and should not be affected by :invalid
+ pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onloadHandler()
+ {
+ var e = document.getElementById('b');
+ e.setCustomValidity('foo');
+ var fieldsets = document.getElementsByTagName("fieldset");
+ fieldsets[1].disabled = true;
+ fieldsets[0].disabled = false;
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onloadHandler();">
+ <fieldset disabled>
+ <fieldset>
+ <button class='notinvalid' id='b'></button>
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/button/button-disabled-ref.html b/layout/reftests/css-invalid/button/button-disabled-ref.html
new file mode 100644
index 0000000000..7de1ba7c5c
--- /dev/null
+++ b/layout/reftests/css-invalid/button/button-disabled-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <button style="background-color: green;" disabled></button>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/button/button-disabled.html b/layout/reftests/css-invalid/button/button-disabled.html
new file mode 100644
index 0000000000..73760ee3df
--- /dev/null
+++ b/layout/reftests/css-invalid/button/button-disabled.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if button is disabled, it is barred from constraint validation
+ and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <button class='notinvalid' disabled></button>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/button/button-dyn-disabled.html b/layout/reftests/css-invalid/button/button-dyn-disabled.html
new file mode 100644
index 0000000000..1c7350d722
--- /dev/null
+++ b/layout/reftests/css-invalid/button/button-dyn-disabled.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if button is disabled and invalid, it is barred from constraint
+ validation and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onLoadHandler()
+ {
+ var e = document.getElementById('b');
+ e.setCustomValidity('foo');
+ e.disabled = 'true';
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onLoadHandler();">
+ <button class='notinvalid' id='b'></button>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/button/button-dyn-not-disabled.html b/layout/reftests/css-invalid/button/button-dyn-not-disabled.html
new file mode 100644
index 0000000000..7ae667b8ec
--- /dev/null
+++ b/layout/reftests/css-invalid/button/button-dyn-not-disabled.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if button is not disabled and invalid, it is candidate for
+ constraint validation and should be affected
+ by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onLoadHandler()
+ {
+ var e = document.getElementById('b');
+ e.setCustomValidity('foo');
+ e.removeAttribute('disabled');
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onLoadHandler();">
+ <button class='invalid' id='b' disabled></button>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/button/button-fieldset-legend-ref.html b/layout/reftests/css-invalid/button/button-fieldset-legend-ref.html
new file mode 100644
index 0000000000..22adc433cd
--- /dev/null
+++ b/layout/reftests/css-invalid/button/button-fieldset-legend-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <fieldset>
+ <legend>
+ <button style="background-color: green;"></button>
+ </legend>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/button/button-fieldset-legend.html b/layout/reftests/css-invalid/button/button-fieldset-legend.html
new file mode 100644
index 0000000000..f308cc42ee
--- /dev/null
+++ b/layout/reftests/css-invalid/button/button-fieldset-legend.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if button has a disabled fieldset ancestor, but is in the first
+ legend, it is not barred from constraint validation and should be
+ affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onLoadHandler()
+ {
+ var e = document.getElementById('b');
+ e.setCustomValidity('foo');
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onLoadHandler();">
+ <fieldset disabled>
+ <legend>
+ <button class='invalid' id='b'></button>
+ </legend>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/button/button-fieldset-ref.html b/layout/reftests/css-invalid/button/button-fieldset-ref.html
new file mode 100644
index 0000000000..60ab1a3ef0
--- /dev/null
+++ b/layout/reftests/css-invalid/button/button-fieldset-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <fieldset>
+ <fieldset disabled>
+ <button style="background-color: green;"></button>
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/button/button-invalid.html b/layout/reftests/css-invalid/button/button-invalid.html
new file mode 100644
index 0000000000..f4850ad422
--- /dev/null
+++ b/layout/reftests/css-invalid/button/button-invalid.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if button has a custom error, it should be affected by :invalid
+ pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body onload="document.getElementById('b').setCustomValidity('foo'); document.documentElement.className='';">
+ <button class='invalid' id='b'></button>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/button/button-ref.html b/layout/reftests/css-invalid/button/button-ref.html
new file mode 100644
index 0000000000..422cc9315f
--- /dev/null
+++ b/layout/reftests/css-invalid/button/button-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <button style="background-color: green;"></button>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/button/button-reset.html b/layout/reftests/css-invalid/button/button-reset.html
new file mode 100644
index 0000000000..45c57cab7b
--- /dev/null
+++ b/layout/reftests/css-invalid/button/button-reset.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if button is of the reset type, it is barred from constraint
+ validation and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body onload="document.getElementById('b').setCustomValidity('foo'); document.documentElement.className='';">
+ <button class='notinvalid' id='b' type='reset'></button>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/button/button-type-barred.html b/layout/reftests/css-invalid/button/button-type-barred.html
new file mode 100644
index 0000000000..3748615427
--- /dev/null
+++ b/layout/reftests/css-invalid/button/button-type-barred.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if a button has is candidate for constraint validation then change
+ its type to be barred from constraint validation, it should not be
+ affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onLoadHandler()
+ {
+ var b = document.getElementById('b');
+ b.setCustomValidity('foo');
+ b.type = 'button';
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="document.getElementById('b').type='button'; document.documentElement.className='';">
+ <button class='notinvalid' type='submit' id='b'></button>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/button/button-type-invalid.html b/layout/reftests/css-invalid/button/button-type-invalid.html
new file mode 100644
index 0000000000..a6e20d1a94
--- /dev/null
+++ b/layout/reftests/css-invalid/button/button-type-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if a button has a custom error when barred from constraint
+ validation then move a type candidate for constraint validation,
+ it should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onLoadHandler()
+ {
+ var b = document.getElementById('b');
+ b.setCustomValidity('foo');
+ b.type = 'submit';
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onLoadHandler();">
+ <button class='invalid' type='button' id='b'></button>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/button/button-valid.html b/layout/reftests/css-invalid/button/button-valid.html
new file mode 100644
index 0000000000..1b6f61ca24
--- /dev/null
+++ b/layout/reftests/css-invalid/button/button-valid.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if button has no custom error and is not barred from constraint
+ validation, it should be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <button class='notinvalid'</button>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/button/reftest-stylo.list b/layout/reftests/css-invalid/button/reftest-stylo.list
new file mode 100644
index 0000000000..df501b3db6
--- /dev/null
+++ b/layout/reftests/css-invalid/button/reftest-stylo.list
@@ -0,0 +1,13 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+fuzzy-if(skiaContent,1,3) == button-valid.html button-valid.html
+fails fuzzy-if(skiaContent,1,5) == button-invalid.html button-invalid.html
+== button-disabled.html button-disabled.html
+fuzzy-if(skiaContent,1,5) == button-dyn-disabled.html button-dyn-disabled.html
+fails fuzzy-if(skiaContent,1,5) == button-dyn-not-disabled.html button-dyn-not-disabled.html
+fuzzy-if(skiaContent,1,5) == button-button.html button-button.html
+fails fuzzy-if(skiaContent,1,5) == button-reset.html button-reset.html
+fails fuzzy-if(skiaContent,1,5) == button-type-invalid.html button-type-invalid.html
+fails fuzzy-if(skiaContent,1,5) == button-type-barred.html button-type-barred.html
+fuzzy-if(skiaContent,1,3) == button-disabled-fieldset-1.html button-disabled-fieldset-1.html
+fuzzy-if(skiaContent,1,3) == button-disabled-fieldset-2.html button-disabled-fieldset-2.html
+fuzzy-if(skiaContent,1,3) == button-fieldset-legend.html button-fieldset-legend.html
diff --git a/layout/reftests/css-invalid/button/reftest.list b/layout/reftests/css-invalid/button/reftest.list
new file mode 100644
index 0000000000..8e878faf3f
--- /dev/null
+++ b/layout/reftests/css-invalid/button/reftest.list
@@ -0,0 +1,12 @@
+fuzzy-if(skiaContent,1,3) == button-valid.html button-ref.html
+fuzzy-if(skiaContent,1,5) == button-invalid.html button-ref.html
+== button-disabled.html button-disabled-ref.html
+fuzzy-if(skiaContent,1,5) == button-dyn-disabled.html button-disabled-ref.html
+fuzzy-if(skiaContent,1,5) == button-dyn-not-disabled.html button-ref.html
+fuzzy-if(skiaContent,1,5) == button-button.html button-ref.html
+fuzzy-if(skiaContent,1,5) == button-reset.html button-ref.html
+fuzzy-if(skiaContent,1,5) == button-type-invalid.html button-ref.html
+fuzzy-if(skiaContent,1,5) == button-type-barred.html button-ref.html
+fuzzy-if(skiaContent,1,3) == button-disabled-fieldset-1.html button-fieldset-ref.html
+fuzzy-if(skiaContent,1,3) == button-disabled-fieldset-2.html button-fieldset-ref.html
+fuzzy-if(skiaContent,1,3) == button-fieldset-legend.html button-fieldset-legend-ref.html
diff --git a/layout/reftests/css-invalid/button/style.css b/layout/reftests/css-invalid/button/style.css
new file mode 100644
index 0000000000..b52ea47cb5
--- /dev/null
+++ b/layout/reftests/css-invalid/button/style.css
@@ -0,0 +1,18 @@
+/* Override default style */
+button:invalid {
+ box-shadow: none;
+}
+
+button.notinvalid {
+ background-color: green;
+}
+button.notinvalid:invalid {
+ background-color: red;
+}
+
+button.invalid {
+ background-color: red;
+}
+button.invalid:invalid {
+ background-color: green;
+}
diff --git a/layout/reftests/css-invalid/default-style/button-ref.html b/layout/reftests/css-invalid/default-style/button-ref.html
new file mode 100644
index 0000000000..0d3a981987
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/button-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <button class='barred-ref'></button>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/default-style/button.html b/layout/reftests/css-invalid/default-style/button.html
new file mode 100644
index 0000000000..ebbbe583ac
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/button.html
@@ -0,0 +1,14 @@
+<!DOCTYPE>
+<html class="reftest-wait">
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById('e').setCustomValidity('foo');
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onloadHandler();">
+ <button id='e'></button>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/default-style/fieldset-ref.html b/layout/reftests/css-invalid/default-style/fieldset-ref.html
new file mode 100644
index 0000000000..0289183246
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/fieldset-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <fieldset class='barred-ref'></fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/default-style/fieldset.html b/layout/reftests/css-invalid/default-style/fieldset.html
new file mode 100644
index 0000000000..053f073273
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/fieldset.html
@@ -0,0 +1,14 @@
+<!DOCTYPE>
+<html class="reftest-wait">
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById('e').setCustomValidity('foo');
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onloadHandler();">
+ <fieldset id='e'></fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/default-style/input-ref.html b/layout/reftests/css-invalid/default-style/input-ref.html
new file mode 100644
index 0000000000..31f6e35f2c
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/input-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='invalid-ref'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/default-style/input.html b/layout/reftests/css-invalid/default-style/input.html
new file mode 100644
index 0000000000..6a86c17f61
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/input.html
@@ -0,0 +1,14 @@
+<!DOCTYPE>
+<html class="reftest-wait">
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById('e').setCustomValidity('foo');
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onloadHandler();">
+ <input id='e'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/default-style/reftest-stylo.list b/layout/reftests/css-invalid/default-style/reftest-stylo.list
new file mode 100644
index 0000000000..eebfc3b5cd
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/reftest-stylo.list
@@ -0,0 +1,6 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== input.html input.html
+== button.html button.html
+== textarea.html textarea.html
+== select.html select.html
+== fieldset.html fieldset.html
diff --git a/layout/reftests/css-invalid/default-style/reftest.list b/layout/reftests/css-invalid/default-style/reftest.list
new file mode 100644
index 0000000000..3ce4650a6b
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/reftest.list
@@ -0,0 +1,5 @@
+== input.html input-ref.html
+== button.html button-ref.html
+== textarea.html textarea-ref.html
+== select.html select-ref.html
+== fieldset.html fieldset-ref.html
diff --git a/layout/reftests/css-invalid/default-style/select-ref.html b/layout/reftests/css-invalid/default-style/select-ref.html
new file mode 100644
index 0000000000..3eed47082f
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/select-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <select class='invalid-ref'></select>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/default-style/select.html b/layout/reftests/css-invalid/default-style/select.html
new file mode 100644
index 0000000000..bc421bd177
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/select.html
@@ -0,0 +1,14 @@
+<!DOCTYPE>
+<html class="reftest-wait">
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById('e').setCustomValidity('foo');
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onloadHandler();">
+ <select id='e'></select>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/default-style/style.css b/layout/reftests/css-invalid/default-style/style.css
new file mode 100644
index 0000000000..0ff814e1cc
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/style.css
@@ -0,0 +1,9 @@
+:-moz-ui-invalid {
+ box-shadow: none;
+}
+
+.invalid-ref {
+}
+
+.barred-ref {
+}
diff --git a/layout/reftests/css-invalid/default-style/textarea-ref.html b/layout/reftests/css-invalid/default-style/textarea-ref.html
new file mode 100644
index 0000000000..c7037764f6
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/textarea-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <textarea class='invalid-ref'></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/default-style/textarea.html b/layout/reftests/css-invalid/default-style/textarea.html
new file mode 100644
index 0000000000..4a0731926d
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/textarea.html
@@ -0,0 +1,14 @@
+<!DOCTYPE>
+<html class="reftest-wait">
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById('e').setCustomValidity('foo');
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onloadHandler();">
+ <textarea id='e'></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-add-invalid-barred.html b/layout/reftests/css-invalid/fieldset/fieldset-add-invalid-barred.html
new file mode 100644
index 0000000000..74150b303e
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-add-invalid-barred.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- fieldset with invalid barred for constraint validation element -->
+<html>
+ <head>
+ <style>
+ fieldset:valid { display: none ;}
+ </style>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById("fieldset").appendChild(document.getElementById('i'));
+ document.documentElement.className = '';
+ }
+ </script>
+ </head>
+ <body onload="onloadHandler();">
+ <input required readonly id="i">
+ <fieldset id="fieldset">
+ </fieldset>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-add-invalid-element-dynamic.html b/layout/reftests/css-invalid/fieldset/fieldset-add-invalid-element-dynamic.html
new file mode 100644
index 0000000000..3485e88069
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-add-invalid-element-dynamic.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!-- fieldset with no elements and invalid element is added dynamically -->
+<html>
+ <head>
+ <style>
+ fieldset:invalid { display:none }
+ </style>
+ <script>
+ function onLoadHandler()
+ {
+ document.getElementById("fieldset").appendChild(document.getElementById('i'));
+ document.documentElement.className='';
+ }
+ </script>
+ </head>
+ <body onload='onLoadHandler();'>
+ <input id='i' required>
+ <fieldset id="fieldset">
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-add-invalid-element.html b/layout/reftests/css-invalid/fieldset/fieldset-add-invalid-element.html
new file mode 100644
index 0000000000..855a432ce7
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-add-invalid-element.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--fieldset with one invalid element and another invalid one is added dynamically -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ fieldset:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById("fieldset").appendChild(document.getElementById('i'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <input id='i' type='email' value='foo'>
+ <fieldset id="fieldset">
+ <input id='j' type='email' value='foo'>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-add-invalid-with-valid-element.html b/layout/reftests/css-invalid/fieldset/fieldset-add-invalid-with-valid-element.html
new file mode 100644
index 0000000000..ab62debd35
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-add-invalid-with-valid-element.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--fieldset with one valid element and invalid one is added dynamically -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ fieldset:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById("fieldset").appendChild(document.getElementById('i'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <input id='i' type='email' value='bar'>
+ <fieldset id="fieldset">
+ <input id='j' type='text' value='foo'>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-add-valid-element.html b/layout/reftests/css-invalid/fieldset/fieldset-add-valid-element.html
new file mode 100644
index 0000000000..6e5363d6b9
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-add-valid-element.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--fieldset with one valid element and another valid one is added dynamically -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ fieldset:valid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById("fieldset").appendChild(document.getElementById('i'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <input id='i' type='text' value='bar'>
+ <fieldset id="fieldset">
+ <input id='j' type='text' value='foo'>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-add-valid-with-invalid-element.html b/layout/reftests/css-invalid/fieldset/fieldset-add-valid-with-invalid-element.html
new file mode 100644
index 0000000000..4157831e64
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-add-valid-with-invalid-element.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--fieldset with one invalid element and another valid one is added dynamically -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ fieldset:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById("fieldset").appendChild(document.getElementById('i'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <input id='i' type='text' value='foo'>
+ <fieldset id="fieldset">
+ <input id='j' type='email' value='emailfoo'>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-add-valid-with-no-element.html b/layout/reftests/css-invalid/fieldset/fieldset-add-valid-with-no-element.html
new file mode 100644
index 0000000000..bfdf264af2
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-add-valid-with-no-element.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!--fieldset with no valid element and another valid one is added dynamically -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ fieldset:valid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById("fieldset").appendChild(document.getElementById('i'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <input id='i' type='text' value='foo'>
+ <fieldset id="fieldset">
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-div-invalid.html b/layout/reftests/css-invalid/fieldset/fieldset-div-invalid.html
new file mode 100644
index 0000000000..2c1b47b78c
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-div-invalid.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<!-- fieldset with input in div should become invalid -->
+<html>
+ <head>
+ <style>
+ fieldset:invalid { display: none ;}
+ </style>
+ </head>
+ <body>
+ <fieldset>
+ <div>
+ <input required value="">
+ </div>
+ </fieldset>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-dynamic-invalid-barred.html b/layout/reftests/css-invalid/fieldset/fieldset-dynamic-invalid-barred.html
new file mode 100644
index 0000000000..2671994077
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-dynamic-invalid-barred.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- fieldset with one invalid element and dynamically made it element with
+barred constraints -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ fieldset:valid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById('i').readOnly = true;
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <fieldset id="fieldset">
+ <input id='i' required>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-dynamic-invalid-not-barred.html b/layout/reftests/css-invalid/fieldset/fieldset-dynamic-invalid-not-barred.html
new file mode 100644
index 0000000000..cf7905f0c5
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-dynamic-invalid-not-barred.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+ <head>
+ <style>
+ fieldset:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById('i').readOnly = false;
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <fieldset id="fieldset">
+ <input id='i' required readonly>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-dynamic-invalid.html b/layout/reftests/css-invalid/fieldset/fieldset-dynamic-invalid.html
new file mode 100644
index 0000000000..c40a920cd1
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-dynamic-invalid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!-- fieldset with one invalid element which is made invalid dynamically -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ fieldset:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById('i').value = '';
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <fieldset id="fieldset">
+ <input id='i' value='foo' required>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-dynamic-valid.html b/layout/reftests/css-invalid/fieldset/fieldset-dynamic-valid.html
new file mode 100644
index 0000000000..bfa2660151
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-dynamic-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!-- fieldset with one valid element which is made valid dynamically -->
+<html>
+ <head>
+ <style>
+ fieldset:valid {display: none;}
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById('i').value = 'foo';
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload="onloadHandler();">
+ <fieldset id="fieldset">
+ <input id='i' required>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-invalid-and-barred-remove-barred.html b/layout/reftests/css-invalid/fieldset/fieldset-invalid-and-barred-remove-barred.html
new file mode 100644
index 0000000000..c750a38453
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-invalid-and-barred-remove-barred.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- fieldset with one invalid element and a barred for constraint
+validation element then you remove the second element -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ fieldset:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById("fieldset").removeChild(document.getElementById('j'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <fieldset id="fieldset">
+ <input required>
+ <input id='j' value='foo' readonly>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-invalid-and-barred-remove-invalid.html b/layout/reftests/css-invalid/fieldset/fieldset-invalid-and-barred-remove-invalid.html
new file mode 100644
index 0000000000..2bc2b2bb1a
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-invalid-and-barred-remove-invalid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- fieldset with one invalid element and a barred for constraint
+validation element then you remove the second element -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ fieldset:valid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById("fieldset").removeChild(document.getElementById('j'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <fieldset id="fieldset">
+ <input id='j' required>
+ <input value='foo' readonly>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-invalid-and-barred.html b/layout/reftests/css-invalid/fieldset/fieldset-invalid-and-barred.html
new file mode 100644
index 0000000000..8075550727
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-invalid-and-barred.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- fieldset with one invalid element and a barred for constraint validation element -->
+<html>
+ <head>
+ <style>
+ fieldset:invalid { display: none; }
+ </style>
+ </head>
+ <body>
+ <fieldset id="fieldset">
+ <input required>
+ <input id='i' value='foo' readonly required>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-invalid.html b/layout/reftests/css-invalid/fieldset/fieldset-invalid.html
new file mode 100644
index 0000000000..8f10b70e0a
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-invalid.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<!-- Invalid fieldset -->
+<style>
+ fieldset:invalid { display: none; }
+</style>
+<body onload="document.getElementById('input').setCustomValidity('foo'); document.documentElement.className='';">
+<fieldset>
+ <input id="input">
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-is-barred.html b/layout/reftests/css-invalid/fieldset/fieldset-is-barred.html
new file mode 100644
index 0000000000..ed104497b7
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-is-barred.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<!-- Fieldset is barred -->
+<style>
+ fieldset:valid { display: none; }
+</style>
+<body onload="document.getElementById('f').setCustomValidity('foo'); document.documentElement.className='';">
+<fieldset id="f">
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-nested-barred-ref.html b/layout/reftests/css-invalid/fieldset/fieldset-nested-barred-ref.html
new file mode 100644
index 0000000000..bd8b9a671e
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-nested-barred-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<!-- Reference for input in nested fieldset becomes barred -->
+<html>
+ <body>
+ <fieldset style="background-color: green;">
+ <fieldset style="background-color: green;">
+ <input id='i' required readonly>
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-nested-barred.html b/layout/reftests/css-invalid/fieldset/fieldset-nested-barred.html
new file mode 100644
index 0000000000..fea0c79ae2
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-nested-barred.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!-- input in nested fieldset becomes barred -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ fieldset:valid { background-color: green; }
+ fieldset:invalid { background-color: red; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById('i').readOnly = true;
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <fieldset>
+ <fieldset>
+ <input id='i' required>
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-nested-invalid.html b/layout/reftests/css-invalid/fieldset/fieldset-nested-invalid.html
new file mode 100644
index 0000000000..ba266bf814
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-nested-invalid.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<!-- Nested fieldsets should all become invalid -->
+<html>
+ <head>
+ <style>
+ fieldset:invalid { display: none ;}
+ </style>
+ </head>
+ <body>
+ <fieldset>
+ <fieldset>
+ <input required value="">
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-nested-valid-invalid-ref.html b/layout/reftests/css-invalid/fieldset/fieldset-nested-valid-invalid-ref.html
new file mode 100644
index 0000000000..4f8e399b6b
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-nested-valid-invalid-ref.html
@@ -0,0 +1,22 @@
+
+<!DOCTYPE html>
+<!-- Nested fieldsets should be assigned validation correctly -->
+<html>
+ <head>
+ <style>
+ fieldset:valid { background-color: green; }
+ fieldset:invalid { background-color: red; }
+ </style>
+ </head>
+ <body>
+ <fieldset style="background-color:red;">
+ <fieldset style="background-color: green;">
+ <input>
+ </fieldset>
+ <fieldset style="background-color: red">
+ <input required>
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-nested-valid-invalid.html b/layout/reftests/css-invalid/fieldset/fieldset-nested-valid-invalid.html
new file mode 100644
index 0000000000..8f69730077
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-nested-valid-invalid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!-- Nested fieldsets should be assigned validation correctly -->
+<html>
+ <head>
+ <style>
+ fieldset:valid { background-color: green; }
+ fieldset:invalid { background-color: red; }
+ </style>
+ </head>
+ <body>
+ <fieldset>
+ <fieldset>
+ <input>
+ </fieldset>
+ <fieldset>
+ <input required>
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-remove-invalid-element.html b/layout/reftests/css-invalid/fieldset/fieldset-remove-invalid-element.html
new file mode 100644
index 0000000000..7df987c9be
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-remove-invalid-element.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!-- fieldset with one invalid element and the element is dynamically removed -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ fieldset:valid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById("fieldset").removeChild(document.getElementById('i'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <fieldset id="fieldset">
+ <input id='i' type='email' value='foo'>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-static-invalid-barred.html b/layout/reftests/css-invalid/fieldset/fieldset-static-invalid-barred.html
new file mode 100644
index 0000000000..c2bf3db346
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-static-invalid-barred.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ fieldset:valid { display: none; }
+ </style>
+ </head>
+ <body>
+ <fieldset id="fieldset">
+ <input required readonly>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-static-invalid.html b/layout/reftests/css-invalid/fieldset/fieldset-static-invalid.html
new file mode 100644
index 0000000000..613286ec27
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-static-invalid.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<!--fieldset with only invalid elements -->
+<html>
+ <head>
+ <style>
+ fieldset:invalid { display: none; }
+ </style>
+ </head>
+ <body>
+ <fieldset id="fieldset">
+ <input required>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-static-valid.html b/layout/reftests/css-invalid/fieldset/fieldset-static-valid.html
new file mode 100644
index 0000000000..590b7d30b7
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-static-valid.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<!-- fieldset with only valid elements -->
+<html>
+ <head>
+ <style>
+ fieldset:valid { display: none; }
+ </style>
+ </head>
+ <body>
+ <fieldset id="fieldset">
+ <input value='foo' required>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-valid-and-barred-remove-barred.html b/layout/reftests/css-invalid/fieldset/fieldset-valid-and-barred-remove-barred.html
new file mode 100644
index 0000000000..06d715f9ee
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-valid-and-barred-remove-barred.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- fieldset with one valid element and a barred for constraint
+validation element then you remove the second element -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ fieldset:valid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById("fieldset").removeChild(document.getElementById('j'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <fieldset id="fieldset">
+ <input id='i' value='foo' required>
+ <input id='j' value='bar' readonly>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-valid-and-barred.html b/layout/reftests/css-invalid/fieldset/fieldset-valid-and-barred.html
new file mode 100644
index 0000000000..61f21f7e3d
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-valid-and-barred.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- fieldset with one invalid element and a barred for constraint validation element -->
+<html>
+ <head>
+ <style>
+ fieldset:valid { display: none; }
+ </style>
+ </head>
+ <body>
+ <fieldset id="fieldset">
+ <input id='i' value='bar' required>
+ <input id='i' value='foo' readonly required>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-valid.html b/layout/reftests/css-invalid/fieldset/fieldset-valid.html
new file mode 100644
index 0000000000..59e31af10c
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-valid.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<!-- Valid fieldset. -->
+<html>
+ <head>
+ <style>
+ fieldset:valid { display: none ;}
+ </style>
+ </head>
+ <body>
+ <fieldset>
+ </fieldset>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-with-invalid-element-add-barred-dynamic.html b/layout/reftests/css-invalid/fieldset/fieldset-with-invalid-element-add-barred-dynamic.html
new file mode 100644
index 0000000000..30fd521e4f
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-with-invalid-element-add-barred-dynamic.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- fieldset with one valid element and you dynamically add a barred constraint
+validation element -->
+<html>
+ <head>
+ <style>
+ fieldset:invalid { display:none }
+ </style>
+ <script>
+ function onLoadHandler()
+ {
+ document.getElementById("fieldset").appendChild(document.getElementById('i'));
+ document.documentElement.className='';
+ }
+ </script>
+ </head>
+ <body onload='onLoadHandler();'>
+ <input id='i' value='foo' readonly>
+ <fieldset id="fieldset">
+ <input required>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-with-valid-and-invalid.html b/layout/reftests/css-invalid/fieldset/fieldset-with-valid-and-invalid.html
new file mode 100644
index 0000000000..9a9d43a39f
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-with-valid-and-invalid.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- fieldset with invalid and valid elements -->
+<html>
+ <head>
+ <style>
+ fieldset:invalid { display: none; }
+ </style>
+ </head>
+ <body>
+ <fieldset>
+ <input id='i' value='foo'>
+ <input required>
+ <fieldset/>
+ <body>
+<html>
diff --git a/layout/reftests/css-invalid/fieldset/fieldset-with-valid-element-add-barred-dynamic.html b/layout/reftests/css-invalid/fieldset/fieldset-with-valid-element-add-barred-dynamic.html
new file mode 100644
index 0000000000..3c1e8a3f9b
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/fieldset-with-valid-element-add-barred-dynamic.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- fieldset with one valid element and you dynamically add a barred constraint
+validation element -->
+<html>
+ <head>
+ <style>
+ fieldset:valid { display:none }
+ </style>
+ <script>
+ function onLoadHandler()
+ {
+ document.getElementById("fieldset").appendChild(document.getElementById('i'));
+ document.documentElement.className='';
+ }
+ </script>
+ </head>
+ <body onload='onLoadHandler();'>
+ <input id='i' value='foo' readonly>
+ <fieldset id="fieldset" id="fieldset">
+ <input id='j' value='bar' required>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/fieldset/reftest-stylo.list b/layout/reftests/css-invalid/fieldset/reftest-stylo.list
new file mode 100644
index 0000000000..24abf4c4aa
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/reftest-stylo.list
@@ -0,0 +1,30 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== fieldset-valid.html fieldset-valid.html
+== fieldset-invalid.html fieldset-invalid.html
+== fieldset-add-invalid-barred.html fieldset-add-invalid-barred.html
+== fieldset-add-invalid-element-dynamic.html fieldset-add-invalid-element-dynamic.html
+== fieldset-add-invalid-element.html fieldset-add-invalid-element.html
+== fieldset-add-invalid-with-valid-element.html fieldset-add-invalid-with-valid-element.html
+== fieldset-add-valid-element.html fieldset-add-valid-element.html
+== fieldset-add-valid-with-invalid-element.html fieldset-add-valid-with-invalid-element.html
+== fieldset-add-valid-with-no-element.html fieldset-add-valid-with-no-element.html
+== fieldset-dynamic-invalid-barred.html fieldset-dynamic-invalid-barred.html
+== fieldset-dynamic-invalid-not-barred.html fieldset-dynamic-invalid-not-barred.html
+== fieldset-dynamic-invalid.html fieldset-dynamic-invalid.html
+== fieldset-dynamic-valid.html fieldset-dynamic-valid.html
+== fieldset-invalid-and-barred-remove-barred.html fieldset-invalid-and-barred-remove-barred.html
+== fieldset-invalid-and-barred-remove-invalid.html fieldset-invalid-and-barred-remove-invalid.html
+== fieldset-invalid-and-barred.html fieldset-invalid-and-barred.html
+== fieldset-remove-invalid-element.html fieldset-remove-invalid-element.html
+== fieldset-static-invalid-barred.html fieldset-static-invalid-barred.html
+== fieldset-static-invalid.html fieldset-static-invalid.html
+== fieldset-static-valid.html fieldset-static-valid.html
+== fieldset-valid-and-barred-remove-barred.html fieldset-valid-and-barred-remove-barred.html
+== fieldset-valid-and-barred.html fieldset-valid-and-barred.html
+== fieldset-with-invalid-element-add-barred-dynamic.html fieldset-with-invalid-element-add-barred-dynamic.html
+== fieldset-with-valid-and-invalid.html fieldset-with-valid-and-invalid.html
+== fieldset-with-valid-element-add-barred-dynamic.html fieldset-with-valid-element-add-barred-dynamic.html
+== fieldset-nested-invalid.html fieldset-nested-invalid.html
+== fieldset-div-invalid.html fieldset-div-invalid.html
+== fieldset-nested-valid-invalid.html fieldset-nested-valid-invalid.html
+fails fuzzy-if(skiaContent,1,5) == fieldset-nested-barred.html fieldset-nested-barred.html
diff --git a/layout/reftests/css-invalid/fieldset/reftest.list b/layout/reftests/css-invalid/fieldset/reftest.list
new file mode 100644
index 0000000000..954732bb3f
--- /dev/null
+++ b/layout/reftests/css-invalid/fieldset/reftest.list
@@ -0,0 +1,29 @@
+== fieldset-valid.html about:blank
+== fieldset-invalid.html about:blank
+== fieldset-add-invalid-barred.html about:blank
+== fieldset-add-invalid-element-dynamic.html about:blank
+== fieldset-add-invalid-element.html about:blank
+== fieldset-add-invalid-with-valid-element.html about:blank
+== fieldset-add-valid-element.html about:blank
+== fieldset-add-valid-with-invalid-element.html about:blank
+== fieldset-add-valid-with-no-element.html about:blank
+== fieldset-dynamic-invalid-barred.html about:blank
+== fieldset-dynamic-invalid-not-barred.html about:blank
+== fieldset-dynamic-invalid.html about:blank
+== fieldset-dynamic-valid.html about:blank
+== fieldset-invalid-and-barred-remove-barred.html about:blank
+== fieldset-invalid-and-barred-remove-invalid.html about:blank
+== fieldset-invalid-and-barred.html about:blank
+== fieldset-remove-invalid-element.html about:blank
+== fieldset-static-invalid-barred.html about:blank
+== fieldset-static-invalid.html about:blank
+== fieldset-static-valid.html about:blank
+== fieldset-valid-and-barred-remove-barred.html about:blank
+== fieldset-valid-and-barred.html about:blank
+== fieldset-with-invalid-element-add-barred-dynamic.html about:blank
+== fieldset-with-valid-and-invalid.html about:blank
+== fieldset-with-valid-element-add-barred-dynamic.html about:blank
+== fieldset-nested-invalid.html about:blank
+== fieldset-div-invalid.html about:blank
+== fieldset-nested-valid-invalid.html fieldset-nested-valid-invalid-ref.html
+fuzzy-if(skiaContent,1,5) == fieldset-nested-barred.html fieldset-nested-barred-ref.html
diff --git a/layout/reftests/css-invalid/form/form-add-control.html b/layout/reftests/css-invalid/form/form-add-control.html
new file mode 100644
index 0000000000..07d33ba163
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-add-control.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--form with one invalid element and another valid one is added dynamically -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.forms[0].appendChild(document.getElementById('i'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <input id='i'>
+ <form>
+ <input required>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-add-invalid-element-dynamic.html b/layout/reftests/css-invalid/form/form-add-invalid-element-dynamic.html
new file mode 100644
index 0000000000..29bb4ad309
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-add-invalid-element-dynamic.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!-- form with no elements and invalid element is added dynamically -->
+<html>
+ <head>
+ <style>
+ form:invalid { display:none }
+ </style>
+ <script>
+ function onLoadHandler()
+ {
+ document.forms[0].appendChild(document.getElementById('i'));
+ document.documentElement.className='';
+ }
+ </script>
+ </head>
+ <body onload='onLoadHandler();'>
+ <input id='i' required>
+ <form>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-add-invalid-element.html b/layout/reftests/css-invalid/form/form-add-invalid-element.html
new file mode 100644
index 0000000000..9f6017cd61
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-add-invalid-element.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--form with one invalid element and another invalid one is added dynamically -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.forms[0].appendChild(document.getElementById('i'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <input id='i' type='email' value='foo'>
+ <form>
+ <input id='j' type='email' value='foo'>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-add-invalid-with-valid-element.html b/layout/reftests/css-invalid/form/form-add-invalid-with-valid-element.html
new file mode 100644
index 0000000000..1260e3f958
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-add-invalid-with-valid-element.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--form with one valid element and invalid one is added dynamically -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.forms[0].appendChild(document.getElementById('i'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <input id='i' type='email' value='bar'>
+ <form>
+ <input id='j' type='text' value='foo'>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-add-valid-element.html b/layout/reftests/css-invalid/form/form-add-valid-element.html
new file mode 100644
index 0000000000..09bbd0f115
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-add-valid-element.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--form with one valid element and another valid one is added dynamically -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.forms[0].appendChild(document.getElementById('i'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <input id='i' type='text' value='bar'>
+ <form>
+ <input id='j' type='text' value='foo'>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-add-valid-with-invalid-element.html b/layout/reftests/css-invalid/form/form-add-valid-with-invalid-element.html
new file mode 100644
index 0000000000..205897ca06
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-add-valid-with-invalid-element.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--form with one invalid element and another valid one is added dynamically -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.forms[0].appendChild(document.getElementById('i'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <input id='i' type='text' value='foo'>
+ <form>
+ <input id='j' type='email' value='emailfoo'>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-add-valid-with-no-element.html b/layout/reftests/css-invalid/form/form-add-valid-with-no-element.html
new file mode 100644
index 0000000000..1c2632fbc9
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-add-valid-with-no-element.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!--form with no valid element and another valid one is added dynamically -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.forms[0].appendChild(document.getElementById('i'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <input id='i' type='text' value='foo'>
+ <form>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-dynamic-invalid-barred.html b/layout/reftests/css-invalid/form/form-dynamic-invalid-barred.html
new file mode 100644
index 0000000000..ff110054b0
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-dynamic-invalid-barred.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- form with one invalid element and dynamically made it element with
+barred constraints -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById('i').readOnly = 'ro';
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <form>
+ <input id='i' required>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-dynamic-invalid-not-barred.html b/layout/reftests/css-invalid/form/form-dynamic-invalid-not-barred.html
new file mode 100644
index 0000000000..f38ff854e6
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-dynamic-invalid-not-barred.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById('i').removeAttribute('readonly');
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <form>
+ <input id='i' required readonly>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-dynamic-invalid.html b/layout/reftests/css-invalid/form/form-dynamic-invalid.html
new file mode 100644
index 0000000000..6e189b4c52
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-dynamic-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- form with one invalid element which is made invalid dynamically -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ :-moz-ui-invalid { box-shadow: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById('i').value = '';
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <form>
+ <input id='i' value='foo' required>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-dynamic-valid.html b/layout/reftests/css-invalid/form/form-dynamic-valid.html
new file mode 100644
index 0000000000..d8bb2a90fa
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-dynamic-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!-- form with one valid element which is made valid dynamically -->
+<html>
+ <head>
+ <style>
+ form:invalid {display: none;}
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.getElementById('i').value = 'foo';
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload="onloadHandler();">
+ <form>
+ <input id='i' required>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-invalid-and-barred-remove-barred.html b/layout/reftests/css-invalid/form/form-invalid-and-barred-remove-barred.html
new file mode 100644
index 0000000000..62e24162f7
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-invalid-and-barred-remove-barred.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- form with one invalid element and a barred for constraint
+validation element then you remove the second element -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.forms[0].removeChild(document.getElementById('j'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <form>
+ <input required>
+ <input id='j' value='foo' readonly>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-invalid-and-barred.html b/layout/reftests/css-invalid/form/form-invalid-and-barred.html
new file mode 100644
index 0000000000..0d4391be39
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-invalid-and-barred.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- Form with one invalid element and a barred for constraint validation element -->
+<html>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <body>
+ <form>
+ <input required>
+ <input id='i' value='foo' readonly required>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-invalid-barred-ref.html b/layout/reftests/css-invalid/form/form-invalid-barred-ref.html
new file mode 100644
index 0000000000..d9ba4a84c7
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-invalid-barred-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <form>
+ <input required readonly>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-invalid-barred.html b/layout/reftests/css-invalid/form/form-invalid-barred.html
new file mode 100644
index 0000000000..8509352a51
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-invalid-barred.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- form with invalid barred for constraint validation element -->
+<html>
+ <head>
+ <style>
+ form:invalid { display: none ;}
+ </style>
+ </head>
+ <body>
+ <form>
+ <input required readonly>
+ </form>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/form/form-invalid-ref-2.html b/layout/reftests/css-invalid/form/form-invalid-ref-2.html
new file mode 100644
index 0000000000..dd03dc812f
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-invalid-ref-2.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <form>
+ <input type='email' value='foo'>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-invalid-ref.html b/layout/reftests/css-invalid/form/form-invalid-ref.html
new file mode 100644
index 0000000000..d1d41176c9
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-invalid-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-remove-invalid-element.html b/layout/reftests/css-invalid/form/form-remove-invalid-element.html
new file mode 100644
index 0000000000..5a75a4c3db
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-remove-invalid-element.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!-- form with one invalid element and the element is dynamically removed -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.forms[0].removeChild(document.getElementById('i'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <form>
+ <input id='i' type='email' value='foo'>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-static-invalid-barred.html b/layout/reftests/css-invalid/form/form-static-invalid-barred.html
new file mode 100644
index 0000000000..fd1fb016d5
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-static-invalid-barred.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <body>
+ <form>
+ <input required readonly>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-static-invalid.html b/layout/reftests/css-invalid/form/form-static-invalid.html
new file mode 100644
index 0000000000..aea413e491
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-static-invalid.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<!--form with only invalid elements -->
+<html>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <body>
+ <form>
+ <input required>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-static-valid.html b/layout/reftests/css-invalid/form/form-static-valid.html
new file mode 100644
index 0000000000..b2104bacdf
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-static-valid.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<!-- form with only valid elements -->
+<html>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <body>
+ <form>
+ <input value='foo' required>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-valid-and-barred-ref.html b/layout/reftests/css-invalid/form/form-valid-and-barred-ref.html
new file mode 100644
index 0000000000..a0dd9e358e
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-valid-and-barred-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <form>
+ <input value='bar' required>
+ <input value='foo' readonly required>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-valid-and-barred-remove-barred.html b/layout/reftests/css-invalid/form/form-valid-and-barred-remove-barred.html
new file mode 100644
index 0000000000..dd63b8c5c4
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-valid-and-barred-remove-barred.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- form with one valid element and a barred for constraint
+validation element then you remove the second element -->
+<html class='reftest-wait'>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <script>
+ function onloadHandler()
+ {
+ document.forms[0].removeChild(document.getElementById('j'));
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload='onloadHandler();'>
+ <form>
+ <input id='i' value='foo'required>
+ <input id='j' value='bar' readonly>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-valid-and-barred.html b/layout/reftests/css-invalid/form/form-valid-and-barred.html
new file mode 100644
index 0000000000..3cface5e61
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-valid-and-barred.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- Form with one invalid element and a barred for constraint validation element -->
+<html>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <body>
+ <form>
+ <input id='i' value='bar'required>
+ <input id='i' value='foo' readonly required>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-valid-ref-2.html b/layout/reftests/css-invalid/form/form-valid-ref-2.html
new file mode 100644
index 0000000000..47698f1d99
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-valid-ref-2.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <form>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-valid-ref-4.html b/layout/reftests/css-invalid/form/form-valid-ref-4.html
new file mode 100644
index 0000000000..881c5cab87
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-valid-ref-4.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <form>
+ <input type='text' value='foo'>
+ <input type='text' value='bar'>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-valid-ref.html b/layout/reftests/css-invalid/form/form-valid-ref.html
new file mode 100644
index 0000000000..e210a812e5
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-valid-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <form>
+ <input type='text' value='foo' required>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-with-invalid-element-add-barred-dynamic.html b/layout/reftests/css-invalid/form/form-with-invalid-element-add-barred-dynamic.html
new file mode 100644
index 0000000000..893af3e5c0
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-with-invalid-element-add-barred-dynamic.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- form with one valid element and you dynamically add a barred constraint
+validation element -->
+<html>
+ <head>
+ <style>
+ form:invalid { display:none }
+ </style>
+ <script>
+ function onLoadHandler()
+ {
+ document.forms[0].appendChild(document.getElementById('i'));
+ document.documentElement.className='';
+ }
+ </script>
+ </head>
+ <body onload='onLoadHandler();'>
+ <input id='i' value='foo' readonly>
+ <form>
+ <input required>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/form-with-valid-and-invalid.html b/layout/reftests/css-invalid/form/form-with-valid-and-invalid.html
new file mode 100644
index 0000000000..b4ed305766
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-with-valid-and-invalid.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- form with invalid and valid elements -->
+<html>
+ <head>
+ <style>
+ form:invalid { display: none; }
+ </style>
+ </head>
+ <body>
+ <form>
+ <input id='i' value='foo'>
+ <input required>
+ <form>
+ <body>
+<html>
diff --git a/layout/reftests/css-invalid/form/form-with-valid-element-add-barred-dynamic.html b/layout/reftests/css-invalid/form/form-with-valid-element-add-barred-dynamic.html
new file mode 100644
index 0000000000..c012d2521d
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-with-valid-element-add-barred-dynamic.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- form with one valid element and you dynamically add a barred constraint
+validation element -->
+<html>
+ <head>
+ <style>
+ form:invalid { display:none }
+ </style>
+ <script>
+ function onLoadHandler()
+ {
+ document.forms[0].appendChild(document.getElementById('i'));
+ document.documentElement.className='';
+ }
+ </script>
+ </head>
+ <body onload='onLoadHandler();'>
+ <input id='i' value='foo' readonly>
+ <form>
+ <input id='j' value='bar' required>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/form/reftest-stylo.list b/layout/reftests/css-invalid/form/reftest-stylo.list
new file mode 100644
index 0000000000..5abbde77b7
--- /dev/null
+++ b/layout/reftests/css-invalid/form/reftest-stylo.list
@@ -0,0 +1,25 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== form-static-valid.html form-static-valid.html
+== form-dynamic-valid.html form-dynamic-valid.html
+== form-remove-invalid-element.html form-remove-invalid-element.html
+== form-static-invalid.html form-static-invalid.html
+== form-dynamic-invalid.html form-dynamic-invalid.html
+== form-add-control.html form-add-control.html
+== form-dynamic-invalid-not-barred.html form-dynamic-invalid-not-barred.html
+== form-remove-invalid-element.html form-remove-invalid-element.html
+== form-dynamic-invalid-barred.html form-dynamic-invalid-barred.html
+== form-static-invalid-barred.html form-static-invalid-barred.html
+== form-add-invalid-element.html form-add-invalid-element.html
+== form-add-valid-with-invalid-element.html form-add-valid-with-invalid-element.html
+== form-invalid-barred.html form-invalid-barred.html
+== form-add-valid-element.html form-add-valid-element.html
+== form-add-valid-with-no-element.html form-add-valid-with-no-element.html
+== form-add-invalid-with-valid-element.html form-add-invalid-with-valid-element.html
+== form-with-valid-and-invalid.html form-with-valid-and-invalid.html
+== form-add-invalid-element-dynamic.html form-add-invalid-element-dynamic.html
+== form-invalid-and-barred.html form-invalid-and-barred.html
+== form-invalid-and-barred-remove-barred.html form-invalid-and-barred-remove-barred.html
+== form-valid-and-barred.html form-valid-and-barred.html
+== form-valid-and-barred-remove-barred.html form-valid-and-barred-remove-barred.html
+== form-with-invalid-element-add-barred-dynamic.html form-with-invalid-element-add-barred-dynamic.html
+== form-with-valid-element-add-barred-dynamic.html form-with-valid-element-add-barred-dynamic.html
diff --git a/layout/reftests/css-invalid/form/reftest.list b/layout/reftests/css-invalid/form/reftest.list
new file mode 100644
index 0000000000..e218e7d9bd
--- /dev/null
+++ b/layout/reftests/css-invalid/form/reftest.list
@@ -0,0 +1,24 @@
+== form-static-valid.html form-valid-ref.html
+== form-dynamic-valid.html form-valid-ref.html
+== form-remove-invalid-element.html form-valid-ref-2.html
+== form-static-invalid.html form-invalid-ref.html
+== form-dynamic-invalid.html form-invalid-ref.html
+== form-add-control.html form-invalid-ref.html
+== form-dynamic-invalid-not-barred.html form-invalid-ref.html
+== form-remove-invalid-element.html form-invalid-ref.html
+== form-dynamic-invalid-barred.html form-invalid-barred-ref.html
+== form-static-invalid-barred.html form-invalid-barred-ref.html
+== form-add-invalid-element.html form-invalid-ref.html
+== form-add-valid-with-invalid-element.html form-invalid-ref.html
+== form-invalid-barred.html form-invalid-barred-ref.html
+== form-add-valid-element.html form-valid-ref-4.html
+== form-add-valid-with-no-element.html form-valid-ref.html
+== form-add-invalid-with-valid-element.html form-invalid-ref.html
+== form-with-valid-and-invalid.html form-invalid-ref.html
+== form-add-invalid-element-dynamic.html form-invalid-ref.html
+== form-invalid-and-barred.html form-invalid-ref.html
+== form-invalid-and-barred-remove-barred.html form-invalid-ref.html
+== form-valid-and-barred.html form-valid-and-barred-ref.html
+== form-valid-and-barred-remove-barred.html form-valid-ref.html
+== form-with-invalid-element-add-barred-dynamic.html form-invalid-ref.html
+== form-with-valid-element-add-barred-dynamic.html form-valid-and-barred-ref.html
diff --git a/layout/reftests/css-invalid/input/input-button-ref.html b/layout/reftests/css-invalid/input/input-button-ref.html
new file mode 100644
index 0000000000..6f001b2109
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-button-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input type='button' class='ref'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-button.html b/layout/reftests/css-invalid/input/input-button.html
new file mode 100644
index 0000000000..5d708712af
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-button.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input is of button type, it is barred from constraint validation
+ and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='notinvalid' type='button'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-customerror.html b/layout/reftests/css-invalid/input/input-customerror.html
new file mode 100644
index 0000000000..b954d67c78
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-customerror.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <script>
+ function doTest() {
+ document.getElementById('t').setCustomValidity('foo');
+ document.documentElement.className='';
+ }
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+ </head>
+ <!-- Test: if input has a custom error, it should be affected by :invalid
+ pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='invalid' id='t'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-disabled-fieldset-1.html b/layout/reftests/css-invalid/input/input-disabled-fieldset-1.html
new file mode 100644
index 0000000000..1b82858f57
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-disabled-fieldset-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input has a disabled fieldset ancestor, it is barred from
+ constraint validation and should not be affected by :invalid
+ pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <fieldset disabled>
+ <fieldset>
+ <input class='notinvalid' required>
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-disabled-fieldset-2.html b/layout/reftests/css-invalid/input/input-disabled-fieldset-2.html
new file mode 100644
index 0000000000..c470f77330
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-disabled-fieldset-2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if input has a disabled fieldset ancestor, it is barred from
+ constraint validation and should not be affected by :invalid
+ pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onloadHandler()
+ {
+ var fieldsets = document.getElementsByTagName("fieldset");
+ fieldsets[1].disabled = true;
+ fieldsets[0].disabled = false;
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onloadHandler();">
+ <fieldset disabled>
+ <fieldset>
+ <input class='notinvalid' required>
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-disabled.html b/layout/reftests/css-invalid/input/input-disabled.html
new file mode 100644
index 0000000000..9015e7bc51
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-disabled.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input is disabled, it is barred from constraint validation
+ and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='notinvalid' disabled>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-dyn-disabled.html b/layout/reftests/css-invalid/input/input-dyn-disabled.html
new file mode 100644
index 0000000000..770313752c
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-dyn-disabled.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if input is disabled and invalid, it is barred from constraint
+ validation and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onLoadHandler()
+ {
+ var e = document.getElementById('i');
+ e.setCustomValidity('foo');
+ e.disabled = 'true';
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onLoadHandler();">
+ <input class='notinvalid' id='i'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-dyn-not-disabled.html b/layout/reftests/css-invalid/input/input-dyn-not-disabled.html
new file mode 100644
index 0000000000..327c1ab8f8
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-dyn-not-disabled.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if input is not disabled and invalid, it is candidate for
+ constraint validation and should be affected
+ by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onLoadHandler()
+ {
+ var e = document.getElementById('i');
+ e.setCustomValidity('foo');
+ e.removeAttribute('disabled');
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onLoadHandler();">
+ <input class='invalid' id='i' disabled>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-dyn-not-readonly.html b/layout/reftests/css-invalid/input/input-dyn-not-readonly.html
new file mode 100644
index 0000000000..83bf1024eb
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-dyn-not-readonly.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if input is no longer readonly, it is candidate for constraint
+ validation and should be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body onload="document.getElementById('i').removeAttribute('readonly'); document.documentElement.className='';">
+ <input class='invalid' id='i' readonly required>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-dyn-readonly.html b/layout/reftests/css-invalid/input/input-dyn-readonly.html
new file mode 100644
index 0000000000..e00ce5f488
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-dyn-readonly.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if input is readonly, it is barred from constraint validation
+ and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body onload="document.getElementById('i').readOnly='ro'; document.documentElement.className='';">
+ <input class='notinvalid' id='i' required>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-email-invalid.html b/layout/reftests/css-invalid/input/input-email-invalid.html
new file mode 100644
index 0000000000..66604c45d8
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-email-invalid.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input isn't valid nor barred from constraint validation,
+ it should be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='invalid' type='email' value='foo'>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/input/input-email-ref.html b/layout/reftests/css-invalid/input/input-email-ref.html
new file mode 100644
index 0000000000..8c598ef9df
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-email-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input value='foo@bar.com' class='ref'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-email-valid.html b/layout/reftests/css-invalid/input/input-email-valid.html
new file mode 100644
index 0000000000..7eb1c6f988
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-email-valid.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input is valid and not barred from constraint validation,
+ it should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='notinvalid' type='email' value='foo@bar.com'>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/input/input-fieldset-legend-ref.html b/layout/reftests/css-invalid/input/input-fieldset-legend-ref.html
new file mode 100644
index 0000000000..2a171df0a6
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-fieldset-legend-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <fieldset>
+ <legend>
+ <input class='ref'>
+ </legend>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-fieldset-legend.html b/layout/reftests/css-invalid/input/input-fieldset-legend.html
new file mode 100644
index 0000000000..4cdb026c7a
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-fieldset-legend.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input has a disabled fieldset ancestor, but is in the first
+ legend, it is not barred from constraint validation and should be
+ affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <fieldset disabled>
+ <legend>
+ <input class='invalid' required>
+ </legend>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-fieldset-ref.html b/layout/reftests/css-invalid/input/input-fieldset-ref.html
new file mode 100644
index 0000000000..25c90be997
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-fieldset-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <fieldset>
+ <fieldset>
+ <input class='ref'>
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-image-ref.html b/layout/reftests/css-invalid/input/input-image-ref.html
new file mode 100644
index 0000000000..1509fe487c
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-image-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input type='image' class='ref'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-image.html b/layout/reftests/css-invalid/input/input-image.html
new file mode 100644
index 0000000000..d949e66e18
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-image.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input is of button type, it is barred from constraint validation
+ and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='notinvalid' type='image'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-pattern-invalid.html b/layout/reftests/css-invalid/input/input-pattern-invalid.html
new file mode 100644
index 0000000000..4a2325c611
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-pattern-invalid.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input isn't valid nor barred from constraint validation,
+ it should be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='invalid' pattern='bar' value='foo'>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/input/input-pattern-valid.html b/layout/reftests/css-invalid/input/input-pattern-valid.html
new file mode 100644
index 0000000000..7e5283410e
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-pattern-valid.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input is valid and not barred from constraint validation,
+ it should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='notinvalid' pattern='foo' value='foo'>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/input/input-radio-checked-ref.html b/layout/reftests/css-invalid/input/input-radio-checked-ref.html
new file mode 100644
index 0000000000..45864b158c
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-radio-checked-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input type='radio' class='ref' checked>
+ <input type='radio' class='ref'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-radio-customerror.html b/layout/reftests/css-invalid/input/input-radio-customerror.html
new file mode 100644
index 0000000000..e5fadd514c
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-radio-customerror.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if one radio in a group is suffering from a custom error, the other
+ radio should not be invalid. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body onload="document.getElementById('i1').setCustomValidity('foo');
+ document.documentElement.className='';">
+ <input class='invalid' id='i1' name='foo' type='radio'>
+ <input class='notinvalid' id='i2' name='foo' type='radio'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-radio-dyn-valid-1.html b/layout/reftests/css-invalid/input/input-radio-dyn-valid-1.html
new file mode 100644
index 0000000000..30db7c015a
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-radio-dyn-valid-1.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when there are no radio suffering from being missing in the radio
+ group, all radio should not suffer from being missing. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body onload="document.getElementById('i1').checked = true;
+ document.documentElement.className='';">
+ <input class='notinvalid' id='i1' name='foo' type='radio' required>
+ <input class='notinvalid' id='i2' name='foo' type='radio'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-radio-dyn-valid-2.html b/layout/reftests/css-invalid/input/input-radio-dyn-valid-2.html
new file mode 100644
index 0000000000..a2cfbd6a10
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-radio-dyn-valid-2.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when there are no radio suffering from being missing in the radio
+ group, all radio should not suffer from being missing. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body onload="document.getElementById('i1').required = false;
+ document.documentElement.className='';">
+ <input class='notinvalid' id='i1' name='foo' type='radio' required>
+ <input class='notinvalid' id='i2' name='foo' type='radio'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-radio-focus-click.html b/layout/reftests/css-invalid/input/input-radio-focus-click.html
new file mode 100644
index 0000000000..1ed298caea
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-radio-focus-click.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+ <body class="reftest-wait">
+ <!-- See bug 658282. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function loadHandler() {
+ var button = document.getElementsByTagName('button')[0];
+ var radios = document.getElementsByName('foo');
+
+ button.onclick = function() {
+ for (var i = 0; i < radios.length; i++) {
+ radios[i].checked = false;
+ }
+ button.parentNode.removeChild(button);
+ document.documentElement.className='';
+ };
+
+ radios[0].focus();
+ radios[0].checked = true;
+ button.focus();
+ button.click();
+ }
+ </script>
+ <body onload="loadHandler();">
+ <input class='invalid' id='i1' name='foo' type='radio' required>
+ <input class='invalid' id='i2' name='foo' type='radio' required>
+ <button></button>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-radio-nogroup-required-invalid.html b/layout/reftests/css-invalid/input/input-radio-nogroup-required-invalid.html
new file mode 100644
index 0000000000..d46b1607c2
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-radio-nogroup-required-invalid.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='notinvalid' id='i' type='radio' checked required>
+ <input class='notinvalid' type='radio'> <!-- adding this one so we don't have to create a second ref -->
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-radio-nogroup-required-valid.html b/layout/reftests/css-invalid/input/input-radio-nogroup-required-valid.html
new file mode 100644
index 0000000000..8587614725
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-radio-nogroup-required-valid.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='invalid' id='i' type='radio' required>
+ <input class='notinvalid' type='radio'> <!-- adding this one so we don't have to create a second ref -->
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-radio-ref.html b/layout/reftests/css-invalid/input/input-radio-ref.html
new file mode 100644
index 0000000000..9abe06bca8
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-radio-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input type='radio' class='ref'>
+ <input type='radio' class='ref'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-radio-required.html b/layout/reftests/css-invalid/input/input-radio-required.html
new file mode 100644
index 0000000000..1faaedc13a
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-radio-required.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if one radio in a group has the required attribute and no radio is
+ checked, all radio in the group should suffer from being missing. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='invalid' id='i1' name='foo' type='radio' required>
+ <input class='invalid' id='i2' name='foo' type='radio'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-readonly.html b/layout/reftests/css-invalid/input/input-readonly.html
new file mode 100644
index 0000000000..4aebf00265
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-readonly.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input is readonly, it is barred from constraint validation
+ and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='notinvalid' readonly>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-ref.html b/layout/reftests/css-invalid/input/input-ref.html
new file mode 100644
index 0000000000..ad0de3cfba
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='ref'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-required-invalid.html b/layout/reftests/css-invalid/input/input-required-invalid.html
new file mode 100644
index 0000000000..eea8eb2409
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-required-invalid.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input isn't valid nor barred from constraint validation,
+ it should be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='invalid' required>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/input/input-required-valid.html b/layout/reftests/css-invalid/input/input-required-valid.html
new file mode 100644
index 0000000000..bde7d22aa1
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-required-valid.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input is valid and not barred from constraint validation,
+ it should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='notinvalid' value='foo' required>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/input/input-reset.html b/layout/reftests/css-invalid/input/input-reset.html
new file mode 100644
index 0000000000..04d02f9e40
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-reset.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input is of reset type, it is barred from constraint validation
+ and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <!-- Setting value to the empty string let us check against input-button-ref.html -->
+ <input class='notinvalid' type='reset' value=''>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-submit-ref.html b/layout/reftests/css-invalid/input/input-submit-ref.html
new file mode 100644
index 0000000000..a1a0aa7fb9
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-submit-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input type='submit' class='ref'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-submit.html b/layout/reftests/css-invalid/input/input-submit.html
new file mode 100644
index 0000000000..180235bb62
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-submit.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input is of button type, it is barred from constraint validation
+ and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='notinvalid' type='submit'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-type-barred.html b/layout/reftests/css-invalid/input/input-type-barred.html
new file mode 100644
index 0000000000..ac99c0f25f
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-type-barred.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if an input has is candidate for constraint validation then change
+ its type to be barred from constraint validation, it should not be
+ affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body onload="document.getElementById('i').type='button'; document.documentElement.className='';">
+ <input class='notinvalid' id='i'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-type-invalid.html b/layout/reftests/css-invalid/input/input-type-invalid.html
new file mode 100644
index 0000000000..e37173edec
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-type-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if an input has a custom error when barred from constraint
+ validation then move a type candidate for constraint validation,
+ it should not be affected by :valid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function doTest()
+ {
+ var i = document.getElementById('i');
+ i.setCustomValidity('foo');
+ i.type = 'text';
+ document.documentElement.className='';
+ }
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+ <body>
+ <input class='invalid' type='button' id='i'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-url-invalid.html b/layout/reftests/css-invalid/input/input-url-invalid.html
new file mode 100644
index 0000000000..6df386a561
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-url-invalid.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input isn't valid nor barred from constraint validation,
+ it should be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='invalid' type='url' value='foo'>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/input/input-url-ref.html b/layout/reftests/css-invalid/input/input-url-ref.html
new file mode 100644
index 0000000000..387a384d6f
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-url-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input value='http://mozilla.org/' class='ref'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-url-valid.html b/layout/reftests/css-invalid/input/input-url-valid.html
new file mode 100644
index 0000000000..08162538a3
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-url-valid.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input is valid and not barred from constraint validation,
+ it should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='notinvalid' type='url' value='http://mozilla.org/'>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/input/input-valid.html b/layout/reftests/css-invalid/input/input-valid.html
new file mode 100644
index 0000000000..9b8e0e039e
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-valid.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if input is valid and is not barred from constraint validation,
+ it should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input class='notinvalid'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/input-withtext-ref.html b/layout/reftests/css-invalid/input/input-withtext-ref.html
new file mode 100644
index 0000000000..1b4e93b008
--- /dev/null
+++ b/layout/reftests/css-invalid/input/input-withtext-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <input value='foo' class='ref'>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/input/reftest-stylo.list b/layout/reftests/css-invalid/input/reftest-stylo.list
new file mode 100644
index 0000000000..dc9dc5e8c9
--- /dev/null
+++ b/layout/reftests/css-invalid/input/reftest-stylo.list
@@ -0,0 +1,38 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== input-valid.html input-valid.html
+fuzzy-if(skiaContent,2,10) == input-customerror.html input-customerror.html
+skip-if(B2G||Mulet) == input-disabled.html input-disabled.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == input-dyn-disabled.html input-dyn-disabled.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== input-dyn-not-disabled.html input-dyn-not-disabled.html
+== input-readonly.html input-readonly.html
+== input-dyn-readonly.html input-dyn-readonly.html
+== input-dyn-not-readonly.html input-dyn-not-readonly.html
+skip == input-maxlength-valid.html input-maxlength-valid.html
+skip == input-maxlength-invalid.html input-maxlength-invalid.html
+== input-required-valid.html input-required-valid.html
+== input-required-invalid.html input-required-invalid.html
+== input-button.html input-button.html
+skip == input-reset.html input-reset.html
+== input-email-invalid.html input-email-invalid.html
+== input-email-valid.html input-email-valid.html
+== input-url-invalid.html input-url-invalid.html
+== input-url-valid.html input-url-valid.html
+== input-pattern-valid.html input-pattern-valid.html
+== input-pattern-invalid.html input-pattern-invalid.html
+== input-type-barred.html input-type-barred.html
+== input-type-invalid.html input-type-invalid.html
+== input-disabled-fieldset-1.html input-disabled-fieldset-1.html
+== input-disabled-fieldset-2.html input-disabled-fieldset-2.html
+skip == input-fieldset-legend.html input-fieldset-legend.html
+== input-radio-required.html input-radio-required.html
+fuzzy-if(skiaContent,2,10) == input-radio-customerror.html input-radio-customerror.html
+fuzzy-if(skiaContent,2,10) == input-radio-dyn-valid-1.html input-radio-dyn-valid-1.html
+fuzzy-if(skiaContent,2,10) == input-radio-dyn-valid-2.html input-radio-dyn-valid-2.html
+fuzzy-if(skiaContent,2,10) == input-radio-nogroup-required-valid.html input-radio-nogroup-required-valid.html
+fuzzy-if(skiaContent,2,10) == input-radio-nogroup-required-invalid.html input-radio-nogroup-required-invalid.html
+skip == input-radio-focus-click.html input-radio-focus-click.html
+== input-submit.html input-submit.html
+== input-image.html input-image.html
+# input type='hidden' shouldn't show
diff --git a/layout/reftests/css-invalid/input/reftest.list b/layout/reftests/css-invalid/input/reftest.list
new file mode 100644
index 0000000000..2064ad16cc
--- /dev/null
+++ b/layout/reftests/css-invalid/input/reftest.list
@@ -0,0 +1,33 @@
+== input-valid.html input-ref.html
+fuzzy(11,4) fuzzy-if(skiaContent,2,10) == input-customerror.html input-ref.html
+== input-disabled.html input-ref.html
+== input-dyn-disabled.html input-ref.html
+== input-dyn-not-disabled.html input-ref.html
+== input-readonly.html input-ref.html
+== input-dyn-readonly.html input-ref.html
+== input-dyn-not-readonly.html input-ref.html
+== input-required-valid.html input-withtext-ref.html
+== input-required-invalid.html input-ref.html
+== input-button.html input-button-ref.html
+== input-reset.html input-button-ref.html
+== input-email-invalid.html input-withtext-ref.html
+== input-email-valid.html input-email-ref.html
+== input-url-invalid.html input-withtext-ref.html
+== input-url-valid.html input-url-ref.html
+== input-pattern-valid.html input-withtext-ref.html
+== input-pattern-invalid.html input-withtext-ref.html
+== input-type-barred.html input-button-ref.html
+fuzzy(11,4) == input-type-invalid.html input-ref.html
+== input-disabled-fieldset-1.html input-fieldset-ref.html
+== input-disabled-fieldset-2.html input-fieldset-ref.html
+== input-fieldset-legend.html input-fieldset-legend-ref.html
+== input-radio-required.html input-radio-ref.html
+fuzzy-if(skiaContent,2,10) == input-radio-customerror.html input-radio-ref.html
+fuzzy-if(skiaContent,2,10) == input-radio-dyn-valid-1.html input-radio-checked-ref.html
+fuzzy-if(skiaContent,2,10) == input-radio-dyn-valid-2.html input-radio-ref.html
+fuzzy-if(skiaContent,2,10) == input-radio-nogroup-required-valid.html input-radio-ref.html
+fuzzy-if(skiaContent,2,10) == input-radio-nogroup-required-invalid.html input-radio-checked-ref.html
+fuzzy-if(skiaContent,2,10) == input-radio-focus-click.html input-radio-ref.html
+== input-submit.html input-submit-ref.html
+== input-image.html input-image-ref.html
+# input type='hidden' shouldn't show
diff --git a/layout/reftests/css-invalid/input/style.css b/layout/reftests/css-invalid/input/style.css
new file mode 100644
index 0000000000..e3e221a26f
--- /dev/null
+++ b/layout/reftests/css-invalid/input/style.css
@@ -0,0 +1,26 @@
+/* Override default style */
+input {
+ -moz-appearance: none;
+ background: none;
+}
+input:invalid {
+ box-shadow: none;
+}
+
+input.notinvalid {
+ box-shadow: 0 0 1.5px 1px green;
+}
+input.notinvalid:invalid {
+ box-shadow: 0 0 1.5px 1px red;
+}
+
+input.invalid {
+ box-shadow: 0 0 1.5px 1px red;
+}
+input.invalid:invalid {
+ box-shadow: 0 0 1.5px 1px green;
+}
+
+input.ref {
+ box-shadow: 0 0 1.5px 1px green;
+}
diff --git a/layout/reftests/css-invalid/output/output-invalid.html b/layout/reftests/css-invalid/output/output-invalid.html
new file mode 100644
index 0000000000..75dc7b09c5
--- /dev/null
+++ b/layout/reftests/css-invalid/output/output-invalid.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if output has a custom error, it should not be affected by :valid
+ pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body onload="document.getElementById('b').setCustomValidity('foo'); document.documentElement.className='';">
+ <output class='invalid' id='b'>foo</output>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/output/output-ref.html b/layout/reftests/css-invalid/output/output-ref.html
new file mode 100644
index 0000000000..0db2c440c7
--- /dev/null
+++ b/layout/reftests/css-invalid/output/output-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <output class='ref'>foo</output>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/output/output-valid.html b/layout/reftests/css-invalid/output/output-valid.html
new file mode 100644
index 0000000000..f113342c9c
--- /dev/null
+++ b/layout/reftests/css-invalid/output/output-valid.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if output has no custom error and is not barred from constraint
+ validation, it should be affected by :valid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <output class='notinvalid'>foo</output>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/output/reftest-stylo.list b/layout/reftests/css-invalid/output/reftest-stylo.list
new file mode 100644
index 0000000000..3a855c81b8
--- /dev/null
+++ b/layout/reftests/css-invalid/output/reftest-stylo.list
@@ -0,0 +1,3 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== output-valid.html output-valid.html
+== output-invalid.html output-invalid.html
diff --git a/layout/reftests/css-invalid/output/reftest.list b/layout/reftests/css-invalid/output/reftest.list
new file mode 100644
index 0000000000..74468e394a
--- /dev/null
+++ b/layout/reftests/css-invalid/output/reftest.list
@@ -0,0 +1,2 @@
+== output-valid.html output-ref.html
+== output-invalid.html output-ref.html
diff --git a/layout/reftests/css-invalid/output/style.css b/layout/reftests/css-invalid/output/style.css
new file mode 100644
index 0000000000..3ede65943e
--- /dev/null
+++ b/layout/reftests/css-invalid/output/style.css
@@ -0,0 +1,22 @@
+/* Override default style */
+output {
+ color: black;
+}
+
+output.notinvalid {
+ color: green;
+}
+output.notinvalid:invalid {
+ color: red;
+}
+
+output.invalid {
+ color: red;
+}
+output.invalid:invalid {
+ color: green;
+}
+
+output.ref {
+ color: green;
+}
diff --git a/layout/reftests/css-invalid/reftest-stylo.list b/layout/reftests/css-invalid/reftest-stylo.list
new file mode 100644
index 0000000000..2d75760b44
--- /dev/null
+++ b/layout/reftests/css-invalid/reftest-stylo.list
@@ -0,0 +1,15 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# :invalid should not apply on fieldset (always barred from constraint validation)
+include fieldset/reftest-stylo.list
+
+# :invalid should apply on the following elements
+include button/reftest-stylo.list
+include input/reftest-stylo.list
+include select/reftest-stylo.list
+include textarea/reftest-stylo.list
+include output/reftest-stylo.list
+
+# default :invalid style
+include default-style/reftest-stylo.list
+
+include form/reftest-stylo.list
diff --git a/layout/reftests/css-invalid/reftest.list b/layout/reftests/css-invalid/reftest.list
new file mode 100644
index 0000000000..a8cb70993e
--- /dev/null
+++ b/layout/reftests/css-invalid/reftest.list
@@ -0,0 +1,14 @@
+# :invalid should not apply on fieldset (always barred from constraint validation)
+include fieldset/reftest.list
+
+# :invalid should apply on the following elements
+include button/reftest.list
+include input/reftest.list
+include select/reftest.list
+include textarea/reftest.list
+include output/reftest.list
+
+# default :invalid style
+include default-style/reftest.list
+
+include form/reftest.list
diff --git a/layout/reftests/css-invalid/select/reftest-stylo.list b/layout/reftests/css-invalid/select/reftest-stylo.list
new file mode 100644
index 0000000000..9d68f50ece
--- /dev/null
+++ b/layout/reftests/css-invalid/select/reftest-stylo.list
@@ -0,0 +1,16 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+needs-focus == select-valid.html select-valid.html
+fails fuzzy-if(skiaContent,1,3) needs-focus == select-invalid.html select-invalid.html
+fuzzy-if(skiaContent,2,6) needs-focus == select-disabled.html select-disabled.html
+skip-if(B2G||Mulet) fuzzy-if(skiaContent,2,6) needs-focus == select-dyn-disabled.html select-dyn-disabled.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails fuzzy-if(skiaContent,1,3) needs-focus == select-dyn-not-disabled.html select-dyn-not-disabled.html
+needs-focus == select-required-invalid.html select-required-invalid.html
+needs-focus == select-required-valid.html select-required-valid.html
+needs-focus == select-required-multiple-invalid.html select-required-multiple-invalid.html
+fuzzy-if(skiaContent,1,250) needs-focus == select-required-multiple-valid.html select-required-multiple-valid.html
+skip-if(B2G||Mulet) fails-if(Android) fuzzy-if(skiaContent,1,3) needs-focus == select-disabled-fieldset-1.html select-disabled-fieldset-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) fails-if(Android) fuzzy-if(skiaContent,2,3) needs-focus == select-disabled-fieldset-2.html select-disabled-fieldset-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+fuzzy-if(skiaContent,2,5) needs-focus == select-fieldset-legend.html select-fieldset-legend.html
diff --git a/layout/reftests/css-invalid/select/reftest.list b/layout/reftests/css-invalid/select/reftest.list
new file mode 100644
index 0000000000..e76bb9042f
--- /dev/null
+++ b/layout/reftests/css-invalid/select/reftest.list
@@ -0,0 +1,12 @@
+needs-focus == select-valid.html select-ref.html
+fuzzy-if(skiaContent,1,3) needs-focus == select-invalid.html select-ref.html
+fuzzy-if(skiaContent,2,6) needs-focus == select-disabled.html select-disabled-ref.html
+fuzzy-if(skiaContent,2,6) needs-focus == select-dyn-disabled.html select-disabled-ref.html
+fuzzy-if(skiaContent,1,3) needs-focus == select-dyn-not-disabled.html select-ref.html
+needs-focus == select-required-invalid.html select-required-ref.html
+needs-focus == select-required-valid.html select-required-ref.html
+needs-focus == select-required-multiple-invalid.html select-required-multiple-ref.html
+fuzzy-if(skiaContent,1,250) needs-focus == select-required-multiple-valid.html select-required-multiple-ref.html
+fails-if(Android) fuzzy-if(skiaContent&&!Android,1,3) needs-focus == select-disabled-fieldset-1.html select-fieldset-ref.html
+fails-if(Android) fuzzy-if(skiaContent&&!Android,2,3) needs-focus == select-disabled-fieldset-2.html select-fieldset-ref.html
+fuzzy-if(skiaContent,2,5) needs-focus == select-fieldset-legend.html select-fieldset-legend-ref.html
diff --git a/layout/reftests/css-invalid/select/select-disabled-fieldset-1.html b/layout/reftests/css-invalid/select/select-disabled-fieldset-1.html
new file mode 100644
index 0000000000..9ba5a9600a
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-disabled-fieldset-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if select has a disabled fieldset ancestor, it is barred from
+ constraint validation and should not be affected by :invalid
+ pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onLoadHandler()
+ {
+ var e = document.getElementById('s');
+ e.setCustomValidity('foo');
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onLoadHandler();">
+ <fieldset disabled>
+ <fieldset>
+ <select class='notinvalid' id='s'></select>
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/select-disabled-fieldset-2.html b/layout/reftests/css-invalid/select/select-disabled-fieldset-2.html
new file mode 100644
index 0000000000..e131aa6d73
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-disabled-fieldset-2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if select has a disabled fieldset ancestor, it is barred from
+ constraint validation and should not be affected by :invalid
+ pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onloadHandler()
+ {
+ var e = document.getElementById('s');
+ e.setCustomValidity('foo');
+ var fieldsets = document.getElementsByTagName("fieldset");
+ fieldsets[1].disabled = true;
+ fieldsets[0].disabled = false;
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onloadHandler();">
+ <fieldset disabled>
+ <fieldset>
+ <select class='notinvalid' id='s'></select>
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/select-disabled-ref.html b/layout/reftests/css-invalid/select/select-disabled-ref.html
new file mode 100644
index 0000000000..e3a228a897
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-disabled-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <select disabled style="background-color: green;"></select>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/select-disabled.html b/layout/reftests/css-invalid/select/select-disabled.html
new file mode 100644
index 0000000000..51e03e541a
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-disabled.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if select is disabled, it is barred from constraint validation
+ and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body onload="document.getElementById('s').setCustomValidity('foo'); document.documentElement.className='';">
+ <select class='notinvalid' id='s' disabled></select>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/select-dyn-disabled.html b/layout/reftests/css-invalid/select/select-dyn-disabled.html
new file mode 100644
index 0000000000..424c3b5e39
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-dyn-disabled.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if select is disabled and invalid, it is barred from constraint
+ validation and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onLoadHandler()
+ {
+ var e = document.getElementById('s');
+ e.setCustomValidity('foo');
+ e.disabled = 'true';
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onLoadHandler();">
+ <select class='notinvalid' id='s'></select>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/select-dyn-not-disabled.html b/layout/reftests/css-invalid/select/select-dyn-not-disabled.html
new file mode 100644
index 0000000000..54de470acd
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-dyn-not-disabled.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if select is not disabled and invalid, it is candidate for
+ constraint validation and should be affected
+ by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onLoadHandler()
+ {
+ var e = document.getElementById('s');
+ e.setCustomValidity('foo');
+ e.removeAttribute('disabled');
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onLoadHandler();">
+ <select class='invalid' id='s' disabled></select>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/select-fieldset-legend-ref.html b/layout/reftests/css-invalid/select/select-fieldset-legend-ref.html
new file mode 100644
index 0000000000..5083cea90d
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-fieldset-legend-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <fieldset>
+ <legend>
+ <select style="background-color: green;"></select>
+ </legend>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/select-fieldset-legend.html b/layout/reftests/css-invalid/select/select-fieldset-legend.html
new file mode 100644
index 0000000000..dea989deed
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-fieldset-legend.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if select has a disabled fieldset ancestor, but is in the first
+ legend, it is not barred from constraint validation and should be
+ affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onLoadHandler()
+ {
+ var e = document.getElementById('b');
+ e.setCustomValidity('foo');
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onLoadHandler();">
+ <fieldset disabled>
+ <legend>
+ <select class='invalid' id='b'></select>
+ </legend>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/select-fieldset-ref.html b/layout/reftests/css-invalid/select/select-fieldset-ref.html
new file mode 100644
index 0000000000..ca82a8022d
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-fieldset-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <fieldset>
+ <fieldset>
+ <select disabled style="background-color: green;"></select>
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/select-invalid.html b/layout/reftests/css-invalid/select/select-invalid.html
new file mode 100644
index 0000000000..45d3790adb
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-invalid.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if select has a custom error, it should be affected by :invalid
+ pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body onload="document.getElementById('s').setCustomValidity('foo'); document.documentElement.className='';">
+ <select class='invalid' id='s'></select>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/select-ref.html b/layout/reftests/css-invalid/select/select-ref.html
new file mode 100644
index 0000000000..a28668557f
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <select style="background-color: green;"></select>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/select-required-invalid.html b/layout/reftests/css-invalid/select/select-required-invalid.html
new file mode 100644
index 0000000000..31f6c81d11
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-required-invalid.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if select is required and has a select option which has an empty
+ string value, :invalid should apply. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <select class='invalid' required>
+ <option selected value="">foo</option>
+ </select>
+ </body>
+</html></html>
diff --git a/layout/reftests/css-invalid/select/select-required-multiple-invalid.html b/layout/reftests/css-invalid/select/select-required-multiple-invalid.html
new file mode 100644
index 0000000000..d61068d03a
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-required-multiple-invalid.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if select is required and has all selected option value set to the
+ string string, :invalid should apply. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <select class='invalid' required multiple>
+ <option selected></option>
+ <option selected value="">foo</option>
+ </select>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/select-required-multiple-ref.html b/layout/reftests/css-invalid/select/select-required-multiple-ref.html
new file mode 100644
index 0000000000..a9477333f8
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-required-multiple-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <select multiple style="background-color: green;">
+ <option selected></option>
+ <option selected value="">foo</option>
+ </select>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/select-required-multiple-valid.html b/layout/reftests/css-invalid/select/select-required-multiple-valid.html
new file mode 100644
index 0000000000..e58e0c576a
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-required-multiple-valid.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if select is required and has a selected option which has value
+ different from the empty string, :invalid should not apply. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <select class='notinvalid' required multiple>
+ <option selected></option>
+ <option selected>foo</option>
+ </select>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/select-required-ref.html b/layout/reftests/css-invalid/select/select-required-ref.html
new file mode 100644
index 0000000000..3c2bde80a0
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-required-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <select style="background-color: green;">
+ <option selected value="">foo</option>
+ </selecT>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/select-required-valid.html b/layout/reftests/css-invalid/select/select-required-valid.html
new file mode 100644
index 0000000000..e6e4856dc4
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-required-valid.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if select is required and has a select option which has value
+ different from the empty string, :invalid should not apply. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <select class='notinvalid' required>
+ <option selected>foo</option>
+ </select>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/select-valid.html b/layout/reftests/css-invalid/select/select-valid.html
new file mode 100644
index 0000000000..2092f87875
--- /dev/null
+++ b/layout/reftests/css-invalid/select/select-valid.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if select has no custom error and is not barred from constraint
+ validation, it should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <select class='notinvalid'></select>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/select/style.css b/layout/reftests/css-invalid/select/style.css
new file mode 100644
index 0000000000..5461c6dfb4
--- /dev/null
+++ b/layout/reftests/css-invalid/select/style.css
@@ -0,0 +1,18 @@
+/* Override default style */
+select:invalid {
+ box-shadow: none;
+}
+
+select.notinvalid {
+ background-color: green;
+}
+select.notinvalid:invalid {
+ background-color: red;
+}
+
+select.invalid {
+ background-color: red;
+}
+select.invalid:invalid {
+ background-color: green;
+}
diff --git a/layout/reftests/css-invalid/textarea/reftest-stylo.list b/layout/reftests/css-invalid/textarea/reftest-stylo.list
new file mode 100644
index 0000000000..cd7a2facf3
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/reftest-stylo.list
@@ -0,0 +1,16 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== textarea-valid.html textarea-valid.html
+== textarea-customerror.html textarea-customerror.html
+== textarea-disabled.html textarea-disabled.html
+== textarea-dyn-disabled.html textarea-dyn-disabled.html
+== textarea-dyn-not-disabled.html textarea-dyn-not-disabled.html
+== textarea-readonly.html textarea-readonly.html
+== textarea-dyn-readonly.html textarea-dyn-readonly.html
+== textarea-dyn-not-readonly.html textarea-dyn-not-readonly.html
+skip == textarea-maxlength-valid.html textarea-maxlength-valid.html
+skip == textarea-maxlength-invalid.html textarea-maxlength-invalid.html
+== textarea-required-valid.html textarea-required-valid.html
+== textarea-required-invalid.html textarea-required-invalid.html
+== textarea-disabled-fieldset-1.html textarea-disabled-fieldset-1.html
+== textarea-disabled-fieldset-2.html textarea-disabled-fieldset-2.html
+== textarea-fieldset-legend.html textarea-fieldset-legend.html
diff --git a/layout/reftests/css-invalid/textarea/reftest.list b/layout/reftests/css-invalid/textarea/reftest.list
new file mode 100644
index 0000000000..d290f294f3
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/reftest.list
@@ -0,0 +1,13 @@
+== textarea-valid.html textarea-ref.html
+== textarea-customerror.html textarea-ref.html
+== textarea-disabled.html textarea-ref.html
+== textarea-dyn-disabled.html textarea-ref.html
+== textarea-dyn-not-disabled.html textarea-ref.html
+== textarea-readonly.html textarea-ref.html
+== textarea-dyn-readonly.html textarea-ref.html
+== textarea-dyn-not-readonly.html textarea-ref.html
+== textarea-required-valid.html textarea-withtext-ref.html
+== textarea-required-invalid.html textarea-ref.html
+== textarea-disabled-fieldset-1.html textarea-fieldset-ref.html
+== textarea-disabled-fieldset-2.html textarea-fieldset-ref.html
+== textarea-fieldset-legend.html textarea-fieldset-legend-ref.html
diff --git a/layout/reftests/css-invalid/textarea/style.css b/layout/reftests/css-invalid/textarea/style.css
new file mode 100644
index 0000000000..1fec018af2
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/style.css
@@ -0,0 +1,26 @@
+/* Override default style */
+textarea {
+ border: 0px;
+}
+
+textarea.ref {
+ background-color: green;
+}
+
+textarea:invalid {
+ box-shadow: none;
+}
+
+textarea.notinvalid {
+ background-color: green;
+}
+textarea.notinvalid:invalid {
+ background-color: red;
+}
+
+textarea.invalid {
+ background-color: red;
+}
+textarea.invalid:invalid {
+ background-color: green;
+}
diff --git a/layout/reftests/css-invalid/textarea/textarea-customerror.html b/layout/reftests/css-invalid/textarea/textarea-customerror.html
new file mode 100644
index 0000000000..c7eb33123b
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-customerror.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <script>
+ function doTest() {
+ document.getElementById('t').setCustomValidity('foo');
+ document.documentElement.className='';
+ }
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+ </head>
+ <!-- Test: if textarea has a custom error, it should be affected by :invalid
+ pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <textarea class='invalid' id='t'></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/textarea/textarea-disabled-fieldset-1.html b/layout/reftests/css-invalid/textarea/textarea-disabled-fieldset-1.html
new file mode 100644
index 0000000000..0c07f75ef4
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-disabled-fieldset-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if textarea has a disabled fieldset ancestor, it is barred from
+ constraint validation and should not be affected by :invalid
+ pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <fieldset disabled>
+ <fieldset>
+ <textarea class='notinvalid' required></textarea>
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/textarea/textarea-disabled-fieldset-2.html b/layout/reftests/css-invalid/textarea/textarea-disabled-fieldset-2.html
new file mode 100644
index 0000000000..4d2df60f90
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-disabled-fieldset-2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if textarea has a disabled fieldset ancestor, it is barred from
+ constraint validation and should not be affected by :invalid
+ pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function onloadHandler()
+ {
+ var fieldsets = document.getElementsByTagName("fieldset");
+ fieldsets[1].disabled = true;
+ fieldsets[0].disabled = false;
+ document.documentElement.className='';
+ }
+ </script>
+ <body onload="onloadHandler();">
+ <fieldset disabled>
+ <fieldset>
+ <textarea class='notinvalid' required></textarea>
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/textarea/textarea-disabled.html b/layout/reftests/css-invalid/textarea/textarea-disabled.html
new file mode 100644
index 0000000000..1d0dd1067c
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-disabled.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if textarea is disabled, it is barred from constraint validation
+ and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <textarea class='notinvalid' disabled></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/textarea/textarea-dyn-disabled.html b/layout/reftests/css-invalid/textarea/textarea-dyn-disabled.html
new file mode 100644
index 0000000000..ca707f6c40
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-dyn-disabled.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if textarea is disabled and invalid, it is barred from constraint
+ validation and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function doTest()
+ {
+ var e = document.getElementById('t');
+ e.setCustomValidity('foo');
+ e.disabled = 'true';
+ document.documentElement.className='';
+ }
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+ <body>
+ <textarea class='notinvalid' id='t'></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/textarea/textarea-dyn-not-disabled.html b/layout/reftests/css-invalid/textarea/textarea-dyn-not-disabled.html
new file mode 100644
index 0000000000..3a075a9fdb
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-dyn-not-disabled.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: if textarea is not disabled and invalid, it is candidate for
+ constraint validation and should be affected
+ by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <script>
+ function doTest()
+ {
+ var e = document.getElementById('t');
+ e.setCustomValidity('foo');
+ e.removeAttribute('disabled');
+ document.documentElement.className='';
+ }
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+ <body>
+ <textarea class='invalid' id='t' disabled></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/textarea/textarea-dyn-not-readonly.html b/layout/reftests/css-invalid/textarea/textarea-dyn-not-readonly.html
new file mode 100644
index 0000000000..1cf07c03c6
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-dyn-not-readonly.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <script>
+ function doTest() {
+ document.getElementById('t').removeAttribute('readonly');
+ document.documentElement.className='';
+ }
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+ </head>
+ <!-- Test: if textarea is no longer readonly, it is candidate for constraint
+ validation and should be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <textarea class='invalid' id='t' readonly required></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/textarea/textarea-dyn-readonly.html b/layout/reftests/css-invalid/textarea/textarea-dyn-readonly.html
new file mode 100644
index 0000000000..102e35b668
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-dyn-readonly.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <script>
+ function doTest() {
+ document.getElementById('t').readOnly='ro';
+ document.documentElement.className='';
+ }
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+ </head>
+ <!-- Test: if textarea is readonly, it is barred from constraint validation
+ and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <textarea class='notinvalid' id='t' required></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/textarea/textarea-fieldset-legend-ref.html b/layout/reftests/css-invalid/textarea/textarea-fieldset-legend-ref.html
new file mode 100644
index 0000000000..8e81d23f1f
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-fieldset-legend-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <fieldset>
+ <legend>
+ <textarea class="ref"></textarea>
+ </legend>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/textarea/textarea-fieldset-legend.html b/layout/reftests/css-invalid/textarea/textarea-fieldset-legend.html
new file mode 100644
index 0000000000..0584250a88
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-fieldset-legend.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if textarea has a disabled fieldset ancestor, but is in the first
+ legend, it is not barred from constraint validation and should be
+ affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <fieldset disabled>
+ <legend>
+ <textarea class='invalid' required></textarea>
+ </legend>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/textarea/textarea-fieldset-ref.html b/layout/reftests/css-invalid/textarea/textarea-fieldset-ref.html
new file mode 100644
index 0000000000..1d01eb0438
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-fieldset-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <fieldset>
+ <fieldset>
+ <textarea class="ref"></textarea>
+ </fieldset>
+ </fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/textarea/textarea-readonly.html b/layout/reftests/css-invalid/textarea/textarea-readonly.html
new file mode 100644
index 0000000000..dbc12b6503
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-readonly.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if textarea is readonly, it is barred from constraint validation
+ and should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <textarea class='notinvalid' readonly></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/textarea/textarea-ref.html b/layout/reftests/css-invalid/textarea/textarea-ref.html
new file mode 100644
index 0000000000..b370a02a0f
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <textarea class="ref"></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/textarea/textarea-required-invalid.html b/layout/reftests/css-invalid/textarea/textarea-required-invalid.html
new file mode 100644
index 0000000000..48a2652f8c
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-required-invalid.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if textarea isn't valid nor barred from constraint validation,
+ it should be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <textarea class='invalid' required></textarea>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/textarea/textarea-required-valid.html b/layout/reftests/css-invalid/textarea/textarea-required-valid.html
new file mode 100644
index 0000000000..8c754fd4af
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-required-valid.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if textarea is valid and not barred from constraint validation,
+ it should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <textarea class='notinvalid' required>foo</textarea>
+ </body>
+</html>
+
diff --git a/layout/reftests/css-invalid/textarea/textarea-valid.html b/layout/reftests/css-invalid/textarea/textarea-valid.html
new file mode 100644
index 0000000000..e32d71cd24
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-valid.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: if textarea is valid and is not barred from constraint validation,
+ it should not be affected by :invalid pseudo-class. -->
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <textarea class='notinvalid'></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/css-invalid/textarea/textarea-withtext-ref.html b/layout/reftests/css-invalid/textarea/textarea-withtext-ref.html
new file mode 100644
index 0000000000..a6a2b79cfa
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/textarea-withtext-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <textarea class="ref">foo</textarea>
+ </body>
+</html>