2010-11-23 Helder Correia <helder@sencha.com>
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 23 Nov 2010 08:00:30 +0000 (08:00 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 23 Nov 2010 08:00:30 +0000 (08:00 +0000)
        Reviewed by Ariya Hidayat.

        [Qt] Drawing an image on canvas with shadowBlur draws a solid shadow
        https://bugs.webkit.org/show_bug.cgi?id=49878

        New test checking solid and blurry shadow on images drawn on canvas.

        * fast/canvas/canvas-drawImage-shadow-expected.txt: Added.
        * fast/canvas/canvas-drawImage-shadow.html: Added.
        * fast/canvas/script-tests/canvas-drawImage-shadow.js: Added.
2010-11-23  Helder Correia  <helder@sencha.com>

        Reviewed by Ariya Hidayat.

        [Qt] Drawing an image on canvas with shadowBlur draws a solid shadow
        https://bugs.webkit.org/show_bug.cgi?id=49878

        Add support for blurry shadows when drawing images on canvas.

        Test: fast/canvas/canvas-drawImage-shadow.html

        * platform/graphics/qt/ContextShadowQt.cpp:
        (WebCore::ContextShadow::endShadowLayer): Make composition work for solid shadow too.
        * platform/graphics/qt/ImageQt.cpp:
        (WebCore::BitmapImage::draw): Remove old shadow code and introduce ContextShadow.

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

LayoutTests/ChangeLog
LayoutTests/fast/canvas/canvas-drawImage-shadow-expected.txt [new file with mode: 0644]
LayoutTests/fast/canvas/canvas-drawImage-shadow.html [new file with mode: 0644]
LayoutTests/fast/canvas/script-tests/canvas-drawImage-shadow.js [new file with mode: 0644]
WebCore/ChangeLog
WebCore/platform/graphics/qt/ContextShadowQt.cpp
WebCore/platform/graphics/qt/ImageQt.cpp

index e686fc7..6f1c067 100644 (file)
@@ -1,3 +1,16 @@
+2010-11-23  Helder Correia  <helder@sencha.com>
+
+        Reviewed by Ariya Hidayat.
+
+        [Qt] Drawing an image on canvas with shadowBlur draws a solid shadow
+        https://bugs.webkit.org/show_bug.cgi?id=49878
+
+        New test checking solid and blurry shadow on images drawn on canvas.
+
+        * fast/canvas/canvas-drawImage-shadow-expected.txt: Added.
+        * fast/canvas/canvas-drawImage-shadow.html: Added.
+        * fast/canvas/script-tests/canvas-drawImage-shadow.js: Added.
+
 2010-11-22  David Hyatt  <hyatt@apple.com>
 
         Back out rebaselines from r72527.
diff --git a/LayoutTests/fast/canvas/canvas-drawImage-shadow-expected.txt b/LayoutTests/fast/canvas/canvas-drawImage-shadow-expected.txt
new file mode 100644 (file)
index 0000000..da996b3
--- /dev/null
@@ -0,0 +1,60 @@
+Ensure correct behavior of canvas with image shadow. A square with a cut-out top-right corner should be displayed with solid shadow (top) and blur shadow (bottom).
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+PASS d[0] is 0
+PASS d[1] is 0
+PASS d[2] is 0
+PASS d[3] is 0
+PASS d[0] is 240
+PASS d[1] is 50
+PASS d[2] is 50
+PASS d[3] is 255
+PASS d[0] is 240
+PASS d[1] is 50
+PASS d[2] is 50
+PASS d[3] is 255
+PASS d[0] is 0
+PASS d[1] is 0
+PASS d[2] is 0
+PASS d[3] is 0
+PASS d[0] is 0
+PASS d[1] is 0
+PASS d[2] is 0
+PASS d[3] is 0
+PASS d[0] is 0
+PASS d[1] is 0
+PASS d[2] is 0
+PASS d[3] is 0
+PASS d[0] is 0
+PASS d[1] is 0
+PASS d[2] is 255
+PASS d[3] should not be 255 and it's not.
+PASS d[0] is 0
+PASS d[1] is 0
+PASS d[2] is 255
+PASS d[3] should not be 255 and it's not.
+PASS d[0] is 0
+PASS d[1] is 0
+PASS d[2] is 255
+PASS d[3] should not be 255 and it's not.
+PASS d[0] is 0
+PASS d[1] is 0
+PASS d[2] is 255
+PASS d[3] should not be 255 and it's not.
+PASS d[0] is 0
+PASS d[1] is 0
+PASS d[2] is 255
+PASS d[0] is 0
+PASS d[1] is 0
+PASS d[2] is 0
+PASS d[3] is 0
+PASS d[0] is 0
+PASS d[1] is 0
+PASS d[2] is 0
+PASS d[3] is 0
+
diff --git a/LayoutTests/fast/canvas/canvas-drawImage-shadow.html b/LayoutTests/fast/canvas/canvas-drawImage-shadow.html
new file mode 100644 (file)
index 0000000..953c64f
--- /dev/null
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<head>
+<link rel="stylesheet" href="../js/resources/js-test-style.css">
+<script src="../js/resources/js-test-pre.js"></script>
+</head>
+<body>
+<p id="description"></p>
+<div id="console"></div>
+<script src="script-tests/canvas-drawImage-shadow.js"></script>
+<script src="../js/resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/LayoutTests/fast/canvas/script-tests/canvas-drawImage-shadow.js b/LayoutTests/fast/canvas/script-tests/canvas-drawImage-shadow.js
new file mode 100644 (file)
index 0000000..ac2492b
--- /dev/null
@@ -0,0 +1,164 @@
+description("Ensure correct behavior of canvas with image shadow. A square with a cut-out top-right corner should be displayed with solid shadow (top) and blur shadow (bottom).");
+
+function print(message, color)
+{
+    var paragraph = document.createElement("div");
+    paragraph.appendChild(document.createTextNode(message));
+    paragraph.style.fontFamily = "monospace";
+    if (color)
+        paragraph.style.color = color;
+    document.getElementById("console").appendChild(paragraph);
+}
+
+function shouldNotBe(a, b)
+{
+    var evalA;
+    try {
+        evalA = eval(a);
+    } catch(e) {
+        evalA = e;
+    }
+
+    if (evalA != b)
+        print("PASS " + a + " should not be " + b + " and it's not.", "green")
+    else
+        print("FAIL " + a + " should not be " + b + " but it is.", "red");
+}
+
+// Create auxiliary canvas to draw to and create an image from.
+// This is done instead of simply loading an image from the file system
+// because that would throw a SECURITY_ERR DOM Exception.
+var aCanvas = document.createElement('canvas');
+aCanvas.setAttribute('width', '200');
+aCanvas.setAttribute('height', '200');
+var aCtx = aCanvas.getContext('2d');
+
+// Draw a circle on the same canvas.
+aCtx.beginPath();
+aCtx.fillStyle = 'green';
+aCtx.arc(100, 100, 150, 0, -Math.PI/2, false);
+aCtx.fill();
+
+// Create the image object to be drawn on the master canvas.
+var img = new Image();
+img.onload = drawImageToCanvasAndCheckPixels;
+img.src = aCanvas.toDataURL(); // set a data URI of the base64 enconded image as the source
+
+// Create master canvas.
+var canvas = document.createElement('canvas');
+document.body.appendChild(canvas);
+canvas.setAttribute('width', '600');
+canvas.setAttribute('height', '600');
+var ctx = canvas.getContext('2d');
+
+function drawImageToCanvasAndCheckPixels() {
+    ctx.shadowOffsetX = 250;
+    ctx.shadowColor = 'rgba(240, 50, 50, 1.0)';
+    ctx.drawImage(img, 50, 50);
+
+    ctx.shadowOffsetX = 250;
+    ctx.shadowBlur = 6;
+    ctx.shadowColor = 'rgba(50, 50, 200, 0.9)';
+    ctx.shadowColor = 'rgba(0, 0, 255, 1.0)';
+    ctx.drawImage(img, 50, 300);
+
+    checkPixels();
+}
+
+function checkPixels() {
+    var imageData, data;
+
+    // Verify solid shadow.
+    imageData = ctx.getImageData(260, 300, 1, 1);
+    d = imageData.data;
+    shouldBe('d[0]', '0');
+    shouldBe('d[1]', '0');
+    shouldBe('d[2]', '0');
+    shouldBe('d[3]', '0');
+
+    imageData = ctx.getImageData(350, 100, 1, 1);
+    d = imageData.data;
+    shouldBe('d[0]', '240');
+    shouldBe('d[1]', '50');
+    shouldBe('d[2]', '50');
+    shouldBe('d[3]', '255');
+
+    imageData = ctx.getImageData(400, 200, 1, 1);
+    d = imageData.data;
+    shouldBe('d[0]', '240');
+    shouldBe('d[1]', '50');
+    shouldBe('d[2]', '50');
+    shouldBe('d[3]', '255');
+
+    imageData = ctx.getImageData(490, 65, 1, 1);
+    d = imageData.data;
+    shouldBe('d[0]', '0');
+    shouldBe('d[1]', '0');
+    shouldBe('d[2]', '0');
+    shouldBe('d[3]', '0');
+
+    imageData = ctx.getImageData(485, 65, 1, 1);
+    d = imageData.data;
+    shouldBe('d[0]', '0');
+    shouldBe('d[1]', '0');
+    shouldBe('d[2]', '0');
+    shouldBe('d[3]', '0');
+
+    // Verify blurry shadow.
+    imageData = ctx.getImageData(260, 400, 1, 1);
+    d = imageData.data;
+    shouldBe('d[0]', '0');
+    shouldBe('d[1]', '0');
+    shouldBe('d[2]', '0');
+    shouldBe('d[3]', '0');
+
+    imageData = ctx.getImageData(350, 300, 1, 1);
+    d = imageData.data;
+    shouldBe('d[0]', '0');
+    shouldBe('d[1]', '0');
+    shouldBe('d[2]', '255');
+    shouldNotBe('d[3]', '255');
+
+    imageData = ctx.getImageData(300, 400, 1, 1);
+    d = imageData.data;
+    shouldBe('d[0]', '0');
+    shouldBe('d[1]', '0');
+    shouldBe('d[2]', '255');
+    shouldNotBe('d[3]', '255');
+
+    imageData = ctx.getImageData(300, 500, 1, 1);
+    d = imageData.data;
+    shouldBe('d[0]', '0');
+    shouldBe('d[1]', '0');
+    shouldBe('d[2]', '255');
+    shouldNotBe('d[3]', '255');
+
+    imageData = ctx.getImageData(400, 500, 1, 1);
+    d = imageData.data;
+    shouldBe('d[0]', '0');
+    shouldBe('d[1]', '0');
+    shouldBe('d[2]', '255');
+    shouldNotBe('d[3]', '255');
+
+    imageData = ctx.getImageData(400, 400, 1, 1);
+    d = imageData.data;
+    shouldBe('d[0]', '0');
+    shouldBe('d[1]', '0');
+    shouldBe('d[2]', '255');
+
+    imageData = ctx.getImageData(490, 315, 1, 1);
+    d = imageData.data;
+    shouldBe('d[0]', '0');
+    shouldBe('d[1]', '0');
+    shouldBe('d[2]', '0');
+    shouldBe('d[3]', '0');
+
+    imageData = ctx.getImageData(485, 320, 1, 1);
+    d = imageData.data;
+    shouldBe('d[0]', '0');
+    shouldBe('d[1]', '0');
+    shouldBe('d[2]', '0');
+    shouldBe('d[3]', '0');
+}
+
+var successfullyParsed = true;
index 31d4c6a..1121a48 100644 (file)
@@ -1,3 +1,19 @@
+2010-11-23  Helder Correia  <helder@sencha.com>
+
+        Reviewed by Ariya Hidayat.
+
+        [Qt] Drawing an image on canvas with shadowBlur draws a solid shadow
+        https://bugs.webkit.org/show_bug.cgi?id=49878
+
+        Add support for blurry shadows when drawing images on canvas.
+
+        Test: fast/canvas/canvas-drawImage-shadow.html
+
+        * platform/graphics/qt/ContextShadowQt.cpp:
+        (WebCore::ContextShadow::endShadowLayer): Make composition work for solid shadow too.
+        * platform/graphics/qt/ImageQt.cpp:
+        (WebCore::BitmapImage::draw): Remove old shadow code and introduce ContextShadow.
+
 2010-11-22  Patrick Gansterer  <paroga@webkit.org>
 
         Reviewed by Adam Roben.
index 342e027..5ba0b6f 100644 (file)
@@ -144,7 +144,9 @@ void ContextShadow::endShadowLayer(PlatformContext p)
     if (m_type == BlurShadow) {
         blurLayerImage(m_layerImage.bits(), IntSize(m_layerImage.width(), m_layerImage.height()),
                        m_layerImage.bytesPerLine());
+    }
 
+    if (m_type != NoShadow) {
         // "Colorize" with the right shadow color.
         QPainter p(&m_layerImage);
         p.setCompositionMode(QPainter::CompositionMode_SourceIn);
index 459a8b5..3611308 100644 (file)
@@ -3,6 +3,7 @@
  * Copyright (C) 2006 Zack Rusin <zack@kde.org>
  * Copyright (C) 2006 Simon Hausmann <hausmann@kde.org>
  * Copyright (C) 2009 Torch Mobile Inc. http://www.torchmobile.com/
+ * Copyright (C) 2010 Sencha, Inc.
  *
  * All rights reserved.
  *
 #include "Image.h"
 
 #include "AffineTransform.h"
-#include "ImageObserver.h"
 #include "BitmapImage.h"
+#include "ContextShadow.h"
 #include "FloatRect.h"
-#include "PlatformString.h"
 #include "GraphicsContext.h"
+#include "ImageObserver.h"
+#include "PlatformString.h"
 #include "StillImageQt.h"
 #include "qwebsettings.h"
 
@@ -178,8 +180,8 @@ void BitmapImage::invalidatePlatformData()
 void BitmapImage::draw(GraphicsContext* ctxt, const FloatRect& dst,
                        const FloatRect& src, ColorSpace styleColorSpace, CompositeOperator op)
 {
-    FloatRect normalizedDst = dst.normalized();
-    FloatRect normalizedSrc = src.normalized();
+    QRectF normalizedDst = dst.normalized();
+    QRectF normalizedSrc = src.normalized();
 
     startAnimation();
 
@@ -205,21 +207,14 @@ void BitmapImage::draw(GraphicsContext* ctxt, const FloatRect& dst,
     QPainter::CompositionMode lastCompositionMode = painter->compositionMode();
     painter->setCompositionMode(compositionMode);
 
-    FloatSize shadowOffset;
-    float shadowBlur;
-    Color shadowColor;
-    if (ctxt->getShadow(shadowOffset, shadowBlur, shadowColor)) {
-        FloatRect shadowImageRect(normalizedDst);
-        shadowImageRect.move(shadowOffset.width(), shadowOffset.height());
-
-        QImage shadowImage(QSize(static_cast<int>(normalizedSrc.width()), static_cast<int>(normalizedSrc.height())), QImage::Format_ARGB32_Premultiplied);
-        QPainter p(&shadowImage);
-        p.setCompositionMode(QPainter::CompositionMode_Source);
-        p.fillRect(shadowImage.rect(), shadowColor);
-        p.setCompositionMode(QPainter::CompositionMode_DestinationIn);
-        p.drawPixmap(QRect(0, 0, normalizedDst.width(), normalizedDst.height()), *image, normalizedSrc);
-        p.end();
-        painter->drawImage(shadowImageRect, shadowImage, normalizedSrc);
+    ContextShadow* shadow = ctxt->contextShadow();
+    if (shadow->m_type != ContextShadow::NoShadow) {
+        QPainter* shadowPainter = shadow->beginShadowLayer(painter, normalizedDst);
+        if (shadowPainter) {
+            shadowPainter->setOpacity(static_cast<qreal>(shadow->m_color.alpha()) / 255);
+            shadowPainter->drawPixmap(normalizedDst, *image, normalizedSrc);
+            shadow->endShadowLayer(painter);
+        }
     }
 
     // Test using example site at