<!DOCTYPE html>
<html>
<title id="title">TITLE</title>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>

<style>

/*  webkit-alt on image content with attr() function. */
[test1]::after {
    content: url(resources/cake.png);
    -webkit-alt: attr(test1);
}

/* webkit-alt on image content that is a string. */
.test2::after {
    content: url(resources/cake.png);
    -webkit-alt: "ALTERNATIVE CONTENT TEST2";
}

/* webkit-alt on image content that is an empty string - representing that it should be ignored. */
.test3::after {
    content: url(resources/cake.png);
    -webkit-alt: "";
}

/* webkit-alt on text content. */
[aria-expanded="test4"]::before {
    content: "\25BB";
    -webkit-alt: "ALTERNATIVE CONTENT TEST4";
}

/* webkit-alt on text content that is an empty string - representing that is should be ignored. */
[aria-expanded="test5"]::before {
    content: "\25BC";
    -webkit-alt: "";
}

/* webkit-alt on text content that uses the attr() function. */
[aria-expanded="test6"]::before {
    content: "\25BC";
    -webkit-alt: attr(test6);
}
</style>

<div id="content">
<div id="test1" test1="ALTERNATIVE CONTENT TEST1">test1</div>
<div id="test2" class="test2">test2</div>
<div id="test3" class="test3">test3</div>
<div id="test4" aria-expanded="test4">test4</div>
<div id="test5" test5="ALTERNATIVE CONTENT TEST5" aria-expanded="test5">test5</div>
<div id="test6" test6="ALTERNATIVE CONTENT TEST6" aria-expanded="test6">test6</div>

<img id="image1" src="#" alt="This is the right text" style="width:100px; height:100px; -webkit-alt: 'this is the wrong text';">
</div>

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

<script>
    description("This tests that -webkit-alt applies to text and image content in CSS styles, and that it makes it to accessibility.");
    
    function outputElement(element) {
        var role = "AXRole: ";
        var description = "AXDescription: ";
        var title = "AXTitle: ";
        var value = "AXValue: ";
        if (element) {
            role = element.role;
            description = element.description;
            title = element.title;
            value = element.stringValue;
        }
        debug(role);
        debug(description);
        debug(title);
        debug(value + "\n");
    }

    if (window.accessibilityController) {
        debug("Test1 - webkit-alt on image content with attr() function");
        outputElement(accessibilityController.accessibleElementById("test1").childAtIndex(1));

        debug("Test2 - webkit-alt on image content that is a string");
        outputElement(accessibilityController.accessibleElementById("test2").childAtIndex(1));

        debug("Test3 - webkit-alt on image content that is an empty string - representing that it should be ignored.");
        outputElement(accessibilityController.accessibleElementById("test3").childAtIndex(1));

        debug("Test4 - webkit-alt on text content");
        outputElement(accessibilityController.accessibleElementById("test4").childAtIndex(0));

        debug("Test5 - webkit-alt on text content that is an empty string - representing that is should be ignored.");
        outputElement(accessibilityController.accessibleElementById("test5").childAtIndex(0));

        debug("Test6 - webkit-alt on text content that uses the attr() function.");
        outputElement(accessibilityController.accessibleElementById("test6").childAtIndex(0));

        debug("WebKitAlt accessed through Javascript: " + getComputedStyle(document.getElementById("test2"), ':after').webkitAlt);

        debug("Test7 - webkit-alt does not apply to DOM nodes.");
        outputElement(accessibilityController.accessibleElementById("image1"));

        document.getElementById("content").style.visibility = "hidden";
    }

</script>

<script src="../../resources/js-test-post.js"></script>
</body>
</html>