Bug 1038521 - background-blend-mode should not blend with white backdrop of the root element. r=roc
authorRik Cabanier <cabanier@adobe.com>
Wed, 16 Jul 2014 21:04:00 +0200
changeset 216481 6a192af9008c889b1804cec1971e9242adb7bebd
parent 216480 cfca2c09feee0610092a1e6007f259b2addc901c
child 216482 a038f26e9bbdf6c4a9e8badb7a1a0bed1d11293a
push id515
push userraliiev@mozilla.com
push dateMon, 06 Oct 2014 12:51:51 +0000
treeherdermozilla-release@267c7a481bef [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersroc
bugs1038521
milestone33.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1038521 - background-blend-mode should not blend with white backdrop of the root element. r=roc
layout/base/nsPresShell.cpp
layout/generic/nsCanvasFrame.cpp
layout/reftests/css-blending/background-blend-mode-body-image-ref.html
layout/reftests/css-blending/background-blend-mode-body-image.html
layout/reftests/css-blending/background-blend-mode-body-transparent-image-ref.html
layout/reftests/css-blending/background-blend-mode-body-transparent-image.html
layout/reftests/css-blending/reftest.list
--- a/layout/base/nsPresShell.cpp
+++ b/layout/base/nsPresShell.cpp
@@ -5262,17 +5262,19 @@ AddCanvasBackgroundColor(const nsDisplay
   for (nsDisplayItem* i = aList.GetBottom(); i; i = i->GetAbove()) {
     if (i->Frame() == aCanvasFrame &&
         i->GetType() == nsDisplayItem::TYPE_CANVAS_BACKGROUND_COLOR) {
       nsDisplayCanvasBackgroundColor* bg = static_cast<nsDisplayCanvasBackgroundColor*>(i);
       bg->SetExtraBackgroundColor(aColor);
       return true;
     }
     nsDisplayList* sublist = i->GetSameCoordinateSystemChildren();
-    if (sublist && AddCanvasBackgroundColor(*sublist, aCanvasFrame, aColor))
+    if (sublist &&
+        i->GetType() != nsDisplayItem::TYPE_BLEND_CONTAINER &&
+        AddCanvasBackgroundColor(*sublist, aCanvasFrame, aColor))
       return true;
   }
   return false;
 }
 
 void
 PresShell::AddCanvasBackgroundColorItem(nsDisplayListBuilder& aBuilder,
                                         nsDisplayList&        aList,
--- a/layout/generic/nsCanvasFrame.cpp
+++ b/layout/generic/nsCanvasFrame.cpp
@@ -380,24 +380,34 @@ nsCanvasFrame::BuildDisplayList(nsDispla
         new (aBuilder) nsDisplayCanvasThemedBackground(aBuilder, this));
       return;
     }
 
     if (!bg) {
       return;
     }
 
+    bool needBlendContainer = false;
+
     // Create separate items for each background layer.
     NS_FOR_VISIBLE_BACKGROUND_LAYERS_BACK_TO_FRONT(i, bg) {
       if (bg->mLayers[i].mImage.IsEmpty()) {
         continue;
       }
+      if (bg->mLayers[i].mBlendMode != NS_STYLE_BLEND_NORMAL) {
+        needBlendContainer = true;
+      }
       aLists.BorderBackground()->AppendNewToTop(
         new (aBuilder) nsDisplayCanvasBackgroundImage(aBuilder, this, i, bg));
     }
+
+    if (needBlendContainer) {
+      aLists.BorderBackground()->AppendNewToTop(
+        new (aBuilder) nsDisplayBlendContainer(aBuilder, this, aLists.BorderBackground()));
+    }
   }
 
   nsIFrame* kid;
   for (kid = GetFirstPrincipalChild(); kid; kid = kid->GetNextSibling()) {
     // Put our child into its own pseudo-stack.
     BuildDisplayListForChild(aBuilder, kid, aDirtyRect, aLists);
   }
 
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-blending/background-blend-mode-body-image-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<style>
+body {
+	background-color: green;
+}
+</style>
+<p>This test will check that a background-image set on body does not blend with the browser's white	 background color.<br/>
+The test passes if the page has a green background.</p>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-blending/background-blend-mode-body-image.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+body {
+	background-image: linear-gradient(green, green);
+	background-color: transparent;
+	background-blend-mode: screen;
+}
+</style>
+<p>This test will check that a background-image set on body does not blend with the browser's white	 background color.<br/>
+The test passes if the page has a green background.</p>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-blending/background-blend-mode-body-transparent-image-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<style>
+body {
+	background-image: linear-gradient(transparent, transparent 10%, green 10%, green 90%, transparent 90%, transparent);
+}
+</style>
+<p>This test will check that a transparent background-image set on body does not blend with the browser's white background color.<br/>
+The test passes if the page has a green background with white horizontal lines.</p>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-blending/background-blend-mode-body-transparent-image.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<style>
+body {
+	background-image: linear-gradient(transparent, transparent 10%, green 10%, green 90%, transparent 90%, transparent);
+	background-blend-mode: screen;
+}
+</style>
+<p>This test will check that a transparent background-image set on body does not blend with the browser's white background color.<br/>
+The test passes if the page has a green background with white horizontal lines.</p>
--- a/layout/reftests/css-blending/reftest.list
+++ b/layout/reftests/css-blending/reftest.list
@@ -74,8 +74,11 @@ pref(layout.css.background-blend-mode.en
 
 # Test plan 5.3.10 background-blend-mode for an element with background-origin
 pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-origin-border-box.html background-blending-background-origin-ref.html
 pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-origin-content-box.html background-blending-background-origin-ref.html
 
 # Test plan 5.3.11 background-blend-mode for an element with background-attachement
 pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-attachement-fixed.html background-blending-background-attachement-fixed-ref.html
 pref(layout.css.background-blend-mode.enabled,true) == background-blending-background-attachement-fixed-scroll.html background-blending-background-attachement-fixed-scroll-ref.html
+
+pref(layout.css.background-blend-mode.enabled,true) == background-blend-mode-body-image.html background-blend-mode-body-image-ref.html
+pref(layout.css.background-blend-mode.enabled,true) == background-blend-mode-body-transparent-image.html background-blend-mode-body-transparent-image-ref.html