outline should follow shape of border-radius (remove -moz-outline-radius)
Categories
(Core :: Layout, enhancement, P3)
Tracking
()
Tracking | Status | |
---|---|---|
firefox87 | --- | fixed |
People
(Reporter: alan.ogilvie, Assigned: emilio, Mentored)
References
(Depends on 1 open bug, Blocks 3 open bugs, )
Details
(4 keywords, Whiteboard: [layout:backlog:quality] [lang=c++])
Attachments
(6 files, 1 obsolete file)
User-Agent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8) Gecko/20051025 Firefox/1.5 Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8) Gecko/20051025 Firefox/1.5 It seems that if a box has a border radius (for rounding the corners) that if an outline is applied to the same box, the outline does not follow the defined radius. Resulting in a round-edged box with an outline that is rectangular. Not sure if this is a CSS-spec bug (W3C), or a rendering bug (Moz). On the example URL given - mouse over the main boxes on the page to see the effect. Reproducible: Always Steps to Reproduce: 1. Visit example URL 2. Mouse over the main white boxes on the page 3. Brown coloured outline should appear around the rounded edged boxes (border-radius) Actual Results: Outline does not follow border-radius. Expected Results: Outline should follow border-radius. (? or should it ?) Other browsers: Opera 8 doesn't support radius anyway, Safari 2.0.2 doesn't support radius, IE doesn't support [anything] radius - so not much to compare it with really. I suppose this is CSS3 related, although obviously the -moz-border-radius CSS extension also demonstrates the problem.
Comment 1•18 years ago
|
||
You can use -moz-outline-radius to get rounded outline borders.
Reporter | ||
Comment 2•18 years ago
|
||
(In reply to comment #1) > You can use -moz-outline-radius to get rounded outline borders. > Hmmm... ok, so that's the mozilla extension. So it's possible to achieve it. But should the outline follow the border shape if defined?
I think CSS allows this, see http://www.w3.org/TR/css3-ui/#outline1 > Outlines may be non-rectangular.
Comment 4•14 years ago
|
||
Outlines should follow border-radius like box-shadow.
Comment 5•14 years ago
|
||
Updated•14 years ago
|
Comment 6•11 years ago
|
||
(In reply to Daniel.S (mostly offline during the week) from comment #3) > I think CSS allows this, see http://www.w3.org/TR/css3-ui/#outline1 > > > Outlines may be non-rectangular. That sentence is longer in CSS2, see http://www.w3.org/TR/CSS2/ui.html#propdef-outline : > Outlines may be non-rectangular. For example, if the element is broken across several lines, the outline is the minimum outline that encloses all the element's boxes. In contrast to borders, the outline is not open at the line box's end or start, but is always fully connected if possible. I read this not as "outlines can be rounded, while borders can't", which is obviously false (the idea of the issue is that the outline should be rounded like the border), but that the outline follows the element's real shape closer, especially valid for inline elements spread over several lines.
Comment 7•9 years ago
|
||
see also bug 593717
Updated•9 years ago
|
Updated•9 years ago
|
Comment 9•8 years ago
|
||
Posted the site compatibility doc: https://www.fxsitecompat.com/en-US/docs/2015/moz-outline-radius-will-be-removed/
Comment 10•7 years ago
|
||
Updated•7 years ago
|
Updated•7 years ago
|
Comment 11•5 years ago
|
||
CSS3 UI requires this behavior: https://www.w3.org/TR/css-ui-3/#ref-for-border-edge "To the extent that the outline follows the border edge, it should follow the border-radius curve." Updated URL accordingly. Old "URL" in this bug (http://www.kollektive.com/prodsandservs.asp) appears to be offline.
Updated•3 years ago
|
Assignee | ||
Comment 12•3 years ago
|
||
We could prototype this behind a flag pretty easily. It'd be a matter of replacing the users of mOutlineRadius
with the border-radius instead, and adding a pref.
So, steps:
- Adding a
layout.css.outline-follows-border-radius.enabled
pref toStaticPrefList.yaml
(probably enabled on nightly-only or disabled by default for now). - Add a comment here, saying that if we ever optimize this we need to account for outline too.
- Instead of using
mOutlineRadius
here, check the pref and do something like:
const auto& radius = StaticPrefs::layout_css_outline_follows_border_radius_enabled()
? aStyle->StyleBorder()->mBorderRadius
: ourOutline->mOutlineRadius;
// .. carry-on
- Same here (maybe add a
const StyleBorderRadius& GetOutlineRadius() const
helper tonsDisplayOutline
?
That'd be all for now, we wouldn't disable -moz-outline-radius
for now, because we don't have prefs that disable css properties. The property would just become silently useless, and then when this ships we can remove it altogether.
Assignee | ||
Updated•3 years ago
|
Assignee | ||
Comment 13•3 years ago
|
||
Oh, forgot a step of course. Write a reftest in layout/reftests/outline
like:
test-pref(layout.css.outline-follows-border-radius.enabled,true) == border-radius.html outline-radius.html
Where the border-radius.html
file uses border-radius
and an outline, and the outline radius one uses -moz-outline-radius
. That would check that the feature works :)
Updated•3 years ago
|
Comment 14•3 years ago
|
||
is this issue still of interest ?
Comment 15•3 years ago
•
|
||
I don't think the approach you posted works quite right. i.e. it doesn't take into account the border thickness. Adding the outline-width onto its radius looks right to me. Is that what we want? Are there other scenarios to take into account?
EDIT: Also need to take into account outline-offset?
Assignee | ||
Comment 16•3 years ago
|
||
Ah, you're totally right of course. Other interesting scenario is what happens when the element is broken into lines or columns, etc. But I think our behavior there may not be ideal already.
Comment 17•3 years ago
|
||
Updated•3 years ago
|
Comment 18•3 years ago
|
||
Patch wfm, but needs reftests. I'm not sure the right way to do all the unit conversions/addition here, so looking for feedback first.
Comment 19•3 years ago
|
||
Another set of test cases with some different sizes, offsets, animations, etc.
Rendering borders on elements with columns seems broken in basically every browser.
Comment 20•2 years ago
|
||
This good-first-bug hasn't had any activity for 6 months, it is automatically unassigned.
For more information, please visit auto_nag documentation.
Assignee | ||
Comment 22•2 years ago
|
||
I provided feedback on the phabricator revision a while ago, though maybe they were missed?
Yeah, the multicol case seems harder, but for now keeping our moz-outline-radius first to get something landed here sounds reasonable to me. We can flesh out the edge cases in other bug.
Assignee | ||
Comment 23•2 years ago
|
||
Drive-by cleanup.
Updated•2 years ago
|
Assignee | ||
Comment 24•2 years ago
|
||
This makes -moz-outline-radius a no-op, but keep it for now.
If/when we make this the default in release, we can remove it.
Depends on D104323
Assignee | ||
Comment 25•2 years ago
|
||
I was looking at related code as part of bug 1691064, so I think we should try to do this too.
Comment 26•2 years ago
|
||
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/acf63bfce848 Remove useless nsCSSBorderRenderer::mDocument. r=mstange https://hg.mozilla.org/integration/autoland/rev/fbe159e50e82 Add a pref to make non-auto outline follow border radius. r=mstange
Comment 27•2 years ago
|
||
Pushed by emilio@crisal.io: https://hg.mozilla.org/integration/autoland/rev/6997113c2a78 Tweak a fuzzy annotation.
Comment 28•2 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/acf63bfce848
https://hg.mozilla.org/mozilla-central/rev/fbe159e50e82
https://hg.mozilla.org/mozilla-central/rev/6997113c2a78
Comment 29•2 years ago
|
||
I was given this to document but it looks like it is just in Nightly right now, is that correct?
Assignee | ||
Comment 30•2 years ago
|
||
Yes, though I think we should turn it on everywhere, now that the merge is done. I filed bug 1694146 for that.
Assignee | ||
Updated•2 years ago
|
Updated•2 years ago
|
Description
•