canvas-pattern-set-transform.html | Explore in Territory

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<body>
<script>
function fillWithColor(context, canvas, color1, color2) {
    context.save();
    context.fillStyle = color1;
    context.fillRect(0, 0, canvas.width / 2, canvas.height);
    context.fillStyle = color2;
    context.fillRect(canvas.width / 2, 0, canvas.width / 2, canvas.height);
    context.restore();
}

test(function(t) {

    var canvas = document.createElement("canvas");
    canvas.height = 100;
    canvas.width = 100;
    canvas.style.height = "100";
    canvas.style.width = "100";
    
    document.body.appendChild(canvas);
    
    var patternImage = document.createElement("canvas");
    patternImage.height = 10;
    patternImage.width = 20;
    var patternImageCtx = patternImage.getContext('2d');
    fillWithColor(patternImageCtx, patternImage, "red", "green");
    var greenPixel = patternImageCtx.getImageData(10, 0, 1, 1).data;
    
    var ctx = canvas.getContext('2d');
    var pattern = ctx.createPattern(patternImage, "repeat-x");
    var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    var matrix = svgElement.createSVGMatrix();
    matrix = matrix.translate(10, 0);
    pattern.setTransform(matrix);
    
    fillWithColor(ctx, canvas, "blue", "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 supporting setTransform on canvas patterns");
</script>
</body>
chromium/third_party/blink/web_tests/fast/canvas/canvas-pattern-set-transform.html
