</body>
</html>
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/accessibility-helper.js"></script>
<script src="../resources/js-test.js"></script>
</head>
<body>
<script>
class CustomProgress extends HTMLElement {
    static observedAttributes = ["tabindex"];

    constructor() {
        super();
        this.internals = this.attachInternals();
        this.internals.role = "progressbar";
        this.internals.ariaValueNow = "10";
        this.internals.ariaValueMin = "0";
        this.internals.ariaValueMax = "100";

        this.attachShadow({ mode: "open" });
        const fragment = document.createRange().createContextualFragment("<div></div>");
        this.shadowRoot.append(fragment.cloneNode(true));
    }

    attributeChangedCallback(name, oldValue, newValue) {
        this.internals.ariaValueNow = null;
    }
}
customElements.define("custom-progress", CustomProgress);
</script>

<custom-progress id="progress"></custom-progress>

<script>
var output = "This test ensures that we properly respect null values set via ElementInternals, e.g. ariaValueNow for role='progressbar' custom elements.\n\n";

if (window.accessibilityController) {
    window.jsTestIsAsync = true;

    output += expect("accessibilityController.accessibleElementById('progress').isIndeterminate", "false");

    // Set an attribute to trigger the attributeChangedCallback.
    document.getElementById("progress").setAttribute("tabindex", "0");
    setTimeout(async function() {
        output += await expectAsync("accessibilityController.accessibleElementById('progress').isIndeterminate", "true");

        debug(output);
        finishJSTest();
    }, 0);
}
</script>
</body>
</html>