CSS borders are broken if only some of the corners have a border-radius and the border-radius is greater than the sum of the border-radius and the width/height of the element's content area

VERIFIED FIXED in Firefox 36

Status

()

Core
Layout: Block and Inline
VERIFIED FIXED
4 years ago
3 years ago

People

(Reporter: cvan, Assigned: jwatt)

Tracking

({regression})

Trunk
mozilla36
regression
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox36+ verified)

Details

(URL)

Attachments

(2 attachments)

(Reporter)

Description

4 years ago
For some reason, mixing `border-radius` with a `border` seems to cause an odd layout effect now.

––

Test case:
http://jsbin.com/kevehi/8

Or load this in your browser:
data:text/html,<style>body { border: 15px solid darkcyan; border-radius: 0 30px 30px 0; height: 100px; width: 0; }</style>

––

Reproducible in Firefox 36.0a1 (2014-11-05) on Mac OS X 10.9.5

Not reproducible in Firefox 34.0 and lower on Mac OS X 10.9.5
Not reproducible in Firefox 33.0 and lower on Ubuntu 12.04
Not reproducible in Firefox 33.0 and lower on Windows 7

Not reproducible in Safari Version 7.1 (9537.85.10.17.1) nor Chrome Version 38.0.2125.111 on Mac OS X 10.9.5

––
(Reporter)

Comment 1

4 years ago
Created attachment 8517766 [details]
screenshot of border-radius/border bug. left: Firefox 36.0a1 (2014-11-05) on Mac OS X 10.9.5; right: Firefox 34.0 on Mac OS X 10.9.5
(Reporter)

Updated

4 years ago
Blocks: 1094232
Is this Mac-only?
(Reporter)

Comment 3

4 years ago
(In reply to David Baron [:dbaron] (UTC-8) (needinfo? for questions) from comment #2)
> Is this Mac-only?

It was first discovered in Firefox 36 on Windows 7 (in bug 1094232 comment 0).

ATM, I don't have access to a Windows device with Firefox 36.
[Tracking Requested - why for this release]:

This is a recent regression.  I see it in a tip-ish build, but not a 2014-10-30 nightly.
tracking-firefox36: --- → ?
Keywords: regression, regressionwindow-wanted
The patch for bug 1094063 changes behavior here, but the result is still wrong...
Depends on: 1094063
Regression range on nightlies: http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=da125623d9cb&tochange=5dde8ea48fef

I'm guessing this is also a regression from bug 1091787.
Blocks: 1091787
Keywords: regressionwindow-wanted
Flags: needinfo?(jwatt)
(Assignee)

Updated

4 years ago
Assignee: nobody → jwatt
Flags: needinfo?(jwatt)
Summary: `border-radius` appears broken when used with `border` → CSS borders are broken if only some of the corners have a border-radius and the border-radius is greater than the width/height of the element
tracking-firefox36: ? → +
(Assignee)

Comment 7

4 years ago
Created attachment 8518356 [details] [diff] [review]
patch

Put the fill rule back to it's previous value.
Attachment #8518356 - Flags: review?(matt.woodrow)
Attachment #8518356 - Flags: review?(matt.woodrow) → review+
(Assignee)

Updated

4 years ago
Summary: CSS borders are broken if only some of the corners have a border-radius and the border-radius is greater than the width/height of the element → CSS borders are broken if only some of the corners have a border-radius and the border-radius is greater than the sum of the border-radius and the width/height of the element's content area
(Assignee)

Updated

4 years ago
No longer depends on: 1094063
https://hg.mozilla.org/mozilla-central/rev/9192c3c0d10d
Status: NEW → RESOLVED
Last Resolved: 4 years ago
status-firefox36: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla36
(Assignee)

Comment 10

4 years ago
cvan: Thanks for filing with a reduced testcase.
QA Whiteboard: [good first verify]
Reproduced the issue on Firefox 36 Nightly (build id: 20141105030203) on Ubuntu 12.04, Mac OS X 10.8 and Windows 7 x64, verified as fixed on Firefox 36 Beta 7 (build id: 20150205114429) under Ubuntu 12.04 64 bit, Mac OS X 10.8 and Windows 7 x64
Status: RESOLVED → VERIFIED
status-firefox36: fixed → verified
You need to log in before you can comment on or make changes to this bug.