50 lines
2 KiB
HTML
50 lines
2 KiB
HTML
<!DOCTYPE html>
|
|
<body>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<script>
|
|
customElements.define('custom-input-parser', class extends HTMLElement {
|
|
static get formAssociated() {return true;}
|
|
});
|
|
</script>
|
|
|
|
<form>
|
|
<fieldset id="fs_outer">
|
|
<custom-input-parser name="custom-1"></custom-input>
|
|
<custom-input-upgrade name="custom-2"></custom-input>
|
|
<fieldset id="fs_inner">
|
|
<custom-input-parser name="custom-3"></custom-input>
|
|
<custom-input-upgrade name="custom-4"></custom-input>
|
|
<uncustom-input></custom-input>
|
|
</fieldset>
|
|
</fieldset>
|
|
<custom-input-parser name="custom-5"></custom-input>
|
|
<custom-input-upgrade name="custom-6"></custom-input>
|
|
</form>
|
|
|
|
<script>
|
|
test(() => {
|
|
const formElements = document.forms[0].elements;
|
|
const fs_outer = document.getElementById("fs_outer");
|
|
const fs_inner = document.getElementById("fs_inner");
|
|
|
|
assert_array_equals(fs_inner.elements, [formElements['custom-3']],
|
|
"The items in the collection must be children of the inner fieldset element.");
|
|
assert_array_equals(fs_outer.elements, [formElements['custom-1'], fs_inner, formElements['custom-3']],
|
|
"The items in the collection must be descendants of the outer fieldset element.");
|
|
|
|
customElements.define('custom-input-upgrade', class extends HTMLElement {
|
|
static get formAssociated() {return true;}
|
|
});
|
|
|
|
assert_array_equals(fs_inner.elements, [formElements['custom-3'], formElements['custom-4']],
|
|
"The items in the collection must be children of the inner fieldset element.");
|
|
assert_array_equals(fs_outer.elements,
|
|
[formElements['custom-1'], formElements['custom-2'], fs_inner, formElements['custom-3'], formElements['custom-4']],
|
|
"The items in the collection must be descendants of the outer fieldset element.");
|
|
|
|
}, 'Form associated custom elements should work with fieldset.elements');
|
|
|
|
</script>
|
|
</body>
|