Bug 952982 - Submit inputs are subject to constraint validation and match :valid/:invalid as needed. r=bz

This commit is contained in:
Giovanni Sferro 2014-04-29 18:58:00 +02:00
parent 7e66846d66
commit 2493cb4b02
80 changed files with 920 additions and 48 deletions

View File

@ -1,10 +1,14 @@
function check(aElementName, aBarred) {
function check(aElementName, aBarred, aType) {
let doc = gBrowser.contentDocument;
let tooltip = document.getElementById("aHTMLTooltip");
let content = doc.getElementById('content');
let e = doc.createElement(aElementName);
content.appendChild(e);
if (aType) {
e.type = aType;
}
ok(!tooltip.fillInPageTooltip(e),
"No tooltip should be shown when the element is valid");
@ -59,17 +63,18 @@ function test () {
let testData = [
/* element name, barred */
[ 'input', false ],
[ 'textarea', false ],
[ 'button', true ],
[ 'select', false ],
[ 'output', true ],
[ 'fieldset', true ],
[ 'object', true ],
[ 'input', false, null],
[ 'textarea', false, null],
[ 'button', true, 'button'],
[ 'button', false, 'submit'],
[ 'select', false, null],
[ 'output', true, null],
[ 'fieldset', true, null],
[ 'object', true, null],
];
for each (let data in testData) {
check(data[0], data[1]);
check(data[0], data[1], data[2]);
}
let todo_testData = [

View File

@ -63,9 +63,6 @@ HTMLButtonElement::HTMLButtonElement(already_AddRefed<nsINodeInfo>& aNodeInfo,
mInInternalActivate(false),
mInhibitStateRestoration(!!(aFromParser & FROM_PARSER_FRAGMENT))
{
// <button> is always barred from constraint validation.
SetBarredFromConstraintValidation(true);
// Set up our default state: enabled
AddStatesSilently(NS_EVENT_STATE_ENABLED);
}
@ -92,11 +89,36 @@ NS_INTERFACE_TABLE_HEAD_CYCLE_COLLECTION_INHERITED(HTMLButtonElement)
NS_INTERFACE_TABLE_TAIL_INHERITING(nsGenericHTMLFormElementWithState)
// nsIConstraintValidation
NS_IMPL_NSICONSTRAINTVALIDATION(HTMLButtonElement)
NS_IMPL_NSICONSTRAINTVALIDATION_EXCEPT_SETCUSTOMVALIDITY(HTMLButtonElement)
NS_IMETHODIMP
HTMLButtonElement::SetCustomValidity(const nsAString& aError)
{
nsIConstraintValidation::SetCustomValidity(aError);
UpdateState(true);
return NS_OK;
}
void
HTMLButtonElement::UpdateBarredFromConstraintValidation()
{
SetBarredFromConstraintValidation(mType == NS_FORM_BUTTON_BUTTON ||
mType == NS_FORM_BUTTON_RESET ||
IsDisabled());
}
void
HTMLButtonElement::FieldSetDisabledChanged(bool aNotify)
{
UpdateBarredFromConstraintValidation();
nsGenericHTMLFormElementWithState::FieldSetDisabledChanged(aNotify);
}
// nsIDOMHTMLButtonElement
NS_IMPL_ELEMENT_CLONE(HTMLButtonElement)
@ -491,8 +513,11 @@ HTMLButtonElement::AfterSetAttr(int32_t aNameSpaceID, nsIAtom* aName,
if (!aValue) {
mType = kButtonDefaultType->value;
}
}
UpdateState(aNotify);
if (aName == nsGkAtoms::type || aName == nsGkAtoms::disabled) {
UpdateBarredFromConstraintValidation();
UpdateState(aNotify);
}
}
@ -531,6 +556,20 @@ EventStates
HTMLButtonElement::IntrinsicState() const
{
EventStates state = nsGenericHTMLFormElementWithState::IntrinsicState();
if (IsCandidateForConstraintValidation()) {
if (IsValid()) {
state |= NS_EVENT_STATE_VALID;
if (!mForm || !mForm->HasAttr(kNameSpaceID_None, nsGkAtoms::novalidate)) {
state |= NS_EVENT_STATE_MOZ_UI_VALID;
}
} else {
state |= NS_EVENT_STATE_INVALID;
if (!mForm || !mForm->HasAttr(kNameSpaceID_None, nsGkAtoms::novalidate)) {
state |= NS_EVENT_STATE_MOZ_UI_INVALID;
}
}
}
if (mForm && !mForm->GetValidity() && IsSubmitControl()) {
state |= NS_EVENT_STATE_MOZ_SUBMITINVALID;

View File

@ -48,6 +48,8 @@ public:
bool RestoreState(nsPresState* aState) MOZ_OVERRIDE;
virtual bool IsDisabledForEvents(uint32_t aMessage) MOZ_OVERRIDE;
virtual void FieldSetDisabledChanged(bool aNotify) MOZ_OVERRIDE;
// nsIDOMEventTarget
virtual nsresult PreHandleEvent(EventChainPreVisitor& aVisitor) MOZ_OVERRIDE;
virtual nsresult PostHandleEvent(
@ -65,6 +67,7 @@ public:
bool aNullParent = true) MOZ_OVERRIDE;
virtual void DoneCreatingElement() MOZ_OVERRIDE;
void UpdateBarredFromConstraintValidation();
// Element
EventStates IntrinsicState() const MOZ_OVERRIDE;
/**

View File

@ -6685,8 +6685,6 @@ HTMLInputElement::UpdateBarredFromConstraintValidation()
SetBarredFromConstraintValidation(mType == NS_FORM_INPUT_HIDDEN ||
mType == NS_FORM_INPUT_BUTTON ||
mType == NS_FORM_INPUT_RESET ||
mType == NS_FORM_INPUT_SUBMIT ||
mType == NS_FORM_INPUT_IMAGE ||
HasAttr(kNameSpaceID_None, nsGkAtoms::readonly) ||
IsDisabled());
}

View File

@ -255,8 +255,8 @@ var input = document.getElementById('i');
// |validTypes| are the types which accept @pattern
// and |invalidTypes| are the ones which do not accept it.
var validTypes = Array('text', 'password', 'search', 'tel', 'email', 'url');
var barredTypes = Array('hidden', 'reset', 'button', 'submit', 'image');
var invalidTypes = Array('checkbox', 'radio', 'file', 'number', 'range', 'date', 'time', 'color');
var barredTypes = Array('hidden', 'reset', 'button');
var invalidTypes = Array('checkbox', 'radio', 'file', 'number', 'range', 'date', 'time', 'color', 'submit', 'image');
// TODO: 'datetime', 'month', 'week', and 'datetime-local'
// do not accept the @pattern too but are not implemented yet.

View File

@ -360,13 +360,13 @@ checkTextareaRequiredValidity();
// The require attribute behavior depend of the input type.
// First of all, checks for types that make the element barred from
// constraint validation.
var typeBarredFromConstraintValidation = ["hidden", "button", "reset", "submit", "image"];
var typeBarredFromConstraintValidation = ["hidden", "button", "reset"];
for (type of typeBarredFromConstraintValidation) {
checkInputRequiredNotApply(type, true);
}
// Then, checks for the types which do not use the required attribute.
var typeRequireNotApply = ['range', 'color'];
var typeRequireNotApply = ['range', 'color', 'submit', 'image'];
for (type of typeRequireNotApply) {
checkInputRequiredNotApply(type, false);
}

View File

@ -119,8 +119,8 @@ function checkDefaultPseudoClass()
":valid pseudo-class should apply");
is(window.getComputedStyle(document.getElementById('b'), null)
.getPropertyValue('background-color'), "rgb(0, 0, 0)",
":valid pseudo-class should not apply");
.getPropertyValue('background-color'), "rgb(0, 255, 0)",
":valid pseudo-class should apply");
}
function checkSpecificWillValidate()
@ -147,13 +147,13 @@ function checkSpecificWillValidate()
is(window.getComputedStyle(i, null).getPropertyValue('background-color'),
"rgb(0, 0, 0)", "Nor :valid and :invalid should apply");
i.type = "image";
ok(!i.willValidate, "Image state input should be barred from constraint validation");
ok(i.willValidate, "Image state input should not be barred from constraint validation");
is(window.getComputedStyle(i, null).getPropertyValue('background-color'),
"rgb(0, 0, 0)", "Nor :valid and :invalid should apply");
"rgb(0, 255, 0)", ":valid and :invalid should apply");
i.type = "submit";
ok(!i.willValidate, "Submit state input should be barred from constraint validation");
ok(i.willValidate, "Submit state input should not be barred from constraint validation");
is(window.getComputedStyle(i, null).getPropertyValue('background-color'),
"rgb(0, 0, 0)", "Nor :valid and :invalid should apply");
"rgb(0, 255, 0)", ":valid and :invalid should apply");
i.type = "number";
ok(i.willValidate, "Number state input should not be barred from constraint validation");
is(window.getComputedStyle(i, null).getPropertyValue('background-color'),
@ -179,13 +179,13 @@ function checkSpecificWillValidate()
is(window.getComputedStyle(b, null).getPropertyValue('background-color'),
"rgb(0, 0, 0)", "Nor :valid and :invalid should apply");
b.type = "submit";
ok(!b.willValidate, "Submit state button should be barred from constraint validation");
ok(b.willValidate, "Submit state button should not be barred from constraint validation");
is(window.getComputedStyle(b, null).getPropertyValue('background-color'),
"rgb(0, 0, 0)", "Nor :valid and :invalid should apply");
"rgb(0, 255, 0)", ":valid and :invalid should apply");
b.type = "";
ok(!b.willValidate, "Default button element should be barred from constraint validation");
ok(b.willValidate, "Default button element should not be barred from constraint validation");
is(window.getComputedStyle(b, null).getPropertyValue('background-color'),
"rgb(0, 0, 0)", ":valid pseudo-class should apply");
"rgb(0, 255, 0)", ":valid pseudo-class should apply");
// textarea element
t = document.getElementById('t');
@ -332,7 +332,7 @@ checkCustomError(document.getElementById('i'), false);
checkCustomError(document.getElementById('s'), false);
checkCustomError(document.getElementById('t'), false);
checkCustomError(document.getElementById('o'), false);
checkCustomError(document.getElementById('b'), true);
checkCustomError(document.getElementById('b'), false);
checkCustomError(document.getElementById('f'), true);
checkCustomError(document.getElementById('obj'), true);

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,9 +1,9 @@
<!DOCTYPE html>
<html class="reftest-wait">
<!-- Test: if button has a custom error, it should not be affected by :invalid
<!-- 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='notinvalid' id='b'></button>
<button class='invalid' id='b'></button>
</body>
</html>

View File

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

View File

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

View File

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

View File

@ -1,2 +1,12 @@
== button-valid.html button-ref.html
== button-invalid.html button-ref.html
== button-disabled.html button-disabled-ref.html
== button-dyn-disabled.html button-disabled-ref.html
== button-dyn-not-disabled.html button-ref.html
== button-button.html button-ref.html
== button-reset.html button-ref.html
== button-type-invalid.html button-ref.html
== button-type-barred.html button-ref.html
== button-disabled-fieldset-1.html button-fieldset-ref.html
== button-disabled-fieldset-2.html button-fieldset-ref.html
== button-fieldset-legend.html button-fieldset-legend-ref.html

View File

@ -12,4 +12,5 @@
== remove-submit-control.html valid-ref-3.html
== change-type-submit-control.html invalid-ref.html
== change-type-not-submit-control.html valid-ref-4.html
== self-invalid.html about:blank
== remove-form.html invalid-ref-3.html

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html class='reftest-wait'>
<head>
<style>
:invalid { display: none; }
</style>
</head>
<script>
function onloadHandler()
{
document.getElementById('b').setCustomValidity('foo');
document.documentElement.className = '';
}
</script>
<body onload='onloadHandler();'>
<form>
<button id='b' type='submit'></button>
</form>
</body>
</html>

View File

@ -12,4 +12,5 @@ skip-if(B2G) == dynamic-invalid.html invalid-ref.html
== remove-submit-control.html valid-ref-3.html
== change-type-submit-control.html invalid-ref.html
== change-type-not-submit-control.html valid-ref-4.html
== self-invalid.html about:blank
== remove-form.html invalid-ref-3.html

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html class='reftest-wait'>
<head>
<style>
:invalid { display: none; }
</style>
</head>
<script>
function onloadHandler()
{
document.getElementById('i').setCustomValidity('foo');
document.documentElement.className = '';
}
</script>
<body onload='onloadHandler();'>
<form>
<input id='i' type='image'>
</form>
</body>
</html>

View File

@ -12,4 +12,5 @@ skip-if(B2G) == dynamic-invalid.html invalid-ref.html
== remove-submit-control.html valid-ref-3.html
== change-type-submit-control.html invalid-ref.html
== change-type-not-submit-control.html valid-ref-4.html
== self-invalid.html about:blank
== remove-form.html invalid-ref-3.html

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html class='reftest-wait'>
<head>
<style>
:invalid { display: none; }
</style>
</head>
<script>
function onloadHandler()
{
document.getElementById('i').setCustomValidity('foo');
document.documentElement.className = '';
}
</script>
<body onload='onloadHandler();'>
<form>
<input id='i' type='submit'>
</form>
</body>
</html>

View File

@ -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 :-moz-ui-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>

View File

@ -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 :-moz-ui-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>

View File

@ -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 :-moz-ui-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>

View File

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

View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<!-- Test: if button is disabled, it is barred from constraint validation
and should not be affected by :-moz-ui-invalid pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body>
<button class='notinvalid' disabled></button>
</body>
</html>

View File

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

View File

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

View File

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

View File

@ -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 :-moz-ui-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>

View File

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

View File

@ -1,8 +1,9 @@
<!DOCTYPE html>
<html class="reftest-wait">
<!-- Test: button element is never affected by :-moz-ui-invalid. -->
<!-- Test: if button 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='';">
<button class='notinvalid' id='b'></button>
<button class='invalid' id='b'></button>
</body>
</html>

View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html class='reftest-wait'>
<link rel='stylesheet' type='text/css' href='style.css'>
<body onload="document.getElementById('b').setCustomValidity('foo');
document.documentElement.className = '';">
<form novalidate>
<button id='b' class='notinvalid'></button>
</form>
</body>
</html>

View File

@ -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 :-moz-ui-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>

View File

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

View File

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

View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<!-- Test: button element is never affected by :-moz-ui-invalid. -->
<!-- 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>

View File

@ -1,2 +1,13 @@
== button-valid.html button-ref.html
== button-invalid.html button-ref.html
== button-disabled.html button-disabled-ref.html
== button-dyn-disabled.html button-disabled-ref.html
== button-dyn-not-disabled.html button-ref.html
== button-button.html button-ref.html
== button-reset.html button-ref.html
== button-type-invalid.html button-ref.html
== button-type-barred.html button-ref.html
== button-disabled-fieldset-1.html button-fieldset-ref.html
== button-disabled-fieldset-2.html button-fieldset-ref.html
== button-fieldset-legend.html button-fieldset-legend-ref.html
== button-novalidate.html button-ref.html

View File

@ -2,6 +2,6 @@
<html class="reftest-wait">
<link rel='stylesheet' type='text/css' href='style.css'>
<body onload="document.getElementsByTagName('button')[0].focus();">
<button class='barred-ref' onfocus="document.documentElement.className='';"></button>
<button class='invalid-ref' onfocus="document.documentElement.className='';"></button>
</body>
</html>

View File

@ -2,6 +2,6 @@
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<body>
<button class='barred-ref'></button>
<button class='invalid-ref'></button>
</body>
</html>

View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<!-- Test: if button is of the button type, it is barred from constraint
validation and should not be affected by :-moz-ui-valid pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body>
<button class='notvalid' type='button'></button>
</body>
</html>

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<!-- Test: if button has a disabled fieldset ancestor, it is barred from
constraint validation and should not be affected by :valid
pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body>
<fieldset disabled>
<fieldset>
<button class='notvalid'></button>
</fieldset>
</fieldset>
</body>
</html>

View File

@ -0,0 +1,23 @@
<!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 :valid
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>
<button class='notvalid'></button>
</fieldset>
</fieldset>
</body>
</html>

View File

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

View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<!-- Test: if button is disabled, it is barred from constraint validation
and should not be affected by :valid pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body>
<button class='notvalid' disabled></button>
</body>
</html>

View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html class="reftest-wait">
<!-- Test: if button is disabled, it is barred from constraint validation
and should not be affected by :-moz-ui-valid pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body onload="document.getElementById('b').disabled='true'; document.documentElement.className='';">
<button class='notvalid' id='b'></button>
</body>
</html>

View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html class="reftest-wait">
<!-- Test: if button is not disabled, it is candidate for constraint validation
and should be affected by :valid pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body onload="document.getElementById('b').removeAttribute('disabled'); document.documentElement.className='';">
<button class='valid' id='b' disabled></button>
</body>
</html>

View File

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

View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<!-- 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 :valid pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body>
<fieldset disabled>
<legend>
<button class='valid'></button>
</legend>
</fieldset>
</body>
</html>

View File

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

View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<body>
<form novalidate>
<button class='notvalid'></button>
</form>
</body>
</html>

View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<!-- Test: if button is of the reset type, it is barred from constraint
validation and should not be affected by :valid pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body>
<button class='notvalid' type='reset'></button>
</body>
</html>

View File

@ -0,0 +1,10 @@
<!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 :valid pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body onload="document.getElementById('b').type='button'; document.documentElement.className='';">
<button class='notvalid' type='submit' id='b'></button>
</body>
</html>

View File

@ -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 :valid 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='notvalid' type='button' id='b'></button>
</body>
</html>

View File

@ -1,8 +1,9 @@
<!DOCTYPE html>
<html>
<!-- Test: button element is never affected by :-moz-ui-valid. -->
<!-- Test: if button 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>
<button class='notvalid'></button>
<button class='valid'></button>
</body>
</html>

View File

@ -1,2 +1,13 @@
== button-valid.html button-ref.html
== button-invalid.html button-ref.html
== button-disabled.html button-disabled-ref.html
== button-dyn-disabled.html button-disabled-ref.html
== button-dyn-not-disabled.html button-ref.html
== button-button.html button-ref.html
== button-reset.html button-ref.html
== button-type-invalid.html button-ref.html
== button-type-barred.html button-ref.html
== button-disabled-fieldset-1.html button-fieldset-ref.html
== button-disabled-fieldset-2.html button-fieldset-ref.html
== button-fieldset-legend.html button-fieldset-legend-ref.html
== button-novalidate.html button-ref.html

View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<!-- Test: if button is of the button type, it is barred from constraint
validation and should not be affected by :valid pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body>
<button class='notvalid' type='button'></button>
</body>
</html>

View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<!-- Test: if button has a disabled fieldset ancestor, it is barred from
constraint validation and should not be affected by :valid
pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body>
<fieldset disabled>
<fieldset>
<button class='notvalid'></button>
</fieldset>
</fieldset>
</body>
</html>

View File

@ -0,0 +1,23 @@
<!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 :valid
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>
<button class='notvalid'></button>
</fieldset>
</fieldset>
</body>
</html>

View File

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

View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<!-- Test: if button is disabled, it is barred from constraint validation
and should not be affected by :valid pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body>
<button class='notvalid' disabled></button>
</body>
</html>

View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html class="reftest-wait">
<!-- Test: if button is disabled, it is barred from constraint validation
and should not be affected by :valid pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body onload="document.getElementById('b').disabled='true'; document.documentElement.className='';">
<button class='notvalid' id='b'></button>
</body>
</html>

View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html class="reftest-wait">
<!-- Test: if button is not disabled, it is candidate for constraint validation
and should be affected by :valid pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body onload="document.getElementById('b').removeAttribute('disabled'); document.documentElement.className='';">
<button class='valid' id='b' disabled></button>
</body>
</html>

View File

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

View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<!-- 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 :valid pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body>
<fieldset disabled>
<legend>
<button class='valid'></button>
</legend>
</fieldset>
</body>
</html>

View File

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

View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<!-- Test: if button is of the reset type, it is barred from constraint
validation and should not be affected by :valid pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body>
<button class='notvalid' type='reset'></button>
</body>
</html>

View File

@ -0,0 +1,11 @@
<!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 :valid pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body onload="document.getElementById('b').type='button'; document.documentElement.className='';">
<button class='notvalid' type='submit' id='b'></button>
</body>
</html>

View File

@ -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 :valid 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='notvalid' type='button' id='b'></button>
</body>
</html>

View File

@ -4,6 +4,6 @@
validation, it should be affected by :valid pseudo-class. -->
<link rel='stylesheet' type='text/css' href='style.css'>
<body>
<button class='notvalid'></button>
<button class='valid'></button>
</body>
</html>

View File

@ -1,2 +1,12 @@
== button-valid.html button-ref.html
== button-invalid.html button-ref.html
== button-disabled.html button-disabled-ref.html
== button-dyn-disabled.html button-disabled-ref.html
== button-dyn-not-disabled.html button-ref.html
== button-button.html button-ref.html
== button-reset.html button-ref.html
== button-type-invalid.html button-ref.html
== button-type-barred.html button-ref.html
== button-disabled-fieldset-1.html button-fieldset-ref.html
== button-disabled-fieldset-2.html button-fieldset-ref.html
== button-fieldset-legend.html button-fieldset-legend-ref.html

View File

@ -1,9 +1,9 @@
<!DOCTYPE html>
<html>
<!-- Test: if input is of button type, it is barred from constraint validation
and should not be affected by :valid pseudo-class. -->
<!-- Test: if input is of image type, 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>
<input class='notvalid' type='image'>
<input class='valid' type='image'>
</body>
</html>

View File

@ -1,9 +1,9 @@
<!DOCTYPE html>
<html>
<!-- Test: if input is of button type, it is barred from constraint validation
and should not be affected by :valid pseudo-class. -->
<!-- Test: if input is of button type, 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>
<input class='notvalid' type='submit'>
<input class='valid' type='submit'>
</body>
</html>