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

   1 <!DOCTYPE HTML>
   2 <html>
   3 <body>
   4 <script src="../resources/js-test.js"></script>
   5
   6 <style>
   7 myelement {
   8   display: block;
   9 }
  10 </style>
  11
  12 <div>
  13   <a id="link1" href="#">Link</a>
  14   <button id="button1">Button</button>
  15   <input id="text1" type="text">
  16   <input id="checkbox1" type="checkbox">
  17   <input id="radio1" type="radio">
  18   <input id="submit1" type="submit">
  19   <select id="combobox1"><option>1<option>2</select>
  20   <myelement id="focusable1" tabindex="0">Focusable</myelement>
  21   <div id="aria-button1" tabindex="0" role="button">ARIA button</div>
  22   <div id="aria-link1" tabindex="0" role="link">ARIA link</div>
  23 </div>
  24
  25 <canvas id="myCanvas" width="300" height="300">
  26   <a id="link2" href="#">Link</a>
  27   <button id="button2">Button</button>
  28   <input id="text2" type="text">
  29   <input id="checkbox2" type="checkbox">
  30   <input id="radio2" type="radio">
  31   <input id="submit2" type="submit">
  32   <select id="combobox2"><option>1<option>2</select>
  33   <myelement id="focusable2" tabindex="0">Focusable</myelement>
  34   <div id="aria-button2" tabindex="0" role="button">ARIA button</div>
  35   <div id="aria-link2" tabindex="0" role="link">ARIA link</div>
  36 </canvas>
  37
  38 <div id="console"></div>
  39 <script>
  40 description("This test makes sure that focusable elements in canvas fallback content are accessible.");
  41
  42 if (window.testRunner && window.accessibilityController) {
  43     window.testRunner.dumpAsText();
  44
  45     function check(id, expectedRole) {
  46         debug(id);
  47         window.element = document.getElementById(id);
  48         element.focus();
  49         shouldBe("document.activeElement == element", "true");
  50         window.axElement = accessibilityController.focusedElement;
  51         shouldBe("axElement.role", "\"" + expectedRole + "\"");
  52         debug("");
  53     }
  54
  55     var comboBoxRole = (testRunner.platformName == "gtk" || testRunner.platformName == "efl") ? "AXRole: AXComboBox" : "AXRole: AXPopUpButton";
  56
  57     // Check rendered controls.
  58     check("link1", "AXRole: AXLink");
  59     check("button1", "AXRole: AXButton");
  60     check("text1", "AXRole: AXTextField");
  61     check("checkbox1", "AXRole: AXCheckBox");
  62     check("radio1", "AXRole: AXRadioButton");
  63     check("submit1", "AXRole: AXButton");
  64     check("combobox1", comboBoxRole);
  65     check("focusable1", "AXRole: AXGroup");
  66     check("aria-button1", "AXRole: AXButton");
  67     check("aria-link1", "AXRole: AXLink");
  68
  69     // Check unrendered controls inside a canvas.
  70     check("link2", "AXRole: AXLink");
  71     check("button2", "AXRole: AXButton");
  72     check("text2", "AXRole: AXTextField");
  73     check("checkbox2", "AXRole: AXCheckBox");
  74     check("radio2", "AXRole: AXRadioButton");
  75     check("submit2", "AXRole: AXButton");
  76     check("combobox2", comboBoxRole);
  77     check("focusable2", "AXRole: AXGroup");
  78     check("aria-button2", "AXRole: AXButton");
  79     check("aria-link2", "AXRole: AXLink");
  80
  81     // Check that the role is updated when the element changes.
  82     document.getElementById('focusable1').setAttribute('role', 'button');
  83     check("focusable1", "AXRole: AXButton");
  84     document.getElementById('focusable2').setAttribute('role', 'button');
  85     check("focusable2", "AXRole: AXButton");
  86 }
  87
  88 </script>
  89
  90 </body>
  91 </html>