| OLD | NEW |
|---|
| (Empty) | |
| 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(con
trol); |
| 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(con
trol); |
| 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("but
ton2")); |
| 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> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 300223009:
Implement basic parts of hit regions on canvas2d. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master