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

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

<style>
canvas {
    border: 1px solid #000;
    margin: 2px;
}
</style>
<div id="canvases"></div>

<script>
// Visual result for debugging (test uses text baseline only): You should see sixteen canvases with a green dot (rotated square) in the center.

var img;
var imgdata;

function runTests() {
    var NUM_IMAGE = 16;
    for (var i = 0; i < NUM_IMAGE; i++) {
        var canvases = document.getElementById('canvases')
        var canvas = document.createElement('canvas');
        canvas.width = 9;
        canvas.height = 9;
        var ctx = canvas.getContext('2d');

        var pattern = ctx.createPattern(img, 'no-repeat');
        ctx.fillStyle = pattern;
        ctx.translate(img.width / 2, img.height / 2);
        var angle = 2 * Math.PI * i / NUM_IMAGE;
        ctx.rotate(angle);
        ctx.translate(- img.width / 2, - img.height / 2);
        ctx.fillRect(0, 0, img.width, img.height);

        var div = document.createElement('div');
        div.appendChild(canvas);
        canvases.appendChild(div);

        assert_array_equals(ctx.getImageData(4, 4, 1, 1).data.slice(0,3), [0, 255, 0]);
    }
}


var patternCanvas = document.createElement('canvas');
patternCanvas.width = 9;
patternCanvas.height = 9;
var patternCtx = patternCanvas.getContext('2d');
patternCtx.fillStyle = '#0F0';
patternCtx.fillRect(3, 3, 3, 3);
img = new Image();
img.src = patternCanvas.toDataURL();


async_test(t => {
        img.onload = function() {
            t.step(runTests);
            t.done();
        }
}, "Test image pattern rotation.");
</script>