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
Patch by Antoine Quint <graouts@apple.com> on 2016-06-30
Reviewed by Dean Jackson.
Source/WebCore:
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):
LayoutTests:
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.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@202712 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 01a1049..8ac971c 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,5 +1,25 @@
2016-06-30 Antoine Quint <graouts@apple.com>
+ 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 <graouts@apple.com>
+
[iOS] Media controls are too cramped with small video
https://bugs.webkit.org/show_bug.cgi?id=158815
<rdar://problem/26824238>
diff --git a/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-and-drawImage-expected.html b/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-and-drawImage-expected.html
new file mode 100644
index 0000000..24d49e3
--- /dev/null
+++ b/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-and-drawImage-expected.html
@@ -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>
diff --git a/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-and-drawImage.html b/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-and-drawImage.html
new file mode 100644
index 0000000..9c4766b
--- /dev/null
+++ b/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-and-drawImage.html
@@ -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 = svgData;
+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>
diff --git a/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-no-size-and-drawImage-expected.html b/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-no-size-and-drawImage-expected.html
new file mode 100644
index 0000000..89e3a10
--- /dev/null
+++ b/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-no-size-and-drawImage-expected.html
@@ -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>
diff --git a/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-no-size-and-drawImage.html b/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-no-size-and-drawImage.html
new file mode 100644
index 0000000..2bfa067
--- /dev/null
+++ b/LayoutTests/svg/as-image/img-with-svg-resource-in-dom-no-size-and-drawImage.html
@@ -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 = svgData;
+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>
diff --git a/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-and-drawImage-expected.html b/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-and-drawImage-expected.html
new file mode 100644
index 0000000..e1acc0b
--- /dev/null
+++ b/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-and-drawImage-expected.html
@@ -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>
diff --git a/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-and-drawImage.html b/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-and-drawImage.html
new file mode 100644
index 0000000..befc4c6
--- /dev/null
+++ b/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-and-drawImage.html
@@ -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 = svgData;
+
+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>
diff --git a/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-no-size-and-drawImage-expected.html b/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-no-size-and-drawImage-expected.html
new file mode 100644
index 0000000..3ece963
--- /dev/null
+++ b/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-no-size-and-drawImage-expected.html
@@ -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>
diff --git a/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-no-size-and-drawImage.html b/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-no-size-and-drawImage.html
new file mode 100644
index 0000000..54ece83
--- /dev/null
+++ b/LayoutTests/svg/as-image/img-with-svg-resource-not-in-dom-no-size-and-drawImage.html
@@ -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 = svgData;
+
+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>
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 0efc2a0..1a476b6 100644
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,23 @@
+2016-06-30 Antoine Quint <graouts@apple.com>
+
+ 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 <eric.carlson@apple.com>
getUserMedia() exposed, but not functional
diff --git a/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp b/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp
index 069f945..ca36db1 100644
--- a/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp
+++ b/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp
@@ -1398,7 +1398,7 @@
if (image->isSVGImage()) {
image->setImageObserver(nullptr);
- image->setContainerSize(normalizedSrcRect.size());
+ image->setContainerSize(imageRect.size());
}
if (rectContainsCanvas(normalizedDstRect)) {
