canvas-lineWidth.html | Explore in Territory

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<body>
<canvas id="canvas" width=600 height=300 style="border:5px solid black">
<script>
// Compare sections of a <canvas> to assert they are identical, or nearly so.
function compareRows(ctx, y0, y1, width, height, allowableDifference) {
    var data0 = ctx.getImageData(0, y0, width, height).data;
    var data1 = ctx.getImageData(0, y1, width, height).data;
    for (var i = 0; i < data0.length; ++i)
        assert_approx_equals(data0[i], data1[i], allowableDifference);
}

ctx = document.getElementById("canvas").getContext("2d");
ctx.strokeStyle = 'blue';

test(function(t) {

    for (var j = 0; j < 3; ++j) {
        ctx.beginPath();
        for (var i = 0; i < 60; ++i) {
            var x = i * 10;
            var y = j * 100 + 30 + (i % 15);
            if (i == 0) {
                ctx.moveTo(x, y);
            } else {
                ctx.lineTo(x, y);
            }
        }
        ctx.stroke();
    
        if (j == 0) {
            assert_equals(ctx.lineWidth, 1);
            ctx.lineWidth = ctx.lineWidth;
            assert_equals(ctx.lineWidth, 1);
        } else {
            assert_equals(ctx.lineWidth, 1);
            ctx.lineWidth = 1;
            assert_equals(ctx.lineWidth, 1);
        }
    }
    
    // Make sure that all rows are nearly identical.
    // (Tiny variations are OK.)
    compareRows(ctx, 0, 100, 600, 100, 1);
    compareRows(ctx, 0, 200, 600, 100, 1);
    
}, 'Test that the default lineWidth is consistent.');
</script>
</body>
chromium/third_party/blink/web_tests/fast/canvas/canvas-lineWidth.html
