canvas-fallback-content-labels.html

<!DOCTYPE HTML>
<html>
<body>
<script src="../resources/js-test.js"></script>

<div id="container">
  <label id="nothing1">Nothing</label>
  <label id="text_label1">
    Text
    <input id="text1" type="text">
  </label>
  <label id="check_label1">
    Checkbox
    <input id="check1" type="checkbox">
  </label>
  <label id="radio_label1">
    Radio
    <input id="radio1" type="radio">
  </label>
  <label id="slider_label1">
    Slider
    <input id="slider1" type="range">
  </label>
  <label id="list_label1">
    List
    <select id="list1"><option>1</option></select>
  </label>
  <label id="label_for1" for="text_for1">Text with label for</label>
  <input id="text_for1" type="text">
</div>

<canvas id="myCanvas" width="300" height="300">
  <label id="nothing2">Nothing</label>
  <label id="text_label2">
    Text
    <input id="text2" type="text">
  </label>
  <label id="check_label2">
    Checkbox
    <input id="check2" type="checkbox">
  </label>
  <label id="radio_label2">
    Radio
    <input id="radio2" type="radio">
  </label>
  <label id="slider_label2">
    Slider
    <input id="slider2" type="range">
  </label>
  <label id="list_label2">
    List
    <select id="list2"><option>1</option></select>
  </label>
  <label id="label_for2" for="text_for2">Text with label for</label>
  <input id="text_for2" type="text">
</canvas>

<div id="console"></div>
<script>
description("This tests that labels and elements with labels in canvas fallback content have the same accessibility properties as those same elements outside of a canvas.");

if (window.testRunner && window.accessibilityController) {
    testRunner.dumpAsText();

    window.collapseWhitespace = function(str) {
        return str.replace(/\s+/g, ' ').replace(/^\s+|\s+$/g, '');
    }

    // Given the ids of two elements, one inside canvas fallback content and one outside,
    // make sure their accessibility properties are the same, checking primarily properties
    // that affect label elements and controls with labels. It's also okay if an element is
    // missing from the tree as long as it's missing from both (like when a label is ignored).
    function check(id1, id2) {
        debug("Checking accessibility properties for ids: " + id1 + ", " + id2);
        window.axElement1 = accessibilityController.accessibleElementById(id1);
        window.axElement2 = accessibilityController.accessibleElementById(id2);

        if (axElement1 == null && axElement2 == null) {
            shouldBe("axElement1 == null && axElement2 == null", "true");
            debug("");
            return;
        }
        shouldBe("axElement2.role", "axElement1.role");
        shouldBe("collapseWhitespace(axElement2.name)", "collapseWhitespace(axElement1.name)");
        shouldBe("axElement2.nameElementCount()", "axElement1.nameElementCount()");
        debug("");
    }

    check("nothing1", "nothing2");
    check("text_label1", "text_label2");
    check("text1", "text2");
    check("check_label1", "check_label2");
    check("check1", "check2");
    check("radio_label1", "radio_label2");
    check("radio1", "radio2");
    check("slider_label1", "slider_label2");
    check("slider1", "slider2");
    check("list_label1", "list_label2");
    check("list1", "list2");
    check("label_for1", "label_for2");
    check("text_for1", "text_for2");

    document.getElementById("container").style.display = "none";
}

</script>

</body>
</html>
chromium/third_party/blink/web_tests/accessibility/canvas-fallback-content-labels.html
