OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <head> |
| 3 <title>Canvas test: drawSystemFocusRing</title> |
| 4 <script src="../js/resources/js-test-pre.js"></script> |
| 5 </head> |
| 6 <body style="padding: 0; margin: 0"> |
| 7 <canvas id="canvas" class="output" width="300" height="350"> |
| 8 <button id="button1" style="outline: solid 10px #900"></button> |
| 9 <button id="button2" style="outline: solid 10px #090"></button> |
| 10 </canvas> |
| 11 <script> |
| 12 if (window.testRunner) |
| 13 testRunner.dumpAsText(); |
| 14 |
| 15 // Level of tolerance we expect of most pixel comparisons in this test. |
| 16 function shouldBeAlmost(_a, _b) |
| 17 { |
| 18 shouldBeCloseTo(_a, _b, 2); |
| 19 } |
| 20 |
| 21 document.getElementById('button1').focus(); |
| 22 |
| 23 var canvas = document.getElementById("canvas").getContext("2d"); |
| 24 canvas.beginPath(); |
| 25 canvas.rect(50, 50, 200, 100); |
| 26 canvas.fillStyle = '#fcc'; |
| 27 canvas.fill(); |
| 28 canvas.drawSystemFocusRing(document.getElementById('button1')); |
| 29 |
| 30 canvas.beginPath(); |
| 31 canvas.rect(50, 200, 200, 100); |
| 32 canvas.fillStyle = '#cfc'; |
| 33 canvas.fill(); |
| 34 canvas.drawSystemFocusRing(document.getElementById('button2')); |
| 35 |
| 36 // The top rect's focus ring is tied to button1, which is focused. |
| 37 // It should have a #900 border. |
| 38 var imageData = canvas.getImageData(49, 49, 1, 1); |
| 39 var data = imageData.data; |
| 40 shouldBeAlmost('data[0]', 153); |
| 41 shouldBeAlmost('data[1]', 0); |
| 42 shouldBeAlmost('data[2]', 0); |
| 43 |
| 44 // The bottom rect's focus ring is tied to button2, which is not focused. |
| 45 imageData = canvas.getImageData(49, 199, 1, 1); |
| 46 data = imageData.data; |
| 47 shouldBeAlmost('data[0]', 0); |
| 48 shouldBeAlmost('data[1]', 0); |
| 49 shouldBeAlmost('data[2]', 0); |
| 50 </script> |
| 51 <script src="../js/resources/js-test-post.js"></script> |
| 52 </body> |
OLD | NEW |