third_party/WebKit/LayoutTests/fast/canvas/OffscreenCanvas-2d-drawImage.html - Issue 2294383002: Make OffscreenCanvas a member of CanvasImageSource

Side by Side Diff: third_party/WebKit/LayoutTests/fast/canvas/OffscreenCanvas-2d-drawImage.html

Issue 2294383002: Make OffscreenCanvas a member of CanvasImageSource (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 3 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/canvas/philip/tests/2d.pattern.image.undefined-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/canvas/OffscreenCanvas-2d-drawImage-expected.html » ('j') | third_party/WebKit/Source/core/html/HTMLCanvasElement.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <html>	1 <html>

2 <head>	2 <head>

3 <style type="text/css">	3 <style type="text/css">

4 video {	4 video {

5 display: none;	5 display: none;

6 }	6 }

7 </style>	7 </style>

8 </head>	8 </head>

9 <body>	9 <body>

10 <video id="video" width="30" height="30">	10 <video id="video" width="30" height="30">

11 <source src="resources/canvas_video.webm" type="video/webm" />	11 <source src="resources/canvas_video.webm" type="video/webm" />

12 </video>	12 </video>

13 <canvas id="videoOutput" width="150" height="150"></canvas>	13 <canvas id="videoOutput" width="150" height="150"></canvas>

14 <canvas id="imageOutput" width="150" height="150"></canvas>	14 <canvas id="imageOutput" width="150" height="150"></canvas>

15 <canvas id="canvasOutput" width="150" height="150"></canvas>	15 <canvas id="canvasOutput" width="150" height="150"></canvas>

	16 <canvas id="offscreenCanvas2DOutput" width="150" height="150"></canvas>

	17 <canvas id="offscreenCanvasWebGLOutput" width="150" height="150"></canvas>

16	18

17 <script>	19 <script>

18 function drawImageSourceToOffscreenCanvas(imageSource, outputCanvas) {	20 function drawImageSourceToOffscreenCanvas(imageSource, outputCanvas) {

19 var aCanvas = new OffscreenCanvas(150, 150);	21 var aCanvas = new OffscreenCanvas(150, 150);

20 var ctx = aCanvas.getContext('2d');	22 var ctx = aCanvas.getContext('2d');

21	23

22 ctx.drawImage(imageSource, 0, 0);	24 ctx.drawImage(imageSource, 0, 0);

23 ctx.drawImage(imageSource, 30, 30, 30, 30);	25 ctx.drawImage(imageSource, 30, 30, 30, 30);

24 // stretch the image	26 // stretch the image

25 ctx.drawImage(imageSource, 8, 8, 15, 15, 60, 60, 60, 60);	27 ctx.drawImage(imageSource, 8, 8, 15, 15, 60, 60, 60, 60);

(...skipping 26 matching lines...) Expand all Loading...
52 var htmlCanvas = document.createElement('canvas');	54 var htmlCanvas = document.createElement('canvas');

53 htmlCanvas.width = 30;	55 htmlCanvas.width = 30;

54 htmlCanvas.height = 30;	56 htmlCanvas.height = 30;

55 var htmlCanvasCtx = htmlCanvas.getContext("2d");	57 var htmlCanvasCtx = htmlCanvas.getContext("2d");

56 htmlCanvasCtx.fillStyle = "blue";	58 htmlCanvasCtx.fillStyle = "blue";

57 htmlCanvasCtx.fillRect(0, 0, 15, 30);	59 htmlCanvasCtx.fillRect(0, 0, 15, 30);

58 htmlCanvasCtx.fillStyle = "red";	60 htmlCanvasCtx.fillStyle = "red";

59 htmlCanvasCtx.fillRect(15, 0, 30, 30);	61 htmlCanvasCtx.fillRect(15, 0, 30, 30);

60 drawImageSourceToOffscreenCanvas(htmlCanvas, document.getElementById('canvasOutp ut'));	62 drawImageSourceToOffscreenCanvas(htmlCanvas, document.getElementById('canvasOutp ut'));

61	63

	64 // image source as OffscreenCanvas with 2D context

	65 var offscreenCanvas2D = new OffscreenCanvas(30, 30);

	66 var offscreenCanvas2DCtx = offscreenCanvas2D.getContext("2d");

	67 offscreenCanvas2DCtx.fillStyle = "blue";

	68 offscreenCanvas2DCtx.fillRect(0, 0, 15, 30);

	69 offscreenCanvas2DCtx.fillStyle = "red";

	70 offscreenCanvas2DCtx.fillRect(15, 0, 30, 30);

	71 drawImageSourceToOffscreenCanvas(offscreenCanvas2D, document.getElementById('off screenCanvas2DOutput'));

	72

	73 // Image source as OffscreenCanvas with webGL context

	74 var offscreenCanvasWebGL = new OffscreenCanvas(30, 30);

	75 var gl = offscreenCanvasWebGL.getContext("webgl");

	76 gl.clearColor(0.0, 0.0, 1.0, 1.0);

	77 gl.clear(gl.COLOR_BUFFER_BIT);

	78 drawImageSourceToOffscreenCanvas(offscreenCanvasWebGL, document.getElementById(' offscreenCanvasWebGLOutput'));

	79

62 </script>	80 </script>

63 </body>	81 </body>

64	82

OLD	NEW