pattern-with-transform.html | Explore in Territory

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

var canvas;
function fillWithColor(context, color) {
    context.save();
    context.fillStyle = color;
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.restore();
}

canvas = document.createElement("canvas");
canvas.height = 100;
canvas.width = 100;
canvas.style.height = "100";
canvas.style.width = "100";
document.body.appendChild(canvas);

test(function() {
    var patternImage = document.createElement('canvas');
    patternImage.height = 10;
    patternImage.width = 10;
    var patternImageCtx = patternImage.getContext('2d');
    fillWithColor(patternImageCtx, "green");
    var greenPixel = patternImageCtx.getImageData(0, 0, 1, 1).data;

    var ctx = canvas.getContext('2d');
    var pattern = ctx.createPattern(patternImage, "no-repeat");
    fillWithColor(ctx, "blue");

    ctx.fillStyle = pattern;
    ctx.translate(20, 20);
    ctx.fillRect(0, 0, 10, 10);
    assert_array_equals(ctx.getImageData(20, 20, 1, 1).data, greenPixel);
    
}, "Test for canvas regression where pattern transforms were ignored https://bugs.webkit.org/show_bug.cgi?id=21498");
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/canvas/pattern-with-transform.html
