Bug 93870 – [CSS Shaders] Implement multiply, screen, darken, lighten, difference, exclusion blend modes.

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Max Vujovic]

Implement the multiply blend mode in the CSS Shaders mix function. For example:
-webkit-filter: custom(none mix(shader.fs multiply));

This will multiply the special css_MixColor symbol in the fragment shader with the DOM element texture.

[Max Vujovic]

Repurposing this bug to implement not just the multiply blend mode, but all of the following:

- multiply 
- screen
- darken
- lighten
- difference
- exclusion

These are all straightforward to implement (one line of code each). The more interesting part is how to test them in an organized fashion since there are 16 blend modes total in the spec [1]. I'm going to implement several of them together to show how the testing is going to look.

[1] https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html

[Max Vujovic]

Created attachment 161807 [details]
Patch

[WebKit Review Bot]

Comment on attachment 161807 [details]
Patch

Attachment 161807 [details] did not pass chromium-ews (chromium-xvfb):
Output: http://queues.webkit.org/results/13719447

New failing tests:
css3/filters/custom/custom-filter-blend-modes.html

[Max Vujovic]

Created attachment 162063 [details]
Patch

The color calculations are sometimes off by 1 due to floating point error. I've tweaked the reference colors to account for this.

[Alexandru Chiculita]

Added the link to compositing spec: https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html

[Alexandru Chiculita]

Comment on attachment 162063 [details]
Patch

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

Looks good. Just minor comments.

> LayoutTests/css3/filters/custom/custom-filter-blend-modes-expected.html:6
> +        This is the reference file for the test.

Add a comment about how the colors were computed. Maybe just say that the test file explains it.

> LayoutTests/css3/filters/custom/custom-filter-blend-modes-expected.html:10
> +        if (window.testRunner) {

You don't need these ones in the ref test.

> LayoutTests/css3/filters/custom/custom-filter-blend-modes-expected.html:79
> +    <!-- Be careful not to exceed 600px in height, since DumpRenderTree compares 800x600 snapshots of the page. -->

I suppose you don't need this comment here. Do you expect more blending tests to be added to this file?

> LayoutTests/css3/filters/custom/custom-filter-blend-modes.html:181
> +    <!-- Be careful not to exceed 600px in height, since DumpRenderTree compares 800x600 snapshots of the page. -->

ditto

[Max Vujovic]

Created attachment 162072 [details]
Patch

[Max Vujovic]

Comment on attachment 162063 [details]
Patch

Thanks for the review, Alex.

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

>> LayoutTests/css3/filters/custom/custom-filter-blend-modes-expected.html:6
>> +        This is the reference file for the test.
> 
> Add a comment about how the colors were computed. Maybe just say that the test file explains it.

Done. Added a comment saying the test file explains it.

>> LayoutTests/css3/filters/custom/custom-filter-blend-modes-expected.html:10
>> +        if (window.testRunner) {
> 
> You don't need these ones in the ref test.

Done. Thanks!

>> LayoutTests/css3/filters/custom/custom-filter-blend-modes-expected.html:79
>> +    <!-- Be careful not to exceed 600px in height, since DumpRenderTree compares 800x600 snapshots of the page. -->
> 
> I suppose you don't need this comment here. Do you expect more blending tests to be added to this file?

I reworded it to say: "If you add more blend modes to this page, be careful not to...". That should be more clear.

>> LayoutTests/css3/filters/custom/custom-filter-blend-modes.html:181
>> +    <!-- Be careful not to exceed 600px in height, since DumpRenderTree compares 800x600 snapshots of the page. -->
> 
> ditto

Done.

[Dirk Schulze]

Comment on attachment 162072 [details]
Patch

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

Awesome reduction with the expressions! r=me. Just one question inline.

> Source/WebCore/platform/graphics/filters/CustomFilterValidatedProgram.cpp:191
> +        expression = "Cb + Cs - 2.0 * Cb * Cs";

Usually the style is 2, can Cb and Cs be integer?

[Max Vujovic]

(In reply to comment #9)
> (From update of attachment 162072 [details])
> View in context: https://bugs.webkit.org/attachment.cgi?id=162072&action=review
> 
> Awesome reduction with the expressions! r=me. Just one question inline.
> 
> > Source/WebCore/platform/graphics/filters/CustomFilterValidatedProgram.cpp:191
> > +        expression = "Cb + Cs - 2.0 * Cb * Cs";
> 
> Usually the style is 2, can Cb and Cs be integer?

No, GLSL requires 2.0 instead of 2, otherwise it's a syntax error.

[Max Vujovic]

(In reply to comment #10)
> (In reply to comment #9)
> > (From update of attachment 162072 [details] [details])
> > View in context: https://bugs.webkit.org/attachment.cgi?id=162072&action=review
> > 
> > Awesome reduction with the expressions! r=me. Just one question inline.
> > 
> > > Source/WebCore/platform/graphics/filters/CustomFilterValidatedProgram.cpp:191
> > > +        expression = "Cb + Cs - 2.0 * Cb * Cs";
> > 
> > Usually the style is 2, can Cb and Cs be integer?
> 
> No, GLSL requires 2.0 instead of 2, otherwise it's a syntax error.

And Cb and Cs are always going to be floats.

[WebKit Review Bot]

Comment on attachment 162072 [details]
Patch

Clearing flags on attachment: 162072

Committed r127517: <http://trac.webkit.org/changeset/127517>

[WebKit Review Bot]

All reviewed patches have been landed.  Closing bug.

[Adrian von Gegerfelt]

If we have

-webkit-filter: blur();
-webkit-filter: sephia();
etc

why not

-webkit-filter: [multiply|screen|darken|...];

[Max Vujovic]

(In reply to comment #14)
> If we have
> 
> -webkit-filter: blur();
> -webkit-filter: sephia();
> etc
> 
> why not
> 
> -webkit-filter: [multiply|screen|darken|...];

I think you are looking for the functionality defined in the CSS Compositing and Blending spec:
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#mix-blend-mode

That spec is currently early in implementation.