970600 - Enable background-blend-mode by default

Status: VERIFIED FIXED

(Core :: Web Painting, defect)

Description

[Horia Iosif Olaru]

Enable the background-blend-mode CSS property be default in Release builds.

Comment 1

[Horia Iosif Olaru]

Attachment: enable-background-blend-mode-by-default

Comment 2

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Comment on attachment 8373667 [details] [diff] [review]
enable-background-blend-mode-by-default

Review of attachment 8373667 [details] [diff] [review]:
-----------------------------------------------------------------

Most of your patch removes trailing whitespace from all.js. Please do that in a separate patch :-)

Comment 3

[Horia Iosif Olaru]

Attachment: enable-background-blend-mode-by-default.patch

Sorry about that :) Should be better in this patch.

I don't mind adding a patch that removes trailing whitespace later, but isn't that a bit disruptive for source control history?

Comment 4

[Robert O'Callahan (:roc) (email my personal email if necessary)]

(In reply to Horia Iosif Olaru from comment #3)
> I don't mind adding a patch that removes trailing whitespace later, but
> isn't that a bit disruptive for source control history?

We generally don't see that as a problem.

Comment 5

[Rik Cabanier]

try build: https://tbpl.mozilla.org/?tree=Try&rev=a3784a6acc0e

Comment 6

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/01fd47b5eb1d

Comment 7

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/01fd47b5eb1d

Comment 8

[Peter Kroon]

Attachment: screenshot.png

Just tested this in latest Nightly windows7 32 bit.
In all the test the purple color is displayed. See attachment.

Comment 9

[Peter Kroon]

Attachment: screenshot.JPG

Comment 10

[Peter Kroon]

Attachment: screenshot.JPG

Comment 11

[Horia Iosif Olaru]

(In reply to Peter Kroon from comment #8)
> Created attachment 8376310 [details]
> screenshot.png
> 
> Just tested this in latest Nightly windows7 32 bit.
> In all the test the purple color is displayed. See attachment.

There seems to be a rendering difference for gradients between Firefox and Chrome. The violet you are seeing happens when the gradient goes from a fully transparent color to a fully opaque one. 

The color is violet because the starting point is a fully transparent blue (0, 0, 255, 0). If the color components would be black (0, 0, 0, 0) you would see a grey that appears between the two gradient start points.

I have not looked into which would be the correct behavior. I will attach a test and some screenshots.

Comment 12

[Horia Iosif Olaru]

Attachment: background-gradients-rendering.html

Comment 13

[Horia Iosif Olaru]

Attachment: Chorme_result.png

Comment 14

[Horia Iosif Olaru]

Attachment: Firefox_result.png

Comment 15

[Horia Iosif Olaru]

An interesting observation is when interpolating from or to a transparent color
- Firefox takes the color components of the transparent stop point into account
- Chrome seems to take the color components of the non transparent stop point for both ends when interpolating (it looks like a gradient from (255, 0, 0, 0) to (255, 0, 0, 1))

Comment 16

[Rik Cabanier]

(In reply to Horia Iosif Olaru from comment #15)
> An interesting observation is when interpolating from or to a transparent
> color
> - Firefox takes the color components of the transparent stop point into
> account
> - Chrome seems to take the color components of the non transparent stop
> point for both ends when interpolating (it looks like a gradient from (255,
> 0, 0, 0) to (255, 0, 0, 1))

This is because the CSS WG defined that gradients should interpolate in premultiplied colorspace (see my objection over this here: http://w3cmemes.tumblr.com/post/34628700024/when-worf-says-transparent-he-means)
Chrome is following the spec here and firefox is not.

Comment 17

[Peter Kroon]

(In reply to Rik Cabanier from comment #16)
> (In reply to Horia Iosif Olaru from comment #15)
> > An interesting observation is when interpolating from or to a transparent
> > color
> > - Firefox takes the color components of the transparent stop point into
> > account
> > - Chrome seems to take the color components of the non transparent stop
> > point for both ends when interpolating (it looks like a gradient from (255,
> > 0, 0, 0) to (255, 0, 0, 1))
> 
> This is because the CSS WG defined that gradients should interpolate in
> premultiplied colorspace (see my objection over this here:
> http://w3cmemes.tumblr.com/post/34628700024/when-worf-says-transparent-he-
> means)
> Chrome is following the spec here and firefox is not.

Has this been reported yet?

Comment 18

[Horia Iosif Olaru]

(In reply to Peter Kroon from comment #17)
> (In reply to Rik Cabanier from comment #16)
> > (In reply to Horia Iosif Olaru from comment #15)
> > > An interesting observation is when interpolating from or to a transparent
> > > color
> > > - Firefox takes the color components of the transparent stop point into
> > > account
> > > - Chrome seems to take the color components of the non transparent stop
> > > point for both ends when interpolating (it looks like a gradient from (255,
> > > 0, 0, 0) to (255, 0, 0, 1))
> > 
> > This is because the CSS WG defined that gradients should interpolate in
> > premultiplied colorspace (see my objection over this here:
> > http://w3cmemes.tumblr.com/post/34628700024/when-worf-says-transparent-he-
> > means)
> > Chrome is following the spec here and firefox is not.
> 
> Has this been reported yet?

Yes - this seems to be the exact same issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=591600

Comment 19

[Catalin Varga [QA][:VarCat]]

Attachment: picture

I verified this bug using:

Firefox 30
Build id: 20140228030206
Os Win 7, Ubuntu 12.04 x 32 and Mac Os 10.9

I've used the following test:
http://html.adobe.com/webplatform/graphics/blendmodes/browser-support/?filter=background

During the test I've noticed that most of the images were different and the difference extended on to the circles not just the background. 
My assumption is that due to the bug  https://bugzilla.mozilla.org/show_bug.cgi?id=591600 the backround is changing and those changes in addition to the backround blending and rendering are changing the aspect of the circles.

I've attached and example that shows the differences that I was talking about.

Comment 20

[Rik Cabanier (don't use this account)]

(In reply to Catalin Varga [QA][:VarCat] from comment #19)
> Created attachment 8383724 [details]
> picture
> 
> I verified this bug using:
> 
> Firefox 30
> Build id: 20140228030206
> Os Win 7, Ubuntu 12.04 x 32 and Mac Os 10.9
> 
> I've used the following test:
> http://html.adobe.com/webplatform/graphics/blendmodes/browser-support/
> ?filter=background
> 
> During the test I've noticed that most of the images were different and the
> difference extended on to the circles not just the background. 
> My assumption is that due to the bug 
> https://bugzilla.mozilla.org/show_bug.cgi?id=591600 the backround is
> changing and those changes in addition to the backround blending and
> rendering are changing the aspect of the circles.

I'm unsure if that's the case. The background has no alpha so it should make no difference is the gradient is premultiplied.
 
> I've attached and example that shows the differences that I was talking
> about.

This looks more like a color management issue.

Comment 21

[Sylvestre Ledru [:Sylvestre]]

Added in the release note database for 30.

Comment 22

[Rik Cabanier]

This is not a bug with blending.
Notice how the gradient itself is rendered differently.

Comment 23

[Jean-Yves Perrier [:teoli]]

Doc updated (thanks to all those who helped):
https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode
https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode
https://developer.mozilla.org/en-US/Firefox/Releases/30

Comment 24

[Catalin Varga [QA][:VarCat]]

Marking this bug as Verified as the feature was released with Firefox 30.