82 lines
3.1 KiB
HTML
82 lines
3.1 KiB
HTML
<!DOCTYPE HTML>
|
|
<meta charset="utf-8" />
|
|
<link rel=help href="https://html.spec.whatwg.org/#attr-associated-element">
|
|
<link rel="author" href="masonf@chromium.org">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<div id=single_element>
|
|
<input aria-activedescendant=foo>
|
|
<p id=foo></p>
|
|
</div>
|
|
|
|
<div id=array>
|
|
<input aria-describedby="foo1 foo2">
|
|
<div id=targets>
|
|
<p id=foo1></p>
|
|
<p id=foo2></p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function isIterable(obj) {
|
|
if (obj === null)
|
|
return false;
|
|
return typeof obj[Symbol.iterator] === 'function';
|
|
}
|
|
function toSet(elementOrList) {
|
|
if (!isIterable(elementOrList)) {
|
|
return new Set([elementOrList]);
|
|
}
|
|
return new Set(elementOrList);
|
|
}
|
|
function assert_equal_elements(arr1, arr2, msg) {
|
|
msg = msg || "Arrays not equal";
|
|
arr1 = toSet(arr1);
|
|
arr2 = toSet(arr2);
|
|
assert_true(arr1.size === arr2.size &&
|
|
[...arr1].every((x) => arr2.has(x)), msg);
|
|
}
|
|
function single_test(container, targets, contentAttr, idlAttr, isSingleTarget) {
|
|
// Start with idref-based reference:
|
|
const el = container.querySelector('input');
|
|
assert_true(el.getAttribute(contentAttr) != null && el.getAttribute(contentAttr) != '','Should start with idref attribute');
|
|
assert_equal_elements(el[idlAttr],targets);
|
|
container.remove();
|
|
assert_equal_elements(el[idlAttr],targets,'idrefs should continue to work when target is disconnected');
|
|
document.body.appendChild(container);
|
|
assert_equal_elements(el[idlAttr],targets,'functional when reconnected');
|
|
|
|
// Now set up an attr-associated element:
|
|
el[idlAttr] = isSingleTarget ? targets[0] : targets;
|
|
assert_equal_elements(el[idlAttr],targets);
|
|
assert_equals(el.getAttribute(contentAttr),'','Content attribute is present but empty');
|
|
container.remove();
|
|
assert_equal_elements(el[idlAttr],targets,'attr-associated element still functional');
|
|
assert_equals(el.getAttribute(contentAttr),'','Attribute still blank');
|
|
document.body.appendChild(container);
|
|
assert_equal_elements(el[idlAttr],targets,'still functional when reconnected');
|
|
|
|
// Sanity check:
|
|
el.removeAttribute(contentAttr);
|
|
assert_equal_elements(el[idlAttr],null);
|
|
assert_equals(el.getAttribute(contentAttr),null);
|
|
container.remove();
|
|
assert_equal_elements(el[idlAttr],null);
|
|
assert_equals(el.getAttribute(contentAttr),null);
|
|
document.body.appendChild(container);
|
|
}
|
|
|
|
test(() => {
|
|
const container = document.getElementById('single_element');
|
|
const targets = [container.querySelector('#foo')];
|
|
single_test(container, targets, 'aria-activedescendant', 'ariaActiveDescendantElement', true);
|
|
},'Element references should stay valid when content is disconnected (single element)');
|
|
|
|
test(() => {
|
|
const container = document.getElementById('array');
|
|
const targets = Array.from(container.querySelector('#targets').children);
|
|
single_test(container, targets, 'aria-describedby', 'ariaDescribedByElements', false);
|
|
},'Element references should stay valid when content is disconnected (element array)');
|
|
</script>
|
|
|