| <!DOCTYPE html> |
| <canvas id="canvas1" width=200 height=250></canvas> |
| <canvas id="canvas2" width=250 height=250></canvas> |
| <canvas id="canvas3" width=250 height=250></canvas> |
| <canvas id="canvas4" width=250 height=250></canvas> |
| |
| <script> |
| if (window.testRunner) |
| window.testRunner.dumpAsTextWithPixelResults(); |
| |
| function draw() { |
| // The code works fine with 1px font size, however testing that makes |
| // the test flaky due to pixel differences. |
| for (i = 2; i <= 4; i++) { |
| var ctx = document.getElementById("canvas" + i).getContext("2d"); |
| ctx.scale(25, 25); |
| ctx.lineWidth = 0.1; |
| |
| ctx.beginPath(); |
| ctx.moveTo(0, 5); |
| ctx.lineTo(20, 5); |
| ctx.stroke(); |
| |
| ctx.font = i + "px sans-serif"; |
| ctx.textBaseline = "top"; |
| ctx.strokeText("A", 1, 5); |
| ctx.textBaseline = "middle" |
| ctx.strokeText("B", 3, 5); |
| ctx.textBaseline = "alphabetic" |
| ctx.strokeText("C", 5, 5); |
| ctx.textBaseline = "bottom"; |
| ctx.strokeText("D", 7, 5); |
| } |
| } |
| |
| window.onload = draw; |
| </script> |
