[CSS Background Blending] Specifying background-image and background-color with opaque image doesn't trigger blending

• Component: CSS
• Status: RESOLVED FIXED

[Mihai Tica]

From https://code.google.com/p/chromium/issues/detail?id=266427:

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36

Example URL:
http://jsfiddle.net/cjgammon/Dxkpr/1/

Steps to reproduce the problem:
1. apply a background color
2. apply a background image
3. multiply the bg color or apply other blend mode (non solid color)

What is the expected behavior?
it should blend with the background color

What went wrong?
it does not blend

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? Yes seems to work in canary here: https://git.corp.adobe.com/pages/gammon/background-blending-demo/index.html

Does this work in other browsers? N/A 

Chrome version: 28.0.1500.95  Channel: stable
OS Version: OS X 10.8.4
Flash Version: Shockwave Flash 11.8 r800

the short-hand syntax seems to blend correctly.
For example: 
    background: url(''https://www.google.com/images/srpr/logo4w.png''), #fefefe;

[Mihai Tica]

Created attachment 207989 [details]
Patch

[Dirk Schulze]

Comment on attachment 207989 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=207989&action=review

> LayoutTests/ChangeLog:12
> +        * css3/compositing/background-blend-mode-separate-layer-declaration.html: Added.
> +        * platform/mac/css3/compositing/background-blend-mode-separate-layer-declaration-expected.png: Added.
> +        * platform/mac/css3/compositing/background-blend-mode-separate-layer-declaration-expected.txt: Added.

Patch looks great! Can you please use an ref test instead of an pixel test? r- until you added a ref test.

[Mihai Tica]

(In reply to comment #2)
> (From update of attachment 207989 [details])
> View in context: https://bugs.webkit.org/attachment.cgi?id=207989&action=review
> 
> > LayoutTests/ChangeLog:12
> > +        * css3/compositing/background-blend-mode-separate-layer-declaration.html: Added.
> > +        * platform/mac/css3/compositing/background-blend-mode-separate-layer-declaration-expected.png: Added.
> > +        * platform/mac/css3/compositing/background-blend-mode-separate-layer-declaration-expected.txt: Added.
> 
> Patch looks great! Can you please use an ref test instead of an pixel test? r- until you added a ref test.

The bug isn't showing up when specifying background-image with an SVG.
Instead, the problem seems to be related only to opaque images, so I'm guessing we can't add a ref test.

[Mihai Tica]

Created attachment 208013 [details]
Patch

Adding reference test

[Build Bot]

Comment on attachment 208013 [details]
Patch

Attachment 208013 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.appspot.com/results/1329181

New failing tests:
media/track/text-track-cue-is-reachable.html

[Build Bot]

Created attachment 208020 [details]
Archive of layout-test-results from webkit-ews-04 for mac-mountainlion

The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: webkit-ews-04  Port: mac-mountainlion  Platform: Mac OS X 10.8.4

[Mihai Tica]

Created attachment 208030 [details]
Patch

[Dirk Schulze]

Comment on attachment 208030 [details]
Patch

r=me

[WebKit Commit Bot]

Comment on attachment 208030 [details]
Patch

Clearing flags on attachment: 208030

Committed r153702: <http://trac.webkit.org/changeset/153702>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.