OLD | NEW |
1 <!DOCTYPE HTML> | 1 <script src="../../resources/testharness.js"></script> |
2 <head> | 2 <script src="../../resources/testharnessreport.js"></script> |
3 <title>Canvas test: drawFocusIfNeeded</title> | |
4 <script src="../../resources/js-test.js"></script> | |
5 </head> | |
6 <body style="padding: 0; margin: 0"> | |
7 <canvas id="canvas" class="output" width="300" height="350"> | 3 <canvas id="canvas" class="output" width="300" height="350"> |
8 <button id="button1"></button> | 4 <button id="button1"></button> |
9 <button id="button2"></button> | 5 <button id="button2"></button> |
10 </canvas> | 6 </canvas> |
11 <script> | 7 <script> |
12 if (window.testRunner) | |
13 testRunner.dumpAsText(); | |
14 | |
15 var canvas = document.getElementById("canvas").getContext("2d"); | 8 var canvas = document.getElementById("canvas").getContext("2d"); |
16 | 9 |
17 document.getElementById("button1").addEventListener('focus', function() { | 10 document.getElementById("button1").addEventListener('focus', function() { |
18 canvas.beginPath(); | 11 canvas.beginPath(); |
19 canvas.rect(50, 50, 200, 100); | 12 canvas.rect(50, 50, 200, 100); |
20 canvas.fillStyle = "#ccf"; | 13 canvas.fillStyle = "#ccf"; |
21 canvas.fill(); | 14 canvas.fill(); |
22 canvas.drawFocusIfNeeded(document.getElementById("button1")); | 15 canvas.drawFocusIfNeeded(document.getElementById("button1")); |
23 | 16 |
24 canvas.beginPath(); | 17 canvas.beginPath(); |
25 canvas.rect(50, 200, 200, 100); | 18 canvas.rect(50, 200, 200, 100); |
26 canvas.fillStyle = "#cfc"; | 19 canvas.fillStyle = "#cfc"; |
27 canvas.fill(); | 20 canvas.fill(); |
28 canvas.drawFocusIfNeeded(document.getElementById("button2")); | 21 canvas.drawFocusIfNeeded(document.getElementById("button2")); |
29 }); | 22 }); |
30 | 23 |
31 document.getElementById("button1").focus(); | 24 test(function(t) { |
32 | 25 |
33 // The top rect's focus ring is tied to button1, which is focused. | 26 document.getElementById("button1").focus(); |
34 // It should have an outline in some color other than the background color. | 27 |
35 var imageData = canvas.getImageData(49, 50, 1, 1); | 28 // The top rect's focus ring is tied to button1, which is focused. |
36 var data = imageData.data; | 29 // It should have an outline in some color other than the background color. |
37 shouldBe("data[0] != 0 || data[1] != 0 || data[2] != 0", "true"); | 30 var imageData = canvas.getImageData(49, 50, 1, 1); |
38 | 31 var data = imageData.data; |
39 // The bottom rect"s focus ring is tied to button2, which is not focused. | 32 assert_true(data[0] != 0 || data[1] != 0 || data[2] != 0); |
40 imageData = canvas.getImageData(49, 200, 1, 1); | 33 |
41 data = imageData.data; | 34 // The bottom rect"s focus ring is tied to button2, which is not focused. |
42 shouldBe("data[0] == 0 && data[1] == 0 && data[2] == 0", "true"); | 35 imageData = canvas.getImageData(49, 200, 1, 1); |
| 36 data = imageData.data; |
| 37 assert_true(data[0] == 0 && data[1] == 0 && data[2] == 0); |
| 38 |
| 39 }, 'Test that drawFocusIfNeeded does not crash on event.'); |
43 </script> | 40 </script> |
44 </body> | 41 </body> |
OLD | NEW |