<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[164579] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/164579">164579</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2014-02-24 02:02:10 -0800 (Mon, 24 Feb 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>[CSS Blending] An element having -webkit-mix-blend-mode should only blend with the contents of the parent stacking context
https://bugs.webkit.org/show_bug.cgi?id=129154
Patch by Mihai Tica <mitica@adobe.com> on 2014-02-24
Reviewed by Dean Jackson.
Source/WebCore:
The blending operation of an element having -webkit-mix-blend-mode should be restricted to the parent stacking context.
This change isolates blending, preventing it from blending with other underlying elements besides the parent stacking context.
Tests: css3/compositing/blend-mode-isolated-group-1.html
css3/compositing/blend-mode-isolated-group-2.html
css3/compositing/blend-mode-isolated-group-3.html
* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::RenderLayer): Initialize added members to false.
(WebCore::RenderLayer::updateBlendMode): Check if a blend mode was set or unset. If so, set the m_updateParentStackingContextShouldIsolateBlendingDirty to true.
(WebCore::RenderLayer::updateParentStackingContextShouldIsolateBlending): Traverse to the parent stacking context and update the
m_isolatesBlending member accordingly.
* rendering/RenderLayer.h:
- Add isolatesBlending() as a condition for creating a transparency layer in the paintsWithTransparency method.
- Add m_updateParentStackingContextShouldIsolateBlendingDirty member.
- Add m_isolatesBlending member and getter.
* rendering/RenderLayerCompositor.cpp:
(WebCore::RenderLayerCompositor::computeCompositingRequirements): Call updateParentStackingContextShouldIsolateBlending.
LayoutTests:
Test that isolation is performed for blending, in other words, an element having -webkit-mix-blend-mode is blending with the
contents of the parent stacking context, but not with any of the underlying content.
* css3/compositing/blend-mode-isolated-group-1.html: Added.
* css3/compositing/blend-mode-isolated-group-2.html: Added.
* css3/compositing/blend-mode-isolated-group-3.html: Added.
* platform/mac/css3/compositing/blend-mode-isolated-group-1-expected.png: Added.
* platform/mac/css3/compositing/blend-mode-isolated-group-1-expected.txt: Added.
* platform/mac/css3/compositing/blend-mode-isolated-group-2-expected.png: Added.
* platform/mac/css3/compositing/blend-mode-isolated-group-2-expected.txt: Added.
* platform/mac/css3/compositing/blend-mode-isolated-group-3-expected.png: Added.
* platform/mac/css3/compositing/blend-mode-isolated-group-3-expected.txt: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderLayercpp">trunk/Source/WebCore/rendering/RenderLayer.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderLayerh">trunk/Source/WebCore/rendering/RenderLayer.h</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderLayerCompositorcpp">trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestscss3compositingblendmodeisolatedgroup1html">trunk/LayoutTests/css3/compositing/blend-mode-isolated-group-1.html</a></li>
<li><a href="#trunkLayoutTestscss3compositingblendmodeisolatedgroup2html">trunk/LayoutTests/css3/compositing/blend-mode-isolated-group-2.html</a></li>
<li><a href="#trunkLayoutTestscss3compositingblendmodeisolatedgroup3html">trunk/LayoutTests/css3/compositing/blend-mode-isolated-group-3.html</a></li>
<li><a href="#trunkLayoutTestsplatformmaccss3compositingblendmodeisolatedgroup1expectedpng">trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-1-expected.png</a></li>
<li><a href="#trunkLayoutTestsplatformmaccss3compositingblendmodeisolatedgroup1expectedtxt">trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-1-expected.txt</a></li>
<li><a href="#trunkLayoutTestsplatformmaccss3compositingblendmodeisolatedgroup2expectedpng">trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-2-expected.png</a></li>
<li><a href="#trunkLayoutTestsplatformmaccss3compositingblendmodeisolatedgroup2expectedtxt">trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-2-expected.txt</a></li>
<li><a href="#trunkLayoutTestsplatformmaccss3compositingblendmodeisolatedgroup3expectedpng">trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-3-expected.png</a></li>
<li><a href="#trunkLayoutTestsplatformmaccss3compositingblendmodeisolatedgroup3expectedtxt">trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-3-expected.txt</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (164578 => 164579)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-02-24 09:31:16 UTC (rev 164578)
+++ trunk/LayoutTests/ChangeLog 2014-02-24 10:02:10 UTC (rev 164579)
</span><span class="lines">@@ -1,3 +1,23 @@
</span><ins>+2014-02-24 Mihai Tica <mitica@adobe.com>
+
+ [CSS Blending] An element having -webkit-mix-blend-mode should only blend with the contents of the parent stacking context
+ https://bugs.webkit.org/show_bug.cgi?id=129154
+
+ Reviewed by Dean Jackson.
+
+ Test that isolation is performed for blending, in other words, an element having -webkit-mix-blend-mode is blending with the
+ contents of the parent stacking context, but not with any of the underlying content.
+
+ * css3/compositing/blend-mode-isolated-group-1.html: Added.
+ * css3/compositing/blend-mode-isolated-group-2.html: Added.
+ * css3/compositing/blend-mode-isolated-group-3.html: Added.
+ * platform/mac/css3/compositing/blend-mode-isolated-group-1-expected.png: Added.
+ * platform/mac/css3/compositing/blend-mode-isolated-group-1-expected.txt: Added.
+ * platform/mac/css3/compositing/blend-mode-isolated-group-2-expected.png: Added.
+ * platform/mac/css3/compositing/blend-mode-isolated-group-2-expected.txt: Added.
+ * platform/mac/css3/compositing/blend-mode-isolated-group-3-expected.png: Added.
+ * platform/mac/css3/compositing/blend-mode-isolated-group-3-expected.txt: Added.
+
</ins><span class="cx"> 2014-02-24 Krzysztof Czech <k.czech@samsung.com>
</span><span class="cx">
</span><span class="cx"> [ATK] Wrong selected element at a given index in a list box.
</span></span></pre></div>
<a id="trunkLayoutTestscss3compositingblendmodeisolatedgroup1html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/compositing/blend-mode-isolated-group-1.html (0 => 164579)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/compositing/blend-mode-isolated-group-1.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/blend-mode-isolated-group-1.html 2014-02-24 10:02:10 UTC (rev 164579)
</span><span class="lines">@@ -0,0 +1,33 @@
</span><ins>+<!DOCTYPE HTML>
+<!-- Test that an element having -webkit-mix-blend-mode applied blends only with the contents of the parent stacking context.-->
+<style>
+ body {
+ background: blue;
+ }
+
+ div {
+ margin: 20px;
+ width: 60px;
+ height: 60px;
+ }
+
+ .parent {
+ opacity: 0.99;
+ float: left;
+ background: violet;
+ }
+
+ .child {
+ background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, green;
+ -webkit-mix-blend-mode: multiply;
+ }
+
+ .composited {
+ -webkit-transform: translateZ(0);
+ }
+</style>
+
+<div class="parent"><div class="child"></div></div>
+<div class="parent composited"><div class="child"></div></div>
+<div class="parent"><div class="child composited"></div></div>
+<div class="parent composited"><div class="child composited"></div></div>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3compositingblendmodeisolatedgroup2html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/compositing/blend-mode-isolated-group-2.html (0 => 164579)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/compositing/blend-mode-isolated-group-2.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/blend-mode-isolated-group-2.html 2014-02-24 10:02:10 UTC (rev 164579)
</span><span class="lines">@@ -0,0 +1,34 @@
</span><ins>+<!DOCTYPE HTML>
+<!-- Test that an element having -webkit-mix-blend-mode applied blends only with the contents of the parent stacking context.-->
+<style>
+ body {
+ background: blue;
+ }
+
+ div {
+ margin: 20px;
+ width: 60px;
+ height: 60px;
+ }
+
+ .parent {
+ position: relative;
+ z-index: 0;
+ float: left;
+ background: violet;
+ }
+
+ .child {
+ background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, green;
+ -webkit-mix-blend-mode: multiply;
+ }
+
+ .composited {
+ -webkit-transform: translateZ(0);
+ }
+</style>
+
+<div class="parent"><div class="child"></div></div>
+<div class="parent composited"><div class="child"></div></div>
+<div class="parent"><div class="child composited"></div></div>
+<div class="parent composited"><div class="child composited"></div></div>
</ins></span></pre></div>
<a id="trunkLayoutTestscss3compositingblendmodeisolatedgroup3html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/compositing/blend-mode-isolated-group-3.html (0 => 164579)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/compositing/blend-mode-isolated-group-3.html (rev 0)
+++ trunk/LayoutTests/css3/compositing/blend-mode-isolated-group-3.html 2014-02-24 10:02:10 UTC (rev 164579)
</span><span class="lines">@@ -0,0 +1,84 @@
</span><ins>+<!DOCTYPE HTML>
+<!-- Test that an element having -webkit-mix-blend-mode applied blends only with the contents of the parent stacking context.
+ Test that the contents of a blended element blend as a whole with the parent stacking context.-->
+<style>
+ body {
+ background: blue;
+ }
+
+ div {
+ margin: 20px;
+ width: 60px;
+ height: 60px;
+ }
+
+ .parent {
+ position: relative;
+ z-index: -1;
+ float: left;
+ background: violet;
+ }
+
+ .blender {
+ background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, green;
+ -webkit-mix-blend-mode: multiply;
+ }
+
+ .child {
+ background: orange;
+ z-index: 0;
+ position: absolute;
+ }
+
+ .composited {
+ -webkit-transform: translateZ(0);
+ }
+</style>
+
+<div class="parent">
+ <div class="blender">
+ <div class="child"></div>
+ </div>
+</div>
+
+<div class="parent composited">
+ <div class="blender">
+ <div class="child"></div>
+ </div>
+</div>
+
+<div class="parent">
+ <div class="blender composited">
+ <div class="child"></div>
+ </div>
+</div>
+
+<div class="parent composited">
+ <div class="blender composited">
+ <div class="child"></div>
+ </div>
+</div>
+
+<div class="parent">
+ <div class="blender">
+ <div class="child composited"></div>
+ </div>
+</div>
+
+<div class="parent composited">
+ <div class="blender">
+ <div class="child composited"></div>
+ </div>
+</div>
+
+<div class="parent">
+ <div class="blender composited">
+ <div class="child composited"></div>
+ </div>
+</div>
+
+<div class="parent composited">
+ <div class="blender composited">
+ <div class="child composited"></div>
+ </div>
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestsplatformmaccss3compositingblendmodeisolatedgroup1expectedpng"></a>
<div class="binary"><h4>Added: trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-1-expected.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-1-expected.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkLayoutTestsplatformmaccss3compositingblendmodeisolatedgroup1expectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-1-expected.txt (0 => 164579)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-1-expected.txt (rev 0)
+++ trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-1-expected.txt 2014-02-24 10:02:10 UTC (rev 164579)
</span><span class="lines">@@ -0,0 +1,21 @@
</span><ins>+layer at (0,0) size 800x600
+ RenderView at (0,0) size 800x600
+layer at (0,0) size 800x108
+ RenderBlock {HTML} at (0,0) size 800x108
+ RenderBody {BODY} at (8,8) size 784x0 [bgcolor=#0000FF]
+layer at (28,28) size 60x60
+ RenderBlock (floating) {DIV} at (20,20) size 60x60 [bgcolor=#EE82EE]
+layer at (48,48) size 60x60
+ RenderBlock {DIV} at (20,20) size 60x60 [bgcolor=#008000]
+layer at (128,28) size 60x60
+ RenderBlock (floating) {DIV} at (120,20) size 60x60 [bgcolor=#EE82EE]
+layer at (148,48) size 60x60
+ RenderBlock {DIV} at (20,20) size 60x60 [bgcolor=#008000]
+layer at (228,28) size 60x60
+ RenderBlock (floating) {DIV} at (220,20) size 60x60 [bgcolor=#EE82EE]
+layer at (248,48) size 60x60
+ RenderBlock {DIV} at (20,20) size 60x60 [bgcolor=#008000]
+layer at (328,28) size 60x60
+ RenderBlock (floating) {DIV} at (320,20) size 60x60 [bgcolor=#EE82EE]
+layer at (348,48) size 60x60
+ RenderBlock {DIV} at (20,20) size 60x60 [bgcolor=#008000]
</ins></span></pre></div>
<a id="trunkLayoutTestsplatformmaccss3compositingblendmodeisolatedgroup2expectedpng"></a>
<div class="binary"><h4>Added: trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-2-expected.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-2-expected.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkLayoutTestsplatformmaccss3compositingblendmodeisolatedgroup2expectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-2-expected.txt (0 => 164579)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-2-expected.txt (rev 0)
+++ trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-2-expected.txt 2014-02-24 10:02:10 UTC (rev 164579)
</span><span class="lines">@@ -0,0 +1,21 @@
</span><ins>+layer at (0,0) size 800x600
+ RenderView at (0,0) size 800x600
+layer at (0,0) size 800x108
+ RenderBlock {HTML} at (0,0) size 800x108
+ RenderBody {BODY} at (8,8) size 784x0 [bgcolor=#0000FF]
+layer at (28,28) size 60x60
+ RenderBlock (floating) {DIV} at (20,20) size 60x60 [bgcolor=#EE82EE]
+layer at (48,48) size 60x60
+ RenderBlock {DIV} at (20,20) size 60x60 [bgcolor=#008000]
+layer at (128,28) size 60x60
+ RenderBlock (floating) {DIV} at (120,20) size 60x60 [bgcolor=#EE82EE]
+layer at (148,48) size 60x60
+ RenderBlock {DIV} at (20,20) size 60x60 [bgcolor=#008000]
+layer at (228,28) size 60x60
+ RenderBlock (floating) {DIV} at (220,20) size 60x60 [bgcolor=#EE82EE]
+layer at (248,48) size 60x60
+ RenderBlock {DIV} at (20,20) size 60x60 [bgcolor=#008000]
+layer at (328,28) size 60x60
+ RenderBlock (floating) {DIV} at (320,20) size 60x60 [bgcolor=#EE82EE]
+layer at (348,48) size 60x60
+ RenderBlock {DIV} at (20,20) size 60x60 [bgcolor=#008000]
</ins></span></pre></div>
<a id="trunkLayoutTestsplatformmaccss3compositingblendmodeisolatedgroup3expectedpng"></a>
<div class="binary"><h4>Added: trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-3-expected.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-3-expected.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkLayoutTestsplatformmaccss3compositingblendmodeisolatedgroup3expectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-3-expected.txt (0 => 164579)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-3-expected.txt (rev 0)
+++ trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-3-expected.txt 2014-02-24 10:02:10 UTC (rev 164579)
</span><span class="lines">@@ -0,0 +1,54 @@
</span><ins>+layer at (0,0) size 800x600
+ RenderView at (0,0) size 800x600
+layer at (0,0) size 800x208 layerType: background only
+layer at (28,28) size 60x60
+ RenderBlock (floating) zI: -1 {DIV} at (20,20) size 60x60 [bgcolor=#EE82EE]
+layer at (48,48) size 60x60
+ RenderBlock {DIV} at (20,20) size 60x60 [bgcolor=#008000]
+layer at (68,68) size 60x60
+ RenderBlock (positioned) {DIV} at (40,40) size 60x60 [bgcolor=#FFA500]
+layer at (128,28) size 60x60
+ RenderBlock (floating) zI: -1 {DIV} at (120,20) size 60x60 [bgcolor=#EE82EE]
+layer at (148,48) size 60x60
+ RenderBlock {DIV} at (20,20) size 60x60 [bgcolor=#008000]
+layer at (168,68) size 60x60
+ RenderBlock (positioned) {DIV} at (40,40) size 60x60 [bgcolor=#FFA500]
+layer at (228,28) size 60x60
+ RenderBlock (floating) zI: -1 {DIV} at (220,20) size 60x60 [bgcolor=#EE82EE]
+layer at (248,48) size 60x60
+ RenderBlock {DIV} at (20,20) size 60x60 [bgcolor=#008000]
+layer at (268,68) size 60x60
+ RenderBlock (positioned) {DIV} at (20,20) size 60x60 [bgcolor=#FFA500]
+layer at (328,28) size 60x60
+ RenderBlock (floating) zI: -1 {DIV} at (320,20) size 60x60 [bgcolor=#EE82EE]
+layer at (348,48) size 60x60
+ RenderBlock {DIV} at (20,20) size 60x60 [bgcolor=#008000]
+layer at (368,68) size 60x60
+ RenderBlock (positioned) {DIV} at (20,20) size 60x60 [bgcolor=#FFA500]
+layer at (428,28) size 60x60
+ RenderBlock (floating) zI: -1 {DIV} at (420,20) size 60x60 [bgcolor=#EE82EE]
+layer at (448,48) size 60x60
+ RenderBlock {DIV} at (20,20) size 60x60 [bgcolor=#008000]
+layer at (468,68) size 60x60
+ RenderBlock (positioned) {DIV} at (40,40) size 60x60 [bgcolor=#FFA500]
+layer at (528,28) size 60x60
+ RenderBlock (floating) zI: -1 {DIV} at (520,20) size 60x60 [bgcolor=#EE82EE]
+layer at (548,48) size 60x60
+ RenderBlock {DIV} at (20,20) size 60x60 [bgcolor=#008000]
+layer at (568,68) size 60x60
+ RenderBlock (positioned) {DIV} at (40,40) size 60x60 [bgcolor=#FFA500]
+layer at (628,28) size 60x60
+ RenderBlock (floating) zI: -1 {DIV} at (620,20) size 60x60 [bgcolor=#EE82EE]
+layer at (648,48) size 60x60
+ RenderBlock {DIV} at (20,20) size 60x60 [bgcolor=#008000]
+layer at (668,68) size 60x60
+ RenderBlock (positioned) {DIV} at (20,20) size 60x60 [bgcolor=#FFA500]
+layer at (28,128) size 60x60
+ RenderBlock (floating) zI: -1 {DIV} at (20,120) size 60x60 [bgcolor=#EE82EE]
+layer at (48,148) size 60x60
+ RenderBlock {DIV} at (20,20) size 60x60 [bgcolor=#008000]
+layer at (68,168) size 60x60
+ RenderBlock (positioned) {DIV} at (20,20) size 60x60 [bgcolor=#FFA500]
+layer at (0,0) size 800x208 layerType: foreground only
+ RenderBlock {HTML} at (0,0) size 800x208
+ RenderBody {BODY} at (8,8) size 784x0 [bgcolor=#0000FF]
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (164578 => 164579)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-02-24 09:31:16 UTC (rev 164578)
+++ trunk/Source/WebCore/ChangeLog 2014-02-24 10:02:10 UTC (rev 164579)
</span><span class="lines">@@ -1,3 +1,29 @@
</span><ins>+2014-02-24 Mihai Tica <mitica@adobe.com>
+
+ [CSS Blending] An element having -webkit-mix-blend-mode should only blend with the contents of the parent stacking context
+ https://bugs.webkit.org/show_bug.cgi?id=129154
+
+ Reviewed by Dean Jackson.
+
+ The blending operation of an element having -webkit-mix-blend-mode should be restricted to the parent stacking context.
+ This change isolates blending, preventing it from blending with other underlying elements besides the parent stacking context.
+
+ Tests: css3/compositing/blend-mode-isolated-group-1.html
+ css3/compositing/blend-mode-isolated-group-2.html
+ css3/compositing/blend-mode-isolated-group-3.html
+
+ * rendering/RenderLayer.cpp:
+ (WebCore::RenderLayer::RenderLayer): Initialize added members to false.
+ (WebCore::RenderLayer::updateBlendMode): Check if a blend mode was set or unset. If so, set the m_updateParentStackingContextShouldIsolateBlendingDirty to true.
+ (WebCore::RenderLayer::updateParentStackingContextShouldIsolateBlending): Traverse to the parent stacking context and update the
+ m_isolatesBlending member accordingly.
+ * rendering/RenderLayer.h:
+ - Add isolatesBlending() as a condition for creating a transparency layer in the paintsWithTransparency method.
+ - Add m_updateParentStackingContextShouldIsolateBlendingDirty member.
+ - Add m_isolatesBlending member and getter.
+ * rendering/RenderLayerCompositor.cpp:
+ (WebCore::RenderLayerCompositor::computeCompositingRequirements): Call updateParentStackingContextShouldIsolateBlending.
+
</ins><span class="cx"> 2014-02-24 Krzysztof Czech <k.czech@samsung.com>
</span><span class="cx">
</span><span class="cx"> [ATK] Wrong selected element at a given index in a list box.
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderLayercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderLayer.cpp (164578 => 164579)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderLayer.cpp 2014-02-24 09:31:16 UTC (rev 164578)
+++ trunk/Source/WebCore/rendering/RenderLayer.cpp 2014-02-24 10:02:10 UTC (rev 164579)
</span><span class="lines">@@ -185,6 +185,8 @@
</span><span class="cx"> #endif
</span><span class="cx"> #if ENABLE(CSS_COMPOSITING)
</span><span class="cx"> , m_blendMode(BlendModeNormal)
</span><ins>+ , m_isolatesBlending(false)
+ , m_updateParentStackingContextShouldIsolateBlendingDirty(false)
</ins><span class="cx"> #endif
</span><span class="cx"> , m_renderer(rendererLayerModelObject)
</span><span class="cx"> , m_parent(0)
</span><span class="lines">@@ -801,8 +803,13 @@
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_COMPOSITING)
</span><span class="cx">
</span><del>-void RenderLayer::updateBlendMode()
</del><ins>+void RenderLayer::updateBlendMode(const RenderStyle* oldStyle)
</ins><span class="cx"> {
</span><ins>+ m_updateParentStackingContextShouldIsolateBlendingDirty = false;
+
+ if ((!oldStyle && renderer().style().hasBlendMode()) || (oldStyle && oldStyle->hasBlendMode() != renderer().style().hasBlendMode()))
+ m_updateParentStackingContextShouldIsolateBlendingDirty = true;
+
</ins><span class="cx"> BlendMode newBlendMode = renderer().style().blendMode();
</span><span class="cx"> if (newBlendMode != m_blendMode) {
</span><span class="cx"> m_blendMode = newBlendMode;
</span><span class="lines">@@ -811,6 +818,26 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+void RenderLayer::updateParentStackingContextShouldIsolateBlending()
+{
+ if (!m_updateParentStackingContextShouldIsolateBlendingDirty)
+ return;
+
+ if (isComposited()) {
+ m_updateParentStackingContextShouldIsolateBlendingDirty = false;
+ return;
+ }
+
+ for (auto ancestor = parent(); ancestor && !ancestor->isComposited() && !ancestor->isRootLayer(); ancestor = ancestor->parent()) {
+ if (ancestor->isStackingContext()) {
+ ancestor->m_isolatesBlending = renderer().style().hasBlendMode();
+ break;
+ }
+ }
+
+ m_updateParentStackingContextShouldIsolateBlendingDirty = false;
+}
+
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> void RenderLayer::updateTransform()
</span><span class="lines">@@ -6515,7 +6542,7 @@
</span><span class="cx"> updateDescendantDependentFlags();
</span><span class="cx"> updateTransform();
</span><span class="cx"> #if ENABLE(CSS_COMPOSITING)
</span><del>- updateBlendMode();
</del><ins>+ updateBlendMode(oldStyle);
</ins><span class="cx"> #endif
</span><span class="cx"> #if ENABLE(CSS_FILTERS)
</span><span class="cx"> updateOrRemoveFilterClients();
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderLayerh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderLayer.h (164578 => 164579)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderLayer.h 2014-02-24 09:31:16 UTC (rev 164578)
+++ trunk/Source/WebCore/rendering/RenderLayer.h 2014-02-24 10:02:10 UTC (rev 164579)
</span><span class="lines">@@ -503,7 +503,8 @@
</span><span class="cx"> void updateTransform();
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_COMPOSITING)
</span><del>- void updateBlendMode();
</del><ins>+ void updateBlendMode(const RenderStyle*);
+ void updateParentStackingContextShouldIsolateBlending();
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> const LayoutSize& offsetForInFlowPosition() const { return m_offsetForInFlowPosition; }
</span><span class="lines">@@ -775,12 +776,24 @@
</span><span class="cx"> bool hasFilter() const { return false; }
</span><span class="cx"> #endif
</span><span class="cx">
</span><ins>+ bool hasBlendMode() const
+ {
</ins><span class="cx"> #if ENABLE(CSS_COMPOSITING)
</span><del>- bool hasBlendMode() const { return renderer().hasBlendMode(); }
</del><ins>+ return renderer().hasBlendMode();
</ins><span class="cx"> #else
</span><del>- bool hasBlendMode() const { return false; }
</del><ins>+ return false;
</ins><span class="cx"> #endif
</span><ins>+ }
</ins><span class="cx">
</span><ins>+ bool isolatesBlending() const
+ {
+#if ENABLE(CSS_COMPOSITING)
+ return m_isolatesBlending;
+#else
+ return false;
+#endif
+ }
+
</ins><span class="cx"> bool isComposited() const { return m_backing != 0; }
</span><span class="cx"> bool hasCompositingDescendant() const { return m_hasCompositingDescendant; }
</span><span class="cx"> bool hasCompositedMask() const;
</span><span class="lines">@@ -798,7 +811,7 @@
</span><span class="cx">
</span><span class="cx"> bool paintsWithTransparency(PaintBehavior paintBehavior) const
</span><span class="cx"> {
</span><del>- return (isTransparent() || hasBlendMode()) && ((paintBehavior & PaintBehaviorFlattenCompositingLayers) || !isComposited());
</del><ins>+ return (isTransparent() || hasBlendMode() || isolatesBlending()) && ((paintBehavior & PaintBehaviorFlattenCompositingLayers) || !isComposited());
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> bool paintsWithTransform(PaintBehavior) const;
</span><span class="lines">@@ -1231,6 +1244,8 @@
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_COMPOSITING)
</span><span class="cx"> BlendMode m_blendMode : 5;
</span><ins>+ bool m_isolatesBlending : 1;
+ bool m_updateParentStackingContextShouldIsolateBlendingDirty : 1;
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> RenderLayerModelObject& m_renderer;
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderLayerCompositorcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp (164578 => 164579)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp 2014-02-24 09:31:16 UTC (rev 164578)
+++ trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp 2014-02-24 10:02:10 UTC (rev 164579)
</span><span class="lines">@@ -1053,6 +1053,10 @@
</span><span class="cx"> layer.updateDescendantDependentFlags();
</span><span class="cx"> layer.updateLayerListsIfNeeded();
</span><span class="cx">
</span><ins>+#if ENABLE(CSS_COMPOSITING)
+ layer.updateParentStackingContextShouldIsolateBlending();
+#endif
+
</ins><span class="cx"> if (layer.isFlowThreadCollectingGraphicsLayersUnderRegions()) {
</span><span class="cx"> RenderFlowThread& flowThread = toRenderFlowThread(layer.renderer());
</span><span class="cx"> layer.setHasCompositingDescendant(flowThread.hasCompositingRegionDescendant());
</span></span></pre>
</div>
</div>
</body>
</html>