Closed Bug 359568 Opened 18 years ago Closed 17 years ago

Radius of border corner does not cut off contents of box


(Core :: Layout, defect)

Not set





(Reporter: ehume, Assigned: alfredkayser)



(Keywords: css-moz, testcase)


(7 files)

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.
Having a small XUL or HTML testcase would help a lot.
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.)
The reason for the !important flags is that some elements of the code are overriding this in tabbox.css:

  -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.
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.
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.
Depends on: 24998, 409547
modified border_radius_spill.html of Bug 409547 
to show effect CSS given in Comment #3
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.
Assignee: nobody → vladimir
Component: General → Layout
Product: Firefox → Core
Version: unspecified → Trunk
Ever confirmed: true
Flags: blocking1.9?
OS: Windows XP → All
Hardware: PC → All
The issue is here:
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.
Assignee: vladimir → alfredkayser
Attachment #301297 - Flags: review?(vladimir)
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
Attachment #301297 - Flags: review?(vladimir) → review+
Attachment #301297 - Flags: superreview?(roc)
QA Contact: general → layout
Flags: blocking1.9? → blocking1.9-
We should take the patch even though we've minused this bug
Attachment #301297 - Flags: superreview?(roc) → superreview+
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.
Attachment #301297 - Flags: approval1.9?
Attachment #301297 - Flags: approval1.9? → approval1.9+
Checking in layout/base/nsCSSRendering.cpp;
/cvsroot/mozilla/layout/base/nsCSSRendering.cpp,v  <--  nsCSSRendering.cpp
new revision: 3.341; previous revision: 3.340
Closed: 17 years ago
Keywords: checkin-needed
Resolution: --- → FIXED
Target Milestone: --- → mozilla1.9beta4
Attached image screenshot
{Build ID: 2008020701} ~ {Build ID: 2008020702}

All buttons has a focused state...(buttons use border radius)
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.
> From which theme is this screenshot?
Phoenity Modern
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.
I will follow your instruction. Thank you.
Verified with: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b4pre) Gecko/2008020708 Minefield/3.0b4pre
You need to log in before you can comment on or make changes to this bug.