Ed Hume Reporter
	Description • 18 years ago

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20061104 Minefield/3.0a1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20061104 Minefield/3.0a1

When a box has a content (e.g. - background color) and one or more corners with a radius, the contents of the box are not cut off by the corner(s).

Reproducible: Always

Steps to Reproduce:
1. Install a Scribblies theme, or the Halloween theme.
2. Open a tab or two.


Actual Results:  
The contents of the tabs are visible beyond the radius at the right (end) corners of the tabs.

Expected Results:  
The contents should be cut off by the radius.

I will post screenshots, but this is a well-known problem.

	Jesse Ruderman
	Comment 2 • 18 years ago

Having a small XUL or HTML testcase would help a lot.

	Ed Hume Reporter
	Comment 3 • 18 years ago

I can't program XUL at all, and I wouldn't know how to put the right code in HTML. But here is the css code from the Scribblies Brite global/browser.css file that produced the image in the screenshot:

tab {
  background-color: #C6DFFF;
  color: -moz-DialogText;
  -moz-appearance: none !important;
  margin-top: 1px;
  margin-bottom: 0px;
  -moz-border-radius-topright: 10px !important;
  border: 2px solid !important;
  -moz-border-top-colors: #FFFFFF !important;
  -moz-border-right-colors: #FFFFFF!important;
  -moz-border-bottom-colors: #FFFFFF !important;
  -moz-border-left-colors: #FFFFFF!important;
  -moz-padding-start: 5px;
  -moz-padding-end: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
}

You will note that the background is simply a color, not even an image. It is not cut off by the radiused corner.

(The failure of the Gecko engine to produce a rounded corner is the subject of a different bug.)

	Ed Hume Reporter
	Comment 4 • 18 years ago

The reason for the !important flags is that some elements of the code are overriding this in tabbox.css:

tab
{
  -moz-appearance: none;
  margin-top: 1px;
  margin-right: 2px;
  margin-bottom: 0px;
  margin-left: 0px;
  border: 1px solid;
  border-bottom-width: 1px;
  -moz-border-top-colors: #000000;
  -moz-border-right-colors: #000000;
  -moz-border-bottom-colors: #000000;
  -moz-border-left-colors: #000000;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  padding: 0px 3px;
  background-color: transparent;
  color: #000000;
  font: menu;
  -moz-background-clip: padding;
}

I have tried various -moz-background-clip settings without finding one that confines the background to within the radiused corner border.

	Jackie Liu
	Comment 5 • 18 years ago

Happens in latest Trunk (Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20061113 Minefield/3.0a1) and also Firefox 2.

	Biju
	Comment 6 • 17 years ago

I think the issue discribed in example is fixed by bug 24998.
There is still an issue with actual text content,
I have filed Bug 409547 for that case.

	Biju
	Comment 7 • 17 years ago

modified border_radius_spill.html of Bug 409547 
to show effect CSS given in Comment #3

	Alfred Kayser Assignee
	Comment 8 • 17 years ago

This problem still occurs in Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b3pre) Gecko/2008020304 Minefield/3.0b3pre

It can be seen better by increasing the radius to higher values.

Background rounding does not happen when -moz-border-*-colors is used and there is no background image.

See also bug 415545.

	Alfred Kayser Assignee
	Comment 11 • 17 years ago

The issue is here:
http://lxr.mozilla.org/seamonkey/source/layout/base/nsCSSRendering.cpp#3894
3894   // Rounded version of the border
3895   // XXXdwh Composite borders (with multiple colors per side) use their own border radius
3896   // algorithm now, since the current one doesn't work right for small radii.
3897   if (!aBorder.mBorderColors) {

As soon as mBorderColors is set, it doesn't call PaintRoundedBackground, but just paint the whole area by aRenderingContext.FillRect(bgClipArea);

Now that the radii calculation is now the same for -moz-border-colors and normal borders (see some previous patch...) this difference should no longer apply.

This patch removes this old 'hack' (see the XXX comment), and enables the background rounding for -moz-border-colors.

	Vladimir Vukicevic [:vlad] [:vladv] (needinfo me, slow to respond)
	Comment 13 • 17 years ago

Comment on attachment 301297 [details] [diff] [review]
V1: Undo the hack to fallback to non-rounded fill when mBorder.colors is set

Looks fine to me

	Robert O'Callahan (:roc) (email my personal email if necessary)
	Comment 14 • 17 years ago

We should take the patch even though we've minused this bug

	Alfred Kayser Assignee
	Comment 15 • 17 years ago

Comment on attachment 301297 [details] [diff] [review]
V1: Undo the hack to fallback to non-rounded fill when mBorder.colors is set

See comment #14 from roc: even if not precisely blocking, this is still wanted.

	Reed Loden [:reed]
	Comment 16 • 17 years ago

Checking in layout/base/nsCSSRendering.cpp;
/cvsroot/mozilla/layout/base/nsCSSRendering.cpp,v  <--  nsCSSRendering.cpp
new revision: 3.341; previous revision: 3.340
done

	AKIHIRO Misaki (a.k.a Kuden)
	Comment 17 • 17 years ago

http://hourly-archive.localgho.st/win32/20080207_0215_checkins.html
{Build ID: 2008020701} ~ {Build ID: 2008020702}

All buttons has a focused state...(buttons use border radius)

	Alfred Kayser Assignee
	Comment 18 • 17 years ago

From which theme is this screenshot? This is not with the default theme.


Note that the patch removed this comment:
    // XXX users of -moz-border-*-colors expect a transparent border-color
    // to show the parent's background-color instead of its background-color.
    // This seems wrong, but we handle that here by explictly clipping the
    // background to the padding area.
Interesting discussion is what needs to happen if one or more of the border colors is (semi)transparent, and especially if they are not the outer border but on the inner side of the border.

Created bug 416124 to explore this case of transparent -moz-border-colors.

	AKIHIRO Misaki (a.k.a Kuden)
	Comment 19 • 17 years ago

> From which theme is this screenshot?
Phoenity Modern
http://maguroban.s41.xrea.com/firefox/ptmodern.html

	Alfred Kayser Assignee
	Comment 20 • 17 years ago

See bug 374156 and the w3c standards: the way the border transparancy is done is according to the specs. 

For this theme, there is a way to fix this effect by using margin and outline to add this outline for hover/active instead of extra wide borders with transparency.
I have done this in my themes as well.

	AKIHIRO Misaki (a.k.a Kuden)
	Comment 21 • 17 years ago

I will follow your instruction. Thank you.

	Alfred Kayser Assignee
	Comment 22 • 17 years ago

Verified with: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b4pre) Gecko/2008020708 Minefield/3.0b4pre

	Vladimir Vukicevic [:vlad] [:vladv] (needinfo me, slow to respond)
	Comment 23 • 17 years ago

Could this have caused bug 421632?