canvas-lineDash.html | Explore in Territory

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<body>
<script>
test(function(t) {

    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    canvas.setAttribute('width', '700');
    canvas.setAttribute('height', '700');
    var ctx = canvas.getContext('2d');

    // Verify default values.
    assert_equals(ctx.lineDashOffset, 0);

    // Set dash-style.
    ctx.setLineDash([15, 10]);
    ctx.lineDashOffset = 5;
    ctx.strokeRect (10,10,100,100);

    // Verify dash and offset.
    var lineDash;
    lineDash = ctx.getLineDash();
    assert_equals(lineDash[0], 15);
    assert_equals(lineDash[1], 10);
    assert_equals(ctx.lineDashOffset, 5);

    // Verify setting line dash to sequence of nulls is interpreted as zeros
    ctx.setLineDash([null, null]);
    lineDash = ctx.getLineDash();
    assert_equals(lineDash[0], 0);
    assert_equals(lineDash[1], 0);
    
    // Set dash style to even number
    ctx.setLineDash([5, 10, 15]);
    ctx.strokeRect(20, 20, 120, 120);
    
    // Verify dash pattern is normalized
    lineDash = ctx.getLineDash();
    assert_equals(lineDash[0], 5);
    assert_equals(lineDash[1], 10);
    assert_equals(lineDash[2], 15);
    assert_equals(lineDash[3], 5);
    assert_equals(lineDash[4], 10);
    assert_equals(lineDash[5], 15);
    
    // Verify that conversion from string works
    ctx.setLineDash(["1", 2]);
    lineDash = ctx.getLineDash();
    assert_equals(lineDash[0], 1);
    assert_equals(lineDash[1], 2);
    
    // Verify that line dash offset persists after
    // clearRect (which causes a save/restore of the context
    // state to the stack).
    ctx.clearRect(0, 0, 700, 700);
    assert_equals(ctx.lineDashOffset, 5);
    
    // Verify dash rendering
    ctx.setLineDash([20, 10]);
    ctx.lineDashOffset = 0;
    ctx.lineWidth = 4; // To make the test immune to plaform anti-aliasing discrepancies
    ctx.strokeStyle = '#00FF00';
    ctx.strokeRect(10.5, 10.5, 30, 30);
    
    assert_array_equals(ctx.getImageData(25, 10, 1, 1).data, [0, 255, 0, 255]);
    assert_array_equals(ctx.getImageData(35, 10, 1, 1).data, [0, 0, 0, 0]);
    assert_array_equals(ctx.getImageData(40, 25, 1, 1).data, [0, 255, 0, 255]);
    assert_array_equals(ctx.getImageData(40, 35, 1, 1).data, [0, 0, 0, 0]);
    assert_array_equals(ctx.getImageData(25, 40, 1, 1).data, [0, 255, 0, 255]);
    assert_array_equals(ctx.getImageData(15, 40, 1, 1).data, [0, 0, 0, 0]);
    assert_array_equals(ctx.getImageData(10, 25, 1, 1).data, [0, 255, 0, 255]);
    assert_array_equals(ctx.getImageData(10, 15, 1, 1).data, [0, 0, 0, 0]);
    
    // Verify that lineDashOffset works as expected
    ctx.lineDashOffset = 20;
    ctx.strokeRect(50.5, 10.5, 30, 30);
    assert_array_equals(ctx.getImageData(55, 10, 1, 1).data, [0, 0, 0, 0]);
    assert_array_equals(ctx.getImageData(65, 10, 1, 1).data, [0, 255, 0, 255]);
    assert_array_equals(ctx.getImageData(80, 15, 1, 1).data, [0, 0, 0, 0]);
    assert_array_equals(ctx.getImageData(80, 25, 1, 1).data, [0, 255, 0, 255]);
    assert_array_equals(ctx.getImageData(75, 40, 1, 1).data, [0, 0, 0, 0]);
    assert_array_equals(ctx.getImageData(65, 40, 1, 1).data, [0, 255, 0, 255]);
    assert_array_equals(ctx.getImageData(50, 35, 1, 1).data, [0, 0, 0, 0]);
    assert_array_equals(ctx.getImageData(50, 25, 1, 1).data, [0, 255, 0, 255]);
    
    // Verify negative lineDashOffset
    ctx.lineDashOffset = -10;
    ctx.strokeRect(90.5, 10.5, 30, 30);
    assert_array_equals(ctx.getImageData(95, 10, 1, 1).data, [0, 0, 0, 0]);
    assert_array_equals(ctx.getImageData(105, 10, 1, 1).data, [0, 255, 0, 255]);
    assert_array_equals(ctx.getImageData(120, 15, 1, 1).data, [0, 0, 0, 0]);
    assert_array_equals(ctx.getImageData(120, 25, 1, 1).data, [0, 255, 0, 255]);
    assert_array_equals(ctx.getImageData(115, 40, 1, 1).data, [0, 0, 0, 0]);
    assert_array_equals(ctx.getImageData(105, 40, 1, 1).data, [0, 255, 0, 255]);
    assert_array_equals(ctx.getImageData(90, 35, 1, 1).data, [0, 0, 0, 0]);
    assert_array_equals(ctx.getImageData(90, 25, 1, 1).data, [0, 255, 0, 255]);
    
    // Verify that all zero dash sequence results in no dashing
    ctx.setLineDash([0, 0]);
    ctx.lineDashOffset = 0;
    ctx.strokeRect(130.5, 10.5, 30, 30);
    assert_array_equals(ctx.getImageData(130, 10, 1, 1).data, [0, 255, 0, 255]);
    assert_array_equals(ctx.getImageData(130, 15, 1, 1).data, [0, 255, 0, 255]);
    assert_array_equals(ctx.getImageData(130, 25, 1, 1).data, [0, 255, 0, 255]);
    assert_array_equals(ctx.getImageData(130, 35, 1, 1).data, [0, 255, 0, 255]);
    
}, "Basic test for setLineDash, getLineDash and lineDashOffset");
</script>
</body>
chromium/third_party/blink/web_tests/fast/canvas/canvas-lineDash.html
