<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/js-test.js"></script>
</head>
<body id="body">

<div id="examples">
    <!-- All of these eval to AXInvalid: 'false' -->
    <input class="ex" data-expected="false" type="text">
    <input class="ex" data-expected="false" type="text" aria-invalid>
    <input class="ex" data-expected="false" type="text" aria-invalid="">
    <input class="ex" data-expected="false" type="text" aria-invalid=" ">
    <input class="ex" data-expected="false" type="text" aria-invalid="	"><!-- [sic] tab char -->
    <input class="ex" data-expected="false" type="text" aria-invalid="
    "><!-- [sic] newline char -->
    <input class="ex" data-expected="false" type="text" aria-invalid="false">
    <input class="ex" data-expected="false" type="text" aria-invalid="undefined">

    <!-- Known token values in ARIA 1.0. -->
    <input class="ex" data-expected="grammar" type="text" aria-invalid="grammar">
    <input class="ex" data-expected="grammar" type="text" aria-invalid="grammar	"><!-- [sic] tab char -->
    <input class="ex" data-expected="spelling" type="text" aria-invalid="spelling">
    <input class="ex" data-expected="spelling" type="text" aria-invalid="spelling
    "><!-- [sic] newline char -->

    <!-- All other string values are truthy, including a combination of otherwise valid tokens. -->
    <input class="ex" data-expected="true" type="text" aria-invalid="true">
    <input class="ex" data-expected="true" type="text" aria-invalid="notallowed">
    <input class="ex" data-expected="true" type="text" aria-invalid="…">
    <input class="ex" data-expected="true" type="text" aria-invalid="Ç">
    <input class="ex" data-expected="true" type="text" aria-invalid="spelling grammar">
    <input class="ex" data-expected="true" type="text" aria-invalid="spelling	grammar"><!-- [sic] tab char -->
    <input class="ex" data-expected="true" type="text" aria-invalid="spelling
    grammar"><!-- [sic] newline char -->
</div>

<p id="description"></p>
<div id="console"></div>
<div id="notifications"></div>

<script>

    description("This tests that aria-invalid causes the right attribute to be returned and it ensures a notification is sent when it changes.");

    function $(id){
        return document.getElementById(id);
    }

    var axNotificationElement = null;
    function notificationCallback(notification) {
        if (notification == "AXInvalidStatusChanged") {
            $("notifications").innerHTML += "Notification received successfully.";
            axNotificationElement.removeNotificationListener();
            $("examples").hidden = true;
            finishJSTest();
        }
    }

    var result = $('console');
    function verify(value, expectation, element) {
      if (value === expectation)
        result.innerText += "PASS: AXInvalid is " + value + ".\n";
      else
        result.innerText += "FAIL: AXInvalid is " + value + ". Expected: " + expectation + ". " + (element ? element.outerHTML : "") + "\n";
    }

    if (window.accessibilityController) {
        jsTestIsAsync = true;

        var examples = document.querySelectorAll(".ex");
        for (var i = 0, c = examples.length; i < c; i++) {
            var el = examples[i];
            el.focus();
            var expectation = el.getAttribute("data-expected");
            var value = accessibilityController.focusedElement.stringAttributeValue('AXInvalid');
            verify(value, expectation, el);
        }
        
        var domNotificationElement = document.querySelector(".ex");
        domNotificationElement.focus();
        axNotificationElement = accessibilityController.focusedElement;
        var addedNotification = axNotificationElement.addNotificationListener(notificationCallback);
        shouldBeTrue("addedNotification");
        domNotificationElement.setAttribute("aria-invalid", "spelling");
        verify(axNotificationElement.stringAttributeValue('AXInvalid'), "spelling", domNotificationElement);
    }

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