Bug 1038521 - background-blend-mode should not blend with white backdrop of the root element. r=roc

This commit is contained in:
Rik Cabanier 2014-07-16 21:04:00 +02:00
Родитель c55ab9dd20
Коммит 30e903768b
7 изменённых файлов: 51 добавлений и 1 удалений

Просмотреть файл

@ -5267,7 +5267,9 @@ AddCanvasBackgroundColor(const nsDisplayList& aList, nsIFrame* aCanvasFrame,
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;

Просмотреть файл

@ -385,14 +385,24 @@ nsCanvasFrame::BuildDisplayList(nsDisplayListBuilder* aBuilder,
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;

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -79,3 +79,6 @@ pref(layout.css.background-blend-mode.enabled,true) == background-blending-backg
# 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