canvas-pattern-transform.html | Explore in Territory

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<body>
<script>
var canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
var ctx2 = canvas.getContext('2d');
ctx2.fillStyle = '#0f0';
ctx2.fillRect(0, 0, 50, 50);
ctx2.fillRect(50, 50, 50, 50);
ctx2.fillStyle = '#f00';
ctx2.fillRect(50, 0, 50, 50);
ctx2.fillRect(0, 50, 50, 50);

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

ctx.save();
ctx.transform(2, 0, 0, 2, 0, 0);
var pattern = ctx.createPattern(canvas, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 100);
ctx.restore();

ctx.save();
ctx.transform(0.5, 0, 0, 0.5, 0, 0);
pattern = ctx.createPattern(canvas, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 100);
ctx.restore();

test(function(t) {
    var imageData = ctx.getImageData(26, 26, 74, 74).data;
    assert_array_equals(imageData.slice(4, 7), [0, 255, 0]);

    imageData = ctx.getImageData(25, 0, 25, 25).data;
    assert_array_equals(imageData.slice(4, 7), [255, 0, 0]);

    imageData = ctx.getImageData(0, 0, 25, 25).data;
    assert_array_equals(imageData.slice(4, 7), [0, 255, 0]);
}, "Series of tests to ensure correct behaviour on transform of a pattern.");
</script>
</body>
chromium/third_party/blink/web_tests/fast/canvas/canvas-pattern-transform.html
