OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <canvas id="canvas1" width=200 height=250></canvas> |
| 3 <canvas id="canvas2" width=250 height=250></canvas> |
| 4 <canvas id="canvas3" width=250 height=250></canvas> |
| 5 <canvas id="canvas4" width=250 height=250></canvas> |
| 6 |
| 7 <script> |
| 8 if (window.testRunner) |
| 9 window.testRunner.dumpAsTextWithPixelResults(); |
| 10 |
| 11 function draw() { |
| 12 // The code works fine with 1px font size, however testing that makes |
| 13 // the test flaky due to pixel differences. |
| 14 for (i = 2; i <= 4; i++) { |
| 15 var ctx = document.getElementById("canvas" + i).getContext("2d"); |
| 16 ctx.scale(25, 25); |
| 17 ctx.lineWidth = 0.1; |
| 18 |
| 19 ctx.beginPath(); |
| 20 ctx.moveTo(0, 5); |
| 21 ctx.lineTo(20, 5); |
| 22 ctx.stroke(); |
| 23 |
| 24 ctx.font = i + "px sans-serif"; |
| 25 ctx.textBaseline = "top"; |
| 26 ctx.strokeText("A", 1, 5); |
| 27 ctx.textBaseline = "middle" |
| 28 ctx.strokeText("B", 3, 5); |
| 29 ctx.textBaseline = "alphabetic" |
| 30 ctx.strokeText("C", 5, 5); |
| 31 ctx.textBaseline = "bottom"; |
| 32 ctx.strokeText("D", 7, 5); |
| 33 } |
| 34 } |
| 35 |
| 36 window.onload = draw; |
| 37 </script> |
OLD | NEW |