| <!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> |
