Canvas drawImage() should draw SVG at the correct scale.
authorpdr@google.com <pdr@google.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 20 Aug 2012 23:50:23 +0000 (23:50 +0000)
committerpdr@google.com <pdr@google.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 20 Aug 2012 23:50:23 +0000 (23:50 +0000)
https://bugs.webkit.org/show_bug.cgi?id=94377

Source/WebCore:

Previously, drawing SVG in canvas would render at the incorrect scale
because imageSizeForRenderer did not take into account the page scale.
After this patch, we now incorporate the page scale in
CachedImage::imageSizeForRenderer().

Reviewed by Tim Horton.

Test: svg/as-image/svg-as-image-canvas.html

* loader/cache/CachedImage.cpp:
(WebCore::CachedImage::imageSizeForRenderer):

LayoutTests:

Reviewed by Tim Horton.

* svg/as-image/resources/100px-green-rect.svg: Added.
* svg/as-image/svg-as-image-canvas-expected.html: Added.
* svg/as-image/svg-as-image-canvas.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@126094 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/svg/as-image/resources/100px-green-rect.svg [new file with mode: 0644]
LayoutTests/svg/as-image/svg-as-image-canvas-expected.html [new file with mode: 0644]
LayoutTests/svg/as-image/svg-as-image-canvas.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/loader/cache/CachedImage.cpp

index acd0567..a7a6a94 100644 (file)
@@ -1,3 +1,14 @@
+2012-08-20  Philip Rogers  <pdr@google.com>
+
+        Canvas drawImage() should draw SVG at the correct scale.
+        https://bugs.webkit.org/show_bug.cgi?id=94377
+
+        Reviewed by Tim Horton.
+
+        * svg/as-image/resources/100px-green-rect.svg: Added.
+        * svg/as-image/svg-as-image-canvas-expected.html: Added.
+        * svg/as-image/svg-as-image-canvas.html: Added.
+
 2012-08-20  Chris Rogers  <crogers@google.com>
 
         Update TestExpectations now that stray ASSERT is fixed in AudioParamTimeline
diff --git a/LayoutTests/svg/as-image/resources/100px-green-rect.svg b/LayoutTests/svg/as-image/resources/100px-green-rect.svg
new file mode 100644 (file)
index 0000000..c391055
--- /dev/null
@@ -0,0 +1,3 @@
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <rect x="0" y="0" width="100px" height="100px" fill="green"/>
+</svg>
\ No newline at end of file
diff --git a/LayoutTests/svg/as-image/svg-as-image-canvas-expected.html b/LayoutTests/svg/as-image/svg-as-image-canvas-expected.html
new file mode 100644 (file)
index 0000000..9ebc8ef
--- /dev/null
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div>
+    This test passes if there is a 100 x 100 green rect.<br/>
+    <canvas id="canvas" width="200" height="200"></canvas>
+</div>
+<script>
+    function finishTest() {
+        var canvas = document.getElementById('canvas');
+        var context = canvas.getContext('2d');
+        context.fillStyle = "green";
+        context.fillRect(0, 0, 100, 100);
+        if (window.testRunner)
+            testRunner.notifyDone();
+    }
+
+    if (window.testRunner) {
+        testRunner.waitUntilDone();
+        testRunner.setBackingScaleFactor(2, finishTest);
+    } else
+        finishTest();
+</script>
+</body>
+</html>
diff --git a/LayoutTests/svg/as-image/svg-as-image-canvas.html b/LayoutTests/svg/as-image/svg-as-image-canvas.html
new file mode 100644 (file)
index 0000000..fb8f2f4
--- /dev/null
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Test for WK94377: canvas.context.drawImage() should draw SVG images at the correct scale.</title>
+</head>
+<body>
+<div>
+    This test passes if there is a 100 x 100 green rect.<br/>
+    <canvas id="canvas" width="200" height="200"></canvas>
+    <img id="image" width="200" height="200" style="visibility: hidden;" src="resources/100px-green-rect.svg"></img>
+</div>
+<script>
+    function finishTest() {
+        var image = document.getElementById("image");
+        var canvas = document.getElementById("canvas");
+        setTimeout(function() {
+            var context = canvas.getContext('2d');
+            // We draw the 200x200 image that contains a 100x100 green rect.
+            context.drawImage(image, 0, 0, 200, 200);
+
+            if (window.testRunner)
+                testRunner.notifyDone();
+        }, 1);
+    }
+
+    image.onload = function() {
+        if (window.testRunner) {
+            testRunner.waitUntilDone();
+            testRunner.setBackingScaleFactor(2, finishTest);
+        } else
+            finishTest();
+    }
+</script>
+</body>
+</html>
index 135e132..ed1f191 100644 (file)
@@ -1,3 +1,20 @@
+2012-08-20  Philip Rogers  <pdr@google.com>
+
+        Canvas drawImage() should draw SVG at the correct scale.
+        https://bugs.webkit.org/show_bug.cgi?id=94377
+
+        Previously, drawing SVG in canvas would render at the incorrect scale
+        because imageSizeForRenderer did not take into account the page scale.
+        After this patch, we now incorporate the page scale in
+        CachedImage::imageSizeForRenderer().
+
+        Reviewed by Tim Horton.
+
+        Test: svg/as-image/svg-as-image-canvas.html
+
+        * loader/cache/CachedImage.cpp:
+        (WebCore::CachedImage::imageSizeForRenderer):
+
 2012-08-20  Simon Fraser  <simon.fraser@apple.com>
 
         Assertion going back to results.html page from an image diff result
index 72647c6..11588a0 100644 (file)
@@ -245,8 +245,14 @@ IntSize CachedImage::imageSizeForRenderer(const RenderObject* renderer, float mu
     if (m_image->isSVGImage()) {
         SVGImageCache::SizeAndScales sizeAndScales = m_svgImageCache->requestedSizeAndScales(renderer);
         if (!sizeAndScales.size.isEmpty()) {
-            imageSize.setWidth(sizeAndScales.size.width() / sizeAndScales.zoom);
-            imageSize.setHeight(sizeAndScales.size.height() / sizeAndScales.zoom);
+            float scale = sizeAndScales.scale;
+            if (!scale) {
+                Page* page = renderer->document()->page();
+                scale = page->deviceScaleFactor() * page->pageScaleFactor();
+            }
+
+            imageSize.setWidth(scale * sizeAndScales.size.width() / sizeAndScales.zoom);
+            imageSize.setHeight(scale * sizeAndScales.size.height() / sizeAndScales.zoom);
         }
     }
 #endif