Enable background-blend-mode by default

VERIFIED FIXED in mozilla30

Status

()

Core
Layout: View Rendering
VERIFIED FIXED
3 years ago
2 years ago

People

(Reporter: Horia Iosif Olaru, Assigned: Horia Iosif Olaru)

Tracking

(Depends on: 3 bugs, {dev-doc-complete, feature})

Trunk
mozilla30
x86
All
dev-doc-complete, feature
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(relnote-firefox 30+)

Details

Attachments

(6 attachments, 3 obsolete attachments)

(Assignee)

Description

3 years ago
Enable the background-blend-mode CSS property be default in Release builds.
(Assignee)

Comment 1

3 years ago
Created attachment 8373667 [details] [diff] [review]
enable-background-blend-mode-by-default
Attachment #8373667 - Flags: review?(roc)
(Assignee)

Updated

3 years ago
Assignee: nobody → olaru
Attachment #8373667 - Attachment is patch: true
Attachment #8373667 - Attachment mime type: message/rfc822 → text/plain
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 :-)
Attachment #8373667 - Flags: review?(roc) → review-
(Assignee)

Comment 3

3 years ago
Created attachment 8373933 [details] [diff] [review]
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?
Attachment #8373667 - Attachment is obsolete: true
Attachment #8373933 - Flags: review?(roc)
(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.
Attachment #8373933 - Flags: review?(roc) → review+
Keywords: dev-doc-needed

Comment 5

3 years ago
try build: https://tbpl.mozilla.org/?tree=Try&rev=a3784a6acc0e
(Assignee)

Updated

3 years ago
Keywords: checkin-needed
https://hg.mozilla.org/integration/mozilla-inbound/rev/01fd47b5eb1d
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/01fd47b5eb1d
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla30
relnote-firefox: --- → ?

Comment 8

3 years ago
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.

Comment 9

3 years ago
Created attachment 8376312 [details]
screenshot.JPG

Comment 10

3 years ago
Created attachment 8376313 [details]
screenshot.JPG
Attachment #8376310 - Attachment is obsolete: true
Attachment #8376312 - Attachment is obsolete: true
Keywords: feature
(Assignee)

Comment 11

3 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.
(Assignee)

Comment 12

3 years ago
Created attachment 8376346 [details]
background-gradients-rendering.html
(Assignee)

Comment 13

3 years ago
Created attachment 8376347 [details]
Chorme_result.png
(Assignee)

Comment 14

3 years ago
Created attachment 8376349 [details]
Firefox_result.png
(Assignee)

Comment 15

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

Comment 16

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

Comment 17

3 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?
(Assignee)

Comment 18

3 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

Updated

3 years ago
QA Contact: bogdan.maris

Updated

3 years ago
QA Contact: bogdan.maris → catalin.varga
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've attached and example that shows the differences that I was talking about.
(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.
Added in the release note database for 30.
relnote-firefox: ? → 30+
Depends on: 986524
Depends on: 1000907

Comment 22

3 years ago
This is not a bug with blending.
Notice how the gradient itself is rendered differently.
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
Keywords: dev-doc-needed → dev-doc-complete
Marking this bug as Verified as the feature was released with Firefox 30.
Status: RESOLVED → VERIFIED
Depends on: 1234649
You need to log in before you can comment on or make changes to this bug.