409547 - Contents should be inside -moz-border-radius

Status: RESOLVED DUPLICATE of bug 459144

(Core :: Layout, defect)

Description

[Biju]

Attachment: border_radius_spill.html

Related bug 24998 
(background images spill beyond rounded borders / -moz-border-radius)

It will be desirable to have a mechanism to force the contents in a box having -moz-border-radius to fit inside the curved border.

See attachment border_radius_spill.html the "T" in the "There is no background" has spilled over the curve of the border.

Comment 1

[Thomas Goldstein]

Isn't this a dupe of bug 359568 ?

Comment 2

[Biju]

Attachment: border_radius_spill.html

Added CSS overflow:hidden 

(In reply to comment #1)
> Isn't this a dupe of bug 359568 ?

Yes and No
Example in bug 359568 is resolved by bug 24998,
but as per summary of bug 359568, this bug is a subset.

Comment 3

[Biju]

Attachment: attachment_294496.PNG

screenshot of attachment 294496 [details]

Comment 4

[Jan Moesen]

The test case linked from bug 24998 seems to want spillage: http://www.damowmow.com/playground/bugs/tests/border-radius-image.html

I am not quite sure why, though. The latest CSS3 Backgrounds and Borders working draft does not explicitly mention the wanted behaviour for border-radius: http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-radius

Comment 5

[Thomas Goldstein]

The bug in that one test case Jan posted comes is triggered by the fact an img element is used in the divs, rather than using a background.
However, when replacing the images by backgrounds, I noticed another bug...

http://stifu.free.fr/dl/temp/border-radius-image.html

I see a few yellow points around, over the background, that shouldn't be there.

Comment 6

[Biju]

(In reply to comment #5)
> http://stifu.free.fr/dl/temp/border-radius-image.html
> I see a few yellow points around, over the background, that shouldn't be there.

on reason may be image is smaller than the containing box is getting repeated, but then why remaining part of words getting chopped off.

please file another bug and CC me. 

Comment 7

[Thomas Goldstein]

Biju: nevermind, false alert. I just noticed this is not a bug. That background image simply has a yellow pixel in the top left and bottom right corners.
As for the several yellow pixels on the right, they're the text of the image starting to get repeated.

Comment 8

[José Jeria]

Is this still an issue with latest trunk?

Comment 9

[Thomas Goldstein]

From the testcase above (https://bugzilla.mozilla.org/attachment.cgi?id=294496), I still see the text overlapping the borders on each side.
So, it looks like it's still an issue, yes.

For the record, Safari seems to have the same problem.
But to make the testcase work with Safari, you not only have to change the -moz prefix to -webkit, but also have to lower the border-radius value. If the border-radius value is too high, Webkit cancels it completely, rather than applying the highest border-radius it can (I haven't read the specs, but the Firefox behavior is the better one, IMO).

Comment 10

[Biju]

(In reply to comment #8)
> Is this still an issue with latest trunk?

Yes

Comment 11

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

When overflow != visible, the contents are supposed to be clipped.