Bug 220129 - css3: multiple background images + background color
Summary: css3: multiple background images + background color
Status: RESOLVED WORKSFORME
Alias: None
Product: konqueror
Classification: Applications
Component: khtml (show other bugs)
Version: unspecified
Platform: Compiled Sources Linux
: NOR normal
Target Milestone: ---
Assignee: Konqueror Developers
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2009-12-26 11:49 UTC by Johann-Nikolaus Andreae
Modified: 2023-01-12 05:17 UTC (History)
1 user (show)

See Also:
Latest Commit:
Version Fixed In:
Sentry Crash Report:


Attachments
How i expect the page look (43.31 KB, image/png)
2009-12-27 08:34 UTC, Johann-Nikolaus Andreae
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Johann-Nikolaus Andreae 2009-12-26 11:49:16 UTC
Version:           KDE 4.4 Beta2 (using Devel)
OS:                Linux
Installed from:    Compiled sources

multiple background images works if spezified with background:
but did not work in all cases if a background color is set.

The first test use this style to draw to images in fron of the background color.
<style>
      * { margin:0; padding:0; } 
      div#head {
	background: url(http://tests.andreae-net.de/css-test/header-mask.png) no-repeat top right, url(http://tests.andreae-net.de/css-test/header1.jpg) no-repeat top right;
	background-color: red;
	height: 80px;
      }
</style>
This work with chrom but not with komqueror. Only one image is in from of the background color.
Refer to http://www.w3.org/TR/css3-background/#background-color 3.2 all images have to be in front.
See http://tests.andreae-net.de/css-test/mul-backbround-color-image1.html
Comment 1 Maksim Orlovich 2009-12-26 16:01:46 UTC
Are you sure it's not just because the background is specified no-repeat, top-right? If I make the window more narrow, the color is covered.
Comment 2 Johann-Nikolaus Andreae 2009-12-27 08:34:25 UTC
Created attachment 39366 [details]
How i expect the page look

Here ar an image how i expect the page has to look. Generatet with google chrome.
Here are two more exaples witch did not work.
http://event-horizon.twiddles.com/sites/experimental/css3-bg/
http://stoneship.org/pub/css/multiple-backgrounds/

the seconed exaple the background is defined as:
background: url(), url(), color; This found i on the web with an without the "," between the url and the color. This is not cleare defined for multiple background images. For a single background image is it defined without the "," see http://www.w3.org/TR/2008/REC-CSS2-20080411/colors.html#propdef-background
Comment 3 Maksim Orlovich 2009-12-27 16:45:57 UTC
I see, not sure how I managed to miss the missing hills + cacti... I think I have a hunch on what may be wrong (it's probably pre-blending the 2nd layer with the color to cache it).
Comment 4 Maksim Orlovich 2009-12-28 01:27:26 UTC
--- rendering/render_box.cpp    (revision 1066380)
+++ rendering/render_box.cpp    (working copy)
@@ -575,6 +575,12 @@
             p->fillRect(clipr.x(), clipr.y(), clipr.width(), clipr.height(), bgColor);
     }

+    // If we're one of the higher-up layers, make sure the color we
+    // pass to CachedImage::tiled_pixmap below is invalid, so it
+    // doesn't preblend upper-layers with the color.
+    if (bgLayer->next())
+        bgColor = QColor();
+
     // no progressive loading of the background image
     if (shouldPaintBackgroundImage) {
         int sx = 0;
@@ -726,13 +732,13 @@
             // Note that the reason we don't simply set the path as the clip path here before calling
             // p->drawTiledPixmap() is that QX11PaintEngine doesn't support anti-aliased clipping.
             if (!path.isEmpty()) {
-                QBrush brush(bg->tiled_pixmap(c, scaledImageWidth, scaledImageHeight));
+                QBrush brush(bg->tiled_pixmap(bgColor, scaledImageWidth, scaledImageHeight));
                 brush.setTransform(QTransform(1, 0, 0, 1, cx - sx, cy - sy));
                 QPainterPath cpath;
                 cpath.addRect(cx, cy, cw, ch);
                 p->fillPath(path.intersected(cpath), brush);
             } else
-                p->drawTiledPixmap(cx, cy, cw, ch, bg->tiled_pixmap(c, scaledImageWidth, scaledImageHeight), sx, sy);
+                p->drawTiledPixmap(cx, cy, cw, ch, bg->tiled_pixmap(bgColor, scaledImageWidth, scaledImageHeight), sx, sy);
         }
     }



Helps your testcase a lot, though the tint is different from your screenshot.
The others don't do anything, not sure about the parsing issues involved.
Comment 5 Maksim Orlovich 2010-01-04 18:52:24 UTC
SVN commit 1070012 by orlovich:

Do not improperly pre-blend the background color to upper 
images of multiple-backgrounds stack; fixes the attached 
testcase of #220129. (Coincidentally, I am pretty sure the given Chrome
rendering of of that testcase is wrong). Thanks to Ariya for helping test
against other implementations, too.

Will also look at the other related testcases linked...

CCBUG:220129


 M  +26 -20    render_box.cpp  


WebSVN link: http://websvn.kde.org/?view=rev&revision=1070012
Comment 6 Maksim Orlovich 2010-01-04 19:05:17 UTC
http://event-horizon.twiddles.com/sites/experimental/css3-bg/ is broken --- it 
does things like url(top-left) where no file named top-left exists. If I change it to url(top-left.png), where top-left.png does exist on the site, it works fine.
Comment 7 Maksim Orlovich 2010-01-04 21:45:33 UTC
In the last one, the rule is discarded because it's either relying on some new syntax of background-position in CSS3 drafts over 2.1 --- or a parsing bug vs 2.1 in other implementations (background-position: top 10px is not valid CSS2.1); I am not 100% sure myself, since some of the language in CSS3 is inconsistent. On top of that, though, it doesn't work if I fix that up, either.

a color in last spot of comma-separated list is clearly legal, though.
http://www.w3.org/TR/css3-background/#the-background --- see the syntax for 
<final-bg-layer>
Comment 8 Andrew Crouthamel 2018-11-02 22:57:49 UTC
Dear Bug Submitter,

This bug has been stagnant for a long time. Could you help us out and re-test if the bug is valid in the latest version? I am setting the status to NEEDSINFO pending your response, please change the Status back to REPORTED when you respond.

Thank you for helping us make KDE software even better for everyone!
Comment 9 Andrew Crouthamel 2018-11-16 05:38:15 UTC
Dear Bug Submitter,

This is a reminder that this bug has been stagnant for a long time. Could you help us out and re-test if the bug is valid in the latest version?

Thank you for helping us make KDE software even better for everyone!
Comment 10 Justin Zobel 2022-12-13 02:53:23 UTC
Thank you for reporting this issue in KDE software. As it was reported on an older version, can we please ask you to see if you cazn reproduce the issue with a more recent software version?  
  
If you can confirm this issue still exists in a recent version, please change the version field and the status to "REPORTED" when replying. Thank you!
Comment 11 Bug Janitor Service 2022-12-28 05:24:37 UTC
Dear Bug Submitter,

This bug has been in NEEDSINFO status with no change for at least
15 days. Please provide the requested information as soon as
possible and set the bug status as REPORTED. Due to regular bug
tracker maintenance, if the bug is still in NEEDSINFO status with
no change in 30 days the bug will be closed as RESOLVED > WORKSFORME
due to lack of needed information.

For more information about our bug triaging procedures please read the
wiki located here:
https://community.kde.org/Guidelines_and_HOWTOs/Bug_triaging

If you have already provided the requested information, please
mark the bug as REPORTED so that the KDE team knows that the bug is
ready to be confirmed.

Thank you for helping us make KDE software even better for everyone!
Comment 12 Bug Janitor Service 2023-01-12 05:17:35 UTC
This bug has been in NEEDSINFO status with no change for at least
30 days. The bug is now closed as RESOLVED > WORKSFORME
due to lack of needed information.

For more information about our bug triaging procedures please read the
wiki located here:
https://community.kde.org/Guidelines_and_HOWTOs/Bug_triaging

Thank you for helping us make KDE software even better for everyone!