<!DOCTYPE HTML>
<html>
<body>
<script src="../resources/js-test.js"></script>

<style>canvas { display: inline; border: 1px solid #000; }</style>
    <!-- No whitespace between canvases on purpose, so there's the same
         number of children of the container element on all platforms. -->
    <div id="container" tabIndex=0 aria-label="Container"><canvas id="canvas1" width="100" height="100" aria-label="Canvas label">Fallback text</canvas><canvas id="canvas2" width="100" height="100"><button>Inner button</button></canvas><canvas id="canvas3-skipped" width="100" height="100"></canvas></div>

<div id="console"></div>
<script>
description("This test makes sure that a canvas with and without fallback content each has the right role and description.")

if (window.testRunner && window.accessibilityController) {
    window.testRunner.dumpAsText();

    document.getElementById('container').focus();
    var axContainer = accessibilityController.focusedElement;

    shouldBe("axContainer.childrenCount", "2");

    var axCanvas1 = axContainer.childAtIndex(0);
    debug('Canvas 1 description: ' + axCanvas1.deprecatedDescription);
    debug('Canvas 1 role: ' + axCanvas1.role);

    var axCanvas2 = axContainer.childAtIndex(1);
    debug('Canvas 2 description: ' + axCanvas2.deprecatedDescription);
    debug('Canvas 2 role: ' + axCanvas2.role);
}

</script>

</body>
</html>