LayoutTests/fast/canvas/canvas-drawImage-out-of-bounds-src.html - Issue 19267027: Fixing src rectangle clipping with drawImage

Side by Side Diff: LayoutTests/fast/canvas/canvas-drawImage-out-of-bounds-src.html

Issue 19267027: Fixing src rectangle clipping with drawImage (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: retry without video Created 7 years, 5 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 | « LayoutTests/canvas/philip/tests/2d.drawImage.outsidesource-expected.txt ('k') | LayoutTests/fast/canvas/canvas-drawImage-out-of-bounds-src-expected.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <html>

	2 <body>

	3 <canvas id="c1" width="250" height="250"></canvas>

	4 <canvas id="c2" width="250" height="250"></canvas>

	5 <br>

	6 <canvas id="c3" width="250" height="250"></canvas>

	7 <canvas id="c4" width="250" height="250"></canvas>

	8 <script type="text/javascript">

	9 var canvas1 = document.getElementById('c1');

	10 var canvas2 = document.getElementById('c2');

	11 var canvas3 = document.getElementById('c3');

	12 var canvas4 = document.getElementById('c4');

	13 var bgcanvas = document.createElement('canvas');

	14 bgcanvas.width = 100;

	15 bgcanvas.height = 100;

	16 var bgctx = bgcanvas.getContext('2d');

	17 bgctx.fillStyle = 'green';

	18 bgctx.fillRect(0, 0, bgcanvas.width, bgcanvas.height);

	19 var greenSquareURL = bgcanvas.toDataURL();

	20 var img = new Image();

	21 img.src = greenSquareURL;

	22 var ctx1 = canvas1.getContext('2d');

	23 var ctx2 = canvas2.getContext('2d');

	24 var ctx3 = canvas3.getContext('2d');

	25 var ctx4 = canvas4.getContext('2d');

	26 video = document.createElement("video");

	27 video.poster = greenSquareURL;

	28

	29 ctx1.drawImage(bgcanvas, -100, -100, 300, 300, -25, -25, 300, 300);

	30 ctx1.drawImage(bgcanvas, -100, -100, 200, 200, -25, -25, 100, 100);

	31 ctx1.drawImage(bgcanvas, 0, -100, 100, 200, 75, -25, 100, 100);

	32 ctx1.drawImage(bgcanvas, 0, -100, 200, 200, 175, -25, 100, 100);

	33 ctx1.drawImage(bgcanvas, -100, 0, 200, 100, -25, 75, 100, 100);

	34 ctx1.drawImage(bgcanvas, 0, 0, 200, 100, 175, 75, 100, 100);

	35 ctx1.drawImage(bgcanvas, -100, 0, 200, 200, -25, 175, 100, 100);

	36 ctx1.drawImage(bgcanvas, 0, 0, 100, 200, 75, 175, 100, 100);

	37 ctx1.drawImage(bgcanvas, 0, 0, 200, 200, 175, 175, 100, 100);

	38

	39 ctx2.drawImage(img, -100, -100, 300, 300, -25, -25, 300, 300);

	40 ctx2.drawImage(img, -100, -100, 200, 200, -25, -25, 100, 100);

	41 ctx2.drawImage(img, 0, -100, 100, 200, 75, -25, 100, 100);

	42 ctx2.drawImage(img, 0, -100, 200, 200, 175, -25, 100, 100);

	43 ctx2.drawImage(img, -100, 0, 200, 100, -25, 75, 100, 100);

	44 ctx2.drawImage(img, 0, 0, 200, 100, 175, 75, 100, 100);

	45 ctx2.drawImage(img, -100, 0, 200, 200, -25, 175, 100, 100);

	46 ctx2.drawImage(img, 0, 0, 100, 200, 75, 175, 100, 100);

	47 ctx2.drawImage(img, 0, 0, 200, 200, 175, 175, 100, 100);

	48

	49 if (window.testRunner) {

	50 testRunner.waitUntilDone();

	51 }

	52

	53 var video = document.createElement("video");

	54 video.autoplay = false;

	55 video.addEventListener("canplaythrough", videoLoaded, false);

	56 video.src = "resources/green.ogv";

	57

	58 function videoLoaded() {

	59 var w = video.videoWidth;

	60 var h = video.videoHeight;

	61 ctx3.drawImage(video, -w, -h, 3w, 3h, -25, -25, 300, 300);

	62 ctx3.drawImage(video, -w, -h, 2w, 2h, -25, -25, 100, 100);

	63 ctx3.drawImage(video, 0, -h, w, 2*h, 75, -25, 100, 100);

	64 ctx3.drawImage(video, 0, -h, 2w, 2h, 175, -25, 100, 100);

	65 ctx3.drawImage(video, -w, 0, 2*w, h, -25, 75, 100, 100);

	66 ctx3.drawImage(video, 0, 0, 2*w, h, 175, 75, 100, 100);

	67 ctx3.drawImage(video, -w, 0, 2w, 2h, -25, 175, 100, 100);

	68 ctx3.drawImage(video, 0, 0, w, 2*h, 75, 175, 100, 100);

	69 ctx3.drawImage(video, 0, 0, 2w, 2h, 175, 175, 100, 100);

	70

	71 if (window.createImageBitmap) {

	72 window.createImageBitmap(img, imageReady);

	73 } else {

	74 if (window.testRunner) {

	75 testRunner.notifyDone();

	76 }

	77 }

	78 }

	79

	80 function imageReady(imageBitmap) {

	81 ctx4.drawImage(imageBitmap, -100, -100, 300, 300, -25, -25, 300, 300);

	82 ctx4.drawImage(imageBitmap, -100, -100, 200, 200, -25, -25, 100, 100);

	83 ctx4.drawImage(imageBitmap, 0, -100, 100, 200, 75, -25, 100, 100);

	84 ctx4.drawImage(imageBitmap, 0, -100, 200, 200, 175, -25, 100, 100);

	85 ctx4.drawImage(imageBitmap, -100, 0, 200, 100, -25, 75, 100, 100);

	86 ctx4.drawImage(imageBitmap, 0, 0, 200, 100, 175, 75, 100, 100);

	87 ctx4.drawImage(imageBitmap, -100, 0, 200, 200, -25, 175, 100, 100);

	88 ctx4.drawImage(imageBitmap, 0, 0, 100, 200, 75, 175, 100, 100);

	89 ctx4.drawImage(imageBitmap, 0, 0, 200, 200, 175, 175, 100, 100);

	90 if (window.testRunner) {

	91 testRunner.notifyDone();

	92 }

	93 }

	94

	95 </script>

	96 </body></html>

OLD	NEW