<!DOCTYPE html>
<html>
<body id="body">
<script src="../../resources/js-test.js"></script>
<script src="../../resources/accessibility-helper.js"></script>
<div id="host"></div>
<div id="some" class="note">some description</div>
<div class="note">other description</div>
<div id="details1" class="details">some details</div>
<div id="details2" class="details">other details</div>
<div id="error1" class="error">some error</div>
<div id="error2" class="error">other error</div>
<script>

class CustomElement extends HTMLElement {
    constructor()
    {
        super();
        window.internals = this.attachInternals();
        internals.role = 'checkbox';
        internals.ariaDescribedByElements = Array.from(document.querySelectorAll('.note'));
        internals.ariaDetailsElements = Array.from(document.querySelectorAll('.details'));
        internals.ariaErrorMessageElements = Array.from(document.querySelectorAll('.error'));
        internals.ariaInvalid = true;
        shouldBe('internals.ariaDescribedByElements.length', '2');
        shouldBe('internals.ariaDescribedByElements[0]', 'document.querySelectorAll(".note")[0]');
        shouldBe('internals.ariaDescribedByElements[1]', 'document.querySelectorAll(".note")[1]');
        shouldBe('internals.ariaDetailsElements.length', '2');
        shouldBe('internals.ariaDetailsElements[0]', 'document.querySelectorAll(".details")[0]');
        shouldBe('internals.ariaDetailsElements[1]', 'document.querySelectorAll(".details")[1]');
        shouldBe('internals.ariaErrorMessageElements.length', '2');
        shouldBe('internals.ariaErrorMessageElements[0]', 'document.querySelectorAll(".error")[0]');
        shouldBe('internals.ariaErrorMessageElements[1]', 'document.querySelectorAll(".error")[1]');
    }
}
customElements.define('custom-element', CustomElement);

const shadowRoot = host.attachShadow({mode: 'closed'});
const customElement = new CustomElement;
customElement.id = 'custom-1';
shadowRoot.appendChild(customElement);

description("This tests that aria fallback roles work correctly.");
if (!window.accessibilityController)
    debug('This test requires accessibilityController');
else {
    shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").role', 'AXRole: AXCheckBox');
    if (accessibilityController.platformName == "mac")
        shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").customContent', 'description: some description other description');
    else
        shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").helpText', 'AXHelp: some description other description');

    shouldBe('accessibilityController.accessibleElementById("custom-1").detailsElements().length', '2');
    shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").detailsElements()[0].domIdentifier', 'details1');
    shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").detailsElements()[1].domIdentifier', 'details2');
    shouldBe('accessibilityController.accessibleElementById("custom-1").errorMessageElements().length', '2');
    shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").errorMessageElements()[0].domIdentifier', 'error1');
    shouldBeEqualToString('accessibilityController.accessibleElementById("custom-1").errorMessageElements()[1].domIdentifier', 'error2');
}

</script>
</body>
</html>