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

