third_party/WebKit/LayoutTests/fast/canvas/canvas-hit-regions-accessibility-test.html

   1 <!DOCTYPE HTML>
   2 <head>
   3 <title>Canvas Hit Regions: accessibility test</title>
   4 <script src="../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <canvas id="canvas">
   8   <button id="button1"></button>
   9   <div id="container1">
  10     <button id="button2"></button>
  11     <button id="button3"></button>
  12   </div>
  13   <div id="container2">
  14     <div id="container3">
  15       <button id="button4"></button>
  16       <button id="button5"></button>
  17     </div>
  18     <button id="button6"></button>
  19   </div>
  20 </canvas>
  21 <script>
  22
  23   var canvas = document.getElementById("canvas");
  24   var context = canvas.getContext("2d");
  25
  26   function drawRectAndAddHitRegion(control, x, y, width, height) {
  27     if (window.accessibilityController)
  28       window["ax" + control] = accessibilityController.accessibleElementById(control);
  29
  30     context.beginPath();
  31     context.rect(x, y, width, height);
  32     context.fill();
  33     context.addHitRegion({
  34       id : control,
  35       control : document.getElementById(control)
  36     });
  37   }
  38
  39   function testAccessibilityRect(control, x, y, width, height) {
  40
  41     if (window.accessibilityController && !window["ax" + control])
  42       window["ax" + control] = accessibilityController.accessibleElementById(control);
  43
  44     shouldBe("ax" + control + ".x", x.toString());
  45     shouldBe("ax" + control + ".y", y.toString());
  46     shouldBe("ax" + control + ".width", width.toString());
  47     shouldBe("ax" + control + ".height", height.toString());
  48   }
  49
  50   drawRectAndAddHitRegion("button1", 0, 0, 200, 200);
  51   drawRectAndAddHitRegion("button2", 0, 0, 100, 50);
  52   drawRectAndAddHitRegion("button3", 40, 20, 50, 70);
  53   drawRectAndAddHitRegion("button4", 0, 0, 100, 50);
  54   drawRectAndAddHitRegion("button5", 40, 20, 50, 70);
  55   drawRectAndAddHitRegion("button6", 20, 10, 140, 30);
  56   drawRectAndAddHitRegion("button7", 0, 0, 200, 200);
  57
  58   debug("Just one button tests.");
  59   testAccessibilityRect("button1", 8, 8, 200, 200);
  60   debug("");
  61
  62   debug("The container1 has two buttons.");
  63   testAccessibilityRect("button2", 8, 8, 100, 50);
  64   testAccessibilityRect("button3", 48, 28, 50, 70);
  65   testAccessibilityRect("container1", 8, 8, 100, 90);
  66   debug("");
  67
  68   debug("Remove the button2 from the container1.");
  69   document.getElementById("container1").removeChild(document.getElementById("button2"));
  70   testAccessibilityRect("container1", 48, 28, 50, 70);
  71   debug("");
  72
  73   debug("Depth-two container tests.");
  74   testAccessibilityRect("button4", 8, 8, 100, 50);
  75   testAccessibilityRect("button5", 48, 28, 50, 70);
  76   testAccessibilityRect("button6", 28, 18, 140, 30);
  77   testAccessibilityRect("container2", 8, 8, 160, 90);
  78   testAccessibilityRect("container3", 8, 8, 100, 90);
  79   debug("");
  80
  81 </script>
  82 </body>
  83 </html>