861042 - Problem with fading CSS clip-path applied div. Drawing not updated

Status: VERIFIED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[ISHITOYA, Kentaro]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:20.0) Gecko/20100101 Firefox/20.0
Build ID: 20130326150557

Steps to reproduce:

Applying CSS clip-path to some div to mask image. And trying to fadeIn/Out with jQuery.
See Ex1 at http://kent013.github.io/masking-test/

HTML:
----
    <h2>Ex1</h2>
    <p>Using clip-path for FireFox (Animation fails on OSX Firefox and IE9)</p>
    <div id="example1" class="example">
      <div class="mask"></div>
      <p><a class="animate" href="javascript:void(0);">Click to Fade In/Out</a>\
 <a class="toggle-obstable" href="javascript:void(0);">Toggle Obstacle</a></p>
    </div>
----

CSS:
----
#example1 div.mask{
    clip-path: url('../images/mask.svg#mask');
}
----

js:
----
layer = $('#example1 div.mask');
layer.css('background-image', 'url(images/image.png)');

$('a.animate').on('click', function(e){
    var layer = $(e.target).parents('div').find('div.mask');
    layer.fadeOut(
        {duration:1000, complete:function(){
	    layer.fadeIn(
                {duration:1000}
            );
        }}
    );
});
----




Actual results:

Masked layer is not redrawn during animation.
See Ex1 at http://kent013.github.io/masking-test/


Expected results:

It should redrawn until animation.
See Ex2 at http://kent013.github.io/masking-test/
(Ex2 is an example of masking image with SVG Foreign Object)

Comment 1

[Paul Silaghi, QA [:pauly]]

It seems to be a regression between FF 17-18.

Comment 2

[Alice0775 White]

Regression window(m-c)
Good:
http://hg.mozilla.org/mozilla-central/rev/b274e8e3479f
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/18.0 Firefox/18.0 ID:20120928160219
Bad:
http://hg.mozilla.org/mozilla-central/rev/b62b229a4d41
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/18.0 Firefox/18.0 ID:20120928161018
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=b274e8e3479f&tochange=b62b229a4d41

Regression window(m-i)
Good:
http://hg.mozilla.org/integration/mozilla-inbound/rev/9f476b4ac1e1
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/18.0 Firefox/18.0 ID:20120928040137
Bad:
http://hg.mozilla.org/integration/mozilla-inbound/rev/6b58397ad735
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/18.0 Firefox/18.0 ID:20120928042236
Pushlog:
http://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=9f476b4ac1e1&tochange=6b58397ad735

Comment 3

[Boris Zbarsky [:bzbarsky]]

Fallout from bug 539356?

Comment 4

[Matt Woodrow (:mattwoodrow)]

Attachment: Invalidate when opacity change on a frame with svg-effects

I think it would probably be worthwhile to always create nsDisplayOpacity items, even if we have nsSVGEffects. That would let us take advantage of layerization and skip repainting for this testcase.

Probably not something we want to uplift though.

Comment 5

[Matt Woodrow (:mattwoodrow)]

https://hg.mozilla.org/integration/mozilla-inbound/rev/457ff5b67290

Comment 6

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/457ff5b67290

Comment 7

[Paul Silaghi, QA [:pauly]]

Verified fixed nightly 23.0a1 (2013-04-17) Win 7, Ubuntu 12.04, Mac OS X 10.8.3