canvas-text-baseline-tiny-fonts.html

<!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>
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>

chromium/third_party/blink/web_tests/fast/canvas/canvas-text-baseline-tiny-fonts.html