<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[204517] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/204517">204517</a></dd>
<dt>Author</dt> <dd>cdumez@apple.com</dd>
<dt>Date</dt> <dd>2016-08-16 12:08:58 -0700 (Tue, 16 Aug 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>ctx.drawImage should clip source rect if it is outside the source image
https://bugs.webkit.org/show_bug.cgi?id=160804
Reviewed by Simon Fraser.
Source/WebCore:
According to the specification [1]"
"When the source rectangle is outside the source image, the source rectangle
must be clipped to the source image and the destination rectangle must be
clipped in the same proportion."
Firefox and Chrome behave according to the specification. This patch aligns
our behavior.
[1] https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-drawimage
Test: fast/canvas/drawImage-srcRect-clipping.html
* html/canvas/CanvasRenderingContext2D.cpp:
(WebCore::CanvasRenderingContext2D::drawImage):
LayoutTests:
Add layout test coverage.
* fast/canvas/drawImage-srcRect-clipping-expected.html: Added.
* fast/canvas/drawImage-srcRect-clipping.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorehtmlcanvasCanvasRenderingContext2Dcpp">trunk/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcanvasdrawImagesrcRectclippingexpectedhtml">trunk/LayoutTests/fast/canvas/drawImage-srcRect-clipping-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcanvasdrawImagesrcRectclippinghtml">trunk/LayoutTests/fast/canvas/drawImage-srcRect-clipping.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (204516 => 204517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2016-08-16 19:04:06 UTC (rev 204516)
+++ trunk/LayoutTests/ChangeLog        2016-08-16 19:08:58 UTC (rev 204517)
</span><span class="lines">@@ -1,3 +1,15 @@
</span><ins>+2016-08-16 Chris Dumez <cdumez@apple.com>
+
+ ctx.drawImage should clip source rect if it is outside the source image
+ https://bugs.webkit.org/show_bug.cgi?id=160804
+
+ Reviewed by Simon Fraser.
+
+ Add layout test coverage.
+
+ * fast/canvas/drawImage-srcRect-clipping-expected.html: Added.
+ * fast/canvas/drawImage-srcRect-clipping.html: Added.
+
</ins><span class="cx"> 2016-08-16 George Ruan <gruan@apple.com>
</span><span class="cx">
</span><span class="cx"> ⛱ : Implement parsing of Media Constraints for getUserMedia algorithm in Media Capture and Streaming Spec
</span></span></pre></div>
<a id="trunkLayoutTestsfastcanvasdrawImagesrcRectclippingexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/canvas/drawImage-srcRect-clipping-expected.html (0 => 204517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/canvas/drawImage-srcRect-clipping-expected.html         (rev 0)
+++ trunk/LayoutTests/fast/canvas/drawImage-srcRect-clipping-expected.html        2016-08-16 19:08:58 UTC (rev 204517)
</span><span class="lines">@@ -0,0 +1,21 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<body>
+<p>Tests that the source rect is clipped when outside the image rect.</p>
+<canvas id='target' width='100px' height='100px;'></canvas>
+<script>
+if (window.testRunner)
+ testRunner.waitUntilDone();
+
+var image = new Image();
+
+image.onload = function () {
+ target.getContext('2d').drawImage(image, 50, 50, 50, 50, 0, 0, 50, 50);
+ if (window.testRunner)
+ testRunner.notifyDone();
+};
+
+image.src = '../css/resources/greenbox-100px.png';
+</script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcanvasdrawImagesrcRectclippinghtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/canvas/drawImage-srcRect-clipping.html (0 => 204517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/canvas/drawImage-srcRect-clipping.html         (rev 0)
+++ trunk/LayoutTests/fast/canvas/drawImage-srcRect-clipping.html        2016-08-16 19:08:58 UTC (rev 204517)
</span><span class="lines">@@ -0,0 +1,21 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<body>
+<p>Tests that the source rect is clipped when outside the image rect.</p>
+<canvas id='target' width='100px' height='100px'></canvas>
+<script>
+if (window.testRunner)
+ testRunner.waitUntilDone();
+
+var image = new Image();
+
+image.onload = function () {
+ target.getContext('2d').drawImage(image, 50, 50, 100, 100, 0, 0, 100, 100);
+ if (window.testRunner)
+ testRunner.notifyDone();
+};
+
+image.src = '../css/resources/greenbox-100px.png';
+</script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (204516 => 204517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2016-08-16 19:04:06 UTC (rev 204516)
+++ trunk/Source/WebCore/ChangeLog        2016-08-16 19:08:58 UTC (rev 204517)
</span><span class="lines">@@ -1,3 +1,25 @@
</span><ins>+2016-08-16 Chris Dumez <cdumez@apple.com>
+
+ ctx.drawImage should clip source rect if it is outside the source image
+ https://bugs.webkit.org/show_bug.cgi?id=160804
+
+ Reviewed by Simon Fraser.
+
+ According to the specification [1]"
+ "When the source rectangle is outside the source image, the source rectangle
+ must be clipped to the source image and the destination rectangle must be
+ clipped in the same proportion."
+
+ Firefox and Chrome behave according to the specification. This patch aligns
+ our behavior.
+
+ [1] https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-drawimage
+
+ Test: fast/canvas/drawImage-srcRect-clipping.html
+
+ * html/canvas/CanvasRenderingContext2D.cpp:
+ (WebCore::CanvasRenderingContext2D::drawImage):
+
</ins><span class="cx"> 2016-08-16 George Ruan <gruan@apple.com>
</span><span class="cx">
</span><span class="cx"> ⛱ : Implement parsing of Media Constraints for getUserMedia algorithm in Media Capture and Streaming Spec
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlcanvasCanvasRenderingContext2Dcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp (204516 => 204517)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp        2016-08-16 19:04:06 UTC (rev 204516)
+++ trunk/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp        2016-08-16 19:08:58 UTC (rev 204517)
</span><span class="lines">@@ -1390,9 +1390,21 @@
</span><span class="cx"> ec = INDEX_SIZE_ERR;
</span><span class="cx"> return;
</span><span class="cx"> }
</span><del>- if (!imageRect.contains(normalizedSrcRect))
</del><ins>+
+ // When the source rectangle is outside the source image, the source rectangle must be clipped
+ // to the source image and the destination rectangle must be clipped in the same proportion.
+ FloatRect originalNormalizedSrcRect = normalizedSrcRect;
+ normalizedSrcRect.intersect(imageRect);
+ if (normalizedSrcRect.isEmpty())
</ins><span class="cx"> return;
</span><span class="cx">
</span><ins>+ if (normalizedSrcRect != originalNormalizedSrcRect) {
+ normalizedDstRect.setWidth(normalizedDstRect.width() * normalizedSrcRect.width() / originalNormalizedSrcRect.width());
+ normalizedDstRect.setHeight(normalizedDstRect.height() * normalizedSrcRect.height() / originalNormalizedSrcRect.height());
+ if (normalizedDstRect.isEmpty())
+ return;
+ }
+
</ins><span class="cx"> GraphicsContext* c = drawingContext();
</span><span class="cx"> if (!c)
</span><span class="cx"> return;
</span></span></pre>
</div>
</div>
</body>
</html>