1279409 - CSS mix-blend-mode and clip-path don't work when combined (on HTML element)

Status: VERIFIED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[Jonny Scholes]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:48.0) Gecko/20100101 Firefox/48.0
Build ID: 20160606004039

Steps to reproduce:

Create two divs - foreground and background. Place foreground absolutely over background. Apply clip-path: url(#svgPath); OR cli-path: polygon; (with clip-path-shapes enabled). Apply mix-blend-mode - all values other than normal. Example: http://codepen.io/jonnyscholes/pen/7fb31dcb927689f551bfbbac794c0285


Actual results:

Foreground clips to an unexpected square that seems to flicker every few seconds.


Expected results:

Forground should be clipped as per the clip mask then the remaining shape should blend with the background as set by mix-bledn-mode.

Comment 1

[ovidiu boca[:Ovidiu]]

Hi,

I tested this issue on Mac OS X 10.11 with FF Nightly 50.0a1 (2016-06-12) and I can reproduce it.

Comment 2

[u459114]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=df4611a15588

Comment 3

[u459114]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=0debee9963da

Comment 4

[u459114]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=caa00a8ac63d

Comment 5

[u459114]

Attachment: Bug 1279409 - Part 1. Remove mix-blend-mode handling code in nsSVGIntegrationUtils.

Review commit: https://reviewboard.mozilla.org/r/82024/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/82024/

Comment 6

[u459114]

Attachment: Bug 1279409 - Part 2. Reftest for clip-path with mix-blend-mode.

Review commit: https://reviewboard.mozilla.org/r/82026/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/82026/

Comment 7

[u459114]

In nsIFrame::BuildDisplayListForStackingContext, nsDisplayBlendMode is already been created to handle mix-blend-mode, so we don't need to take care of it again in nsDisplayMask and nsDisplayFilter I thought.

Comment 8

[Markus Stange [:mstange]]

Comment on attachment 8796027 [details]
Bug 1279409 - Part 1. Remove mix-blend-mode handling code in nsSVGIntegrationUtils.

https://reviewboard.mozilla.org/r/82024/#review80634

Comment 9

[Markus Stange [:mstange]]

Comment on attachment 8796028 [details]
Bug 1279409 - Part 2. Reftest for clip-path with mix-blend-mode.

https://reviewboard.mozilla.org/r/82026/#review80636

Comment 10

[u459114]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=aac539736263

Comment 11

[u459114]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=746bab5a8418

Comment 12

[u459114]

https://hg.mozilla.org/integration/mozilla-inbound/rev/d48849ef2b8f964e4b68c6bbe82279709aab9c13
Bug 1279409 - Part 1. Remove mix-blend-mode handling code in nsSVGIntegrationUtils.

https://hg.mozilla.org/integration/mozilla-inbound/rev/c5b5b2bbba91bde8e3b4f9dee0a5cc653f0e0062
Bug 1279409 - Part 2. Reftest for clip-path with mix-blend-mode.

Comment 13

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/d48849ef2b8f
https://hg.mozilla.org/mozilla-central/rev/c5b5b2bbba91

Comment 14

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

The link rel="match" in the reftest has an incorrect filename (it's missing the "1-").

(I found this with the script layout/reftests/w3c-css/submitted/check-for-references.sh .)

Comment 15

[u459114]

https://hg.mozilla.org/integration/mozilla-inbound/rev/2da2480008f5dc8876b29673a9756b463f5aee15
Bug 1279409 - Part 3. Fix incorrect ref filename. r=me

Comment 16

[u459114]

fixed

Comment 17

[Phil Ringnalda (:philor)]

https://hg.mozilla.org/mozilla-central/rev/2da2480008f5

Comment 18

[ovidiu boca[:Ovidiu]]

Tested on Mac OS X 10.10 with FF Nightly 52.0a1(2016-10-03) and I can't reproduce it.

Comment 19

[Jonny Scholes]

Tested on Mac OSX 10.11.6 with FF Nightly 52.0a1 (2016-10-04) (64-bit) - everything now looking good. Thanks a million - you all rock!