Bug 596515 - Add a possibility of styling form:invalid. r=mounir
authorJignesh Kakadiya <jigneshhk1992@gmail.com>
Tue, 07 Feb 2012 13:51:49 +0100
changeset 87847 7fa9d642fe74ef563ab428b171ade21d1a683003
parent 87846 098e081c16d92955c0b0ca393a08628792a7fbf0
child 87848 870a1156baf066162755c05665a9b1ad9fbafbeb
push id975
push userffxbld
push dateTue, 13 Mar 2012 21:39:16 +0000
treeherdermozilla-aurora@99faebf9dc36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmounir
bugs596515
milestone13.0a1
Bug 596515 - Add a possibility of styling form:invalid. r=mounir
content/html/content/src/nsHTMLFormElement.cpp
content/html/content/src/nsHTMLFormElement.h
layout/reftests/css-invalid/form/form-add-control.html
layout/reftests/css-invalid/form/form-add-invalid-element-dynamic.html
layout/reftests/css-invalid/form/form-add-invalid-element.html
layout/reftests/css-invalid/form/form-add-invalid-with-valid-element.html
layout/reftests/css-invalid/form/form-add-valid-element.html
layout/reftests/css-invalid/form/form-add-valid-with-invalid-element.html
layout/reftests/css-invalid/form/form-add-valid-with-no-element.html
layout/reftests/css-invalid/form/form-dynamic-invalid-barred.html
layout/reftests/css-invalid/form/form-dynamic-invalid-not-barred.html
layout/reftests/css-invalid/form/form-dynamic-invalid.html
layout/reftests/css-invalid/form/form-dynamic-valid.html
layout/reftests/css-invalid/form/form-invalid-and-barred-remove-barred.html
layout/reftests/css-invalid/form/form-invalid-and-barred.html
layout/reftests/css-invalid/form/form-invalid-barred-ref.html
layout/reftests/css-invalid/form/form-invalid-barred.html
layout/reftests/css-invalid/form/form-invalid-ref-2.html
layout/reftests/css-invalid/form/form-invalid-ref.html
layout/reftests/css-invalid/form/form-remove-invalid-element.html
layout/reftests/css-invalid/form/form-static-invalid-barred.html
layout/reftests/css-invalid/form/form-static-invalid.html
layout/reftests/css-invalid/form/form-static-valid.html
layout/reftests/css-invalid/form/form-valid-and-barred-ref.html
layout/reftests/css-invalid/form/form-valid-and-barred-remove-barred.html
layout/reftests/css-invalid/form/form-valid-and-barred.html
layout/reftests/css-invalid/form/form-valid-ref-2.html
layout/reftests/css-invalid/form/form-valid-ref-4.html
layout/reftests/css-invalid/form/form-valid-ref.html
layout/reftests/css-invalid/form/form-with-invalid-element-add-barred-dynamic.html
layout/reftests/css-invalid/form/form-with-valid-and-invalid.html
layout/reftests/css-invalid/form/form-with-valid-element-add-barred-dynamic.html
layout/reftests/css-invalid/form/reftest.list
--- a/content/html/content/src/nsHTMLFormElement.cpp
+++ b/content/html/content/src/nsHTMLFormElement.cpp
@@ -33,16 +33,17 @@
  * the provisions above, a recipient may use your version of this file under
  * the terms of any one of the MPL, the GPL or the LGPL.
  *
  * ***** END LICENSE BLOCK ***** */
 #include "nsHTMLFormElement.h"
 #include "nsIHTMLDocument.h"
 #include "nsIDOMEventTarget.h"
 #include "nsEventStateManager.h"
+#include "nsEventStates.h"
 #include "nsGkAtoms.h"
 #include "nsStyleConsts.h"
 #include "nsPresContext.h"
 #include "nsIDocument.h"
 #include "nsIFrame.h"
 #include "nsIFormControlFrame.h"
 #include "nsDOMError.h"
 #include "nsContentUtils.h"
@@ -1805,16 +1806,18 @@ nsHTMLFormElement::UpdateValidity(bool a
   // Because of backward compatibility, <input type='image'> is not in elements
   // so we have to check for controls not in elements too.
   PRUint32 length = mControls->mNotInElements.Length();
   for (PRUint32 i = 0; i < length; ++i) {
     if (mControls->mNotInElements[i]->IsSubmitControl()) {
       mControls->mNotInElements[i]->UpdateState(true);
     }
   }
+
+  UpdateState(true);
 }
 
 // nsIWebProgressListener
 NS_IMETHODIMP
 nsHTMLFormElement::OnStateChange(nsIWebProgress* aWebProgress,
                                  nsIRequest* aRequest,
                                  PRUint32 aStateFlags,
                                  PRUint32 aStatus)
@@ -2128,16 +2131,29 @@ nsHTMLFormElement::GetValueMissingState(
 }
 
 void
 nsHTMLFormElement::SetValueMissingState(const nsAString& aName, bool aValue)
 {
   mValueMissingRadioGroups.Put(aName, aValue);
 }
 
+nsEventStates
+nsHTMLFormElement::IntrinsicState() const
+{
+  nsEventStates state = nsGenericHTMLElement::IntrinsicState();
+
+  if (mInvalidElementsCount) {
+    state |= NS_EVENT_STATE_INVALID;
+  } else {
+      state |= NS_EVENT_STATE_VALID;
+  }
+
+  return state;
+}
 
 //----------------------------------------------------------------------
 // nsFormControlList implementation, this could go away if there were
 // a lightweight collection implementation somewhere
 
 nsFormControlList::nsFormControlList(nsHTMLFormElement* aForm) :
   mForm(aForm),
   // Initialize the elements list to have an initial capacity
--- a/content/html/content/src/nsHTMLFormElement.h
+++ b/content/html/content/src/nsHTMLFormElement.h
@@ -146,16 +146,18 @@ public:
   NS_IMETHOD RemoveFromRadioGroup(const nsAString& aName,
                                   nsIFormControl* aRadio);
   virtual PRUint32 GetRequiredRadioCount(const nsAString& aName) const;
   virtual void RadioRequiredChanged(const nsAString& aName,
                                     nsIFormControl* aRadio);
   virtual bool GetValueMissingState(const nsAString& aName) const;
   virtual void SetValueMissingState(const nsAString& aName, bool aValue);
 
+  virtual nsEventStates IntrinsicState() const;
+
   // nsIContent
   virtual bool ParseAttribute(PRInt32 aNamespaceID,
                                 nsIAtom* aAttribute,
                                 const nsAString& aValue,
                                 nsAttrValue& aResult);
   virtual nsresult PreHandleEvent(nsEventChainPreVisitor& aVisitor);
   virtual nsresult WillHandleEvent(nsEventChainPostVisitor& aVisitor);
   virtual nsresult PostHandleEvent(nsEventChainPostVisitor& aVisitor);
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
+
new file mode 100644
--- /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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/form/form-invalid-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html>
+  <body>
+  </body>
+</html>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/form/reftest.list
@@ -0,0 +1,25 @@
+== 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-dynamic-not-invalid-barred.html form-invalid-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