Last Comment Bug 13944 - Rounded Borders dont support a dashed/dotted style
: Rounded Borders dont support a dashed/dotted style
Status: RESOLVED FIXED
: css-moz
Product: Core Graveyard
Classification: Graveyard
Component: GFX (show other bugs)
: Trunk
: All All
: P5 normal with 7 votes (vote)
: Future
Assigned To: Kae Verens
: Chris Petersen
Mentors:
http://www.bath.ac.uk/%7Epy8ieh/m/bor...
: 18993 153322 207902 224244 266099 271372 288672 374266 (view as bug list)
Depends on: 382721
Blocks: 16950
  Show dependency treegraph
 
Reported: 1999-09-15 16:09 PDT by Christine Hoffman
Modified: 2012-12-23 08:42 PST (History)
29 users (show)
See Also:
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
Test case to demonstrate problem (148 bytes, text/html)
1999-09-15 16:09 PDT, Christine Hoffman
no flags Details

Description Christine Hoffman 1999-09-15 16:09:03 PDT
Using 9/15 build on Win 95, Win 98, Win NT, Mac8.5 and Linux Red Hat 6.0. Bug is
across platform.

Open the attached file. Style assigned to input element is "border: green dashed
1px; padding: 50px"

Expected result: border should be dashed.
Actual result: border is solid.
Comment 1 Christine Hoffman 1999-09-15 16:09:59 PDT
Created attachment 1683 [details]
Test case to demonstrate problem
Comment 2 Hixie (not reading bugmail) 1999-09-21 08:48:59 PDT
This isn't anything to do with radio buttons especially. It is a clash of the
border styles and the -moz-border-radius property.

For example, the following border is solid, not dashed:

   <div style="border: dashed; -moz-border-radius: 10px;">
      Hello World...
   </div>

The same problem occurs with some other types of border. Changing the width has
some effect too. For example, the divs in the following test snippet all show
problems:

  <style type="text/css">
     div { -moz-border-radius:50px; padding: 10px; margin: 10px; }
  </style>
  <div style="border: inset 1px">inset 1px</div>
  <div style="border: dotted 1px">dotted 1px</div>
  <div style="border: dotted 2px">dotted 2px</div>
  <div style="border: dashed 20px">dashed 20px</div>

(In fact, the last two don't draw at all!)

This should probably be assigned to whoever wrote the border drawing code.
Comment 3 Hixie (not reading bugmail) 1999-09-22 08:03:59 PDT
See also bug 6772.
Comment 4 Hixie (not reading bugmail) 1999-09-27 08:05:59 PDT
[Reinstating {css-moz} radar. I use this to keep track of all bugs related to
CSS issues.]
Comment 5 dcone (gone) 1999-10-21 14:40:59 PDT
This is true... and probably will at a later time.  Currently the rounded
attribute is not a fully supported feature for use with all border styles.
Comment 6 Hixie (not reading bugmail) 1999-10-21 15:04:59 PDT
Okiedokie.
Comment 7 Hixie (not reading bugmail) 1999-11-16 13:59:59 PST
*** Bug 18993 has been marked as a duplicate of this bug. ***
Comment 8 Hixie (not reading bugmail) 1999-11-17 15:36:59 PST
Don: Could you change the logic so that dotted/dashed borders just draw a solid
line, instead of nothing? According to CSS2, interpreting 'dotted' and 'dashed'
as 'none' or 'transparent' is wrong, but interpreting them as 'solid' is ok:

# Conforming HTML user agents may interpret 'dotted', 'dashed', 'double',
# 'groove', 'ridge', 'inset', and 'outset' to be 'solid'.
(Section 8.5.3)

This would involve changing nsCSSRendering::RenderSide, which is in:
   layout/html/style/src/nsCSSRendering.cpp
Just move these two lines:
   (~2562)       case NS_STYLE_BORDER_STYLE_DOTTED:
   (~2563)       case NS_STYLE_BORDER_STYLE_DASHED:
...to just above this line:
   (~2515)       case NS_STYLE_BORDER_STYLE_SOLID:

I'm reopening the bug to track this quick issue, then we can move it back to
VERIFIED REMIND.
Comment 9 dcone (gone) 1999-11-18 07:10:59 PST
It now will default to solid for those styles until I get to putting in dotted
and dashed styles.  Thanks for the info!!!!
Comment 10 Hixie (not reading bugmail) 1999-11-30 11:08:59 PST
Verified with:
   http://www.bath.ac.uk/%7Epy8ieh/m/border-radius-dotted.html
Behaviour: dotted and dashed styles use solid style for now.
Comment 11 Christopher Hoess (gone) 2002-04-28 19:06:21 PDT
REMIND is deprecated per bug 35839.
Comment 12 Christopher Hoess (gone) 2002-04-28 19:06:59 PDT
->default
Comment 13 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2002-04-28 20:46:00 PDT
->GFX
Comment 14 Kevin McCluskey (gone) 2002-05-01 14:56:12 PDT
Reassigning to Don.
Comment 15 Hixie (not reading bugmail) 2002-06-21 13:35:53 PDT
*** Bug 153322 has been marked as a duplicate of this bug. ***
Comment 16 Jo Hermans 2003-06-01 15:20:01 PDT
*** Bug 207902 has been marked as a duplicate of this bug. ***
Comment 17 Boris Zbarsky [:bz] 2003-10-30 21:14:08 PST
*** Bug 224244 has been marked as a duplicate of this bug. ***
Comment 18 Gary van der Merwe 2004-10-26 03:36:38 PDT
*** Bug 266099 has been marked as a duplicate of this bug. ***
Comment 19 Phil Ringnalda (:philor) 2004-11-23 08:56:39 PST
*** Bug 271372 has been marked as a duplicate of this bug. ***
Comment 20 R.K.Aa. 2005-04-01 19:15:12 PST
*** Bug 288672 has been marked as a duplicate of this bug. ***
Comment 21 Kae Verens 2005-05-25 11:37:32 PDT
I'm almost finished writing code which can handle dashed curves. All I need now
is to figure out a formula for finding the various angles of the beginnings and
endings of the dashes. I've been searching various maths sites, but cannot find
the information - does anyone have a useful URL?
Comment 22 Kae Verens 2005-05-25 12:45:59 PDT
I found a page with the required maths:
http://en.wikipedia.org/wiki/Elliptic_integral

now I need to learn how to read the maths....
Comment 23 Kae Verens 2005-05-27 01:08:34 PDT
The math is too hard for me to follow :(

To explain the problem - to draw dashes on a curved line, I need to know where 
each dash begins and ends. For that, I need the angles, so I can get the Tan 
of those angles to figure out the intersection areas.

That is simple, where pure circles are concerned. However, I am working on 
providing the full elliptical curve, as proposed in the W3C's CSS3 draft.
  Getting the exact start angle of a dash on an ellipse is very complex. Even 
just getting the length of the diameter involves integral calculus. Getting 
the angle, though, involves figuring out exactly what point is x far from 
another point, following the elliptic route. There be dragons!

So, unless anyone out there in mozilla-land is a maths genius and can hand me 
a useful formula to solve this, I think I'll solve it by approximating - I'll 
count the pixels (twips, actually) around the ellipse, and use that to guess 
where the angles might be.

I should be ready with this in a few days.
Comment 24 Hixie (not reading bugmail) 2005-05-28 09:47:59 PDT
cc'ing some maths geeks. See comment 23.
Comment 25 Boris Zbarsky [:bz] 2005-05-29 09:54:32 PDT
How bad are the results if you just use dashlength/current_radius for the angle
(in radians)?  For dashes that are short compared to the size of the corner and
for corners that are close to circular that should work well.  For
|border-radius: 1px 3px| it might not work so great, though....
Comment 26 Kae Verens 2005-05-29 10:47:10 PDT
Boris - it may work fine for ellipses that are close to circular, but we all
know that when people realise that they can create elliptical corners, they
will, so correct-length dashes will be important.

Besides - dashes that vary in length would not matter too much, but would look
just plain wrong in the case of dots.

I'm working on dashed code at the moment - I'm going to count the twips and work
it out that way - I think it may look acceptable.

I hope to have a fully-working example in a few days - I have managed to produce
dashed curves already by hard-coding some start/end angles - just need to
generate the angles automatically now.
Comment 27 Kae Verens 2005-05-31 05:08:35 PDT
I have an example of a dashed curve now.
http://verens.com/demos/borders/dashed-curve.html

Once I've ironed out some kinks in that, and applied the same algorithm to all 
the other corners, I can do doubled borders and then convert to C++ for 
firefox.

Note that it is anti-aliased. Just an added bonus. That also needs a little 
work.

Oh - could someone assign this bug to me? I seem to be the only one active on 
it.
Comment 28 Robert O'Callahan (:roc) (email my personal email if necessary) 2005-06-22 21:46:02 PDT
Maybe the right way to approach this, given that we're going to be using cairo,
is to get cairo to flatten the curve to line segments and then apply dashing to
those line segments.
Comment 29 Kae Verens 2005-07-21 06:00:50 PDT
According to the following URL, the new API will be available soon:
http://weblogs.mozillazine.org/roc/archives/2005/07/gecko_19.html

Does anyone know if it handles anti-aliasing automatically, or would I need to 
port my anti-aliasing code from my JavaScript as well? The anti-aliasing is the 
most difficult part of my algorithm.
Comment 30 Robert O'Callahan (:roc) (email my personal email if necessary) 2005-07-21 10:36:52 PDT
cairo does some antialiasing automatically. It may not work right for multiple
borders. See http://wiki.mozilla.org/Mozilla2:Antialiasing
Comment 31 Phil Ringnalda (:philor) 2007-03-16 15:31:22 PDT
*** Bug 374266 has been marked as a duplicate of this bug. ***
Comment 32 Gábor Stefanik 2007-09-27 13:24:04 PDT
This has changed significantly with bug 368247: only the corner is solid. Adding dependency of bug 382721 (corners are always solid).
Comment 33 Andy Boze 2007-09-27 20:44:11 PDT
Actually it's not only corners that are solid. With the latest SeaMonkey nightly build, I still get some solid borders. See bug 380549 comment #8 .
Comment 34 Joshua Cranmer [:jcranmer] 2008-08-06 20:43:04 PDT
FWIW, I was reading into C++0x recently, and TR1 introduced some new mathematics libraries into C++, including methods for complete and incomplete elliptic integrals.

But I doubt any of that is supported in Visual Studio, or possibly even recent versions of GCC.
Comment 35 Ming Tang 2008-10-17 16:06:16 PDT
What's the version for your Firefox? In the latest non-beta Firefox, the bug is gone
Comment 36 j.j. 2009-04-20 23:22:45 PDT
(In reply to comment #32)

So I'd say FIXED by bug 368247 ?
The remaining issue is bug 382721.
Comment 37 Zack Weinberg (:zwol) 2009-06-03 14:44:04 PDT
Yes, let's close this out and do the remaining piece in bug 382721.

Note You need to log in before you can comment on or make changes to this bug.