[CSS Background Blending] Gradients don't blend with any of the layers behind.
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 13 Jun 2013 15:05:14 +0000 (15:05 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 13 Jun 2013 15:05:14 +0000 (15:05 +0000)
First, allow the layers behind opaque gradients to be drawn, then add the blending filters
when working with gradients.

Source/WebCore:

https://bugs.webkit.org/show_bug.cgi?id=117532

Patch by Mihai Tica <mitica@adobe.com> on 2013-06-13
Reviewed by Dirk Schulze.

Tests: css3/compositing/background-blend-mode-gradient-color.html
       css3/compositing/background-blend-mode-gradient-gradient.html
       css3/compositing/background-blend-mode-gradient-image.html
       css3/compositing/background-blend-mode-multiple-background-layers.html

* platform/graphics/GeneratorGeneratedImage.cpp:
(WebCore::GeneratorGeneratedImage::draw):
* rendering/RenderBox.cpp:
(WebCore::RenderBox::paintFillLayers):

LayoutTests:

https://bugs.webkit.org/show_bug.cgi?id=117532
Patch by Mihai Tica <mitica@adobe.com> on 2013-06-13
Reviewed by Dirk Schulze.

* css3/compositing/background-blend-mode-gradient-color-expected.txt: Added.
* css3/compositing/background-blend-mode-gradient-color.html: Added.
* css3/compositing/background-blend-mode-gradient-gradient-expected.txt: Added.
* css3/compositing/background-blend-mode-gradient-gradient.html: Added.
* css3/compositing/background-blend-mode-gradient-image-expected.txt: Added.
* css3/compositing/background-blend-mode-gradient-image.html: Added.
* css3/compositing/background-blend-mode-multiple-background-layers-expected.txt: Added.
* css3/compositing/background-blend-mode-multiple-background-layers.html: Added.
* platform/mac/css3/compositing/background-blend-mode-gradient-color-expected.png: Added.
* platform/mac/css3/compositing/background-blend-mode-gradient-gradient-expected.png: Added.
* platform/mac/css3/compositing/background-blend-mode-gradient-image-expected.png: Added.
* platform/mac/css3/compositing/background-blend-mode-multiple-background-layers-expected.png: Added.

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

16 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/compositing/background-blend-mode-gradient-color-expected.txt [new file with mode: 0644]
LayoutTests/css3/compositing/background-blend-mode-gradient-color.html [new file with mode: 0644]
LayoutTests/css3/compositing/background-blend-mode-gradient-gradient-expected.txt [new file with mode: 0644]
LayoutTests/css3/compositing/background-blend-mode-gradient-gradient.html [new file with mode: 0644]
LayoutTests/css3/compositing/background-blend-mode-gradient-image-expected.txt [new file with mode: 0644]
LayoutTests/css3/compositing/background-blend-mode-gradient-image.html [new file with mode: 0644]
LayoutTests/css3/compositing/background-blend-mode-multiple-background-layers-expected.txt [new file with mode: 0644]
LayoutTests/css3/compositing/background-blend-mode-multiple-background-layers.html [new file with mode: 0644]
LayoutTests/platform/mac/css3/compositing/background-blend-mode-gradient-color-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/css3/compositing/background-blend-mode-gradient-gradient-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/css3/compositing/background-blend-mode-gradient-image-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/css3/compositing/background-blend-mode-multiple-background-layers-expected.png [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/platform/graphics/GeneratorGeneratedImage.cpp
Source/WebCore/rendering/RenderBox.cpp

index 8a03724..44e683f 100644 (file)
@@ -1,3 +1,25 @@
+2013-06-13  Mihai Tica  <mitica@adobe.com>
+
+        [CSS Background Blending] Gradients don't blend with any of the layers behind.
+        First, allow the layers behind opaque gradients to be drawn, then add the blending filters
+        when working with gradients.
+
+        https://bugs.webkit.org/show_bug.cgi?id=117532
+        Reviewed by Dirk Schulze.
+
+        * css3/compositing/background-blend-mode-gradient-color-expected.txt: Added.
+        * css3/compositing/background-blend-mode-gradient-color.html: Added.
+        * css3/compositing/background-blend-mode-gradient-gradient-expected.txt: Added.
+        * css3/compositing/background-blend-mode-gradient-gradient.html: Added.
+        * css3/compositing/background-blend-mode-gradient-image-expected.txt: Added.
+        * css3/compositing/background-blend-mode-gradient-image.html: Added.
+        * css3/compositing/background-blend-mode-multiple-background-layers-expected.txt: Added.
+        * css3/compositing/background-blend-mode-multiple-background-layers.html: Added.
+        * platform/mac/css3/compositing/background-blend-mode-gradient-color-expected.png: Added.
+        * platform/mac/css3/compositing/background-blend-mode-gradient-gradient-expected.png: Added.
+        * platform/mac/css3/compositing/background-blend-mode-gradient-image-expected.png: Added.
+        * platform/mac/css3/compositing/background-blend-mode-multiple-background-layers-expected.png: Added.
+
 2013-06-13  Morten Stenshorne  <mstensho@opera.com>
 
         Column balancing support in the region based multicol implementation
diff --git a/LayoutTests/css3/compositing/background-blend-mode-gradient-color-expected.txt b/LayoutTests/css3/compositing/background-blend-mode-gradient-color-expected.txt
new file mode 100644 (file)
index 0000000..8b13789
--- /dev/null
@@ -0,0 +1 @@
+
diff --git a/LayoutTests/css3/compositing/background-blend-mode-gradient-color.html b/LayoutTests/css3/compositing/background-blend-mode-gradient-color.html
new file mode 100644 (file)
index 0000000..2680937
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<script>
+    if (window.testRunner)
+        window.testRunner.dumpAsText(true);
+</script>
+<style>
+    li {
+        margin: 5px;
+        width: 130px;
+        height: 130px;
+        background: linear-gradient(to right, gray 0%, gray 100%), green;
+        display: block;
+        float: left;
+    }
+</style>
+<!-- This file should contain a gradient on top of a background color for every type of blending. -->
+<body>
+    <ul>
+        <li style="-webkit-background-blend-mode: normal, normal"></li>
+        <li style="-webkit-background-blend-mode: multiply, normal"></li>
+        <li style="-webkit-background-blend-mode: screen, normal"></li>
+        <li style="-webkit-background-blend-mode: overlay, normal"></li>
+        <li style="-webkit-background-blend-mode: darken, normal"></li>
+        <li style="-webkit-background-blend-mode: lighten, normal"></li>
+        <li style="-webkit-background-blend-mode: color-dodge, normal"></li>
+        <li style="-webkit-background-blend-mode: color-burn, normal"></li>
+        <li style="-webkit-background-blend-mode: hard-light, normal"></li>
+        <li style="-webkit-background-blend-mode: soft-light, normal"></li>
+        <li style="-webkit-background-blend-mode: difference, normal"></li>
+        <li style="-webkit-background-blend-mode: exclusion, normal"></li>
+        <li style="-webkit-background-blend-mode: hue, normal;"></li>
+        <li style="-webkit-background-blend-mode: saturation, normal"></li>
+        <li style="-webkit-background-blend-mode: color, normal"></li>
+        <li style="-webkit-background-blend-mode: luminosity, normal"></li>
+    </ul>
+</body>
+
diff --git a/LayoutTests/css3/compositing/background-blend-mode-gradient-gradient-expected.txt b/LayoutTests/css3/compositing/background-blend-mode-gradient-gradient-expected.txt
new file mode 100644 (file)
index 0000000..8b13789
--- /dev/null
@@ -0,0 +1 @@
+
diff --git a/LayoutTests/css3/compositing/background-blend-mode-gradient-gradient.html b/LayoutTests/css3/compositing/background-blend-mode-gradient-gradient.html
new file mode 100644 (file)
index 0000000..a4f7c05
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<script>
+    if (window.testRunner)
+        window.testRunner.dumpAsText(true);
+</script>
+<style>
+    li {
+        margin: 5px;
+        width: 130px;
+        height: 130px;
+        background: linear-gradient(to right, white 0%, gray 100%), radial-gradient(green 0%, white 100%);
+        display: block;
+        float: left;
+    }
+</style>
+<!-- This file should contain a gradient on top of another gradient for every type of blending. -->
+<body>
+    <ul>
+        <li style="-webkit-background-blend-mode: normal, normal"></li>
+        <li style="-webkit-background-blend-mode: multiply, normal"></li>
+        <li style="-webkit-background-blend-mode: screen, normal"></li>
+        <li style="-webkit-background-blend-mode: overlay, normal; opacity:.9"></li>
+        <li style="-webkit-background-blend-mode: darken, normal"></li>
+        <li style="-webkit-background-blend-mode: lighten, normal"></li>
+        <li style="-webkit-background-blend-mode: color-dodge, normal"></li>
+        <li style="-webkit-background-blend-mode: color-burn, normal"></li>
+        <li style="-webkit-background-blend-mode: hard-light, normal"></li>
+        <li style="-webkit-background-blend-mode: soft-light, normal"></li>
+        <li style="-webkit-background-blend-mode: difference, normal"></li>
+        <li style="-webkit-background-blend-mode: exclusion, normal"></li>
+        <li style="-webkit-background-blend-mode: hue, normal;"></li>
+        <li style="-webkit-background-blend-mode: saturation, normal"></li>
+        <li style="-webkit-background-blend-mode: color, normal"></li>
+        <li style="-webkit-background-blend-mode: luminosity, normal"></li>
+    </ul>
+</body>
+
diff --git a/LayoutTests/css3/compositing/background-blend-mode-gradient-image-expected.txt b/LayoutTests/css3/compositing/background-blend-mode-gradient-image-expected.txt
new file mode 100644 (file)
index 0000000..8b13789
--- /dev/null
@@ -0,0 +1 @@
+
diff --git a/LayoutTests/css3/compositing/background-blend-mode-gradient-image.html b/LayoutTests/css3/compositing/background-blend-mode-gradient-image.html
new file mode 100644 (file)
index 0000000..28a69d8
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<script>
+    if (window.testRunner)
+        window.testRunner.dumpAsText(true);
+</script>
+<style>
+    li {
+        margin: 5px;
+        width: 130px;
+        height: 130px;
+        background: linear-gradient(to right, white 0%, gray 100%), url('resources/ducky.png') no-repeat 0 0 /100% 100%;
+        display: block;
+        float: left;
+    }
+</style>
+<!-- This file should contain a gradient on top of a background image for every type of blending. -->
+<body>
+    <ul>
+        <li style="-webkit-background-blend-mode: normal, normal"></li>
+        <li style="-webkit-background-blend-mode: multiply, normal"></li>
+        <li style="-webkit-background-blend-mode: screen, normal"></li>
+        <li style="-webkit-background-blend-mode: overlay, normal; opacity:.9"></li>
+        <li style="-webkit-background-blend-mode: darken, normal"></li>
+        <li style="-webkit-background-blend-mode: lighten, normal"></li>
+        <li style="-webkit-background-blend-mode: color-dodge, normal"></li>
+        <li style="-webkit-background-blend-mode: color-burn, normal"></li>
+        <li style="-webkit-background-blend-mode: hard-light, normal"></li>
+        <li style="-webkit-background-blend-mode: soft-light, normal"></li>
+        <li style="-webkit-background-blend-mode: difference, normal"></li>
+        <li style="-webkit-background-blend-mode: exclusion, normal"></li>
+        <li style="-webkit-background-blend-mode: hue, normal;"></li>
+        <li style="-webkit-background-blend-mode: saturation, normal"></li>
+        <li style="-webkit-background-blend-mode: color, normal"></li>
+        <li style="-webkit-background-blend-mode: luminosity, normal"></li>
+    </ul>
+</body>
+
diff --git a/LayoutTests/css3/compositing/background-blend-mode-multiple-background-layers-expected.txt b/LayoutTests/css3/compositing/background-blend-mode-multiple-background-layers-expected.txt
new file mode 100644 (file)
index 0000000..8b13789
--- /dev/null
@@ -0,0 +1 @@
+
diff --git a/LayoutTests/css3/compositing/background-blend-mode-multiple-background-layers.html b/LayoutTests/css3/compositing/background-blend-mode-multiple-background-layers.html
new file mode 100644 (file)
index 0000000..cb54f60
--- /dev/null
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+    if (window.testRunner)
+        window.testRunner.dumpAsText(true);
+</script>
+<style>
+    div {
+        background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, linear-gradient(to right, white 0%, gray 100%), green;
+        width: 200px;
+        height: 200px;
+        margin: 10px;
+    }
+</style>
+</head>
+<!-- This file should contain two divs with 3 background layers. Test background blend mode differences when only one layer blends differently. -->
+<body>
+    <div style="-webkit-background-blend-mode: hue, difference, normal;"></div>
+    <div style="-webkit-background-blend-mode: difference, difference, normal;"></div>
+</body>
+</html>
diff --git a/LayoutTests/platform/mac/css3/compositing/background-blend-mode-gradient-color-expected.png b/LayoutTests/platform/mac/css3/compositing/background-blend-mode-gradient-color-expected.png
new file mode 100644 (file)
index 0000000..f3a82c2
Binary files /dev/null and b/LayoutTests/platform/mac/css3/compositing/background-blend-mode-gradient-color-expected.png differ
diff --git a/LayoutTests/platform/mac/css3/compositing/background-blend-mode-gradient-gradient-expected.png b/LayoutTests/platform/mac/css3/compositing/background-blend-mode-gradient-gradient-expected.png
new file mode 100644 (file)
index 0000000..eaa6a23
Binary files /dev/null and b/LayoutTests/platform/mac/css3/compositing/background-blend-mode-gradient-gradient-expected.png differ
diff --git a/LayoutTests/platform/mac/css3/compositing/background-blend-mode-gradient-image-expected.png b/LayoutTests/platform/mac/css3/compositing/background-blend-mode-gradient-image-expected.png
new file mode 100644 (file)
index 0000000..fadb92c
Binary files /dev/null and b/LayoutTests/platform/mac/css3/compositing/background-blend-mode-gradient-image-expected.png differ
diff --git a/LayoutTests/platform/mac/css3/compositing/background-blend-mode-multiple-background-layers-expected.png b/LayoutTests/platform/mac/css3/compositing/background-blend-mode-multiple-background-layers-expected.png
new file mode 100644 (file)
index 0000000..75b8d6f
Binary files /dev/null and b/LayoutTests/platform/mac/css3/compositing/background-blend-mode-multiple-background-layers-expected.png differ
index cafa962..4b03bd6 100644 (file)
@@ -1,3 +1,23 @@
+2013-06-13  Mihai Tica  <mitica@adobe.com>
+
+        [CSS Background Blending] Gradients don't blend with any of the layers behind.
+        First, allow the layers behind opaque gradients to be drawn, then add the blending filters
+        when working with gradients.
+
+        https://bugs.webkit.org/show_bug.cgi?id=117532
+
+        Reviewed by Dirk Schulze.
+
+        Tests: css3/compositing/background-blend-mode-gradient-color.html
+               css3/compositing/background-blend-mode-gradient-gradient.html
+               css3/compositing/background-blend-mode-gradient-image.html
+               css3/compositing/background-blend-mode-multiple-background-layers.html
+
+        * platform/graphics/GeneratorGeneratedImage.cpp:
+        (WebCore::GeneratorGeneratedImage::draw):
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::paintFillLayers):
+
 2013-06-13  Michael BrĂ¼ning  <michael.bruning@digia.com>
 
         [Qt][Mac] Disable QTKit video on OS X.
index 960592e..a7fc565 100644 (file)
 
 namespace WebCore {
 
-void GeneratorGeneratedImage::draw(GraphicsContext* destContext, const FloatRect& destRect, const FloatRect& srcRect, ColorSpace, CompositeOperator compositeOp, BlendMode)
+void GeneratorGeneratedImage::draw(GraphicsContext* destContext, const FloatRect& destRect, const FloatRect& srcRect, ColorSpace, CompositeOperator compositeOp, BlendMode blendMode)
 {
     GraphicsContextStateSaver stateSaver(*destContext);
-    destContext->setCompositeOperation(compositeOp);
+    destContext->setCompositeOperation(compositeOp, blendMode);
     destContext->clip(destRect);
     destContext->translate(destRect.x(), destRect.y());
     if (destRect.size() != srcRect.size())
index 09843c4..f2e6a5e 100644 (file)
@@ -1374,7 +1374,7 @@ void RenderBox::paintFillLayers(const PaintInfo& paintInfo, const Color& c, cons
             shouldDrawBackgroundInSeparateBuffer = true;
 
         // The clipOccludesNextLayers condition must be evaluated first to avoid short-circuiting.
-        if (curLayer->clipOccludesNextLayers(curLayer == fillLayer) && curLayer->hasOpaqueImage(this) && curLayer->image()->canRender(this, style()->effectiveZoom()) && curLayer->hasRepeatXY())
+        if (curLayer->clipOccludesNextLayers(curLayer == fillLayer) && curLayer->hasOpaqueImage(this) && curLayer->image()->canRender(this, style()->effectiveZoom()) && curLayer->hasRepeatXY() && curLayer->blendMode() == BlendModeNormal)
             break;
         curLayer = curLayer->next();
     }