Skip to content

GitLab

T
tangled
Commit ade0f560 authored by Kent Tamura's avatar Kent Tamura Committed by Commit Bot
Browse files
Options

Form-associated custom elements: Remove upstreamed tests. 

Tests in custom-elements/tentative were upstreamed to WPT by
https://github.com/web-platform-tests/wpt/pull/15740 .

Bug: 905922
Change-Id: I3e0b24486562b69e6fa212fd93927d3811d13967
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1619590Reviewed-by: default avatarHayato Ito <hayato@chromium.org>
Commit-Queue: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#661298}
parent adf1af3d
Hide whitespace changes
Inline Side-by-side
Showing with 0 additions and 766 deletions
third_party/blink/web_tests/custom-elements/tentative/ElementInternals.html deleted 100644 → 0
View file @ adf1af3d
<!DOCTYPE html>
<body>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
test(() => {
class MyElement1 extends HTMLElement {}
customElements.define('my-element1', MyElement1);
const element = new MyElement1();
const internals = element.attachInternals();
assert_throws('NotSupportedError', () => { internals.setFormValue(''); });
assert_throws('NotSupportedError', () => { internals.form; });
assert_throws('NotSupportedError', () => { internals.setValidity({}); });
assert_throws('NotSupportedError', () => { internals.willValidate; });
assert_throws('NotSupportedError', () => { internals.validity; });
assert_throws('NotSupportedError', () => { internals.validationMessage; });
assert_throws('NotSupportedError', () => { internals.checkValidity(); });
assert_throws('NotSupportedError', () => { internals.reportValidity(); });
assert_throws('NotSupportedError', () => { internals.labels; });
}, 'Form-related operations and attributes should throw NotSupportedErrors' +
' for non-form-associated custom elements.');
</script>
</body>
third_party/blink/web_tests/custom-elements/tentative/form-associated-disabled.html deleted 100644 → 0
View file @ adf1af3d
<!DOCTYPE html>
<body>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
class MyControl extends HTMLElement {
static get formAssociated() { return true; }
constructor() {
super();
this.internals_ = this.attachInternals();
this.internals_.setFormValue('my-control-value');
this.disabledHistory_ = [];
}
formDisabledCallback(isDisabled) {
this.disabledHistory_.push(isDisabled);
}
disabledHistory() {
return this.disabledHistory_;
}
}
customElements.define('my-control', MyControl);
test(() => {
const control = new MyControl();
assert_true(control.matches(':enabled'));
assert_false(control.matches(':disabled'));
control.setAttribute('disabled', '');
assert_false(control.matches(':enabled'));
assert_true(control.matches(':disabled'));
control.removeAttribute('disabled', '');
assert_true(control.matches(':enabled'));
assert_false(control.matches(':disabled'));
assert_array_equals(control.disabledHistory(), [true, false]);
}, 'Adding/removing disabled content attribute');
test(() => {
const container = document.createElement('fieldset');
container.innerHTML = '<fieldset><fieldset><my-control></my-control></fieldset></fieldset>';
const middleFieldset = container.firstChild;
const control = container.querySelector('my-control');
assert_true(control.matches(':enabled'));
assert_false(control.matches(':disabled'));
middleFieldset.disabled = true;
assert_false(control.matches(':enabled'));
assert_true(control.matches(':disabled'));
middleFieldset.disabled = false;
assert_true(control.matches(':enabled'));
assert_false(control.matches(':disabled'));
container.disabled = true;
assert_false(control.matches(':enabled'));
assert_true(control.matches(':disabled'));
control.remove();
assert_true(control.matches(':enabled'));
assert_false(control.matches(':disabled'));
middleFieldset.appendChild(control);
assert_false(control.matches(':enabled'));
assert_true(control.matches(':disabled'));
assert_array_equals(control.disabledHistory(), [true, false, true, false, true]);
}, 'Relationship with FIELDSET');
test(() => {
const form = document.createElement('form');
document.body.appendChild(form);
form.innerHTML = '<my-control name="n1" disabled></my-control><input name="n2">'
const formData = new FormData(form);
assert_equals(formData.get('n1'), null);
}, 'A disabled form-associated custom element should not submit its value');
test(() => {
const control = new MyControl();
document.body.appendChild(control);
control.setAttribute('tabindex', '0');
control.setAttribute('disabled', '');
control.focus();
assert_not_equals(document.activeElement, control);
control.removeAttribute('disabled');
control.focus();
assert_equals(document.activeElement, control);
}, 'Disabled attribute affects focus-capability');
test(() => {
const container = document.createElement('div');
document.body.appendChild(container);
// inneHTML upgrades my-control at its CEReacions timing.
container.innerHTML = '<my-control disabled>';
assert_array_equals(container.firstChild.disabledHistory(), [true]);
container.innerHTML = '<fieldset disabled><my-control>';
assert_array_equals(container.querySelector('my-control').disabledHistory(), [true]);
}, 'Upgrading an element with disabled content attribute');
</script>
</body>
third_party/blink/web_tests/custom-elements/tentative/form-associated-reset.html deleted 100644 → 0
View file @ adf1af3d
<!DOCTYPE html>
<body>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
class MyControl extends HTMLElement {
static get formAssociated() { return true; }
constructor() {
super();
this.resetCalled_ = false;
}
formResetCallback() {
this.resetCalled_ = true;
}
get resetCalled() { return this.resetCalled_; }
}
customElements.define('my-control', MyControl);
test(() => {
document.body.insertAdjacentHTML('beforeend',
'<form><my-control></my-control><output>default</output></form>');
let form = document.body.lastChild;
let custom = form.firstChild;
let output = form.lastChild;
output.value = 'updated';
output.addEventListener('DOMSubtreeModified', () => {
assert_false(custom.resetCalled, 'formResetCallback should not be ' +
'called before built-in control\'s reset');
});
form.reset();
assert_true(custom.resetCalled);
}, 'form.reset(): formResetCallback is called after reset of the last ' +
'built-in form control and before the next statement.');
let t = async_test('Clicking a reset button invokes formResetCallback in a ' +
'microtask');
t.step(() => {
document.body.insertAdjacentHTML('beforeend',
'<form><my-control></my-control><input type=reset></form>');
let form = document.body.lastChild;
let custom = form.firstChild;
let resetButton = form.lastChild;
assert_false(custom.resetCalled);
resetButton.click();
assert_false(custom.resetCalled);
window.queueMicrotask(t.step_func_done(() => {
assert_true(custom.resetCalled);
}));
});
</script>
</body>
third_party/blink/web_tests/custom-elements/tentative/form-association.html deleted 100644 → 0
View file @ adf1af3d
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
class PreDefined extends HTMLElement {
static get formAssociated() { return true; }
constructor() {
super();
this.internals_ = this.attachInternals();
this.formHistory_ = [];
}
formAssociatedCallback(nullableForm) {
this.formHistory_.push(nullableForm);
}
formHistory() {
return this.formHistory_;
}
get form() {
return this.internals_.form;
}
}
customElements.define('pre-defined', PreDefined);
</script>
<div id="container">
<fieldset id="fs1">
<form id="form1">
<input>
<pre-defined id="pd1"></pre-defined>
<select></select>
</form>
</fieldset>
<fieldset id="fs2">
<pre-defined id="pd2" form="form2"></pre-defined>
<form id="form2">
<input>
<select></select>
</form>
</fieldset>
<pre-defined id="pd3" form="form2"></pre-defined>
<table>
<fieldset id="fs3">
<form id="form3">
<tr><td><select></select></tr>
<tr><td><pre-defined id="pd4"></pre-defined></tr>
<tr><td><input></tr>
</form> <!-- The end tag is bogus. -->
</fieldset> <!-- The end tag is bogus. -->
<table>
</div>
<script>
const $ = document.querySelector.bind(document);
test(() => {
let controls = $('#form1').elements;
assert_equals(controls.length, 3);
assert_equals(controls[1], $('#pd1'), 'form.elements');
assert_equals($('#pd1').form, $('#form1'));
assert_array_equals($('#pd1').formHistory(), [$('#form1')]);
assert_equals($('#fs1').elements[1], $('#pd1'), 'fieldset.elements');
controls = $('#form2').elements;
assert_equals(controls.length, 4);
assert_equals(controls[0], $('#pd2'), 'form.elements');
assert_equals(controls[3], $('#pd3'));
assert_equals($('#pd2').form, $('#form2'));
assert_equals($('#pd3').form, $('#form2'));
assert_array_equals($('#pd2').formHistory(), [$('#form2')]);
assert_array_equals($('#pd3').formHistory(), [$('#form2')]);
controls = $('#fs2').elements;
assert_equals(controls.length, 3);
assert_equals(controls[0], $('#pd2'), 'fieldset.elements');
controls = $('#form3').elements;
assert_equals(controls.length, 2);
assert_not_equals(controls[1], $('#pd4'));
assert_equals($('#fs3').elements.length, 0);
}, 'Associate by parser, customized at element creation');
test(() => {
$('#container').innerHTML = '<fieldset id="fs1"><form id="form1"><input><will-be-defined id="wbd1">' +
'</will-be-defined><select></select></form></fieldset>' +
'<fieldset id="fs2"><will-be-defined id="wbd2" form="form2"></will-be-defined>' +
'<form id="form2"></form></fieldset><will-be-defined id="wbd3" form="form2"></will-be-defined>';
let controls = $('#form1').elements;
assert_equals(controls.length, 2);
assert_not_equals(controls[1], $('#wbd1'));
controls = $('#fs1').elements;
assert_equals(controls.length, 2);
assert_not_equals(controls[1], $('#wbd1'));
assert_equals($('#form2').elements.length, 0);
assert_equals($('#fs2').elements.length, 0);
class WillBeDefined extends HTMLElement {
static get formAssociated() { return true; }
constructor() {
super();
this.internals_ = this.attachInternals();
this.formHistory_ = [];
}
formAssociatedCallback(nullableForm) {
this.formHistory_.push(nullableForm);
}
formHistory() {
return this.formHistory_;
}
get form() {
return this.internals_.form;
}
}
customElements.define('will-be-defined', WillBeDefined);
customElements.upgrade(container);
controls = $('#form1').elements;
assert_equals(controls.length, 3, 'form.elements.length');
assert_equals(controls[1], $('#wbd1'));
assert_equals($('#wbd1').form, $('#form1'));
controls = $('#fs1').elements;
assert_equals(controls.length, 3, 'fieldset.elements.length');
assert_equals(controls[1], $('#wbd1'));
controls = $('#form2').elements;
assert_equals($('#wbd2').form, $('#form2'));
assert_equals($('#wbd3').form, $('#form2'));
assert_array_equals($('#wbd2').formHistory(), [$('#form2')]);
assert_array_equals($('#wbd3').formHistory(), [$('#form2')]);
assert_equals(controls.length, 2, 'form.elements.length');
assert_equals(controls[0], $('#wbd2'));
assert_equals(controls[1], $('#wbd3'));
controls = $('#fs2').elements;
assert_equals(controls.length, 1, 'fieldset.elements.length');
assert_equals(controls[0], $('#wbd2'));
}, 'Parsed, connected, then upgraded');
test(() => {
$('#container').innerHTML = '<fieldset id="fs1"><form id="form1"><input><pre-defined id="pd1">' +
'</pre-defined><select></select></form></fieldset>' +
'<fieldset id="fs2"><pre-defined id="pd2" form="form2"></pre-defined>' +
'<form id="form2"></form></fieldset><pre-defined id="pd3" form="form2"></pre-defined>';
const pd1 = $('#pd1');
assert_equals($('#form1').elements.length, 3, 'form.elements.length before removal');
assert_equals($('#fs1').elements.length, 3, 'fildset.elements.length before removal');
pd1.remove();
assert_equals(pd1.form, null);
assert_array_equals(pd1.formHistory(), [$('#form1'), null]);
assert_equals($('#form1').elements.length, 2, 'form.elements.length after removal');
assert_equals($('#fs1').elements.length, 2, 'fildset.elements.length after removal');
const pd2 = $('#pd2');
const pd3 = $('#pd3');
assert_equals($('#form2').elements.length, 2, 'form.elements.length before removal');
assert_equals($('#fs2').elements.length, 1, 'fieldset.elements.length before removal');
pd2.remove();
pd3.remove();
assert_equals(pd2.form, null);
assert_equals(pd3.form, null);
assert_array_equals(pd2.formHistory(), [$('#form2'), null]);
assert_array_equals(pd3.formHistory(), [$('#form2'), null]);
assert_equals($('#form2').elements.length, 0, 'form.elements.length after removal');
assert_equals($('#fs2').elements.length, 0, 'fieldset.elements.length after removal');
}, 'Disassociation');
test(() => {
$('#container').innerHTML = '<form id="form1"></form>' +
'<pre-defined id="pd1"></pre-defined><form id="form2"></form>';
const pd1 = $('#pd1');
const form1 = $('#form1');
const form2 = $('#form2');
assert_equals(pd1.form, null);
pd1.setAttribute('form', 'form1');
assert_equals(pd1.form, form1);
pd1.setAttribute('form', 'form2');
assert_equals(pd1.form, form2);
$('#container').innerHTML = '';
assert_equals(pd1.form, null);
}, 'Updating "form" content attribute');
</script>
third_party/blink/web_tests/custom-elements/tentative/form-label.html deleted 100644 → 0
View file @ adf1af3d
<!DOCTYPE html>
<body>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="container"></div>
<script>
class MyControl extends HTMLElement {
static get formAssociated() { return true; }
constructor() {
super();
this.internals_ = this.attachInternals();
}
get i() { return this.internals_; }
}
customElements.define('my-control', MyControl);
const container = document.querySelector('#container');
test(() => {
container.innerHTML = '<label><span><my-control></my-control></span></label>';
let label = container.querySelector('label');
let control = container.querySelector('my-control');
assert_equals(label.control, control);
assert_equals(control.i.labels[0], label);
container.innerHTML = '<label for="mc"></label><form><my-control id="mc"></my-control></form>';
label = container.querySelector('label');
control = container.querySelector('my-control');
assert_equals(label.control, control);
assert_equals(label.form, control.i.form);
assert_equals(control.i.labels[0], label);
container.innerHTML = '<label for="mc"></label><label for="mc"><my-control id="mc">';
const labels = container.querySelectorAll('label');
control = container.querySelector('my-control');
assert_equals(control.i.labels[0], labels[0]);
assert_equals(control.i.labels[1], labels[1]);
}, 'LABEL association');
test(() => {
container.innerHTML = '<label for="mc"></label><form><my-control id="mc"></my-control></form>';
const control = container.querySelector('my-control');
let clickCount = 0;
control.addEventListener('click', e => { ++clickCount; });
container.querySelector('label').click();
assert_equals(clickCount, 1);
}, 'LABEL click');
</script>
</body>
third_party/blink/web_tests/custom-elements/tentative/form-submission.html deleted 100644 → 0
View file @ adf1af3d
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="container"></div>
<script>
class MyControl extends HTMLElement {
static get formAssociated() { return true; }
constructor() {
super();
this.internals_ = this.attachInternals();
this.value_ = '';
}
get value() {
return this.value_;
}
set value(str) {
this.internals_.setFormValue(str);
this.value_ = str;
}
setValues(nameValues) {
const formData = new FormData();
for (let p of nameValues) {
formData.append(p[0], p[1]);
}
this.internals_.setFormValue(formData);
}
}
customElements.define('my-control', MyControl);
const $ = document.querySelector.bind(document);
function submitPromise(t) {
return new Promise((resolve, reject) => {
const iframe = $('iframe');
iframe.onload = () => resolve(iframe.contentWindow.location.search);
iframe.onerror = () => reject();
$('form').submit();
});
}
promise_test(t => {
$('#container').innerHTML = '<form action="../../external/wpt/common/blank.html" target="if1">' +
'<input name=name-pd1 value="value-pd1">' +
'<my-control></my-control>' +
'</form>' +
'<iframe name="if1"></iframe>';
return submitPromise(t).then(query => {
assert_equals(query, '?name-pd1=value-pd1');
});
}, 'Single value - name is missing');
promise_test(t => {
$('#container').innerHTML = '<form action="../../external/wpt/common/blank.html" target="if1">' +
'<input name=name-pd1 value="value-pd1">' +
'<my-control name=""></my-control>' +
'<input name=name-pd2 value="value-pd2">' +
'</form>' +
'<iframe name="if1"></iframe>';
$('my-control').value = 'value-ce1';
return submitPromise(t).then(query => {
assert_equals(query, '?name-pd1=value-pd1&name-pd2=value-pd2');
});
}, 'Single value - empty name exists');
promise_test(t => {
$('#container').innerHTML = '<form action="../../external/wpt/common/blank.html" target="if1">' +
'<input name=name-pd1 value="value-pd1">' +
'<my-control name="name-ce1"></my-control>' +
'<my-control name="name-ce2"></my-control>' +
'</form>' +
'<iframe name="if1"></iframe>';
$('my-control').value = 'value-ce1';
return submitPromise(t).then(query => {
assert_equals(query, '?name-pd1=value-pd1&name-ce1=value-ce1&name-ce2=');
});
}, 'Single value - Non-empty name exists');
promise_test(t => {
$('#container').innerHTML = '<form action="../../external/wpt/common/blank.html" target="if1">' +
'<input name=name-pd1 value="value-pd1">' +
'<my-control name="name-ce1"></my-control>' +
'<my-control name="name-ce2"></my-control>' +
'</form>' +
'<iframe name="if1"></iframe>';
$('my-control').value = null;
return submitPromise(t).then(query => {
assert_equals(query, '?name-pd1=value-pd1&name-ce2=');
});
}, 'Null value should submit nothing');
promise_test(t => {
$('#container').innerHTML = '<form action="../../external/wpt/common/blank.html" target="if1">' +
'<input name=name-pd1 value="value-pd1">' +
'<my-control name=name-ce1></my-control>' +
'</form>' +
'<iframe name="if1"></iframe>';
$('my-control').value = 'value-ce1';
$('my-control').setValues([]);
$('my-control').setValues([['sub1', 'subvalue1'],
['sub2', 'subvalue2'],
['sub2', 'subvalue3']]);
return submitPromise(t).then(query => {
assert_equals(query, '?name-pd1=value-pd1&sub1=subvalue1&sub2=subvalue2&sub2=subvalue3');
});
}, 'Multiple values - name content attribute is ignored');
promise_test(t => {
$('#container').innerHTML = '<form action="../../external/wpt/common/blank.html" target="if1">' +
'<input name=name-pd1 value="value-pd1">' +
'<my-control name=name-ce1></my-control>' +
'</form>' +
'<iframe name="if1"></iframe>';
$('my-control').value = 'value-ce1';
$('my-control').setValues([]);
return submitPromise(t).then(query => {
assert_equals(query, '?name-pd1=value-pd1');
});
}, 'setFormValue with an empty FormData should submit nothing');
</script>
third_party/blink/web_tests/custom-elements/tentative/form-validation.html deleted 100644 → 0
View file @ adf1af3d
<!DOCTYPE html>
<body>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="container"></div>
<script>
class MyControl extends HTMLElement {
static get formAssociated() { return true; }
constructor() {
super();
this.internals_ = this.attachInternals();
}
get i() { return this.internals_; }
}
customElements.define('my-control', MyControl);
test(() => {
const control = new MyControl();
assert_true(control.i.willValidate, 'default value is true');
const datalist = document.createElement('datalist');
datalist.appendChild(control);
assert_false(control.i.willValidate, 'false in DATALIST');
const fieldset = document.createElement('fieldset');
fieldset.appendChild(control);
assert_true(control.i.willValidate, 'In enabled FIELDSET');
fieldset.disabled = true;
assert_false(control.i.willValidate, 'In disabled FIELDSET');
fieldset.removeChild(control);
control.setAttribute('disabled', '');
assert_false(control.i.willValidate, 'with disabled attribute');
}, 'willValidate');
test(() => {
const control = document.createElement('my-control');
const validity = control.i.validity;
assert_false(validity.valueMissing, 'default valueMissing');
assert_false(validity.typeMismatch, 'default typeMismatch');
assert_false(validity.patternMismatch, 'default patternMismatch');
assert_false(validity.tooLong, 'default tooLong');
assert_false(validity.tooShort, 'default tooShort');
assert_false(validity.rangeUnderflow, 'default rangeUnderflow');
assert_false(validity.rangeOverflow, 'default rangeOverflow');
assert_false(validity.stepMismatch, 'default stepMismatch');
assert_false(validity.badInput, 'default badInput');
assert_false(validity.customError, 'default customError');
assert_true(validity.valid, 'default valid');
control.i.setValidity({valueMissing: true}, 'valueMissing message');
assert_true(validity.valueMissing);
assert_false(validity.valid);
assert_equals(control.i.validationMessage, 'valueMissing message');
control.i.setValidity({typeMismatch: true}, 'typeMismatch message');
assert_true(validity.typeMismatch);
assert_false(validity.valueMissing);
assert_false(validity.valid);
assert_equals(control.i.validationMessage, 'typeMismatch message');
control.i.setValidity({patternMismatch: true}, 'patternMismatch message');
assert_true(validity.patternMismatch);
assert_false(validity.valid);
assert_equals(control.i.validationMessage, 'patternMismatch message');
control.i.setValidity({tooLong: true}, 'tooLong message');
assert_true(validity.tooLong);
assert_false(validity.valid);
assert_equals(control.i.validationMessage, 'tooLong message');
control.i.setValidity({tooShort: true}, 'tooShort message');
assert_true(validity.tooShort);
assert_false(validity.valid);
assert_equals(control.i.validationMessage, 'tooShort message');
control.i.setValidity({rangeUnderflow: true}, 'rangeUnderflow message');
assert_true(validity.rangeUnderflow);
assert_false(validity.valid);
assert_equals(control.i.validationMessage, 'rangeUnderflow message');
control.i.setValidity({rangeOverflow: true}, 'rangeOverflow message');
assert_true(validity.rangeOverflow);
assert_false(validity.valid);
assert_equals(control.i.validationMessage, 'rangeOverflow message');
control.i.setValidity({stepMismatch: true}, 'stepMismatch message');
assert_true(validity.stepMismatch);
assert_false(validity.valid);
assert_equals(control.i.validationMessage, 'stepMismatch message');
control.i.setValidity({badInput: true}, 'badInput message');
assert_true(validity.badInput);
assert_false(validity.valid);
assert_equals(control.i.validationMessage, 'badInput message');
control.i.setValidity({customError: true}, 'customError message');
assert_true(validity.customError, 'customError should be true.');
assert_false(validity.valid);
assert_equals(control.i.validationMessage, 'customError message');
// Set multiple flags
control.i.setValidity({badInput: true, customError: true}, 'multiple errors');
assert_true(validity.badInput);
assert_true(validity.customError);
assert_false(validity.valid);
assert_equals(control.i.validationMessage, 'multiple errors');
// Clear flags
control.i.setValidity({}, 'unnecessary message');
assert_false(validity.badInput);
assert_false(validity.customError);
assert_true(validity.valid);
assert_equals(control.i.validationMessage, '');
assert_throws("TypeMismatchError", () => { control.i.setValidity({valueMissing: true}); },
'setValidity() requires the second argument if the first argument contains true');
}, 'validity and setValidity()');
test(() => {
const control = document.createElement('my-control');
let invalidCount = 0;
control.addEventListener('invalid', e => {
assert_equals(e.target, control);
assert_true(e.cancelable);
++invalidCount;
});
assert_true(control.i.checkValidity(), 'default state');
assert_equals(invalidCount, 0);
control.i.setValidity({customError:true}, 'foo');
assert_false(control.i.checkValidity());
assert_equals(invalidCount, 1);
}, 'checkValidity()');
test(() => {
const control = document.createElement('my-control');
document.body.appendChild(control);
control.tabIndex = 0;
let invalidCount = 0;
control.addEventListener('invalid', e => {
assert_equals(e.target, control);
assert_true(e.cancelable);
++invalidCount;
});
assert_true(control.i.reportValidity(), 'default state');
assert_equals(invalidCount, 0);
assert_not_equals(document.activeElement, control);
control.i.setValidity({customError:true}, 'foo');
assert_false(control.i.reportValidity());
assert_equals(invalidCount, 1);
assert_equals(document.activeElement, control);
control.blur();
control.addEventListener('invalid', e => e.preventDefault());
assert_false(control.i.reportValidity());
assert_not_equals(document.activeElement, control);
}, 'reportValidity()');
test(() => {
const container = document.getElementById('container');
container.innerHTML = '<form><input type=submit><my-control>';
const form = container.querySelector('form');
const control = container.querySelector('my-control');
control.tabIndex = 0;
assert_true(control.i.checkValidity());
assert_true(form.checkValidity());
control.i.setValidity({valueMissing: true}, 'Please fill out this field');
assert_false(form.checkValidity());
assert_false(form.reportValidity());
assert_equals(document.activeElement, control);
control.blur();
container.querySelector('input[type=submit]').click();
assert_equals(document.activeElement, control);
}, 'Custom control affects validation at the owner form');
function isValid(element, comment) {
assert_true(element.matches(':valid'), comment ? (comment + ' - :valid') : undefined);
assert_false(element.matches(':invalid'), comment ? (comment + ' - :invalid') : undefined);
}
function isInvalid(element, comment) {
assert_false(element.matches(':valid'), comment ? (comment + ' - :valid') : undefined);
assert_true(element.matches(':invalid'), comment ? (comment + ' - :invalid') : undefined);
}
test(() => {
const container = document.getElementById('container');
container.innerHTML = '<form><fieldset><my-control>';
const form = container.querySelector('form');
const fieldset = container.querySelector('fieldset');
const control = container.querySelector('my-control');
isValid(control);
isValid(form);
isValid(fieldset);
control.i.setValidity({typeMismatch: true}, 'Invalid format');
isInvalid(control);
isInvalid(form);
isInvalid(fieldset);
control.remove();
isValid(form);
isValid(fieldset);
fieldset.appendChild(control);
isInvalid(form);
isInvalid(fieldset);
control.i.setValidity({});
isValid(control);
isValid(form);
isValid(fieldset);
}, ':valid :invalid for FORM and FIELDSET');
</script>
</body>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment