[CSS Element Blending] Implement the software path of -webkit-blend-mode with Core...
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 12 Feb 2014 12:40:08 +0000 (12:40 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 12 Feb 2014 12:40:08 +0000 (12:40 +0000)
https://bugs.webkit.org/show_bug.cgi?id=99119

Patch by Mihai Tica <mitica@adobe.com> on 2014-02-12
Reviewed by Simon Fraser.

Source/WebCore:

This patch adds support for -webkit-blend-mode with Core Graphics.
The layer promotion code that forced compositing when blending was detected has been removed.
Remaining work for the software path is to detect and implement isolation of the blending operation:
as stated in the spec, blending should be limited to the parent stacking context.

Tests: css3/compositing/blend-mode-blended-element-overlapping-composited-sibling-should-have-compositing-layer.html
       css3/compositing/blend-mode-parent-of-composited-blended-has-layer.html
       css3/compositing/blend-mode-simple-composited.html
       css3/compositing/blend-mode-with-composited-descendant-should-have-layer.html

* inspector/InspectorLayerTreeAgent.cpp:
(WebCore::InspectorLayerTreeAgent::reasonsForCompositingLayer): Remove CompositingReasonBlending.
* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::beginTransparencyLayers): Set the blendMode on the GraphicsContext.
* rendering/RenderLayer.h: paintsWithTransparency should return true when a blendMode is set.
* rendering/RenderLayerCompositor.cpp: Remove promotion code when a blendMode is detected.
(WebCore::RenderLayerCompositor::requiresCompositingLayer): Remove CompositingReasonBlending reason.
(WebCore::RenderLayerCompositor::requiresOwnBackingStore): Remove CompositingReasonBlending reason.
(WebCore::RenderLayerCompositor::reasonsForCompositing): Remove CompositingReasonBlending reason.
(WebCore::RenderLayerCompositor::logReasonsForCompositing): Remove CompositingReasonBlending reason.
* rendering/RenderLayerCompositor.h:
- Remove the requiresCompositingForBlending method
- Remove the CompositingReasonBlending from the CompositingReasons enum.

LayoutTests:

* css3/compositing/blend-mode-blended-element-overlapping-composited-sibling-should-have-compositing-layer-expected.txt: Copied from LayoutTests/css3/compositing/blend-mode-should-not-have-compositing-layer-expected.txt.
* css3/compositing/blend-mode-blended-element-overlapping-composited-sibling-should-have-compositing-layer.html: Test if having an overlapping composited sibling forces compositing of a blended element.
* css3/compositing/blend-mode-layers.html: Update to test both the software and the hardware path.
* css3/compositing/blend-mode-parent-of-composited-blended-has-layer-expected.txt: Renamed from LayoutTests/css3/compositing/should-have-compositing-layer-expected.txt.
* css3/compositing/blend-mode-parent-of-composited-blended-has-layer.html: Test if the parent of an accelerated element with -webkit-blend-mode is promoted.
* css3/compositing/blend-mode-reflection.html: Update to test both the software and the hardware path.
* css3/compositing/blend-mode-should-not-have-compositing-layer.html: Removed.
* css3/compositing/blend-mode-simple-composited.html: Test all the blend modes for the hardware path.
* css3/compositing/blend-mode-with-composited-descendant-should-have-layer-expected.txt: Renamed from LayoutTests/css3/compositing/blend-mode-should-not-have-compositing-layer-expected.txt.
* css3/compositing/blend-mode-with-composited-descendant-should-have-layer.html: Test to ensure that an element with -webkit-blend-mode and a composited descendant is also accelerated.
* css3/compositing/should-have-compositing-layer.html: Removed.
* platform/mac/css3/compositing/blend-mode-layers-expected.png:
* platform/mac/css3/compositing/blend-mode-layers-expected.txt:
* platform/mac/css3/compositing/blend-mode-overflow-expected.png:
* platform/mac/css3/compositing/blend-mode-overflow-expected.txt: Added.
* platform/mac/css3/compositing/blend-mode-reflection-expected.png:
* platform/mac/css3/compositing/blend-mode-reflection-expected.txt:
* platform/mac/css3/compositing/blend-mode-simple-composited-expected.png: Added.
* platform/mac/css3/compositing/blend-mode-simple-composited-expected.txt: Added.
* platform/mac/css3/compositing/blend-mode-simple-expected.png:

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

27 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/compositing/blend-mode-blended-element-overlapping-composited-sibling-should-have-compositing-layer-expected.txt [new file with mode: 0644]
LayoutTests/css3/compositing/blend-mode-blended-element-overlapping-composited-sibling-should-have-compositing-layer.html [new file with mode: 0644]
LayoutTests/css3/compositing/blend-mode-layers.html
LayoutTests/css3/compositing/blend-mode-parent-of-composited-blended-has-layer-expected.txt [moved from LayoutTests/css3/compositing/should-have-compositing-layer-expected.txt with 52% similarity]
LayoutTests/css3/compositing/blend-mode-parent-of-composited-blended-has-layer.html [new file with mode: 0644]
LayoutTests/css3/compositing/blend-mode-reflection.html
LayoutTests/css3/compositing/blend-mode-should-not-have-compositing-layer.html [deleted file]
LayoutTests/css3/compositing/blend-mode-simple-composited.html [new file with mode: 0644]
LayoutTests/css3/compositing/blend-mode-with-composited-descendant-should-have-layer-expected.txt [moved from LayoutTests/css3/compositing/blend-mode-should-not-have-compositing-layer-expected.txt with 71% similarity]
LayoutTests/css3/compositing/blend-mode-with-composited-descendant-should-have-layer.html [new file with mode: 0644]
LayoutTests/css3/compositing/should-have-compositing-layer.html [deleted file]
LayoutTests/platform/mac/css3/compositing/blend-mode-layers-expected.png
LayoutTests/platform/mac/css3/compositing/blend-mode-layers-expected.txt
LayoutTests/platform/mac/css3/compositing/blend-mode-overflow-expected.png
LayoutTests/platform/mac/css3/compositing/blend-mode-overflow-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac/css3/compositing/blend-mode-reflection-expected.png
LayoutTests/platform/mac/css3/compositing/blend-mode-reflection-expected.txt
LayoutTests/platform/mac/css3/compositing/blend-mode-simple-composited-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/css3/compositing/blend-mode-simple-composited-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac/css3/compositing/blend-mode-simple-expected.png
Source/WebCore/ChangeLog
Source/WebCore/inspector/InspectorLayerTreeAgent.cpp
Source/WebCore/rendering/RenderLayer.cpp
Source/WebCore/rendering/RenderLayer.h
Source/WebCore/rendering/RenderLayerCompositor.cpp
Source/WebCore/rendering/RenderLayerCompositor.h

index 2b259fc..78ff5db 100644 (file)
@@ -1,3 +1,31 @@
+2014-02-12  Mihai Tica  <mitica@adobe.com>
+
+        [CSS Element Blending] Implement the software path of -webkit-blend-mode with Core Graphics.
+        https://bugs.webkit.org/show_bug.cgi?id=99119
+
+        Reviewed by Simon Fraser.
+
+        * css3/compositing/blend-mode-blended-element-overlapping-composited-sibling-should-have-compositing-layer-expected.txt: Copied from LayoutTests/css3/compositing/blend-mode-should-not-have-compositing-layer-expected.txt.
+        * css3/compositing/blend-mode-blended-element-overlapping-composited-sibling-should-have-compositing-layer.html: Test if having an overlapping composited sibling forces compositing of a blended element.
+        * css3/compositing/blend-mode-layers.html: Update to test both the software and the hardware path.
+        * css3/compositing/blend-mode-parent-of-composited-blended-has-layer-expected.txt: Renamed from LayoutTests/css3/compositing/should-have-compositing-layer-expected.txt.
+        * css3/compositing/blend-mode-parent-of-composited-blended-has-layer.html: Test if the parent of an accelerated element with -webkit-blend-mode is promoted.
+        * css3/compositing/blend-mode-reflection.html: Update to test both the software and the hardware path.
+        * css3/compositing/blend-mode-should-not-have-compositing-layer.html: Removed.
+        * css3/compositing/blend-mode-simple-composited.html: Test all the blend modes for the hardware path.
+        * css3/compositing/blend-mode-with-composited-descendant-should-have-layer-expected.txt: Renamed from LayoutTests/css3/compositing/blend-mode-should-not-have-compositing-layer-expected.txt.
+        * css3/compositing/blend-mode-with-composited-descendant-should-have-layer.html: Test to ensure that an element with -webkit-blend-mode and a composited descendant is also accelerated.
+        * css3/compositing/should-have-compositing-layer.html: Removed.
+        * platform/mac/css3/compositing/blend-mode-layers-expected.png:
+        * platform/mac/css3/compositing/blend-mode-layers-expected.txt:
+        * platform/mac/css3/compositing/blend-mode-overflow-expected.png:
+        * platform/mac/css3/compositing/blend-mode-overflow-expected.txt: Added.
+        * platform/mac/css3/compositing/blend-mode-reflection-expected.png:
+        * platform/mac/css3/compositing/blend-mode-reflection-expected.txt:
+        * platform/mac/css3/compositing/blend-mode-simple-composited-expected.png: Added.
+        * platform/mac/css3/compositing/blend-mode-simple-composited-expected.txt: Added.
+        * platform/mac/css3/compositing/blend-mode-simple-expected.png:
+
 2014-02-12  Michał Pakuła vel Rutka  <m.pakula@samsung.com>
 
         Unreviewed EFL gatdening
diff --git a/LayoutTests/css3/compositing/blend-mode-blended-element-overlapping-composited-sibling-should-have-compositing-layer-expected.txt b/LayoutTests/css3/compositing/blend-mode-blended-element-overlapping-composited-sibling-should-have-compositing-layer-expected.txt
new file mode 100644 (file)
index 0000000..86cad40
--- /dev/null
@@ -0,0 +1,26 @@
+(GraphicsLayer
+  (bounds 800.00 600.00)
+  (children 1
+    (GraphicsLayer
+      (bounds 800.00 600.00)
+      (contentsOpaque 1)
+      (children 1
+        (GraphicsLayer
+          (bounds 800.00 600.00)
+          (drawsContent 1)
+          (children 2
+            (GraphicsLayer
+              (position 8.00 8.00)
+              (bounds 100.00 100.00)
+            )
+            (GraphicsLayer
+              (position 8.00 78.00)
+              (bounds 100.00 100.00)
+            )
+          )
+        )
+      )
+    )
+  )
+)
+
diff --git a/LayoutTests/css3/compositing/blend-mode-blended-element-overlapping-composited-sibling-should-have-compositing-layer.html b/LayoutTests/css3/compositing/blend-mode-blended-element-overlapping-composited-sibling-should-have-compositing-layer.html
new file mode 100644 (file)
index 0000000..6448211
--- /dev/null
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML-->
+
+<style>
+    div {
+        width: 100px;
+        height: 100px;
+    }
+
+    .composited_sibling {
+        -webkit-transform: translateZ(0);
+    }
+
+    .blender {
+        margin-top: -30px;
+        -webkit-blend-mode: difference;
+    }
+</style>
+
+<div class="composited_sibling"></div>
+<div class="blender"></div>
+<pre id="layerTree"></pre>
+<script>
+    if (window.testRunner)
+        window.testRunner.dumpAsText();
+
+    var text = document.getElementById("layerTree");
+    text.innerHTML = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
+</script>
index 6e90cba..16f7444 100755 (executable)
             display: block;
             float: left;
         }
+
+        .composited {
+            -webkit-transform: translateZ(0);
+        }
     </style>
 </head>
 
@@ -57,11 +61,13 @@ It uses nested content and then set various attributes to show the interaction o
 
         <!-- setting the blendmode will create a new stacking context which causes z-index to change -->
         <li><div class="div1"><div class="div2" style="-webkit-blend-mode: multiply"><div class="div3"></div></div></div></li>
+        <li><div class="div1"><div class="div2 composited" style="-webkit-blend-mode: multiply"><div class="div3"></div></div></div></li>
 
         <!-- just setting slight opacity which causes a stacking context. This also causes z-index to be resolved to the stacking context -->
         <li><div class="div1" style="opacity:.99"><div class="div2"><div class="div3"></div></div></div></li>
 
         <!-- blending will now only happen upto the stacking context generated by opacity. Z-index is resolved against the stacking context of the div with the blendmode -->
         <li><div class="div1" style="opacity:.99"><div class="div2" style="-webkit-blend-mode: multiply"><div class="div3"></div></div></div></li>
+        <li><div class="div1" style="opacity:.99"><div class="div2 composited" style="-webkit-blend-mode: multiply"><div class="div3"></div></div></div></li>
     </ul>
 </body>
@@ -1,10 +1,3 @@
-Test to make sure a blend mode creates a compositing layer. Test is successful of render tree shows compositing
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-PASS content has compositing layers
-
 (GraphicsLayer
   (bounds 800.00 600.00)
   (children 1
@@ -17,8 +10,8 @@ PASS content has compositing layers
           (drawsContent 1)
           (children 1
             (GraphicsLayer
-              (position 8.00 76.00)
-              (bounds 160.00 90.00)
+              (position 18.00 10.00)
+              (bounds 100.00 100.00)
             )
           )
         )
diff --git a/LayoutTests/css3/compositing/blend-mode-parent-of-composited-blended-has-layer.html b/LayoutTests/css3/compositing/blend-mode-parent-of-composited-blended-has-layer.html
new file mode 100644 (file)
index 0000000..e94074a
--- /dev/null
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!-- Test if the parent of a composited layer with mix-blend-mode is promoted. -->
+
+<style>
+    div {
+        width: 100px;
+        height: 100px;
+    }
+    .blender {
+        -webkit-blend-mode: difference;
+        -webkit-transform: translateZ(0);
+        margin: 10px;
+    }
+</style>
+
+<div><div class="blender"></div></div>
+<pre id="layerTree"></pre>
+<script>
+    if (window.testRunner)
+        window.testRunner.dumpAsText();
+
+    var text = document.getElementById("layerTree");
+    text.innerHTML = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
+</script>
index a6cd164..715fc99 100755 (executable)
             display: block;
             float: left;
         }
+
+        .composited {
+            -webkit-transform: translateZ(0);
+        }
      </style>
  </head>
 
-<!-- This file should contain a duck on top of a gradient that has a reflection.
+<!-- This file should contain two images of a duck on top of a gradient with reflection.
 Both the duck and the reflection should blend.  -->
 <body>
     <ul><li><img style="-webkit-blend-mode: multiply" src="resources/ducky.png"></li></ul>
+    <ul><li><img class="composited" style="-webkit-blend-mode: multiply" src="resources/ducky.png"></li></ul>
 </body>
diff --git a/LayoutTests/css3/compositing/blend-mode-should-not-have-compositing-layer.html b/LayoutTests/css3/compositing/blend-mode-should-not-have-compositing-layer.html
deleted file mode 100755 (executable)
index 24e9538..0000000
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
-<html>
-<head>
-    <script src="../../fast/js/resources/js-test-pre.js"></script>
-</head>
-<body>
-    <script>
-        window.addEventListener('load', function() {
-        if (window.testRunner) {
-            testRunner.dumpAsText(false);
-            var text = document.getElementById('text');
-            text.innerHTML = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
-        }
-      });
-    </script>
-
-    <div style="opacity: .5">
-        <img style="-webkit-blend-mode: multiply;" src="resources/reference.png">
-    </div>
-    <pre id="text"></pre>
-</body>
-</html>
diff --git a/LayoutTests/css3/compositing/blend-mode-simple-composited.html b/LayoutTests/css3/compositing/blend-mode-simple-composited.html
new file mode 100644 (file)
index 0000000..93c6c09
--- /dev/null
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<head>
+    <script>
+        if (window.testRunner)
+            window.testRunner.overridePreference("WebKitAcceleratedCompositingEnabled", "1");
+    </script>
+
+    <style>
+      img {
+          width: 130px;
+          height: 130px;
+         -webkit-transform: translateZ(0);
+      }
+
+      li {
+          margin: 5px;
+          width: 130px;
+          height: 130px;
+          background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0ff), color-stop(24%,#00f), color-stop(50%,#f00), color-stop(75%,#ff0), color-stop(100%,#0f0));
+          display: block;
+          float: left;
+      }
+    </style>
+</head>
+
+<!-- This file should contain a duck on top of a gradient with every type of blending. -->
+<body>
+    <ul>
+        <!-- Separable blend modes -->
+        <li><img style="-webkit-blend-mode: normal" src="resources/ducky.png"></li>
+        <li><img style="-webkit-blend-mode: overlay" src="resources/ducky.png"></li>
+        <li><img style="-webkit-blend-mode: screen" src="resources/ducky.png"></li>
+        <li><img style="-webkit-blend-mode: overlay" src="resources/ducky.png"></li>
+        <li><img style="-webkit-blend-mode: darken" src="resources/ducky.png"></li>
+        <li><img style="-webkit-blend-mode: lighten" src="resources/ducky.png"></li>
+        <li><img style="-webkit-blend-mode: color-dodge" src="resources/ducky.png"></li>
+        <li><img style="-webkit-blend-mode: color-burn" src="resources/ducky.png"></li>
+        <li><img style="-webkit-blend-mode: hard-light" src="resources/ducky.png"></li>
+        <li><img style="-webkit-blend-mode: soft-light" src="resources/ducky.png"></li>
+        <li><img style="-webkit-blend-mode: difference" src="resources/ducky.png"></li>
+        <li><img style="-webkit-blend-mode: exclusion" src="resources/ducky.png"></li>
+        <!-- Non separable blend modes -->
+        <li><img style="-webkit-blend-mode: hue" src="resources/ducky.png"></li>
+        <li><img style="-webkit-blend-mode: saturation" src="resources/ducky.png"></li>
+        <li><img style="-webkit-blend-mode: color" src="resources/ducky.png"></li>
+        <li><img style="-webkit-blend-mode: luminosity" src="resources/ducky.png"></li>
+    </ul>
+</body>
@@ -1,4 +1,3 @@
-
 (GraphicsLayer
   (bounds 800.00 600.00)
   (children 1
           (drawsContent 1)
           (children 1
             (GraphicsLayer
-              (position 8.00 8.00)
-              (bounds 784.00 90.00)
-              (opacity 0.50)
-              (drawsContent 1)
+              (position 8.00 10.00)
+              (bounds 100.00 100.00)
               (children 1
                 (GraphicsLayer
-                  (bounds 160.00 90.00)
+                  (position 10.00 0.00)
+                  (bounds 100.00 100.00)
                 )
               )
             )
diff --git a/LayoutTests/css3/compositing/blend-mode-with-composited-descendant-should-have-layer.html b/LayoutTests/css3/compositing/blend-mode-with-composited-descendant-should-have-layer.html
new file mode 100644 (file)
index 0000000..7286fca
--- /dev/null
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<!-- Test if an element with mix-blend-mode having a composited descendant is promoted. -->
+
+<style>
+    div {
+        width: 100px;
+        height: 100px;
+    }
+    .blender {
+        -webkit-blend-mode: difference;
+    }
+    .child {
+        -webkit-transform: translateZ(0);
+        margin: 10px;
+    }
+</style>
+
+<div class="blender"><div class="child"></div></div>
+<pre id="layerTree"></pre>
+<script>
+    if (window.testRunner)
+        window.testRunner.dumpAsText();
+
+    var text = document.getElementById("layerTree");
+    text.innerHTML = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
+</script>
diff --git a/LayoutTests/css3/compositing/should-have-compositing-layer.html b/LayoutTests/css3/compositing/should-have-compositing-layer.html
deleted file mode 100644 (file)
index d08db06..0000000
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
-<html>
-<head>
-<script src="../../resources/js-test-pre.js"></script>
-</head>
-<script>
-    if (window.testRunner) {
-        testRunner.dumpAsText();
-        testRunner.waitUntilDone();
-    }
-
-    function doTest()
-    {
-        description("Test to make sure a blend mode creates a compositing layer. Test is successful of render tree shows compositing");
-        if (window.testRunner) {
-            var layers = window.internals.layerTreeAsText(document);
-            if (layers == "")
-                testFailed("no compositing layers");
-            else
-                testPassed("content has compositing layers");
-            document.getElementById("layertree").innerText = layers;
-            testRunner.notifyDone();
-        }
-    }
-    
-    window.addEventListener('load', doTest, false);
-
-</script>
-<img style="-webkit-blend-mode: multiply;" src="resources/reference.png">
-<pre id="layertree"></pre>
index efc530c..02aa7ea 100644 (file)
Binary files a/LayoutTests/platform/mac/css3/compositing/blend-mode-layers-expected.png and b/LayoutTests/platform/mac/css3/compositing/blend-mode-layers-expected.png differ
index 08ae433..b14032b 100644 (file)
@@ -1,7 +1,7 @@
 layer at (0,0) size 800x600
   RenderView at (0,0) size 800x600
-layer at (0,0) size 800x191
-  RenderBlock {HTML} at (0,0) size 800x191
+layer at (0,0) size 800x366
+  RenderBlock {HTML} at (0,0) size 800x366
     RenderBody {BODY} at (8,16) size 784x0
       RenderBlock {UL} at (0,0) size 784x0
         RenderBlock (floating) {LI} at (45,5) size 160x50 [bgcolor=#FF00FF]
@@ -9,7 +9,10 @@ layer at (0,0) size 800x191
         RenderBlock (floating) {LI} at (215,5) size 160x50 [bgcolor=#FF00FF]
           RenderBlock {DIV} at (0,50) size 160x75 [bgcolor=#00FFFF]
         RenderBlock (floating) {LI} at (385,5) size 160x50 [bgcolor=#FF00FF]
+          RenderBlock {DIV} at (0,50) size 160x75 [bgcolor=#00FFFF]
         RenderBlock (floating) {LI} at (555,5) size 160x50 [bgcolor=#FF00FF]
+        RenderBlock (floating) {LI} at (45,180) size 160x50 [bgcolor=#FF00FF]
+        RenderBlock (floating) {LI} at (215,180) size 160x50 [bgcolor=#FF00FF]
 layer at (73,31) size 160x160
   RenderBlock (relative positioned) {DIV} at (0,0) size 160x160
 layer at (53,41) size 80x150
@@ -18,8 +21,6 @@ layer at (243,31) size 160x160
   RenderBlock (relative positioned) {DIV} at (0,0) size 160x160
 layer at (223,41) size 80x150
   RenderBlock (relative positioned) {DIV} at (0,0) size 80x150 [bgcolor=#FFFF00]
-layer at (393,71) size 160x75
-  RenderBlock {DIV} at (0,50) size 160x75 [bgcolor=#00FFFF]
 layer at (413,31) size 160x160
   RenderBlock (relative positioned) {DIV} at (0,0) size 160x160
 layer at (393,41) size 80x150
@@ -30,3 +31,15 @@ layer at (583,31) size 160x160
   RenderBlock (relative positioned) {DIV} at (0,0) size 160x160
 layer at (563,41) size 80x150
   RenderBlock (relative positioned) {DIV} at (0,0) size 80x150 [bgcolor=#FFFF00]
+layer at (53,246) size 160x75
+  RenderBlock {DIV} at (0,50) size 160x75 [bgcolor=#00FFFF]
+layer at (73,206) size 160x160
+  RenderBlock (relative positioned) {DIV} at (0,0) size 160x160
+layer at (53,216) size 80x150
+  RenderBlock (relative positioned) {DIV} at (0,0) size 80x150 [bgcolor=#FFFF00]
+layer at (223,246) size 160x75
+  RenderBlock {DIV} at (0,50) size 160x75 [bgcolor=#00FFFF]
+layer at (243,206) size 160x160
+  RenderBlock (relative positioned) {DIV} at (0,0) size 160x160
+layer at (223,216) size 80x150
+  RenderBlock (relative positioned) {DIV} at (0,0) size 80x150 [bgcolor=#FFFF00]
index d48b22a..3290431 100644 (file)
Binary files a/LayoutTests/platform/mac/css3/compositing/blend-mode-overflow-expected.png and b/LayoutTests/platform/mac/css3/compositing/blend-mode-overflow-expected.png differ
diff --git a/LayoutTests/platform/mac/css3/compositing/blend-mode-overflow-expected.txt b/LayoutTests/platform/mac/css3/compositing/blend-mode-overflow-expected.txt
new file mode 100644 (file)
index 0000000..54e426b
--- /dev/null
@@ -0,0 +1,12 @@
+No blending. Duck should be yellow everywhere.
+Simple blending. Duck should be a horizontal rainbow inside, and blue on overflow.
+Parent is a stacking context. Duck should be a horizontal rainbow inside, and yellow on overflow (since there is no background there to blend with).
+Intermediate parent - no stacking context. Duck should be a vertical gradient inside, and blue on overflow.
+Intermediate parent with grandparent stacking context. Duck should be a vertical gradient inside, and yellow on overflow.
+Intermediate parent has overflow. Duck should be a vertical gradient inside, and overflow is hidden.
+
+
index 20b6a9d..f4ac5c0 100644 (file)
Binary files a/LayoutTests/platform/mac/css3/compositing/blend-mode-reflection-expected.png and b/LayoutTests/platform/mac/css3/compositing/blend-mode-reflection-expected.png differ
index bcd26f8..8081ea5 100644 (file)
@@ -5,5 +5,9 @@ layer at (0,0) size 800x286
     RenderBody {BODY} at (8,16) size 784x0
       RenderBlock {UL} at (0,0) size 784x0
         RenderBlock (floating) {LI} at (45,5) size 130x260
+      RenderBlock {UL} at (0,0) size 784x0
+        RenderBlock (floating) {LI} at (185,5) size 130x260
 layer at (53,21) size 130x130
   RenderImage {IMG} at (0,0) size 130x130
+layer at (193,21) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
diff --git a/LayoutTests/platform/mac/css3/compositing/blend-mode-simple-composited-expected.png b/LayoutTests/platform/mac/css3/compositing/blend-mode-simple-composited-expected.png
new file mode 100644 (file)
index 0000000..60cdca5
Binary files /dev/null and b/LayoutTests/platform/mac/css3/compositing/blend-mode-simple-composited-expected.png differ
diff --git a/LayoutTests/platform/mac/css3/compositing/blend-mode-simple-composited-expected.txt b/LayoutTests/platform/mac/css3/compositing/blend-mode-simple-composited-expected.txt
new file mode 100644 (file)
index 0000000..03db501
--- /dev/null
@@ -0,0 +1,54 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x576
+  RenderBlock {HTML} at (0,0) size 800x576
+    RenderBody {BODY} at (8,16) size 784x0
+      RenderBlock {UL} at (0,0) size 784x0
+        RenderBlock (floating) {LI} at (45,5) size 130x130
+        RenderBlock (floating) {LI} at (185,5) size 130x130
+        RenderBlock (floating) {LI} at (325,5) size 130x130
+        RenderBlock (floating) {LI} at (465,5) size 130x130
+        RenderBlock (floating) {LI} at (605,5) size 130x130
+        RenderBlock (floating) {LI} at (45,145) size 130x130
+        RenderBlock (floating) {LI} at (185,145) size 130x130
+        RenderBlock (floating) {LI} at (325,145) size 130x130
+        RenderBlock (floating) {LI} at (465,145) size 130x130
+        RenderBlock (floating) {LI} at (605,145) size 130x130
+        RenderBlock (floating) {LI} at (45,285) size 130x130
+        RenderBlock (floating) {LI} at (185,285) size 130x130
+        RenderBlock (floating) {LI} at (325,285) size 130x130
+        RenderBlock (floating) {LI} at (465,285) size 130x130
+        RenderBlock (floating) {LI} at (605,285) size 130x130
+        RenderBlock (floating) {LI} at (45,425) size 130x130
+layer at (53,21) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
+layer at (193,21) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
+layer at (333,21) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
+layer at (473,21) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
+layer at (613,21) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
+layer at (53,161) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
+layer at (193,161) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
+layer at (333,161) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
+layer at (473,161) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
+layer at (613,161) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
+layer at (53,301) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
+layer at (193,301) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
+layer at (333,301) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
+layer at (473,301) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
+layer at (613,301) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
+layer at (53,441) size 130x130
+  RenderImage {IMG} at (0,0) size 130x130
index 63555ed..8b8660b 100644 (file)
Binary files a/LayoutTests/platform/mac/css3/compositing/blend-mode-simple-expected.png and b/LayoutTests/platform/mac/css3/compositing/blend-mode-simple-expected.png differ
index 7dc6a6b..3250f9b 100644 (file)
@@ -1,3 +1,34 @@
+2014-02-12  Mihai Tica  <mitica@adobe.com>
+
+        [CSS Element Blending] Implement the software path of -webkit-blend-mode with Core Graphics.
+        https://bugs.webkit.org/show_bug.cgi?id=99119
+
+        Reviewed by Simon Fraser.
+
+        This patch adds support for -webkit-blend-mode with Core Graphics.
+        The layer promotion code that forced compositing when blending was detected has been removed.
+        Remaining work for the software path is to detect and implement isolation of the blending operation:
+        as stated in the spec, blending should be limited to the parent stacking context.
+
+        Tests: css3/compositing/blend-mode-blended-element-overlapping-composited-sibling-should-have-compositing-layer.html
+               css3/compositing/blend-mode-parent-of-composited-blended-has-layer.html
+               css3/compositing/blend-mode-simple-composited.html
+               css3/compositing/blend-mode-with-composited-descendant-should-have-layer.html
+
+        * inspector/InspectorLayerTreeAgent.cpp:
+        (WebCore::InspectorLayerTreeAgent::reasonsForCompositingLayer): Remove CompositingReasonBlending.
+        * rendering/RenderLayer.cpp:
+        (WebCore::RenderLayer::beginTransparencyLayers): Set the blendMode on the GraphicsContext.
+        * rendering/RenderLayer.h: paintsWithTransparency should return true when a blendMode is set.
+        * rendering/RenderLayerCompositor.cpp: Remove promotion code when a blendMode is detected.
+        (WebCore::RenderLayerCompositor::requiresCompositingLayer): Remove CompositingReasonBlending reason.
+        (WebCore::RenderLayerCompositor::requiresOwnBackingStore): Remove CompositingReasonBlending reason.
+        (WebCore::RenderLayerCompositor::reasonsForCompositing): Remove CompositingReasonBlending reason.
+        (WebCore::RenderLayerCompositor::logReasonsForCompositing): Remove CompositingReasonBlending reason.
+        * rendering/RenderLayerCompositor.h:
+        - Remove the requiresCompositingForBlending method
+        - Remove the CompositingReasonBlending from the CompositingReasons enum.
+
 2014-02-11  Zalan Bujtas  <zalan@apple.com>
 
         Subpixel rendering: Switch repaint rect from IntRect to LayoutRect to be able to
index 33aff85..0b2593b 100644 (file)
@@ -294,7 +294,7 @@ void InspectorLayerTreeAgent::reasonsForCompositingLayer(ErrorString* errorStrin
 
     if (reasonsBitmask & CompositingReasonFilterWithCompositedDescendants)
         compositingReasons->setFilterWithCompositedDescendants(true);
-            
+
     if (reasonsBitmask & CompositingReasonBlendingWithCompositedDescendants)
         compositingReasons->setBlendingWithCompositedDescendants(true);
 
@@ -306,9 +306,6 @@ void InspectorLayerTreeAgent::reasonsForCompositingLayer(ErrorString* errorStrin
 
     if (reasonsBitmask & CompositingReasonRoot)
         compositingReasons->setRoot(true);
-
-    if (reasonsBitmask & CompositingReasonBlending)
-        compositingReasons->setBlending(true);
 }
 
 String InspectorLayerTreeAgent::bind(const RenderLayer* layer)
index 8bfa8d1..6782e43 100644 (file)
@@ -1683,7 +1683,19 @@ void RenderLayer::beginTransparencyLayers(GraphicsContext* context, const Render
         context->save();
         LayoutRect clipRect = paintingExtent(rootLayer, paintDirtyRect, paintBehavior);
         context->clip(clipRect);
+
+#if ENABLE(CSS_COMPOSITING)
+        if (hasBlendMode())
+            context->setCompositeOperation(context->compositeOperation(), m_blendMode);
+#endif
+
         context->beginTransparencyLayer(renderer().opacity());
+
+#if ENABLE(CSS_COMPOSITING)
+        if (hasBlendMode())
+            context->setCompositeOperation(context->compositeOperation(), BlendModeNormal);
+#endif
+
 #ifdef REVEAL_TRANSPARENCY_LAYERS
         context->setFillColor(Color(0.0f, 0.0f, 0.5f, 0.2f), ColorSpaceDeviceRGB);
         context->fillRect(clipRect);
index bd15abf..ed1ad6c 100644 (file)
@@ -798,7 +798,7 @@ public:
 
     bool paintsWithTransparency(PaintBehavior paintBehavior) const
     {
-        return isTransparent() && ((paintBehavior & PaintBehaviorFlattenCompositingLayers) || !isComposited());
+        return (isTransparent() || hasBlendMode()) && ((paintBehavior & PaintBehaviorFlattenCompositingLayers) || !isComposited());
     }
 
     bool paintsWithTransform(PaintBehavior) const;
index 1b42012..1024aeb 100644 (file)
@@ -1989,8 +1989,7 @@ bool RenderLayerCompositor::requiresCompositingLayer(const RenderLayer& layer, R
 #if PLATFORM(IOS)
         || requiresCompositingForScrolling(*renderer)
 #endif
-        || requiresCompositingForOverflowScrolling(*renderer->layer())
-        || requiresCompositingForBlending(*renderer);
+        || requiresCompositingForOverflowScrolling(*renderer->layer());
 }
 
 bool RenderLayerCompositor::canBeComposited(const RenderLayer& layer) const
@@ -2029,7 +2028,6 @@ bool RenderLayerCompositor::requiresOwnBackingStore(const RenderLayer& layer, co
         || (canRender3DTransforms() && renderer.style().backfaceVisibility() == BackfaceVisibilityHidden)
         || requiresCompositingForAnimation(renderer)
         || requiresCompositingForFilters(renderer)
-        || requiresCompositingForBlending(renderer)
         || requiresCompositingForPosition(renderer, layer)
         || requiresCompositingForOverflowScrolling(layer)
         || renderer.isTransparent()
@@ -2093,9 +2091,6 @@ CompositingReasons RenderLayerCompositor::reasonsForCompositing(const RenderLaye
     if (requiresCompositingForFilters(*renderer))
         reasons |= CompositingReasonFilters;
 
-    if (requiresCompositingForBlending(*renderer))
-        reasons |= CompositingReasonBlending;
-
     if (requiresCompositingForPosition(*renderer, *renderer->layer()))
         reasons |= renderer->style().position() == FixedPosition ? CompositingReasonPositionFixed : CompositingReasonPositionSticky;
 
@@ -2128,9 +2123,10 @@ CompositingReasons RenderLayerCompositor::reasonsForCompositing(const RenderLaye
 
         if (renderer->hasFilter())
             reasons |= CompositingReasonFilterWithCompositedDescendants;
-            
+
         if (renderer->hasBlendMode())
             reasons |= CompositingReasonBlendingWithCompositedDescendants;
+
     } else if (renderer->layer()->indirectCompositingReason() == RenderLayer::IndirectCompositingForPerspective)
         reasons |= CompositingReasonPerspective;
     else if (renderer->layer()->indirectCompositingReason() == RenderLayer::IndirectCompositingForPreserve3D)
@@ -2171,9 +2167,6 @@ const char* RenderLayerCompositor::logReasonsForCompositing(const RenderLayer& l
     if (reasons & CompositingReasonFilters)
         return "filters";
 
-    if (reasons & CompositingReasonBlending)
-        return "blending";
-
     if (reasons & CompositingReasonPositionFixed)
         return "position: fixed";
 
@@ -2447,16 +2440,6 @@ bool RenderLayerCompositor::requiresCompositingForFilters(RenderLayerModelObject
 #endif
 }
 
-bool RenderLayerCompositor::requiresCompositingForBlending(RenderLayerModelObject& renderer) const
-{
-#if ENABLE(CSS_COMPOSITING)
-    return renderer.hasBlendMode();
-#else
-    UNUSED_PARAM(renderer);
-    return false;
-#endif
-}
-
 #if PLATFORM(IOS)
 static bool isStickyInAcceleratedScrollingLayerOrViewport(const RenderLayer& layer, const RenderLayer** enclosingAcceleratedOverflowLayer = 0)
 {
index d78be0f..eec7576 100644 (file)
@@ -80,8 +80,7 @@ enum {
     CompositingReasonBlendingWithCompositedDescendants      = 1 << 20,
     CompositingReasonPerspective                            = 1 << 21,
     CompositingReasonPreserve3D                             = 1 << 22,
-    CompositingReasonRoot                                   = 1 << 23,
-    CompositingReasonBlending                               = 1 << 24
+    CompositingReasonRoot                                   = 1 << 23
 };
 typedef unsigned CompositingReasons;
 
@@ -393,7 +392,6 @@ private:
     bool requiresCompositingForPlugin(RenderLayerModelObject&) const;
     bool requiresCompositingForFrame(RenderLayerModelObject&) const;
     bool requiresCompositingForFilters(RenderLayerModelObject&) const;
-    bool requiresCompositingForBlending(RenderLayerModelObject&) const;
     bool requiresCompositingForScrollableFrame() const;
     bool requiresCompositingForPosition(RenderLayerModelObject&, const RenderLayer&, RenderLayer::ViewportConstrainedNotCompositedReason* = 0) const;
     bool requiresCompositingForOverflowScrolling(const RenderLayer&) const;