<!DOCTYPE html>
<html>
    <head>
        <script src="../resources/js-test.js"></script>
        <style>
            body {
                background-color: black;
                font-size: 10px;
            }
            h1 {
                color: red;
                font-size: 12px;
            }
            p {
                color: lime;
                font-size: 14px;
            }
            input {
                background-color: red;
                color: blue;
                font-size: 16px;
            }
        </style>
    </head>
    <body>

        <h1 id="h1">Heading.</h1>
        <p id="p">Line one.<br><span id="span">Line two.</span></p>
        <input id="button" type="button" value="Button">
        <input id="text" type="text" value="Button">
     
        <script>
            description("This test ensures that various style attributes can be retrieved via the accessibility APIs.");

            if (window.accessibilityController) {
                var axHeading = accessibilityController.accessibleElementById("h1");
                shouldBeEqualToNumber("axHeading.backgroundColor", 0xff000000);  // Black
                shouldBeEqualToNumber("axHeading.color", 0xff0000);  // Red
                shouldBeEqualToNumber("axHeading.fontSize", 12);

                var axParagraph = accessibilityController.accessibleElementById("p");
                shouldBeEqualToNumber("axParagraph.backgroundColor", 0xff000000);  // Black
                // 0xff00 is called "lime" in CSS.
                shouldBeEqualToNumber("axParagraph.color", 0xff00);
                shouldBeEqualToNumber("axParagraph.fontSize", 14);

                var axButton = accessibilityController.accessibleElementById("button");
                // Button's background is not transparent, so alpha value is included.
                shouldBeEqualToNumber("axButton.backgroundColor", 0xffff0000);  // Red
                shouldBeEqualToNumber("axButton.color", 0xff);  // Blue
                shouldBeEqualToNumber("axButton.fontSize", 16);

                var axText = accessibilityController.accessibleElementById("text");
                shouldBeEqualToNumber("axText.backgroundColor", 0xffff0000);  // Red
                shouldBeEqualToNumber("axText.color", 0xff);  // Blue
                shouldBeEqualToNumber("axText.fontSize", 16);
            }

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