OLD | NEW |
---|---|
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <head> | 2 <head> |
3 <title>Canvas test: drawSystemFocusRing</title> | 3 <title>Canvas test: drawSystemFocusRing</title> |
4 <script src="../js/resources/js-test-pre.js"></script> | 4 <script src="../js/resources/js-test-pre.js"></script> |
5 </head> | 5 </head> |
6 <body style="padding: 0; margin: 0"> | 6 <body style="padding: 0; margin: 0"> |
7 <canvas id="canvas" class="output" width="300" height="350"> | 7 <canvas id="canvas" class="output" width="300" height="350"> |
8 <button id="button1"></button> | 8 <button id="button1"></button> |
9 <button id="button2"></button> | 9 <button id="button2"></button> |
10 </canvas> | 10 </canvas> |
11 <script> | 11 <script> |
12 if (window.testRunner) | 12 if (window.testRunner) |
13 testRunner.dumpAsText(false); | 13 testRunner.dumpAsText(false); |
14 | 14 |
15 var canvas = document.getElementById("canvas").getContext("2d"); | |
16 | |
17 document.getElementById("button1").addEventListener('focus', function() { | |
18 canvas.beginPath(); | |
Stephen White
2013/08/07 14:00:26
FYI, you can use fillRect() as a shorthand for beg
dmazzoni
2013/08/07 15:42:29
Yes, but that won't set the path to be used by dra
| |
19 canvas.rect(50, 50, 200, 100); | |
20 canvas.fillStyle = "#ccf"; | |
21 canvas.fill(); | |
22 canvas.drawSystemFocusRing(document.getElementById("button1")); | |
23 | |
24 canvas.beginPath(); | |
25 canvas.rect(50, 200, 200, 100); | |
26 canvas.fillStyle = "#cfc"; | |
27 canvas.fill(); | |
28 canvas.drawSystemFocusRing(document.getElementById("button2")); | |
29 }); | |
30 | |
15 document.getElementById("button1").focus(); | 31 document.getElementById("button1").focus(); |
16 | 32 |
17 var canvas = document.getElementById("canvas").getContext("2d"); | 33 // The top rect's focus ring is tied to button1, which is focused. |
18 canvas.beginPath(); | |
19 canvas.rect(50, 50, 200, 100); | |
20 canvas.fillStyle = "#ccf"; | |
21 canvas.fill(); | |
22 canvas.drawSystemFocusRing(document.getElementById("button1")); | |
23 | |
24 canvas.beginPath(); | |
25 canvas.rect(50, 200, 200, 100); | |
26 canvas.fillStyle = "#cfc"; | |
27 canvas.fill(); | |
28 canvas.drawSystemFocusRing(document.getElementById("button2")); | |
29 | |
30 // The top rect"s focus ring is tied to button1, which is focused. | |
31 // It should have an outline in some color other than the background color. | 34 // It should have an outline in some color other than the background color. |
32 var imageData = canvas.getImageData(49, 50, 1, 1); | 35 var imageData = canvas.getImageData(49, 50, 1, 1); |
33 var data = imageData.data; | 36 var data = imageData.data; |
34 shouldBe("data[0] != 0 || data[1] != 0 || data[2] != 0", "true"); | 37 shouldBe("data[0] != 0 || data[1] != 0 || data[2] != 0", "true"); |
35 | 38 |
36 // The bottom rect"s focus ring is tied to button2, which is not focused. | 39 // The bottom rect"s focus ring is tied to button2, which is not focused. |
37 imageData = canvas.getImageData(49, 200, 1, 1); | 40 imageData = canvas.getImageData(49, 200, 1, 1); |
38 data = imageData.data; | 41 data = imageData.data; |
39 shouldBe("data[0] == 0 && data[1] == 0 && data[2] == 0", "true"); | 42 shouldBe("data[0] == 0 && data[1] == 0 && data[2] == 0", "true"); |
40 </script> | 43 </script> |
41 <script src="../js/resources/js-test-post.js"></script> | 44 <script src="../js/resources/js-test-post.js"></script> |
42 </body> | 45 </body> |
OLD | NEW |