canvas-path-context-fill.html | Explore in Territory

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script>

var ctx = document.getElementById('canvas').getContext('2d');

function checkResult(expectedColors, sigma) {
    data = ctx.getImageData(50, 50, 1, 1).data;
    for (var i = 0; i < 4; i++)
        assert_approx_equals(data[i], expectedColors[i], sigma);
}

function drawRectanglesOn(contextOrPath) {
    contextOrPath.rect(0, 0, 100, 100);
    contextOrPath.rect(25, 25, 50, 50);
}

function testFillWith(fillRule, path) {
    ctx.fillStyle = 'rgb(255,0,0)';
    ctx.beginPath();
    ctx.fillRect(0, 0, 100, 100);
    ctx.fillStyle = 'rgb(0,255,0)';
    if (path) {
        if (fillRule) {
            ctx.fill(path, fillRule);
        } else {
            ctx.fill(path);
        }
    } else {
        ctx.beginPath();
        drawRectanglesOn(ctx);
        if (fillRule) {
            ctx.fill(fillRule);
        } else {
            ctx.fill();
        }
    }
    if (fillRule == 'evenodd') {
        checkResult([255, 0, 0, 255], 5);
    } else {
        checkResult([0, 255, 0, 255], 5);
    }
}

test(function(t) {
    fillRules = [undefined, 'nonzero', 'evenodd'];
    path = new Path2D();
    drawRectanglesOn(path);

    for (var i = 0; i < fillRules.length; i++) {
       testFillWith(fillRules[i]);
       testFillWith(fillRules[i], path);
    }

    // Test exception cases.
    assert_throws_js(TypeError, function() {
      ctx.fill(null);
    });
    assert_throws_js(TypeError, function() {
      ctx.fill(null, null);
    });
    assert_throws_js(TypeError, function() {
      ctx.fill(null, 'nonzero');
    });
    assert_throws_js(TypeError, function() {
      ctx.fill(path, null);
    });
    assert_throws_js(TypeError, function() {
      ctx.fill([], 'nonzero');
    });
    assert_throws_js(TypeError, function() {
      ctx.fill({}, 'nonzero');
    });
    assert_throws_js(TypeError, function() {
      ctx.fill(null, 'evenodd');
    });
    assert_throws_js(TypeError, function() {
      ctx.fill([], 'evenodd');
    });
    assert_throws_js(TypeError, function() {
      ctx.fill({}, 'evenodd');
    });
    assert_throws_js(TypeError, function() {
      ctx.fill('gazonk');
    });
    assert_throws_js(TypeError, function() {
      ctx.fill(path, 'gazonk');
    });
    assert_throws_js(TypeError, function() {
      ctx.fill(undefined, undefined);
    });
    assert_throws_js(TypeError, function() {
      ctx.fill(undefined, path);
    });
}, "Series of tests to ensure fill() works with path and winding rule parameters.");
</script>
</body>
chromium/third_party/blink/web_tests/fast/canvas/canvas-path-context-fill.html
