Bug 117223 – [CSS Blending] Updating the -webkit-background-blend-mode property dynamically does not trigger a redraw of the element

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Mihai Tica]

Steps to reproduce this issue:
1. Load http://codepen.io/mihait/pen/uJBmF using a WebKit nightly version
2. Choose another blending mode from the select box.

Note how the element with the background blend mode does not change it's appearance.
Performing an action that triggers a redraw, such a scroll triggers the change.

[Mihai Tica]

Created attachment 204419 [details]
Simplified test case

This issue is only visible if the -webkit-background-blend mode is set from CSS and then updated from javascript

[Dirk Schulze]

Created attachment 204548 [details]
Fix without test

The following patch should fix it. Not the sets should be compared (they are just used to fill all long hand properties), but the actual values.

[Mihai Tica]

Created attachment 204554 [details]
Patch for review

Adding patch for review, including layout test. Thanks Dirk for looking into this

[Dirk Schulze]

Comment on attachment 204554 [details]
Patch for review

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

> LayoutTests/css3/compositing/background-blend-mode-image-color-dynamic.html:29
> +        for (var i = 0; i < blendModes.length; ++i) {
> +            var elem = document.createElement('div');
> +            document.body.appendChild(elem);
> +        }

Are you sure that this test really does the job of testing repaint? I would use the repaint logic from DRT and have a pixel result of the changed area. Then you don't need to test all blend modes, but just if the drawn content changed at all. We already have test to verify that the property value changed. You should find real repaint tests all over the place.

[Mihai Tica]

Created attachment 204626 [details]
Updated test

[Mihai Tica]

(In reply to comment #4)
> (From update of attachment 204554 [details])
> View in context: https://bugs.webkit.org/attachment.cgi?id=204554&action=review
> 
> > LayoutTests/css3/compositing/background-blend-mode-image-color-dynamic.html:29
> > +        for (var i = 0; i < blendModes.length; ++i) {
> > +            var elem = document.createElement('div');
> > +            document.body.appendChild(elem);
> > +        }
> 
> Are you sure that this test really does the job of testing repaint? I would use the repaint logic from DRT and have a pixel result of the changed area. Then you don't need to test all blend modes, but just if the drawn content changed at all. We already have test to verify that the property value changed. You should find real repaint tests all over the place.

Ok, it looks like my test simulated what was in fast/repaint, but we should probably use the already existing mechanism. Updating test.

[Dirk Schulze]

Comment on attachment 204626 [details]
Updated test

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

LGTM. r=me.

> LayoutTests/fast/repaint/background-blend-mode-image-color-dynamic-expected.html:15
> +    <div style="-webkit-background-blend-mode: multiply, normal"></div>

I guess this makes it easier for platforms that do not support blending to still pass. With other tests in place that test the same, it should be ok.

[WebKit Commit Bot]

Comment on attachment 204626 [details]
Updated test

Clearing flags on attachment: 204626

Committed r151565: <http://trac.webkit.org/changeset/151565>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.