Diff
Modified: trunk/LayoutTests/ChangeLog (202711 => 202712)
--- trunk/LayoutTests/ChangeLog 2016-06-30 22:14:20 UTC (rev 202711)
+++ trunk/LayoutTests/ChangeLog 2016-06-30 22:18:12 UTC (rev 202712)
@@ -1,5 +1,25 @@
2016-06-30 Antoine Quint <[email protected]>
+ Drawing an SVG image into a <canvas> that is not in the DOM draws the wrong region
+ https://bugs.webkit.org/show_bug.cgi?id=159276
+
+ Reviewed by Dean Jackson.
+
+ Adding a series of new tests to check we correctly respect mismatching source and
+ destination rectangles with SVG images as sources, both with the source <img> element
+ being present and absent from the DOM, and explicit sizes being set or not set.
+
+ * svg/as-image/img-with-svg-resource-in-dom-and-drawImage-expected.html: Added.
+ * svg/as-image/img-with-svg-resource-in-dom-and-drawImage.html: Added.
+ * svg/as-image/img-with-svg-resource-in-dom-no-size-and-drawImage-expected.html: Added.
+ * svg/as-image/img-with-svg-resource-in-dom-no-size-and-drawImage.html: Added.
+ * svg/as-image/img-with-svg-resource-not-in-dom-and-drawImage-expected.html: Added.
+ * svg/as-image/img-with-svg-resource-not-in-dom-and-drawImage.html: Added.
+ * svg/as-image/img-with-svg-resource-not-in-dom-no-size-and-drawImage-expected.html: Added.
+ * svg/as-image/img-with-svg-resource-not-in-dom-no-size-and-drawImage.html: Added.
+
+2016-06-30 Antoine Quint <[email protected]>
+
[iOS] Media controls are too cramped with small video
https://bugs.webkit.org/show_bug.cgi?id=158815
<rdar://problem/26824238>
Added: trunk/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-and-drawImage-expected.html (0 => 202712)
--- trunk/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-and-drawImage-expected.html (rev 0)
+++ trunk/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-and-drawImage-expected.html 2016-06-30 22:18:12 UTC (rev 202712)
@@ -0,0 +1,4 @@
+<body>
+<p>This test shows a <code><canvas></code> element in which we draw the SVG image with the source rectangle set to fit the green rectangle from the SVG image and the destination rectangle as the bounds of the canvas element. In this example, the source <code><img></code> is in the DOM and is explicitly sized.</p>
+<div style="background-color: green; width: 200px; height: 200px;"></div>
+</body>
Added: trunk/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-and-drawImage.html (0 => 202712)
--- trunk/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-and-drawImage.html (rev 0)
+++ trunk/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-and-drawImage.html 2016-06-30 22:18:12 UTC (rev 202712)
@@ -0,0 +1,32 @@
+<body>
+<p>This test shows a <code><canvas></code> element in which we draw the SVG image with the source rectangle set to fit the green rectangle from the SVG image and the destination rectangle as the bounds of the canvas element. In this example, the source <code><img></code> is in the DOM and is explicitly sized.</p>
+<script type="text/_javascript_">
+
+if (window.testRunner)
+ testRunner.waitUntilDone();
+
+var width = 200;
+var height = 200;
+var svgData = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200" fill="red" /><rect x="20" y="20" width="40" height="40" fill="green" /></svg>';
+
+var canvas = document.body.appendChild(document.createElement("canvas"));
+canvas.width = width;
+canvas.height = height;
+
+var image = document.body.appendChild(new Image(width, height));
+image.src = ""
+image.style.visibility = "hidden";
+
+if (image.complete)
+ draw();
+else
+ image.addEventListener("load", draw);
+
+function draw() {
+ canvas.getContext("2d").drawImage(image, 20, 20, 40, 40, 0, 0, width, height);
+ if (window.testRunner)
+ testRunner.notifyDone();
+}
+
+</script>
+</body>
Added: trunk/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-no-size-and-drawImage-expected.html (0 => 202712)
--- trunk/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-no-size-and-drawImage-expected.html (rev 0)
+++ trunk/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-no-size-and-drawImage-expected.html 2016-06-30 22:18:12 UTC (rev 202712)
@@ -0,0 +1,4 @@
+<body>
+<p>This test shows a <code><canvas></code> element in which we draw the SVG image with the source rectangle set to fit the green rectangle from the SVG image and the destination rectangle as the bounds of the canvas element. In this example, the source <code><img></code> is in the DOM and is not explicitly sized.</p>
+<div style="background-color: green; width: 200px; height: 200px;"></div>
+</body>
Added: trunk/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-no-size-and-drawImage.html (0 => 202712)
--- trunk/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-no-size-and-drawImage.html (rev 0)
+++ trunk/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-no-size-and-drawImage.html 2016-06-30 22:18:12 UTC (rev 202712)
@@ -0,0 +1,34 @@
+<body>
+<p>This test shows a <code><canvas></code> element in which we draw the SVG image with the source rectangle set to fit the green rectangle from the SVG image and the destination rectangle as the bounds of the canvas element. In this example, the source <code><img></code> is in the DOM and is not explicitly sized.</p>
+<script type="text/_javascript_">
+
+if (window.testRunner)
+ testRunner.waitUntilDone();
+
+var width = 200;
+var height = 200;
+var svgData = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200" fill="red" /><rect x="20" y="20" width="40" height="40" fill="green" /></svg>';
+
+var canvas = document.body.appendChild(document.createElement("canvas"));
+canvas.width = width;
+canvas.height = height;
+
+var image = document.body.appendChild(new Image());
+image.src = ""
+image.style.width = `${width}px`;
+image.style.height = `${height}px`;
+image.style.visibility = "hidden";
+
+if (image.complete)
+ draw();
+else
+ image.addEventListener("load", draw);
+
+function draw() {
+ canvas.getContext("2d").drawImage(image, 20, 20, 40, 40, 0, 0, width, height);
+ if (window.testRunner)
+ testRunner.notifyDone();
+}
+
+</script>
+</body>
Added: trunk/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-and-drawImage-expected.html (0 => 202712)
--- trunk/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-and-drawImage-expected.html (rev 0)
+++ trunk/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-and-drawImage-expected.html 2016-06-30 22:18:12 UTC (rev 202712)
@@ -0,0 +1,4 @@
+<body>
+<p>This test shows a <code><canvas></code> element in which we draw the SVG image with the source rectangle set to fit the green rectangle from the SVG image and the destination rectangle as the bounds of the canvas element. In this example, the source <code><img></code> is not in the DOM and is explicitly sized.</p>
+<div style="background-color: green; width: 200px; height: 200px;"></div>
+</body>
Added: trunk/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-and-drawImage.html (0 => 202712)
--- trunk/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-and-drawImage.html (rev 0)
+++ trunk/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-and-drawImage.html 2016-06-30 22:18:12 UTC (rev 202712)
@@ -0,0 +1,33 @@
+<body>
+<p>This test shows a <code><canvas></code> element in which we draw the SVG image with the source rectangle set to fit the green rectangle from the SVG image and the destination rectangle as the bounds of the canvas element. In this example, the source <code><img></code> is not in the DOM and is explicitly sized.</p>
+<script type="text/_javascript_">
+
+if (window.testRunner)
+ testRunner.waitUntilDone();
+
+var width = 200;
+var height = 200;
+var svgData = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200" fill="red" /><rect x="20" y="20" width="40" height="40" fill="green" /></svg>';
+
+var canvas = document.body.appendChild(document.createElement("canvas"));
+canvas.width = width;
+canvas.height = height;
+
+var image = new Image(width, height);
+image.src = ""
+
+if (image.complete)
+ draw();
+else
+ image.addEventListener("load", draw);
+
+function draw() {
+ var ctx = canvas.getContext("2d");
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(image, 20, 20, 40, 40, 0, 0, width, height);
+ if (window.testRunner)
+ testRunner.notifyDone();
+}
+
+</script>
+</body>
Added: trunk/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-no-size-and-drawImage-expected.html (0 => 202712)
--- trunk/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-no-size-and-drawImage-expected.html (rev 0)
+++ trunk/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-no-size-and-drawImage-expected.html 2016-06-30 22:18:12 UTC (rev 202712)
@@ -0,0 +1,4 @@
+<body>
+<p>This test shows a <code><canvas></code> element in which we draw the SVG image with the source rectangle set to fit the green rectangle from the SVG image and the destination rectangle as the bounds of the canvas element. In this example, the source <code><img></code> is not in the DOM and is not explicitly sized.</p>
+<div style="background-color: green; width: 200px; height: 200px;"></div>
+</body>
Added: trunk/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-no-size-and-drawImage.html (0 => 202712)
--- trunk/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-no-size-and-drawImage.html (rev 0)
+++ trunk/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-no-size-and-drawImage.html 2016-06-30 22:18:12 UTC (rev 202712)
@@ -0,0 +1,31 @@
+<body>
+<p>This test shows a <code><canvas></code> element in which we draw the SVG image with the source rectangle set to fit the green rectangle from the SVG image and the destination rectangle as the bounds of the canvas element. In this example, the source <code><img></code> is not in the DOM and is not explicitly sized.</p>
+<script type="text/_javascript_">
+
+if (window.testRunner)
+ testRunner.waitUntilDone();
+
+var width = 200;
+var height = 200;
+var svgData = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200" fill="red" /><rect x="20" y="20" width="40" height="40" fill="green" /></svg>';
+
+var canvas = document.body.appendChild(document.createElement("canvas"));
+canvas.width = width;
+canvas.height = height;
+
+var image = new Image();
+image.src = ""
+
+if (image.complete)
+ draw();
+else
+ image.addEventListener("load", draw);
+
+function draw() {
+ canvas.getContext("2d").drawImage(image, 20, 20, 40, 40, 0, 0, width, height);
+ if (window.testRunner)
+ testRunner.notifyDone();
+}
+
+</script>
+</body>
Modified: trunk/Source/WebCore/ChangeLog (202711 => 202712)
--- trunk/Source/WebCore/ChangeLog 2016-06-30 22:14:20 UTC (rev 202711)
+++ trunk/Source/WebCore/ChangeLog 2016-06-30 22:18:12 UTC (rev 202712)
@@ -1,3 +1,23 @@
+2016-06-30 Antoine Quint <[email protected]>
+
+ Drawing an SVG image into a <canvas> that is not in the DOM draws the wrong region
+ https://bugs.webkit.org/show_bug.cgi?id=159276
+
+ Reviewed by Dean Jackson.
+
+ In the event where the <img> element that we are passing to CanvasRenderingContext2D.drawImage()
+ points to an SVG resource, we ensure that the container for the SVG image is sized to match the
+ HTML element. The necessity for setting this container size, explained in webkit.org/b/148845,
+ is that we must ensure a cached image does not have an outdated container size.
+
+ Tests: svg/as-image/img-with-svg-resource-in-dom-and-drawImage.html
+ svg/as-image/img-with-svg-resource-in-dom-no-size-and-drawImage.html
+ svg/as-image/img-with-svg-resource-not-in-dom-and-drawImage.html
+ svg/as-image/img-with-svg-resource-not-in-dom-no-size-and-drawImage.html
+
+ * html/canvas/CanvasRenderingContext2D.cpp:
+ (WebCore::CanvasRenderingContext2D::drawImage):
+
2016-06-30 Eric Carlson <[email protected]>
getUserMedia() exposed, but not functional
Modified: trunk/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp (202711 => 202712)
--- trunk/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp 2016-06-30 22:14:20 UTC (rev 202711)
+++ trunk/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp 2016-06-30 22:18:12 UTC (rev 202712)
@@ -1398,7 +1398,7 @@
if (image->isSVGImage()) {
image->setImageObserver(nullptr);
- image->setContainerSize(normalizedSrcRect.size());
+ image->setContainerSize(imageRect.size());
}
if (rectContainsCanvas(normalizedDstRect)) {
