chromium/src/third_party/blink/web_tests/fast/canvas/canvas-pattern-behaviour.html

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>

function pixelShouldBe(x, y, color) {
    assert_array_equals(context.getImageData(x, y, 1, 1).data, color);
}

function createCanvasImage(width, height, color) {
    var c = document.createElement("canvas");
    c.width = width;
    c.height = height;
    var context = c.getContext("2d");
    context.fillStyle = color;
    context.fillRect(0, 0, width, height);
    return c;
}

var green1x1 = createCanvasImage(1, 1, "green");
var green100x50 = createCanvasImage(100, 50, "green");

var canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 50;
var context = canvas.getContext("2d");
context.fillStyle="red";
context.fillRect(0, 0, 100, 50);

test(function () {
    var pattern = context.createPattern(green1x1, null);
    context.fillStyle = pattern;
    context.fillRect(0, 0, 100, 50);
    pixelShouldBe(1, 1, [0, 128, 0, 255]);
    pixelShouldBe(98, 1, [0, 128, 0, 255]);
    pixelShouldBe(1, 48, [0, 128, 0, 255]);
    pixelShouldBe(98, 48, [0, 128, 0, 255]);

    assert_throws_dom("SYNTAX_ERR", function() {
      context.createPattern(green1x1, 'null');
    });
    assert_throws_dom("SYNTAX_ERR", function() {
      context.createPattern(green1x1, undefined);
    });
    assert_throws_dom("SYNTAX_ERR", function() {
      context.createPattern(green1x1, 'undefined');
    });
    assert_throws_dom("SYNTAX_ERR", function() {
        context.createPattern(green1x1, {oString:function(){ return null;}});
    });
    assert_throws_js(TypeError, function() {
      context.createPattern(null, '');
    });
    assert_throws_js(TypeError, function() {
      context.createPattern(undefined, '');
    });
    assert_throws_js(TypeError, function() {
      context.createPattern({}, '');
    });
    assert_throws_js(TypeError, function() {
      context.createPattern([], '');
    });

    pattern = context.createPattern(green1x1, '');
    context.fillStyle = pattern;
    context.fillRect(0, 0, 100, 50);
    pixelShouldBe(1, 1, [0, 128, 0, 255]);
    pixelShouldBe(98, 1, [0, 128, 0, 255]);
    pixelShouldBe(1, 48, [0, 128, 0, 255]);
    pixelShouldBe(98, 48, [0, 128, 0, 255]);

    pattern = context.createPattern(green1x1, {toString:function(){ return 'repeat';}});
    context.fillStyle = pattern;
    context.fillRect(0, 0, 100, 50);
    pixelShouldBe(1, 1, [0, 128, 0, 255]);
    pixelShouldBe(98, 1, [0, 128, 0, 255]);
    pixelShouldBe(1, 48, [0, 128, 0, 255]);
    pixelShouldBe(98, 48, [0, 128, 0, 255]);

    context.fillStyle = "green";
    context.fillRect(0, 0, 50, 50);
    var pattern = context.createPattern(green100x50, "no-repeat");
    context.fillStyle = pattern;
    context.translate(50, 0);
    context.fillRect(-50, 0, 100, 50);
    pixelShouldBe(1, 1, [0, 128, 0, 255]);
    pixelShouldBe(98, 1, [0, 128, 0, 255]);
    pixelShouldBe(1, 48, [0, 128, 0, 255]);
    pixelShouldBe(98, 48, [0, 128, 0, 255]);
}, "Test the behavior of pattern use and construction.");
</script>