Diff
Modified: trunk/LayoutTests/ChangeLog (164578 => 164579)
--- trunk/LayoutTests/ChangeLog 2014-02-24 09:31:16 UTC (rev 164578)
+++ trunk/LayoutTests/ChangeLog 2014-02-24 10:02:10 UTC (rev 164579)
@@ -1,3 +1,23 @@
+2014-02-24 Mihai Tica <[email protected]>
+
+ [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.
+
2014-02-24 Krzysztof Czech <[email protected]>
[ATK] Wrong selected element at a given index in a list box.
Added: trunk/LayoutTests/css3/compositing/blend-mode-isolated-group-1.html (0 => 164579)
--- 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)
@@ -0,0 +1,33 @@
+<!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>
Added: trunk/LayoutTests/css3/compositing/blend-mode-isolated-group-2.html (0 => 164579)
--- 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)
@@ -0,0 +1,34 @@
+<!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>
Added: trunk/LayoutTests/css3/compositing/blend-mode-isolated-group-3.html (0 => 164579)
--- 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)
@@ -0,0 +1,84 @@
+<!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>
Added: trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-1-expected.png
(Binary files differ)
Added: svn:mime-type
Added: trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-1-expected.txt (0 => 164579)
--- 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)
@@ -0,0 +1,21 @@
+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]
Added: trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-2-expected.png
(Binary files differ)
Added: svn:mime-type
Added: trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-2-expected.txt (0 => 164579)
--- 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)
@@ -0,0 +1,21 @@
+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]
Added: trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-3-expected.png
(Binary files differ)
Added: svn:mime-type
Added: trunk/LayoutTests/platform/mac/css3/compositing/blend-mode-isolated-group-3-expected.txt (0 => 164579)
--- 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)
@@ -0,0 +1,54 @@
+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]
Modified: trunk/Source/WebCore/ChangeLog (164578 => 164579)
--- 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)
@@ -1,3 +1,29 @@
+2014-02-24 Mihai Tica <[email protected]>
+
+ [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.
+
2014-02-24 Krzysztof Czech <[email protected]>
[ATK] Wrong selected element at a given index in a list box.
Modified: trunk/Source/WebCore/rendering/RenderLayer.cpp (164578 => 164579)
--- 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)
@@ -185,6 +185,8 @@
#endif
#if ENABLE(CSS_COMPOSITING)
, m_blendMode(BlendModeNormal)
+ , m_isolatesBlending(false)
+ , m_updateParentStackingContextShouldIsolateBlendingDirty(false)
#endif
, m_renderer(rendererLayerModelObject)
, m_parent(0)
@@ -801,8 +803,13 @@
#if ENABLE(CSS_COMPOSITING)
-void RenderLayer::updateBlendMode()
+void RenderLayer::updateBlendMode(const RenderStyle* oldStyle)
{
+ m_updateParentStackingContextShouldIsolateBlendingDirty = false;
+
+ if ((!oldStyle && renderer().style().hasBlendMode()) || (oldStyle && oldStyle->hasBlendMode() != renderer().style().hasBlendMode()))
+ m_updateParentStackingContextShouldIsolateBlendingDirty = true;
+
BlendMode newBlendMode = renderer().style().blendMode();
if (newBlendMode != m_blendMode) {
m_blendMode = newBlendMode;
@@ -811,6 +818,26 @@
}
}
+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;
+}
+
#endif
void RenderLayer::updateTransform()
@@ -6515,7 +6542,7 @@
updateDescendantDependentFlags();
updateTransform();
#if ENABLE(CSS_COMPOSITING)
- updateBlendMode();
+ updateBlendMode(oldStyle);
#endif
#if ENABLE(CSS_FILTERS)
updateOrRemoveFilterClients();
Modified: trunk/Source/WebCore/rendering/RenderLayer.h (164578 => 164579)
--- 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)
@@ -503,7 +503,8 @@
void updateTransform();
#if ENABLE(CSS_COMPOSITING)
- void updateBlendMode();
+ void updateBlendMode(const RenderStyle*);
+ void updateParentStackingContextShouldIsolateBlending();
#endif
const LayoutSize& offsetForInFlowPosition() const { return m_offsetForInFlowPosition; }
@@ -775,12 +776,24 @@
bool hasFilter() const { return false; }
#endif
+ bool hasBlendMode() const
+ {
#if ENABLE(CSS_COMPOSITING)
- bool hasBlendMode() const { return renderer().hasBlendMode(); }
+ return renderer().hasBlendMode();
#else
- bool hasBlendMode() const { return false; }
+ return false;
#endif
+ }
+ bool isolatesBlending() const
+ {
+#if ENABLE(CSS_COMPOSITING)
+ return m_isolatesBlending;
+#else
+ return false;
+#endif
+ }
+
bool isComposited() const { return m_backing != 0; }
bool hasCompositingDescendant() const { return m_hasCompositingDescendant; }
bool hasCompositedMask() const;
@@ -798,7 +811,7 @@
bool paintsWithTransparency(PaintBehavior paintBehavior) const
{
- return (isTransparent() || hasBlendMode()) && ((paintBehavior & PaintBehaviorFlattenCompositingLayers) || !isComposited());
+ return (isTransparent() || hasBlendMode() || isolatesBlending()) && ((paintBehavior & PaintBehaviorFlattenCompositingLayers) || !isComposited());
}
bool paintsWithTransform(PaintBehavior) const;
@@ -1231,6 +1244,8 @@
#if ENABLE(CSS_COMPOSITING)
BlendMode m_blendMode : 5;
+ bool m_isolatesBlending : 1;
+ bool m_updateParentStackingContextShouldIsolateBlendingDirty : 1;
#endif
RenderLayerModelObject& m_renderer;
Modified: trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp (164578 => 164579)
--- 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)
@@ -1053,6 +1053,10 @@
layer.updateDescendantDependentFlags();
layer.updateLayerListsIfNeeded();
+#if ENABLE(CSS_COMPOSITING)
+ layer.updateParentStackingContextShouldIsolateBlending();
+#endif
+
if (layer.isFlowThreadCollectingGraphicsLayersUnderRegions()) {
RenderFlowThread& flowThread = toRenderFlowThread(layer.renderer());
layer.setHasCompositingDescendant(flowThread.hasCompositingRegionDescendant());
