114 lines
3.7 KiB
HTML
114 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<title id="title">TITLE</title>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<style>
|
|
|
|
/* alt on image content with attr() function. */
|
|
[test1]::after {
|
|
content: url(resources/cake.png);
|
|
alt: attr(test1);
|
|
}
|
|
|
|
/* alt on image content that is a string. */
|
|
.test2::after {
|
|
content: url(resources/cake.png);
|
|
alt: "ALTERNATIVE CONTENT TEST2";
|
|
}
|
|
|
|
/* alt on image content that is an empty string - representing that it should be ignored. */
|
|
.test3::after {
|
|
content: url(resources/cake.png);
|
|
alt: "";
|
|
}
|
|
|
|
/* alt on text content. */
|
|
[aria-expanded="test4"]::before {
|
|
content: "\25BB";
|
|
alt: "ALTERNATIVE CONTENT TEST4";
|
|
}
|
|
|
|
/* alt on text content that is an empty string - representing that is should be ignored. */
|
|
[aria-expanded="test5"]::before {
|
|
content: "\25BC";
|
|
alt: "";
|
|
}
|
|
|
|
/* alt on text content that uses the attr() function. */
|
|
[aria-expanded="test6"]::before {
|
|
content: "\25BC";
|
|
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 alt (formerly known as -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 - alt on image content with attr() function");
|
|
outputElement(accessibilityController.accessibleElementById("test1").childAtIndex(1));
|
|
|
|
debug("Test2 - alt on image content that is a string");
|
|
outputElement(accessibilityController.accessibleElementById("test2").childAtIndex(1));
|
|
|
|
debug("Test3 - alt on image content that is an empty string - representing that it should be ignored.");
|
|
outputElement(accessibilityController.accessibleElementById("test3").childAtIndex(1));
|
|
|
|
debug("Test4 - alt on text content");
|
|
outputElement(accessibilityController.accessibleElementById("test4").childAtIndex(0));
|
|
|
|
debug("Test5 - alt on text content that is an empty string - representing that is should be ignored.");
|
|
outputElement(accessibilityController.accessibleElementById("test5").childAtIndex(0));
|
|
|
|
debug("Test6 - alt on text content that uses the attr() function.");
|
|
outputElement(accessibilityController.accessibleElementById("test6").childAtIndex(0));
|
|
|
|
debug("alt accessed through Javascript: " + getComputedStyle(document.getElementById("test2"), ':after').alt);
|
|
|
|
debug("Test7 - 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>
|