| Index: third_party/WebKit/LayoutTests/fast/canvas/OffscreenCanvas-2d-pattern-expected.html
|
| diff --git a/third_party/WebKit/LayoutTests/fast/canvas/OffscreenCanvas-2d-pattern-expected.html b/third_party/WebKit/LayoutTests/fast/canvas/OffscreenCanvas-2d-pattern-expected.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..3ac062b66c26736af03f37b78cab4bd344547bac
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/fast/canvas/OffscreenCanvas-2d-pattern-expected.html
|
| @@ -0,0 +1,64 @@
|
| +<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>
|
|
|