<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/accessibility-helper.js"></script>
<script src="../resources/js-test.js"></script>
<style>
.alt-text-1 {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='12' cy='12' r='12' fill='yellow'/></svg>") / "alt-text-1";
}

.alt-text-2 {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='12' cy='12' r='12' fill='purple'/></svg>") / "alt-text-2";
}
</style>
</head>
<body>

<span id="custom-image" class="alt-text-1"></span>
<button id="button" class="alt-text-1">Press</button>

<script>
var output = "This test ensures we represent alt text provided by the CSS `content` property correctly.\n\n";

function platformTextForId(id) {
    return `${platformTextAlternatives(accessibilityController.accessibleElementById(id))}\n\n`;
}

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

    output += platformTextForId("button");
    output += platformTextForId("custom-image");

    var newPlatformText;
    document.getElementById("button").setAttribute("class", "alt-text-2");
    document.getElementById("custom-image").setAttribute("class", "alt-text-2");
    setTimeout(async function() {
        await waitFor(() => {
            newPlatformText = platformTextForId("button");
            return newPlatformText && newPlatformText.includes("alt-text-2");
        });
        output += newPlatformText;

        await waitFor(() => {
            newPlatformText = platformTextForId("custom-image");
            return newPlatformText && newPlatformText.includes("alt-text-2");
        });
        output += newPlatformText;

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