Bug 717181 - Make <fieldset> invalid if they contain an invalid form control; r=mounir

This adds a CSS psuedo class to fieldset that acts much in the same way as the one
on form.
This commit is contained in:
Mina Almasry 2013-08-16 20:32:47 -04:00
parent 46c6e64d77
commit a87af7052e
45 changed files with 784 additions and 67 deletions

View File

@ -15,6 +15,7 @@ class nsFormSubmission;
namespace mozilla {
namespace dom {
class Element;
class HTMLFieldSetElement;
} // namespace dom
} // namespace mozilla
@ -87,6 +88,12 @@ public:
NS_DECLARE_STATIC_IID_ACCESSOR(NS_IFORMCONTROL_IID)
/**
* Get the fieldset for this form control.
* @return the fieldset
*/
virtual mozilla::dom::HTMLFieldSetElement *GetFieldSet() = 0;
/**
* Get the form for this form control.
* @return the form

View File

@ -17,12 +17,13 @@ HTMLFieldSetElement::HTMLFieldSetElement(already_AddRefed<nsINodeInfo> aNodeInfo
: nsGenericHTMLFormElement(aNodeInfo)
, mElements(nullptr)
, mFirstLegend(nullptr)
, mInvalidElementsCount(0)
{
// <fieldset> is always barred from constraint validation.
SetBarredFromConstraintValidation(true);
// We start out enabled
AddStatesSilently(NS_EVENT_STATE_ENABLED);
// We start out enabled and valid.
AddStatesSilently(NS_EVENT_STATE_ENABLED | NS_EVENT_STATE_VALID);
}
HTMLFieldSetElement::~HTMLFieldSetElement()
@ -210,6 +211,32 @@ HTMLFieldSetElement::RemoveChildAt(uint32_t aIndex, bool aNotify)
}
}
void
HTMLFieldSetElement::AddElement(nsGenericHTMLFormElement* aElement)
{
mDependentElements.AppendElement(aElement);
// We need to update the validity of the fieldset.
nsCOMPtr<nsIConstraintValidation> cvElmt = do_QueryObject(aElement);
if (cvElmt &&
cvElmt->IsCandidateForConstraintValidation() && !cvElmt->IsValid()) {
UpdateValidity(false);
}
}
void
HTMLFieldSetElement::RemoveElement(nsGenericHTMLFormElement* aElement)
{
mDependentElements.RemoveElement(aElement);
// We need to update the validity of the fieldset.
nsCOMPtr<nsIConstraintValidation> cvElmt = do_QueryObject(aElement);
if (cvElmt &&
cvElmt->IsCandidateForConstraintValidation() && !cvElmt->IsValid()) {
UpdateValidity(true);
}
}
void
HTMLFieldSetElement::NotifyElementsForFirstLegendChange(bool aNotify)
{
@ -231,6 +258,46 @@ HTMLFieldSetElement::NotifyElementsForFirstLegendChange(bool aNotify)
}
}
void
HTMLFieldSetElement::UpdateValidity(bool aElementValidity)
{
if (aElementValidity) {
--mInvalidElementsCount;
} else {
++mInvalidElementsCount;
}
MOZ_ASSERT(mInvalidElementsCount >= 0);
// The fieldset validity has just changed if:
// - there are no more invalid elements ;
// - or there is one invalid elmement and an element just became invalid.
if (!mInvalidElementsCount || (mInvalidElementsCount == 1 && !aElementValidity)) {
UpdateState(true);
}
// We should propagate the change to the fieldset parent chain.
if (mFieldSet) {
mFieldSet->UpdateValidity(aElementValidity);
}
return;
}
nsEventStates
HTMLFieldSetElement::IntrinsicState() const
{
nsEventStates state = nsGenericHTMLFormElement::IntrinsicState();
if (mInvalidElementsCount) {
state |= NS_EVENT_STATE_INVALID;
} else {
state |= NS_EVENT_STATE_VALID;
}
return state;
}
JSObject*
HTMLFieldSetElement::WrapNode(JSContext* aCx, JS::Handle<JSObject*> aScope)
{

View File

@ -55,13 +55,9 @@ public:
const nsIContent* GetFirstLegend() const { return mFirstLegend; }
void AddElement(nsGenericHTMLFormElement* aElement) {
mDependentElements.AppendElement(aElement);
}
void AddElement(nsGenericHTMLFormElement* aElement);
void RemoveElement(nsGenericHTMLFormElement* aElement) {
mDependentElements.RemoveElement(aElement);
}
void RemoveElement(nsGenericHTMLFormElement* aElement);
NS_DECL_CYCLE_COLLECTION_CLASS_INHERITED(HTMLFieldSetElement,
nsGenericHTMLFormElement)
@ -97,6 +93,21 @@ public:
// XPCOM SetCustomValidity is OK for us
virtual nsEventStates IntrinsicState() const;
/*
* This method will update the fieldset's validity. This method has to be
* called by fieldset elements whenever their validity state or status regarding
* constraint validation changes.
*
* @note If an element becomes barred from constraint validation, it has to
* be considered as valid.
*
* @param aElementValidityState the new validity state of the element
*/
void UpdateValidity(bool aElementValidityState);
protected:
virtual JSObject* WrapNode(JSContext* aCx,
JS::Handle<JSObject*> aScope) MOZ_OVERRIDE;
@ -120,10 +131,17 @@ private:
nsTArray<nsGenericHTMLFormElement*> mDependentElements;
nsIContent* mFirstLegend;
/**
* Number of invalid and candidate for constraint validation
* elements in the fieldSet the last time UpdateValidity has been called.
*
* @note Should only be used by UpdateValidity() and IntrinsicState()!
*/
int32_t mInvalidElementsCount;
};
} // namespace dom
} // namespace mozilla
#endif /* mozilla_dom_HTMLFieldSetElement_h */

View File

@ -2105,6 +2105,12 @@ nsGenericHTMLFormElement::GetFormElement()
return mForm;
}
HTMLFieldSetElement*
nsGenericHTMLFormElement::GetFieldSet()
{
return mFieldSet;
}
nsresult
nsGenericHTMLFormElement::GetForm(nsIDOMHTMLFormElement** aForm)
{

View File

@ -1275,6 +1275,7 @@ public:
virtual void SaveSubtreeState() MOZ_OVERRIDE;
// nsIFormControl
virtual mozilla::dom::HTMLFieldSetElement* GetFieldSet();
virtual mozilla::dom::Element* GetFormElement() MOZ_OVERRIDE;
mozilla::dom::HTMLFormElement* GetForm() const
{

View File

@ -8,12 +8,16 @@
#include "nsAString.h"
#include "nsGenericHTMLElement.h"
#include "mozilla/dom/HTMLFormElement.h"
#include "mozilla/dom/HTMLFieldSetElement.h"
#include "mozilla/dom/ValidityState.h"
#include "nsIFormControl.h"
#include "nsContentUtils.h"
const uint16_t nsIConstraintValidation::sContentSpecifiedMaxLengthMessage = 256;
using namespace mozilla;
using namespace mozilla::dom;
nsIConstraintValidation::nsIConstraintValidation()
: mValidityBitField(0)
// By default, all elements are subjects to constraint validation.
@ -131,16 +135,20 @@ nsIConstraintValidation::SetValidityState(ValidityStateType aState,
mValidityBitField &= ~aState;
}
// Inform the form element if our validity has changed.
// Inform the form and fieldset elements if our validity has changed.
if (previousValidity != IsValid() && IsCandidateForConstraintValidation()) {
nsCOMPtr<nsIFormControl> formCtrl = do_QueryInterface(this);
NS_ASSERTION(formCtrl, "This interface should be used by form elements!");
mozilla::dom::HTMLFormElement* form =
static_cast<mozilla::dom::HTMLFormElement*>(formCtrl->GetFormElement());
HTMLFormElement* form =
static_cast<HTMLFormElement*>(formCtrl->GetFormElement());
if (form) {
form->UpdateValidity(IsValid());
}
HTMLFieldSetElement* fieldSet = formCtrl->GetFieldSet();
if (fieldSet) {
fieldSet->UpdateValidity(IsValid());
}
}
}
@ -158,20 +166,24 @@ nsIConstraintValidation::SetBarredFromConstraintValidation(bool aBarred)
mBarredFromConstraintValidation = aBarred;
// Inform the form element if our status regarding constraint validation
// is going to change.
// Inform the form and fieldset elements if our status regarding constraint
// validation is going to change.
if (!IsValid() && previousBarred != mBarredFromConstraintValidation) {
nsCOMPtr<nsIFormControl> formCtrl = do_QueryInterface(this);
NS_ASSERTION(formCtrl, "This interface should be used by form elements!");
mozilla::dom::HTMLFormElement* form =
static_cast<mozilla::dom::HTMLFormElement*>(formCtrl->GetFormElement());
// If the element is going to be barred from constraint validation, we can
// inform the form and fieldset that we are now valid. Otherwise, we are now
// invalid.
HTMLFormElement* form =
static_cast<HTMLFormElement*>(formCtrl->GetFormElement());
if (form) {
// If the element is going to be barred from constraint validation,
// we can inform the form that we are now valid.
// Otherwise, we are now invalid.
form->UpdateValidity(aBarred);
}
HTMLFieldSetElement* fieldSet = formCtrl->GetFieldSet();
if (fieldSet) {
fieldSet->UpdateValidity(aBarred);
}
}
}

View File

@ -89,8 +89,8 @@ function checkConstraintValidationAPIDefaultValues(element)
function checkDefaultPseudoClass()
{
is(window.getComputedStyle(document.getElementById('f'), null)
.getPropertyValue('background-color'), "rgb(0, 0, 0)",
"Nor :valid and :invalid should apply");
.getPropertyValue('background-color'), "rgb(0, 255, 0)",
":valid should apply");
is(window.getComputedStyle(document.getElementById('o'), null)
.getPropertyValue('background-color'), "rgb(0, 255, 0)",
@ -227,9 +227,16 @@ function checkCustomError(element, isBarred)
ok(element.validity.customError, "The element should suffer from a custom error");
ok(!element.validity.valid, "The element should not be valid with a custom error");
is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
isBarred ? "rgb(0, 0, 0)" : "rgb(255, 0, 0)",
":invalid pseudo-classs should apply");
if (element.tagName == "FIELDSET") {
is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
isBarred ? "rgb(0, 255, 0)" : "rgb(255, 0, 0)",
":invalid pseudo-classs should apply" + element.tagName);
}
else {
is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
isBarred ? "rgb(0, 0, 0)" : "rgb(255, 0, 0)",
":invalid pseudo-classs should apply" + element.tagName);
}
element.setCustomValidity("");
is(element.validationMessage, "", "The element should not have a validation message when reseted");
@ -237,7 +244,7 @@ function checkCustomError(element, isBarred)
ok(element.validity.valid, "The element should now be valid");
is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
isBarred ? "rgb(0, 0, 0)" : "rgb(0, 255, 0)",
isBarred && element.tagName != "FIELDSET" ? "rgb(0, 0, 0)" : "rgb(0, 255, 0)",
":valid pseudo-classs should apply");
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -1,12 +1,12 @@
<!DOCTYPE html>
<html class="reftest-wait">
<!-- Test: even if it has a custom error, a fieldset should not be affected by
:invalid pseudo-class. -->
<style>
fieldset { background-color: green; }
fieldset:invalid { background-color: red; }
</style>
<body onload="document.getElementById('f').setCustomValidity('foo'); document.documentElement.className='';">
<fieldset id='f'></fieldset>
</body>
<!-- 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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -1,6 +0,0 @@
<!DOCTYPE html>
<html>
<body>
<fieldset style="background-color: green;"></fieldset>
</body>
</html>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -1,12 +1,14 @@
<!DOCTYPE html>
<!-- Valid fieldset. -->
<html>
<!-- Test: fieldset is always barred from constraint validation.
It should not be affected by :invalid pseudo-class. -->
<style>
fieldset { background-color: green; }
fieldset:invalid { background-color: red; }
</style>
<head>
<style>
fieldset:valid { display: none ;}
</style>
</head>
<body>
<fieldset></fieldset>
<fieldset>
</fieldset>
</body>
</html>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -1,2 +1,29 @@
== fieldset-valid.html fieldset-ref.html
== fieldset-invalid.html fieldset-ref.html
== 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
== fieldset-nested-barred.html fieldset-nested-barred-ref.html

View File

@ -1,12 +1,13 @@
<!DOCTYPE html>
<html class="reftest-wait">
<!-- Test: fieldset is always barred from constraint validation.
It should not be affected by :valid pseudo-class. -->
<!-- Test: fieldset undergoes constraint validation.
It should be affected by :invalid pseudo-class. -->
<style>
fieldset { background-color: green; }
fieldset:valid { background-color: red; }
fieldset:invalid { display: none; }
</style>
<body onload="document.getElementById('f').setCustomValidity('foo'); document.documentElement.className='';">
<fieldset id='f'></fieldset>
<fieldset>
<input id='f'>
</fieldset>
</body>
</html>

View File

@ -1,6 +0,0 @@
<!DOCTYPE html>
<html>
<body>
<fieldset style="background-color: green;"></fieldset>
</body>
</html>

View File

@ -1,12 +1,12 @@
<!DOCTYPE html>
<html>
<!-- Test: fieldset is always barred from constraint validation.
It should not be affected by :valid pseudo-class. -->
<!-- Test: fieldset undergoes constraint validation.
It should be affected by :valid pseudo-class. -->
<style>
fieldset { background-color: green; }
fieldset:valid { background-color: red; }
fieldset:valid { display: none; }
</style>
<body>
<fieldset></fieldset>
<fieldset>
</fieldset>
</body>
</html>

View File

@ -1,2 +1,2 @@
== fieldset-valid.html fieldset-ref.html
== fieldset-invalid.html fieldset-ref.html
== fieldset-valid.html about:blank
== fieldset-invalid.html about:blank