OffscreenCanvas-2d-pattern-expected.html

<html>
    <head>
        <style type="text/css">
        video {
            display: none;
        }
        </style>
    </head>
<body>
<video id="video">
    <source src="resources/canvas_video.webm" type="video/webm" />
</video>
<canvas id="videoPattern" width="100" height="100"></canvas>
<canvas id="imagePattern" width="100" height="100"></canvas>
<canvas id="canvasPattern" width="100" height="100"></canvas>
<script>
function drawPatternFromImageSourceToCanvas(canvas, imageSource, repetitionType) {
    var canvasCtx = canvas.getContext('2d');
    var pattern = canvasCtx.createPattern(imageSource, repetitionType);
    canvasCtx.fillStyle = pattern;
    canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
}

function createPatternFromVideo() {
    var canvas_video = document.getElementById('videoPattern');
    var video = document.getElementById('video');
    var videoOnPlay = function() {
        video.removeEventListener("playing", videoOnPlay);
        drawPatternFromImageSourceToCanvas(canvas_video, video, "no-repeat");
    }; 
    video.addEventListener("playing", videoOnPlay, true);
    video.play();
}

function createPatternFromImage() {
    var canvas_image = document.getElementById('imagePattern');
    var image = new Image(); 
    var imageOnLoad = function() {
        image.removeEventListener("load", imageOnLoad);
        drawPatternFromImageSourceToCanvas(canvas_image, image, "repeat");
    };
    image.addEventListener("load", imageOnLoad);
    image.src = "resources/pattern.png";
}

function createPatternFromCanvas() {
    var canvas_canvas = document.getElementById('canvasPattern');
    var htmlCanvas = document.createElement('canvas');
    htmlCanvas.width = 10;
    htmlCanvas.height = 50;
    var htmlCanvasCtx = htmlCanvas.getContext("2d");
    htmlCanvasCtx.fillStyle = "blue";
    htmlCanvasCtx.fillRect(0, 0, 5, 50);
    htmlCanvasCtx.fillStyle = "red";
    htmlCanvasCtx.fillRect(5, 0, 10, 50);
    drawPatternFromImageSourceToCanvas(canvas_canvas, htmlCanvas, "repeat-x");

}

createPatternFromVideo();
createPatternFromImage();
createPatternFromCanvas();
</script>
</body>
chromium/third_party/blink/web_tests/fast/canvas/OffscreenCanvas-2d-pattern-expected.html
