Add m-esr52 at 52.6.0

author: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
committer: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
commit: 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree: 10027f336435511475e392454359edea8e25895d /layout/reftests/css-invalid
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
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 000000000..41e76115b
--- /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 000000000..4ce9b30dc
--- /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 000000000..f5b2a9e7d
--- /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 000000000..7de1ba7c5
--- /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 000000000..73760ee3d
--- /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 000000000..1c7350d72
--- /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 000000000..7ae667b8e
--- /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 000000000..22adc433c
--- /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 000000000..f308cc42e
--- /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 000000000..60ab1a3ef
--- /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 000000000..f4850ad42
--- /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 000000000..422cc9315
--- /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 000000000..45c57cab7
--- /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 000000000..374861542
--- /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 000000000..a6e20d1a9
--- /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 000000000..1b6f61ca2
--- /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 000000000..df501b3db
--- /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 000000000..8e878faf3
--- /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 000000000..b52ea47cb
--- /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 000000000..0d3a98198
--- /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 000000000..ebbbe583a
--- /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 000000000..028918324
--- /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 000000000..053f07327
--- /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 000000000..31f6e35f2
--- /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 000000000..6a86c17f6
--- /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 000000000..eebfc3b5c
--- /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 000000000..3ce4650a6
--- /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 000000000..3eed47082
--- /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 000000000..bc421bd17
--- /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 000000000..0ff814e1c
--- /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 000000000..c7037764f
--- /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 000000000..4a0731926
--- /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 000000000..74150b303
--- /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 000000000..3485e8806
--- /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 000000000..855a432ce
--- /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 000000000..ab62debd3
--- /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 000000000..6e5363d6b
--- /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 000000000..4157831e6
--- /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 000000000..bfdf264af
--- /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 000000000..2c1b47b78
--- /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 000000000..267199407
--- /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 000000000..cf7905f0c
--- /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 000000000..c40a920cd
--- /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 000000000..bfa266015
--- /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 000000000..c750a3845
--- /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 000000000..2bc2b2bb1
--- /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 000000000..807555072
--- /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 000000000..8f10b70e0
--- /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 000000000..ed104497b
--- /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 000000000..bd8b9a671
--- /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 000000000..fea0c79ae
--- /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 000000000..ba266bf81
--- /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 000000000..4f8e399b6
--- /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 000000000..8f6973007
--- /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 000000000..7df987c9b
--- /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 000000000..c2bf3db34
--- /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 000000000..613286ec2
--- /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 000000000..590b7d30b
--- /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 000000000..06d715f9e
--- /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 000000000..61f21f7e3
--- /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 000000000..59e31af10
--- /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 000000000..30fd521e4
--- /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 000000000..9a9d43a39
--- /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 000000000..3c1e8a3f9
--- /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 000000000..24abf4c4a
--- /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 000000000..954732bb3
--- /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 000000000..07d33ba16
--- /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 000000000..29bb4ad30
--- /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 000000000..9f6017cd6
--- /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 000000000..1260e3f95
--- /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 000000000..09bbd0f11
--- /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 000000000..205897ca0
--- /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 000000000..1c2632fbc
--- /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 000000000..ff110054b
--- /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 000000000..f38ff854e
--- /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 000000000..6e189b4c5
--- /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 000000000..d8bb2a90f
--- /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 000000000..62e24162f
--- /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 000000000..0d4391be3
--- /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 000000000..d9ba4a84c
--- /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 000000000..8509352a5
--- /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 000000000..dd03dc812
--- /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 000000000..d1d41176c
--- /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 000000000..5a75a4c3d
--- /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 000000000..fd1fb016d
--- /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 000000000..aea413e49
--- /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 000000000..b2104bacd
--- /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 000000000..a0dd9e358
--- /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 000000000..dd63b8c5c
--- /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 000000000..3cface5e6
--- /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 000000000..47698f1d9
--- /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 000000000..881c5cab8
--- /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 000000000..e210a812e
--- /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 000000000..893af3e5c
--- /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 000000000..b4ed30576
--- /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 000000000..c012d2521
--- /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 000000000..5abbde77b
--- /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 000000000..e218e7d9b
--- /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 000000000..6f001b210
--- /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 000000000..5d708712a
--- /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 000000000..b954d67c7
--- /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 000000000..1b82858f5
--- /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 000000000..c470f7733
--- /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 000000000..9015e7bc5
--- /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 000000000..770313752
--- /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 000000000..327c1ab8f
--- /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 000000000..83bf1024e
--- /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 000000000..e00ce5f48
--- /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 000000000..66604c45d
--- /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 000000000..8c598ef9d
--- /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 000000000..7eb1c6f98
--- /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 000000000..2a171df0a
--- /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 000000000..4cdb026c7
--- /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 000000000..25c90be99
--- /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 000000000..1509fe487
--- /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 000000000..d949e66e1
--- /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 000000000..4a2325c61
--- /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 000000000..7e5283410
--- /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 000000000..45864b158
--- /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 000000000..e5fadd514
--- /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 000000000..30db7c015
--- /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 000000000..a2cfbd6a1
--- /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 000000000..1ed298cae
--- /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 000000000..d46b1607c
--- /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 000000000..858761472
--- /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 000000000..9abe06bca
--- /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 000000000..1faaedc13
--- /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 000000000..4aebf0026
--- /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 000000000..ad0de3cfb
--- /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 000000000..eea8eb240
--- /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 000000000..bde7d22aa
--- /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 000000000..04d02f9e4
--- /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 000000000..a1a0aa7fb
--- /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 000000000..180235bb6
--- /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 000000000..ac99c0f25
--- /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 000000000..e37173ede
--- /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 000000000..6df386a56
--- /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 000000000..387a384d6
--- /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 000000000..08162538a
--- /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 000000000..9b8e0e039
--- /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 000000000..1b4e93b00
--- /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 000000000..dc9dc5e8c
--- /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 000000000..2064ad16c
--- /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 000000000..e3e221a26
--- /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 000000000..75dc7b09c
--- /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 000000000..0db2c440c
--- /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 000000000..f113342c9
--- /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 000000000..3a855c81b
--- /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 000000000..74468e394
--- /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 000000000..3ede65943
--- /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 000000000..2d75760b4
--- /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 000000000..a8cb70993
--- /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 000000000..9d68f50ec
--- /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 000000000..e76bb9042
--- /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 000000000..9ba5a9600
--- /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 000000000..e131aa6d7
--- /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 000000000..e3a228a89
--- /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 000000000..51e03e541
--- /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 000000000..424c3b5e3
--- /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 000000000..54de470ac
--- /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 000000000..5083cea90
--- /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 000000000..dea989dee
--- /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 000000000..ca82a8022
--- /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 000000000..45d3790ad
--- /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 000000000..a28668557
--- /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 000000000..31f6c81d1
--- /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 000000000..d61068d03
--- /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 000000000..a9477333f
--- /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 000000000..e58e0c576
--- /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 000000000..3c2bde80a
--- /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 000000000..e6e4856dc
--- /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 000000000..2092f8787
--- /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 000000000..5461c6dfb
--- /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 000000000..cd7a2facf
--- /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 000000000..d290f294f
--- /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 000000000..1fec018af
--- /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 000000000..c7eb33123
--- /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 000000000..0c07f75ef
--- /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 000000000..4d2df60f9
--- /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 000000000..1d0dd1067
--- /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 000000000..ca707f6c4
--- /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 000000000..3a075a9fd
--- /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 000000000..1cf07c03c
--- /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 000000000..102e35b66
--- /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 000000000..8e81d23f1
--- /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 000000000..0584250a8
--- /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 000000000..1d01eb043
--- /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 000000000..dbc12b650
--- /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 000000000..b370a02a0
--- /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 000000000..48a2652f8
--- /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 000000000..8c754fd4a
--- /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 000000000..e32d71cd2
--- /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 000000000..a6a2b79cf
--- /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>
author	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
committer	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
commit	5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree	10027f336435511475e392454359edea8e25895d /layout/reftests/css-invalid
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip