Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(319)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified 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 side-by-side diff with in-line comments
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 »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/canvas/canvas-drawImage-out-of-bounds-src.html
diff --git a/LayoutTests/fast/canvas/canvas-drawImage-out-of-bounds-src.html b/LayoutTests/fast/canvas/canvas-drawImage-out-of-bounds-src.html
new file mode 100644
index 0000000000000000000000000000000000000000..5d85c17168884bcffb1fa21b07c304d0ae94c5c6
--- /dev/null
+++ b/LayoutTests/fast/canvas/canvas-drawImage-out-of-bounds-src.html
@@ -0,0 +1,96 @@
+<html>
+<body>
+<canvas id="c1" width="250" height="250"></canvas>
+<canvas id="c2" width="250" height="250"></canvas>
+<br>
+<canvas id="c3" width="250" height="250"></canvas>
+<canvas id="c4" width="250" height="250"></canvas>
+<script type="text/javascript">
+var canvas1 = document.getElementById('c1');
+var canvas2 = document.getElementById('c2');
+var canvas3 = document.getElementById('c3');
+var canvas4 = document.getElementById('c4');
+var bgcanvas = document.createElement('canvas');
+bgcanvas.width = 100;
+bgcanvas.height = 100;
+var bgctx = bgcanvas.getContext('2d');
+bgctx.fillStyle = 'green';
+bgctx.fillRect(0, 0, bgcanvas.width, bgcanvas.height);
+var greenSquareURL = bgcanvas.toDataURL();
+var img = new Image();
+img.src = greenSquareURL;
+var ctx1 = canvas1.getContext('2d');
+var ctx2 = canvas2.getContext('2d');
+var ctx3 = canvas3.getContext('2d');
+var ctx4 = canvas4.getContext('2d');
+video = document.createElement("video");
+video.poster = greenSquareURL;
+
+ctx1.drawImage(bgcanvas, -100, -100, 300, 300, -25, -25, 300, 300);
+ctx1.drawImage(bgcanvas, -100, -100, 200, 200, -25, -25, 100, 100);
+ctx1.drawImage(bgcanvas, 0, -100, 100, 200, 75, -25, 100, 100);
+ctx1.drawImage(bgcanvas, 0, -100, 200, 200, 175, -25, 100, 100);
+ctx1.drawImage(bgcanvas, -100, 0, 200, 100, -25, 75, 100, 100);
+ctx1.drawImage(bgcanvas, 0, 0, 200, 100, 175, 75, 100, 100);
+ctx1.drawImage(bgcanvas, -100, 0, 200, 200, -25, 175, 100, 100);
+ctx1.drawImage(bgcanvas, 0, 0, 100, 200, 75, 175, 100, 100);
+ctx1.drawImage(bgcanvas, 0, 0, 200, 200, 175, 175, 100, 100);
+
+ctx2.drawImage(img, -100, -100, 300, 300, -25, -25, 300, 300);
+ctx2.drawImage(img, -100, -100, 200, 200, -25, -25, 100, 100);
+ctx2.drawImage(img, 0, -100, 100, 200, 75, -25, 100, 100);
+ctx2.drawImage(img, 0, -100, 200, 200, 175, -25, 100, 100);
+ctx2.drawImage(img, -100, 0, 200, 100, -25, 75, 100, 100);
+ctx2.drawImage(img, 0, 0, 200, 100, 175, 75, 100, 100);
+ctx2.drawImage(img, -100, 0, 200, 200, -25, 175, 100, 100);
+ctx2.drawImage(img, 0, 0, 100, 200, 75, 175, 100, 100);
+ctx2.drawImage(img, 0, 0, 200, 200, 175, 175, 100, 100);
+
+if (window.testRunner) {
+ testRunner.waitUntilDone();
+}
+
+var video = document.createElement("video");
+video.autoplay = false;
+video.addEventListener("canplaythrough", videoLoaded, false);
+video.src = "resources/green.ogv";
+
+function videoLoaded() {
+ var w = video.videoWidth;
+ var h = video.videoHeight;
+ ctx3.drawImage(video, -w, -h, 3*w, 3*h, -25, -25, 300, 300);
+ ctx3.drawImage(video, -w, -h, 2*w, 2*h, -25, -25, 100, 100);
+ ctx3.drawImage(video, 0, -h, w, 2*h, 75, -25, 100, 100);
+ ctx3.drawImage(video, 0, -h, 2*w, 2*h, 175, -25, 100, 100);
+ ctx3.drawImage(video, -w, 0, 2*w, h, -25, 75, 100, 100);
+ ctx3.drawImage(video, 0, 0, 2*w, h, 175, 75, 100, 100);
+ ctx3.drawImage(video, -w, 0, 2*w, 2*h, -25, 175, 100, 100);
+ ctx3.drawImage(video, 0, 0, w, 2*h, 75, 175, 100, 100);
+ ctx3.drawImage(video, 0, 0, 2*w, 2*h, 175, 175, 100, 100);
+
+ if (window.createImageBitmap) {
+ window.createImageBitmap(img, imageReady);
+ } else {
+ if (window.testRunner) {
+ testRunner.notifyDone();
+ }
+ }
+}
+
+function imageReady(imageBitmap) {
+ ctx4.drawImage(imageBitmap, -100, -100, 300, 300, -25, -25, 300, 300);
+ ctx4.drawImage(imageBitmap, -100, -100, 200, 200, -25, -25, 100, 100);
+ ctx4.drawImage(imageBitmap, 0, -100, 100, 200, 75, -25, 100, 100);
+ ctx4.drawImage(imageBitmap, 0, -100, 200, 200, 175, -25, 100, 100);
+ ctx4.drawImage(imageBitmap, -100, 0, 200, 100, -25, 75, 100, 100);
+ ctx4.drawImage(imageBitmap, 0, 0, 200, 100, 175, 75, 100, 100);
+ ctx4.drawImage(imageBitmap, -100, 0, 200, 200, -25, 175, 100, 100);
+ ctx4.drawImage(imageBitmap, 0, 0, 100, 200, 75, 175, 100, 100);
+ ctx4.drawImage(imageBitmap, 0, 0, 200, 200, 175, 175, 100, 100);
+ if (window.testRunner) {
+ testRunner.notifyDone();
+ }
+}
+
+</script>
+</body></html>
« 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 »

Powered by Google App Engine
This is Rietveld 408576698