Horia Iosif Olaru Assignee
	Description • 10 years ago

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

	Robert O'Callahan (:roc) (email my personal email if necessary)
	Comment 2 • 10 years ago

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 :-)

	Horia Iosif Olaru Assignee
	Comment 3 • 10 years ago

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?

	Robert O'Callahan (:roc) (email my personal email if necessary)
	Comment 4 • 10 years ago

(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.

	Rik Cabanier
	Comment 5 • 10 years ago

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

	Ryan VanderMeulen [:RyanVM]
	Comment 6 • 10 years ago

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

	Ryan VanderMeulen [:RyanVM]
	Comment 7 • 10 years ago

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

	Peter Kroon
	Comment 8 • 10 years ago

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

	Horia Iosif Olaru Assignee
	Comment 11 • 10 years ago

(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.

	Horia Iosif Olaru Assignee
	Comment 15 • 10 years ago

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

	Rik Cabanier
	Comment 16 • 10 years ago

(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.

	Peter Kroon
	Comment 17 • 10 years ago

(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?

	Horia Iosif Olaru Assignee
	Comment 18 • 10 years ago

(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

	Catalin Varga [QA][:VarCat]
	Comment 19 • 10 years ago

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.

	Rik Cabanier (don't use this account)
	Comment 20 • 10 years ago

(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.

	Sylvestre Ledru [:Sylvestre]
	Comment 21 • 10 years ago

Added in the release note database for 30.

	Rik Cabanier
	Comment 22 • 10 years ago

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

	Jean-Yves Perrier [:teoli]
	Comment 23 • 10 years ago

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

	Catalin Varga [QA][:VarCat]
	Comment 24 • 10 years ago

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