Bug 126160 - [CSS Blending] Webkit-blend-mode fails for accelerated parent with overflow:hidden
Summary: [CSS Blending] Webkit-blend-mode fails for accelerated parent with overflow:h...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: AdobeTracked
Depends on:
Blocks: 95614
  Show dependency treegraph
 
Reported: 2013-12-23 06:19 PST by Mihai Tica
Modified: 2019-05-08 21:24 PDT (History)
9 users (show)

See Also:


Attachments
Test case showing the problem (724 bytes, text/html)
2013-12-23 06:23 PST, Mihai Tica
no flags Details
Screenshot of expected versus current behaviour (484.07 KB, image/png)
2014-02-27 07:30 PST, Mihai Tica
no flags Details
Prototype: not for review (8.48 KB, patch)
2014-02-27 07:41 PST, Mihai Tica
no flags Details | Formatted Diff | Diff
Usecase with overflow:scroll (504 bytes, text/html)
2014-03-21 06:03 PDT, Ion Rosca
no flags Details
fix #1 (7.93 KB, patch)
2014-04-08 06:09 PDT, Ion Rosca
no flags Details | Formatted Diff | Diff
Patch (23.39 KB, patch)
2014-05-05 01:24 PDT, Ion Rosca
no flags Details | Formatted Diff | Diff
Patch (22.59 KB, patch)
2014-05-05 01:46 PDT, Ion Rosca
no flags Details | Formatted Diff | Diff
Archive of layout-test-results from webkit-ews-12 for mac-mountainlion-wk2 (512.81 KB, application/zip)
2014-05-05 02:44 PDT, Build Bot
no flags Details
Archive of layout-test-results from webkit-ews-06 for mac-mountainlion (624.00 KB, application/zip)
2014-05-05 03:04 PDT, Build Bot
no flags Details
Archive of layout-test-results from webkit-ews-03 for mac-mountainlion (500.17 KB, application/zip)
2014-05-05 04:12 PDT, Build Bot
no flags Details
Patch (22.59 KB, patch)
2014-05-05 04:48 PDT, Ion Rosca
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Mihai Tica 2013-12-23 06:19:17 PST
-webkit-blend-mode fails for accelerated parents with overflow:hidden, for example:

<div class="parent" style="overflow:hidden; -webkit-transform: translateZ(0)">
    <div class="blendedChild" style="-webkit-blend-mode: difference"></div>
    <div class="nonBlendedChild"></div>
</div>

For this particular case, the parent element creates a clipping layer (m_childContainmentLayer), meaning that the blended child won't get an m_ancestorClippingLayer, breaking the previous functionality.
Setting the blend mode on the parent clipping layer is wrong because it would cause all of the parent's children to blend, instead of just the ones that have blending set.

To address this problem, I've found the following solution, which I've managed to validate with a prototype:

When detecting an element that should create a clipping layer, while also having blended children, we disallow the clipping layer creation and mark the element.

For each child layer, we check whether it has a blend mode or a subtree with a blended child.
If so, we create an ancestor clipping layer (m_ancestorClippingLayer) and set its size/location according the what the clipping layer for the parent should have been.
Otherwise, we have detected a child that doesn't have blending (neither the current element, nor its children), so we create a clipping layer.

When setting the blend mode for the layer, we check for the existence of an ancestor clipping layer.
If it exists, we set the CAFilter on it, otherwise we set the filter on the main graphics layer.
Comment 1 Mihai Tica 2013-12-23 06:23:24 PST
Created attachment 219914 [details]
Test case showing the problem
Comment 2 Mihai Tica 2014-02-27 07:30:39 PST
Created attachment 225367 [details]
Screenshot of expected versus current behaviour

Use case:
Composited parent with overflow:hidden. Two children, the second child is composited, overlaps the first child and has mix-blend-mode applied.

This screenshot shows the current versus the desired behaviour: the second child should blend with both the parent and its sibling. This currently fails.
Comment 3 Mihai Tica 2014-02-27 07:41:23 PST
Created attachment 225369 [details]
Prototype: not for review

This is a solution discussed with Simon Fraser when initially implementing composited mix-blend-mode.

For this use case, the parent creates a descendant clipping layer, which prevents blending for the second child.
The proposed solution, (prototyped in this patch) is:

If a layer has clipping, is composited and has a blended child, it propagates clipping by setting ancestor clipping layers for each child, instead of setting a descendant clipping layer on itself.

If you have the following structure, for example:
<parent overflow:hidden composited>
  <child1>
  <child2>
     <blended child>
        <child3>

the parent would no longer create a descendant clipping layer. Instead, child1 and child2 would get ancestor clipping layers.

Note that this patch is just a proof of concept, it should be a starting point and only provides minimal tested functionality.
Comment 4 Ion Rosca 2014-03-21 06:03:55 PDT
Created attachment 227422 [details]
Usecase with overflow:scroll
Comment 5 Ion Rosca 2014-04-08 06:09:09 PDT
Created attachment 228829 [details]
fix #1
Comment 6 Ion Rosca 2014-05-05 01:24:48 PDT
Created attachment 230811 [details]
Patch
Comment 7 Ion Rosca 2014-05-05 01:46:46 PDT
Created attachment 230812 [details]
Patch
Comment 8 Build Bot 2014-05-05 02:44:43 PDT
Comment on attachment 230812 [details]
Patch

Attachment 230812 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-queues.appspot.com/results/6243960724914176

New failing tests:
css3/compositing/blend-mode-clip-accelerated-blending-canvas.html
media/W3C/video/networkState/networkState_during_loadstart.html
Comment 9 Build Bot 2014-05-05 02:44:46 PDT
Created attachment 230814 [details]
Archive of layout-test-results from webkit-ews-12 for mac-mountainlion-wk2

The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: webkit-ews-12  Port: mac-mountainlion-wk2  Platform: Mac OS X 10.8.5
Comment 10 Build Bot 2014-05-05 03:04:21 PDT
Comment on attachment 230812 [details]
Patch

Attachment 230812 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.appspot.com/results/4910260368179200

New failing tests:
css3/compositing/blend-mode-clip-accelerated-blending-canvas.html
compositing/geometry/video-opacity-overlay.html
Comment 11 Build Bot 2014-05-05 03:04:26 PDT
Created attachment 230816 [details]
Archive of layout-test-results from webkit-ews-06 for mac-mountainlion

The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: webkit-ews-06  Port: mac-mountainlion  Platform: Mac OS X 10.8.5
Comment 12 Build Bot 2014-05-05 04:12:20 PDT
Comment on attachment 230812 [details]
Patch

Attachment 230812 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.appspot.com/results/5721422387216384

New failing tests:
css3/compositing/blend-mode-clip-accelerated-blending-canvas.html
Comment 13 Build Bot 2014-05-05 04:12:25 PDT
Created attachment 230818 [details]
Archive of layout-test-results from webkit-ews-03 for mac-mountainlion

The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: webkit-ews-03  Port: mac-mountainlion  Platform: Mac OS X 10.8.5
Comment 14 Ion Rosca 2014-05-05 04:48:06 PDT
Created attachment 230820 [details]
Patch
Comment 15 WebKit Commit Bot 2014-05-05 14:08:57 PDT
Comment on attachment 230820 [details]
Patch

Clearing flags on attachment: 230820

Committed r168314: <http://trac.webkit.org/changeset/168314>
Comment 16 WebKit Commit Bot 2014-05-05 14:09:03 PDT
All reviewed patches have been landed.  Closing bug.