12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>drawSystemFocusRing() dirty rect test</title>
- <script src="../../resources/js-test.js"></script>
- </head>
- <body>
- <p>This test is passed if result1 is exactly the same with result2.</p>
- <p>
- <button id="result1">Result1</button>
- <button id="result2">Result2</button>
- </p>
- <canvas id="canvas" class="output" width="300" height="300">
- <button id="button"></button>
- </canvas>
- <script>
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext("2d");
- var button = document.getElementById("button");
- var result1 = document.getElementById("result1");
- var result2 = document.getElementById("result2");
- function drawResult(separateFrame) {
- button.focus();
- requestAnimationFrame(function() {
- context.beginPath();
- context.rect(0, 0, 300, 300);
- context.fill();
- context.beginPath();
- context.rect(50, 50, 200, 100);
- if (separateFrame)
- requestAnimationFrame(function() {
- context.drawSystemFocusRing(button);
- });
- else
- context.drawSystemFocusRing(button);
- });
- }
- result1.addEventListener("click", function() {
- drawResult(false);
- }, false);
- result2.addEventListener("click", function() {
- drawResult(true);
- }, false);
- </script>
- </body>
- </html>
|