Last Comment Bug 646799 - Content area <iframe> is not clipped to content edge curve when using border-radius
: Content area <iframe> is not clipped to content edge curve when using border-...
Status: VERIFIED FIXED
: dev-doc-complete, testcase
Product: Core
Classification: Components
Component: Layout: View Rendering (show other bugs)
: Trunk
: x86_64 All
: -- normal (vote)
: mozilla6
Assigned To: Timothy Nikkel (:tnikkel)
:
: Jet Villegas (:jet)
Mentors:
http://www.7is7.com/devl/firefox/bord...
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2011-03-31 05:06 PDT by Otto de Voogd [:ottodv]
Modified: 2011-07-29 08:14 PDT (History)
15 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
Screenshot of iframes with rounded corners and background colors. (17.68 KB, image/png)
2011-03-31 05:09 PDT, Otto de Voogd [:ottodv]
no flags Details
Standalone testcase (171 bytes, text/html)
2011-04-01 09:13 PDT, Boris Zbarsky [:bz] (still a bit busy)
no flags Details
patch (1.34 KB, patch)
2011-04-03 21:46 PDT, Timothy Nikkel (:tnikkel)
roc: review+
Details | Diff | Splinter Review
patch for checkin (3.17 KB, patch)
2011-04-20 17:38 PDT, Timothy Nikkel (:tnikkel)
no flags Details | Diff | Splinter Review

Description Otto de Voogd [:ottodv] 2011-03-31 05:06:22 PDT
User-Agent:       Mozilla/5.0 (X11; Linux x86_64; rv:2.0) Gecko/20100101 Firefox/4.0
Build Identifier: Mozilla/5.0 (X11; Linux x86_64; rv:2.0) Gecko/20100101 Firefox/4.0

We have an iframe with rounded corners using CSS (border-radius), the background color does not always respect the rounded corners of the iframe.

We have two situations:

1. The background color is defined within the framed document itself. In this case the rounded corners are not respected by the background color.

2. The background color is defined by the iframe (style of the iframe tag), in which case the rounded corners are respected.

I have a test page showing these two situations and will attach a screenshot to show what I see.

Test page:
http://www.7is7.com/devl/firefox/border.html

Reproducible: Always

Steps to Reproduce:
1. Visit http://www.7is7.com/devl/firefox/border.html

Actual Results:  
Rounded corners not respected in one of the two iframes.

Expected Results:  
Rounded corners respected in both iframes.
Comment 1 Otto de Voogd [:ottodv] 2011-03-31 05:09:21 PDT
Created attachment 523280 [details]
Screenshot of iframes with rounded corners and background colors.

The left iframe does not respect rounded corners, the right one does. In the left iframe the background color is defined in the framed document. In the right iframe it is defined in the iframe tag.
Comment 2 aravindm 2011-03-31 05:14:11 PDT
Confirmed on Mozilla/5.0 (Windows NT 6.1; rv:2.2a1pre) Gecko/20110330 Firefox/4.2a1pre
Comment 3 Boris Zbarsky [:bz] (still a bit busy) 2011-04-01 09:13:34 PDT
Created attachment 523606 [details]
Standalone testcase
Comment 4 Boris Zbarsky [:bz] (still a bit busy) 2011-04-01 09:15:26 PDT
roc, timothy, what's up here?
Comment 5 Boris Zbarsky [:bz] (still a bit busy) 2011-04-01 10:36:24 PDT
Compare what happens if you take out the background in the subframe and replace it with text.  The text will also bleed out of the curved area.  The same effect is observed in Opera 11.  IE9 has the Webkit behavior of clipping to the border.

The relevant part of CSS3 background is this, from <http://www.w3.org/TR/css3-background/#corner-clipping>:

  The content of replaced elements is always trimmed to the content edge curve.

We implement this for <img>, but apparently it doesn't work for <iframe>?
Comment 6 Timothy Nikkel (:tnikkel) 2011-04-01 20:05:11 PDT
I think we just haven't implemented that clipping for iframes yet. http://hg.mozilla.org/mozilla-central/rev/0aa1272e932f added it for most replaced elements, it doesn't seem like it should be too hard to modify nsSubDocumentFrame::BuildDisplayList to clip using the same method.
Comment 7 Timothy Nikkel (:tnikkel) 2011-04-03 21:46:58 PDT
Created attachment 523942 [details] [diff] [review]
patch
Comment 8 Robert O'Callahan (:roc) (email my personal email if necessary) 2011-04-03 21:54:26 PDT
Comment on attachment 523942 [details] [diff] [review]
patch

Need reftest
Comment 9 Timothy Nikkel (:tnikkel) 2011-04-20 17:38:21 PDT
Created attachment 527446 [details] [diff] [review]
patch for checkin
Comment 11 Eric Shepherd [:sheppy] 2011-04-22 13:30:48 PDT
Documentation updated:

https://developer.mozilla.org/en/HTML/Element/iframe#Notes

This change is also now mentioned on Firefox 6 for developers.
Comment 12 Timothy Nikkel (:tnikkel) 2011-04-22 17:18:03 PDT
Thank you.
Comment 13 Mounir Lamouri (:mounir) 2011-05-03 09:48:45 PDT
This patch might have cause a regression, see bug 610305 comment 13 to 21.
Comment 14 Simona B [:simonab ] 2011-07-29 07:05:37 PDT
(In reply to comment #13)
> This patch might have cause a regression, see bug 610305 comment 13 to 21.

Will this patch be backed out?
Comment 15 Boris Zbarsky [:bz] (still a bit busy) 2011-07-29 08:05:26 PDT
No, see bug 610305 comment 22.
Comment 16 Simona B [:simonab ] 2011-07-29 08:14:36 PDT
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:6.0) Gecko/20100101 Firefox/6.0

Verified issue on Mac OS X 10.6, Windows 7x86_64 and Ubuntu 86_64 - rounded corners respect iframes.

Setting resolution to VERIFIED FIXED.

Note You need to log in before you can comment on or make changes to this bug.