<!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>[190274] 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/190274">190274</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2015-09-28 00:43:34 -0700 (Mon, 28 Sep 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Source/WebCore:
An SVG inherits the container size of the previously drawn HTMLImageElement when drawing it on a canvas
https://bugs.webkit.org/show_bug.cgi?id=148845
Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-09-28
Reviewed by Darin Adler.
When drawing an SVG image on a canvas we need to make sure that the container
size of the SVG is set to the image source size. If we do not do that, the
previous container size will be used as the size of the image. When drawing
it as HTMLImageElement, the renderer calls SVGImage::drawForContainer() which
calls setContainerSize() and then calls draw(). This call ensures that the
size is set correctly for cached images. But when drawing the SVGImage on
CanvasRenderingContext2D, the SVGImage::draw() is called directly because
it calls it through the base class method Image::draw().
If the image.isSVGImage(), CanvasRenderingContext2D::drawImage() has to call
SVGImage::setContainerSize() before calling Image::draw().
Test: svg/as-image/svg-cached-draw-canvas.html
* html/canvas/CanvasRenderingContext2D.cpp:
(WebCore::CanvasRenderingContext2D::drawImage):
Call SVGImage::setContainerSize() before calling Image::draw().
LayoutTests:
An SVG inherits the container size of the previously drawn HTMLImageElement when drawing it on canvas
https://bugs.webkit.org/show_bug.cgi?id=148845
Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-09-28
Reviewed by Darin Adler.
Ensure that an SVG image with intrinsic size or with no intrinsic size can be
displayed on a canvas even if it is previously displayed by an HTMLImageElement.
* svg/as-image/svg-cached-draw-canvas-expected.html: Added.
* svg/as-image/svg-cached-draw-canvas.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="#trunkLayoutTestssvgasimagesvgcacheddrawcanvasexpectedhtml">trunk/LayoutTests/svg/as-image/svg-cached-draw-canvas-expected.html</a></li>
<li><a href="#trunkLayoutTestssvgasimagesvgcacheddrawcanvashtml">trunk/LayoutTests/svg/as-image/svg-cached-draw-canvas.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (190273 => 190274)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2015-09-28 03:43:00 UTC (rev 190273)
+++ trunk/LayoutTests/ChangeLog 2015-09-28 07:43:34 UTC (rev 190274)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+2015-09-28 Said Abou-Hallawa <sabouhallawa@apple.com>
+
+ An SVG inherits the container size of the previously drawn HTMLImageElement when drawing it on canvas
+ https://bugs.webkit.org/show_bug.cgi?id=148845
+
+ Reviewed by Darin Adler.
+
+ Ensure that an SVG image with intrinsic size or with no intrinsic size can be
+ displayed on a canvas even if it is previously displayed by an HTMLImageElement.
+
+ * svg/as-image/svg-cached-draw-canvas-expected.html: Added.
+ * svg/as-image/svg-cached-draw-canvas.html: Added.
+
</ins><span class="cx"> 2015-09-26 Carlos Garcia Campos <cgarcia@igalia.com>
</span><span class="cx">
</span><span class="cx"> Unreviewed. Gardening: skip media stream tests failing after r190262.
</span></span></pre></div>
<a id="trunkLayoutTestssvgasimagesvgcacheddrawcanvasexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/svg/as-image/svg-cached-draw-canvas-expected.html (0 => 190274)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/svg/as-image/svg-cached-draw-canvas-expected.html (rev 0)
+++ trunk/LayoutTests/svg/as-image/svg-cached-draw-canvas-expected.html 2015-09-28 07:43:34 UTC (rev 190274)
</span><span class="lines">@@ -0,0 +1,28 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ .box {
+ background-color: green;
+ display: inline-block;
+ }
+ .small-box {
+ width: 100px;
+ height: 100px;
+ }
+ .large-box {
+ width: 200px;
+ height: 200px;
+ }
+ </style>
+</head>
+<body>
+ <div class="box small-box"></div>
+ <div class="box large-box"></div>
+ <div class="box small-box"></div>
+ <br>
+ <div class="box small-box"></div>
+ <div class="box large-box"></div>
+ <div class="box small-box"></div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestssvgasimagesvgcacheddrawcanvashtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/svg/as-image/svg-cached-draw-canvas.html (0 => 190274)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/svg/as-image/svg-cached-draw-canvas.html (rev 0)
+++ trunk/LayoutTests/svg/as-image/svg-cached-draw-canvas.html 2015-09-28 07:43:34 UTC (rev 190274)
</span><span class="lines">@@ -0,0 +1,104 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ .small-box {
+ width: 100px;
+ height: 100px;
+ }
+ .large-box {
+ width: 200px;
+ height: 200px;
+ }
+ </style>
+</head>
+<body>
+ <img class="small-box non-intrinsic">
+ <img class="large-box non-intrinsic">
+ <canvas class="small-box non-intrinsic"></canvas>
+ <br>
+ <img class="small-box intrinsic">
+ <img class="large-box intrinsic">
+ <canvas class="small-box intrinsic"></canvas>
+ <script>
+ window.Test = {
+ _imageData: [
+ {
+ url: "data:image/svg+xml;utf8, \
+ <svg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'> \
+ <rect width='100%' height='100%' fill='green'/> \
+ </svg>",
+ selector: "non-intrinsic",
+ image: null
+ },
+ {
+ url: "data:image/svg+xml;utf8, \
+ <svg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' width='100' height='100'> \
+ <rect width='100%' height='100%' fill='green'/> \
+ </svg>",
+ selector: "intrinsic",
+ image: null
+ }
+ ],
+
+ _loadImage: function(imageDatum) {
+ var image = new Image();
+
+ image.onload = function() {
+ imageDatum.image = image;
+ };
+ image.src = imageDatum.url;
+
+ var elements = document.querySelectorAll("img." + imageDatum.selector);
+ for (var i = 0; i < elements.length; i++)
+ elements[i].src = imageDatum.url;
+ },
+
+ _loadImages: function() {
+ var self = this;
+ this._imageData.forEach(function(imageDatum) {
+ self._loadImage(imageDatum);
+ });
+ },
+
+ _darwImage: function(imageDatum) {
+ var canvas = document.querySelector("canvas." + imageDatum.selector);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(imageDatum.image, 0, 0, canvas.width, canvas.height);
+ },
+
+ _areImagesLoaded : function() {
+ var loaded = true;
+ this._imageData.forEach(function(imageDatum) {
+ loaded &= imageDatum.image != null;
+ });
+ console.log(loaded);
+ return loaded;
+ },
+
+ _darwImages: function() {
+ if (!this._areImagesLoaded())
+ return;
+
+ var self = this;
+ this._imageData.forEach(function(imageDatum) {
+ self._darwImage(imageDatum);
+ });
+
+ clearInterval(this._intervalId);
+
+ if (window.testRunner)
+ testRunner.notifyDone();
+ },
+
+ run: function() {
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+ this._loadImages();
+ this._intervalId = setInterval(this._darwImages.bind(this), 10);
+ }
+ };
+ window.Test.run();
+ </script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (190273 => 190274)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2015-09-28 03:43:00 UTC (rev 190273)
+++ trunk/Source/WebCore/ChangeLog 2015-09-28 07:43:34 UTC (rev 190274)
</span><span class="lines">@@ -1,3 +1,28 @@
</span><ins>+2015-09-28 Said Abou-Hallawa <sabouhallawa@apple.com>
+
+ An SVG inherits the container size of the previously drawn HTMLImageElement when drawing it on a canvas
+ https://bugs.webkit.org/show_bug.cgi?id=148845
+
+ Reviewed by Darin Adler.
+
+ When drawing an SVG image on a canvas we need to make sure that the container
+ size of the SVG is set to the image source size. If we do not do that, the
+ previous container size will be used as the size of the image. When drawing
+ it as HTMLImageElement, the renderer calls SVGImage::drawForContainer() which
+ calls setContainerSize() and then calls draw(). This call ensures that the
+ size is set correctly for cached images. But when drawing the SVGImage on
+ CanvasRenderingContext2D, the SVGImage::draw() is called directly because
+ it calls it through the base class method Image::draw().
+
+ If the image.isSVGImage(), CanvasRenderingContext2D::drawImage() has to call
+ SVGImage::setContainerSize() before calling Image::draw().
+
+ Test: svg/as-image/svg-cached-draw-canvas.html
+
+ * html/canvas/CanvasRenderingContext2D.cpp:
+ (WebCore::CanvasRenderingContext2D::drawImage):
+ Call SVGImage::setContainerSize() before calling Image::draw().
+
</ins><span class="cx"> 2015-09-27 Said Abou-Hallawa <sabouhallawa@apple.com>
</span><span class="cx">
</span><span class="cx"> Rename all the variables and parameters of type HTMLImageElement in CanvasRenderingContext2D.cpp from 'image' to 'imageElement'
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlcanvasCanvasRenderingContext2Dcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp (190273 => 190274)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp 2015-09-28 03:43:00 UTC (rev 190273)
+++ trunk/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp 2015-09-28 07:43:34 UTC (rev 190274)
</span><span class="lines">@@ -1431,7 +1431,14 @@
</span><span class="cx"> Image* image = cachedImage->imageForRenderer(imageElement->renderer());
</span><span class="cx"> if (!image)
</span><span class="cx"> return;
</span><ins>+
+ ImageObserver* observer = image->imageObserver();
</ins><span class="cx">
</span><ins>+ if (image->isSVGImage()) {
+ image->setImageObserver(nullptr);
+ image->setContainerSize(normalizedSrcRect.size());
+ }
+
</ins><span class="cx"> if (rectContainsCanvas(normalizedDstRect)) {
</span><span class="cx"> c->drawImage(image, ColorSpaceDeviceRGB, normalizedDstRect, normalizedSrcRect, ImagePaintingOptions(op, blendMode));
</span><span class="cx"> didDrawEntireCanvas();
</span><span class="lines">@@ -1446,6 +1453,9 @@
</span><span class="cx"> c->drawImage(image, ColorSpaceDeviceRGB, normalizedDstRect, normalizedSrcRect, ImagePaintingOptions(op, blendMode));
</span><span class="cx"> didDraw(normalizedDstRect);
</span><span class="cx"> }
</span><ins>+
+ if (image->isSVGImage())
+ image->setImageObserver(observer);
</ins><span class="cx">
</span><span class="cx"> checkOrigin(imageElement);
</span><span class="cx"> }
</span></span></pre>
</div>
</div>
</body>
</html>