<!DOCTYPE HTML>
<meta charset="utf-8" />
<link rel=help href="https://html.spec.whatwg.org/#attr-associated-element">
<link rel="author" href="[email protected]">
<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>
Codebase Browser
chromium