| <!DOCTYPE HTML> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <style> |
| .hideAllContainers .container { |
| display: none; |
| } |
| </style> |
| |
| <div class="container"> |
| <figure id="figure1"> |
| <img src="resources/cake.png" alt="cake"> |
| </figure> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axFigure1 = accessibilityController.accessibleElementById("figure1"); |
| assert_equals(axFigure1.name, ""); |
| }, "Figure element with no figcaption"); |
| </script> |
| |
| <div class="container"> |
| <figure id="figure2" title="figure2-title"> |
| <img src="resources/cake.png" alt="cake"> |
| </figure> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axFigure2 = accessibilityController.accessibleElementById("figure2"); |
| assert_equals(axFigure2.name, "figure2-title"); |
| assert_equals(axFigure2.nameFrom, "title"); |
| }, "Figure element with no figcaption with title"); |
| </script> |
| |
| <div class="container"> |
| <figure id="figure3" title="figure3-title"> |
| <figcaption>figcaption3</figcaption> |
| <img src="resources/cake.png" alt="cake"> |
| </figure> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axFigure3 = accessibilityController.accessibleElementById("figure3"); |
| assert_equals(axFigure3.name, "figcaption3"); |
| assert_equals(axFigure3.nameFrom, "relatedElement"); |
| }, "Figure element with figcaption and title"); |
| </script> |
| |
| <div class="container"> |
| <figure id="figure4" title="figure4-title" aria-label="figure4-aria-label"> |
| <figcaption>figcaption4</figcaption> |
| <img src="resources/cake.png" alt="cake"> |
| </figure> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axFigure4 = accessibilityController.accessibleElementById("figure4"); |
| assert_equals(axFigure4.name, "figure4-aria-label"); |
| assert_equals(axFigure4.nameFrom, "attribute"); |
| }, "Figure element with figcaption, title and aria-label"); |
| </script> |
| |
| <div class="container"> |
| <figure id="figure5" title="figure5-title" aria-label="figure5-aria-label" aria-labelledby="labelledby5"> |
| <figcaption>figcaption5</figcaption> |
| <img src="resources/cake.png" alt="cake"> |
| </figure> |
| <span hidden="true" id="labelledby5">figure5-aria-labelledby</span> |
| </div> |
| |
| <script> |
| test(function(t) { |
| var axFigure5 = accessibilityController.accessibleElementById("figure5"); |
| assert_equals(axFigure5.name, "figure5-aria-labelledby"); |
| assert_equals(axFigure5.nameFrom, "relatedElement"); |
| }, "Figure element with figcaption, title, aria-label and aria-labelledby"); |
| </script> |
| |
| <script> |
| if (window.testRunner) |
| document.body.className = "hideAllContainers"; |
| </script> |
