name-calc-figure.html | Explore in Territory

<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<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">
    <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, "");
    assert_equals(axFigure3.nameFrom, "");
}, "Figure element with figcaption and no 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>
chromium/third_party/blink/web_tests/accessibility/name-calc-figure.html
