822014 - The behavior of clip-path on outer-<svg>s that have a border changed in Firefox 17

Status: RESOLVED INVALID

(Core :: SVG, defect)

Description

[richard.berg]

Attachment: two images of the same graphic, one rendered in v16, the other in v17.

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/20100101 Firefox/17.0
Build ID: 20121128204232

Steps to reproduce:

(Figures attached in file.)  An SVG graphic that rendered correctly in v 16.0.2 now is clipped on the right side and bottom in version 17.0.1. Thus the entire graphic is not visible.


Actual results:

The release notes for v 17 indicate a developer change for SVG was incorporated.  Considering that the graphic was displayed correctly in v 16, the questions is whether the developer change created the problem. The SVG code has not changed. The incorrect rendering is also apparent in v 18 beta 4.


Expected results:

I would have expected the graphics to have been rendered the same in both versions.

Comment 1

[richard.berg]

I should add that this graphic renders correctly in both IE8 & IE9, and the most recent versions of Google Chrome.

Comment 2

[Daniel Holbert [:dholbert]]

Can you share a URL for the SVG file in question? (or attach it to the bug)  There's not much that can be done without an actual testcase that triggers the bug.

Having said that, this is likely a duplicate of bug 818841.

Comment 3

[richard.berg]

Attachment: Contains three files: the SVG section from Firebug, an .asp file showing the svg commands, and a readme file

Please read the readme file first, then have at the others.  Thanks.

Comment 4

[Robert Longson [:longsonr]]

Attachment: reporters testcase as attachment

Comment 5

[Robert Longson [:longsonr]]

In Opera the grey border goes round the whole black rectangle. That's the issue right?

Comment 6

[richard.berg]

I don't use Opera. In Google Chrome and IE, yes the border goes around the whole image. The border is actually part of the image. Note, too, that the v17 image has lost 5-10% at the right side and the bottom.  The v16 image is the way this graphic should look.

Comment 7

[Alice0775 White]

Regression window(m-c)
Good:
http://hg.mozilla.org/mozilla-central/rev/6dae57cd2f85
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/17.0 Firefox/17.0 ID:20120720145842
Bad:
http://hg.mozilla.org/mozilla-central/rev/045c11dd41a6
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/17.0 Firefox/17.0 ID:20120720205642
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=6dae57cd2f85&tochange=045c11dd41a6


Regression window(m-i)
Good:
http://hg.mozilla.org/integration/mozilla-inbound/rev/a746aaa32b22
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/17.0 Firefox/17.0 ID:20120720114508
Bad:
http://hg.mozilla.org/integration/mozilla-inbound/rev/62f19ed60528
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/17.0 Firefox/17.0 ID:20120720115241
Pushlog:
http://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=a746aaa32b22&tochange=62f19ed60528

Regressed by : Bug 614732

Comment 8

[richard.berg]

I tried to help by commenting out various parts of my .asp script, to see if not executing some specific drawing command had any effect.

I commented out, separately, the "area" statements drawing the shaded blue background. No impact. Then the "grid" that puts the grid on the graphic. No change. Then the "path" that draws the green profile line. No change. Then all the "path" commands that draw the curved lines in the graphic - again, no change. Then the "polygon," followed by the "area" masks, the "axes" and the "text" labels. Eliminating these in turn had no effect. 

If I commented out the "SVG.locked = true" statement just below the <div..., I could then scroll the mouse thumbwheel to reduce the graphic and see that the graphic was all there.

Taken altogether, this seems to me that the issue is in the interpretation of the <div...> itself at the top, or from the Firebug dump, in the <svg>, <defs> or <clipPath> parts.

I'm not the expert here, and I'm not at all familiar with Firefox other than as a user. I thought this information might be useful to you.

Comment 9

[richard.berg]

Attachment: Two more pictures and another snippet from firebug

I did one more thing: in my .asp file, I commented out all the code between the opening <div ...> and the closing </div> at the bottom. When I ran this in FF 17, the same problem remains. In FF16 there is no problem. 

What I've attached are two images for the graphic Canvas, one rendered in FF v16.0.2 and the other in v17.0.01, plus the pertinent Firebug sections for each. The Firebug lists are extremely brief, as you would expect since there's no real content, and they are identical except for the "id".

Comment 10

[Robert Longson [:longsonr]]

If you could the testcase once you've removed all extraneous detail that would be useful.

Comment 11

[richard.berg]

Posting the testcase

The relevant original .asp code with all the detail removed is this:

<div class='SVGgraph' style='background-color:#000030;' options="width:570,height:360,scales:[-30,360,-10,90], border:'grey solid 4px',pan:false,zoom:false"></div>
------------------------------------

Firebug view from FF17.0.1 rendering:

<div class="SVGgraph" options="width:570,height:360,scales:[-30,360,-10,90], border:'grey solid 4px'" style="background-color: rgb(0, 0, 48); position: relative; width: 570px; height: 360px;">

  <svg id="XwYSgVfPZIqjdtDA" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" style="border:grey solid 4px" clip-path="url(#XwYSgVfPZIqjdtDAClipPath)" width="570" height="360">

    <defs id="XwYSgVfPZIqjdtDA_Defs">
      <clipPath id="XwYSgVfPZIqjdtDAClipPath">
        <path d="M0,0 570,0 570,360 0,360">
      </clipPath>
    </defs>

    <g id="XwYSgVfPZIqjdtDA_Canvas">

  </svg>
</div>


Firebug view from FF16.0.2 rendering:

<div class="SVGgraph" options="width:570,height:360,scales:[-30,360,-10,90], border:'grey solid 4px'" style="background-color: rgb(0, 0, 48); position: relative; width: 570px; height: 360px;">

  <svg id="KVQRgqfEGBKYzCnv" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" style="border:grey solid 4px" clip-path="url(#KVQRgqfEGBKYzCnvClipPath)" width="570" height="360">

    <defs id="KVQRgqfEGBKYzCnv_Defs">
      <clipPath id="KVQRgqfEGBKYzCnvClipPath">
        <path d="M0,0 570,0 570,360 0,360">
      </clipPath>
    </defs>

    <g id="KVQRgqfEGBKYzCnv_Canvas">

  </svg>
</div>


These are identical except for the "id".

Comment 12

[Jonathan Watt [:jwatt]]

Richard: Here's one observation and recommendation that may help you. You are using clip-path on an outer-<svg> element. This is not interoperable between different browsers, and I strongly recommend that you do not put clip-paths on outer-<svg> at this time.

Comment 13

[Jonathan Watt [:jwatt]]

It's worth mentioning that clip-path clipping of outer-<svg> changed in Firefox 16 (bug 773450), although the regression range identified by Alice says that's not directly the cause of this bug.

Comment 14

[Jonathan Watt [:jwatt]]

There's also a bug where clipPath clipping doesn't apply correctly to non-SVG and outer-<svg> elements in some cases: bug 804003.

Comment 15

[Jonathan Watt [:jwatt]]

Richard: so if I remove the clip-path from the <svg> element in the "reporters testcase as attachment", I get exactly the same rendering of that testcase in Firefox 17 as in Firefox 16. If removing clip-path from the outer-<svg> elements in your app doesn't fix things for you, then we need a new testcase to be able to progress here. Please let us know either way.

Comment 16

[richard.berg]

Jonathan, 
    Okay.  I opened my app live using FF17.  The graphic is clipped as I've noted above.  Here is the relevant Firebug code. It's the same as before. (I removed the "pan" and "zoom" attributes which had no affect anyway):

<div class="SVGgraph" options="width:570,height:360,scales:[-30,360,-10,90], border:'grey solid 4px'" 
style="background-color: rgb(0, 0, 48); position: relative; width: 570px; height: 360px;">

        <svg id="mwCHzfxLSyimnXKB" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" style="border:grey solid 4px" clip-path="url(#mwCHzfxLSyimnXKBClipPath)" 
width="570" height="360">

Then, in Firebug, I Deleted Attribute "clip-path".  The resultant code is this:

<div class="SVGgraph" options="width:570,height:360,scales:[-30,360,-10,90], border:'grey solid 4px'" 
style="background-color: rgb(0, 0, 48); position: relative; width: 570px; height: 360px;">

        <svg id="HUCRNikGkOyeROVl" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" style="border:grey solid 4px" 
width="570" height="360">

Now the graphic is no longer clipped in FF17 and is rendered as I would expect.

Comment 17

[richard.berg]

(In reply to Jonathan Watt [:jwatt] from comment #12)
> Richard: Here's one observation and recommendation that may help you. You
> are using clip-path on an outer-<svg> element. This is not interoperable
> between different browsers, and I strongly recommend that you do not put
> clip-paths on outer-<svg> at this time.

Jonathan: There's basically nothing I can do or know how to do here. I am just a user of a plugin that was written by someone else, so I do not know the details of how the plugin relates to producing "standard" SVG, nor how "clip-path" is placed where it is. But, I WILL pass your recommendation along to the author who will hopefully understand just what you are saying and be able to act on it. Could it be that this is where the problem lies, and it's not an issue with FF17?

Thanks for your help!

Comment 18

[Jonathan Watt [:jwatt]]

(In reply to richard.berg from comment #17)
> But, I WILL pass your recommendation
> along to the author who will hopefully understand just what you are saying

That'd be great, thank you.

> Could it be that this is where the problem lies,
> and it's not an issue with FF17?

It seems that bug 614732 has changed the behavior of clip-path clipping on outer-<svg> elements. I'm not sure if that change is desirable or not just yet, but content on the Web should definitely stay away from using clip-path on outer-<svg> elements if the content's author wants their content to be interoperable between the various browsers.

Comment 19

[richard.berg]

Jonathan: I was able scan through the mathSVG plugin code and locate the statement that places the 'clip-path="url...' attribute in the outer-<svg>. I removed it, and when I reloaded the plugin and then reran the .asp file in my environment, FF17 rendered the entire graphic perfectly. So I think this is indeed a fix I can make permanent on my end to eliminate this problem. This is especially good in view of your comment about using alternative browsers.

However, I am waiting for the author of the plugin to get back to me about this change. I don't know if there are unintended consequences within the plugin by doing what I've done. None are obvious to me, but as I said, I didn't write the plugin. When I have an answer, I'll pass it along. 

The fix on my end resolves the bug for me.

Comment 20

[Jonathan Watt [:jwatt]]

Attachment: reduced testcase of clip-path on outer-<svg>

Comment 21

[Jonathan Watt [:jwatt]]

Attachment: reduced testcase of clip-path on <div>

Comment 22

[Jonathan Watt [:jwatt]]

I've did some experiments with clip-path on outer-<svg>, and what changed is that we now apply clip-path to the CSS border box instead of the content box. Furthermore we now clip the border and the content, not just the content. This makes our treatment of clip-path on outer-<svg> consistent with how we treat clip-path on other CSS layout non-SVG elements such as <div>. The two testcases I just attached demonstrate this. I think this is a desirable change, and as such I'll close this bug as invalid. All the same, thanks a lot for the bug report, Richard. It's good to know that we changed this behavior, even if it was unintentionally.

Comment 23

[Jonathan Watt [:jwatt]]

I pushed some regression tests for this:

https://hg.mozilla.org/integration/mozilla-inbound/rev/1911ef1478a3

Comment 24

[richard.berg]

(In reply to Jonathan Watt [:jwatt] from comment #22)
> I've did some experiments with clip-path on outer-<svg>, and what changed is
> that we now apply clip-path to the CSS border box instead of the content
> box. Furthermore we now clip the border and the content, not just the
> content. This makes our treatment of clip-path on outer-<svg> consistent
> with how we treat clip-path on other CSS layout non-SVG elements such as
> <div>. The two testcases I just attached demonstrate this. I think this is a
> desirable change, and as such I'll close this bug as invalid. All the same,
> thanks a lot for the bug report, Richard. It's good to know that we changed
> this behavior, even if it was unintentionally.

Your welcome.  Last question: Does this mean that it will now be okay to leave the clip-path on an outer-<svg>?

Comment 25

[Daniel Holbert [:dholbert]]

The short answer is no, per the last chunk of comment 18 -- that all still applies.

(The only clarification to that chunk is that jwatt has now investigated and determined that the behavior-change was a desirable one -- but it's still a behavior-change, so any content that relies on the old behavior will be broken.)

Comment 26

[richard.berg]

Thanks, all. I enjoyed the interaction with you all, and I learned a few new things from you, too, which I appreciate. I'm glad this was not a problem for you after all.

Comment 27

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/1911ef1478a3