third_party/WebKit/LayoutTests/accessibility/canvas-fallback-content-labels.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <body>
   4 <script src="../resources/js-test.js"></script>
   5
   6 <div>
   7   <label id="nothing1">Nothing</label>
   8   <label id="text_label1">
   9     Text
  10     <input id="text1" type="text">
  11   </label>
  12   <label id="check_label1">
  13     Checkbox
  14     <input id="check1" type="checkbox">
  15   </label>
  16   <label id="radio_label1">
  17     Radio
  18     <input id="radio1" type="radio">
  19   </label>
  20   <label id="slider_label1">
  21     Slider
  22     <input id="slider1" type="range">
  23   </label>
  24   <label id="list_label1">
  25     List
  26     <select id="list1"><option>1</option></select>
  27   </label>
  28   <label id="label_for1" for="text_for1">Text with label for</label>
  29   <input id="text_for1" type="text">
  30 </div>
  31
  32 <canvas id="myCanvas" width="300" height="300">
  33   <label id="nothing2">Nothing</label>
  34   <label id="text_label2">
  35     Text
  36     <input id="text2" type="text">
  37   </label>
  38   <label id="check_label2">
  39     Checkbox
  40     <input id="check2" type="checkbox">
  41   </label>
  42   <label id="radio_label2">
  43     Radio
  44     <input id="radio2" type="radio">
  45   </label>
  46   <label id="slider_label2">
  47     Slider
  48     <input id="slider2" type="range">
  49   </label>
  50   <label id="list_label2">
  51     List
  52     <select id="list2"><option>1</option></select>
  53   </label>
  54   <label id="label_for2" for="text_for2">Text with label for</label>
  55   <input id="text_for2" type="text">
  56 </canvas>
  57
  58 <div id="console"></div>
  59 <script>
  60 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.");
  61
  62 if (window.testRunner && window.accessibilityController) {
  63     window.testRunner.dumpAsText();
  64
  65     window.collapseWhitespace = function(str) {
  66         return str.replace(/\s+/g, ' ').replace(/^\s+|\s+$/g, '');
  67     }
  68
  69     // Given the ids of two elements, one inside canvas fallback content and one outside,
  70     // make sure their accessibility properties are the same, checking primarily properties
  71     // that affect label elements and controls with labels. It's also okay if an element is
  72     // missing from the tree as long as it's missing from both (like when a label is ignored).
  73     function check(id1, id2) {
  74         debug("Checking accessibility properties for ids: " + id1 + ", " + id2);
  75         window.axElement1 = accessibilityController.accessibleElementById(id1);
  76         window.axElement2 = accessibilityController.accessibleElementById(id2);
  77
  78         if (axElement1 == null && axElement2 == null) {
  79             shouldBe("axElement1 == null && axElement2 == null", "true");
  80             debug("");
  81             return;
  82         }
  83         shouldBe("axElement2.role", "axElement1.role");
  84         shouldBe("collapseWhitespace(axElement2.deprecatedTitle)", "collapseWhitespace(axElement1.deprecatedTitle)");
  85         shouldBe("axElement2.deprecatedTitleUIElement", "axElement1.deprecatedTitleUIElement");
  86         debug("");
  87     }
  88
  89     check("nothing1", "nothing2");
  90     check("text_label1", "text_label2");
  91     check("text1", "text2");
  92     check("check_label1", "check_label2");
  93     check("check1", "check2");
  94     check("radio_label1", "radio_label2");
  95     check("radio1", "radio2");
  96     check("slider_label1", "slider_label2");
  97     check("slider1", "slider2");
  98     check("list_label1", "list_label2");
  99     check("list1", "list2");
 100     check("label_for1", "label_for2");
 101     check("text_for1", "text_for2");
 102 }
 103
 104 </script>
 105
 106 </body>
 107 </html>