Re: [css3-background] border-radius and wrapping inline elements

On Fri, Sep 3, 2010 at 3:30 PM, Sylvain Galineau <sylvaing@microsoft.com> wrote:
> The specification does not currently define how rounded corners are rendered
> for inline elements when the latter wrap, especially when there is not
> enough room left on the line to render the full curve. Today some
> implementations use the remaining width on the line for their calculation
> for instance. Similar issues likely happen for border-image.
>
> I do not have a well-formed opinion on the importance of the scenario for
> authors or its most desirable rendering. But I would suggest we explicitly
> call this out as undefined for completeness of this level of the
> specification.

Testcase:

<!DOCTYPE html>
<style>
span {
  border: 1px solid black;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
</style>
<span>foo foo foo foo<br>foo foo foo</span>

Webkit and FF render the whole line as one box and then chop the
decorations at the break, while Opera and IE9 preview render as if
each line was a separate box, and the break edges were just
border:none.

http://dev.w3.org/csswg/css3-background/#box-decoration-break covers
the appropriate behavior here - FF and Webkit are correct.  Inline
boxes should be rendered as a single long box, and then just chopped
at the linebreaks when laying out the lineboxes.

~TJ

Received on Friday, 3 September 2010 22:54:46 UTC