196124 - text decorations extend into indent space

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Andrew Rendle]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.3b) Gecko/20030210
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.3b) Gecko/20030210

In the example given at the url above, when text is indented and underlined
using CSS, the underlining appears under the space for the indent as well as
under the text.  It should only appear under the text.  The same thing happens
with text-decoration set to line-through and overline.

Reproducible: Always

Steps to Reproduce:
1. Make a page with some text indented using text-indent in the style sheet.
2. Add a text-decoration setting of overline, underline or line-through to that
text.
3. Load the page created.

Actual Results:  
The space for the indent has the text-decoration applied to it.

Expected Results:  
The text-decoration should only apply to tghe text itself.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Actually, this is an interesting question.  What _should_ text-decoration on a
block do in this sitation, per spec?

Comment 2

[Andrew Rendle]

"[text-decoration] describes decorations that are added to the text of an
element" (http://www.w3.org/TR/REC-CSS2/text.html#lining-striking-props) and
"user agents should render this indentation as blank space"
(http://www.w3.org/TR/REC-CSS2/text.html#indentation-prop) are the most relevent
bits of the spec I can see.  These suggest, IMHO, that the space should not have
the decoration added.
Also, I don't think the space had decorations prior to Mozilla 1.3b, if that
makes a difference.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Yeah, see bug 1777.  Our old text-decoration drawing had nothing whatsoever to
do with the spec in any case.

The question remains -- what should text-decoration on a _block_ do?

(Note that accounting for text-indent in nsBlockFrame::PaintTextDecorationLines
shouldn't really be that hard....)

Comment 4

[Andrew Rendle]

Quoteth the CSS2 spec:
"This property describes decorations that are added to the text of an element.
If the property is specified for a block-level element, it affects all
inline-level descendants of the element. If it is specified for (or affects) an
inline-level element, it affects all boxes generated by the element. If the
element has no content or no text content (e.g., the IMG element in HTML), user
agents must ignore this property."
(http://www.w3.org/TR/REC-CSS2/text.html#lining-striking-props)
So, the decoration does not apply to the block itself, but to all inline boxes
within that block.
As I understand it (and I will confess that CSS formatting model makes my head
hurt a bit,) text directly in a block-level element is placed within an
anonymous inline box. (Based on http://www.w3.org/TR/REC-CSS2/visuren.html#q7)
Quoteth the spec again:
"[text-indent] specifies the indentation of the first box that flows into the
block's first line box. The box is indented with respect to the left (or right,
for right-to-left layout) edge of the line box. User agents should render this
indentation as blank space."
So, if I'm reading the spec correctly, the text is in a box to which the text
decoration is applied, and that box is indented from the edge of the block, and
the decoration is not applied to the block itself.
That is, spec says that text-decoration shouldn't apply to the space for the
indent (if I'm interpreting the spec right.)

Comment 5

[Boris Zbarsky [:bzbarsky]]

Yeah, but the text below that says that the decoration is applied to the
_line_boxes_, not the inline boxes inside the line boxes (and in fact in Mozilla
the decoration is drawn on the line boxes, hence this behavior...)

Comment 6

[Andrew Rendle]

I might be being stupid here, but I can't see where it says that.

Comment 7

[Boris Zbarsky [:bzbarsky]]

"This property is not inherited, but descendant boxes of a block box should be
formatted with the same decoration (e.g., they should all be underlined)."

So does that include the line boxes?

I think we all agree that Mozilla's behavior needs to change; the question is,
in what direction and what is the spec really saying?

Comment 8

[Andrew Rendle]

Ahh yes.  I was thinking the line box was block-level, and then reading the spec
as the decoration just being passed on to the inline elements within it.  I
suppose I was taking block box as being roughly synonymous with block-level
element.  Like I said, the CSS formatting model has a tendency to make my head
hurt :-/
I'm not sure exactly what the spec is saying should be done, but IMHO the Right
Thing To Do (tm) is not have the decoration on the indent space (just in case it
wasn't obvious yet what I think ;-)

Comment 9

[rlanday]

Attachment: Set 50 pixel indent and underlined text on body and put filler text in.

Could not reproduce bug in build Mozilla/5.0 (Macintosh; U; PPC Mac OS X
Mach-O; en-US; rv:1.7.3) Gecko/20040919 Firefox/0.10.

Comment 10

[rlanday]

Comment on attachment 159413 [details]
Set 50 pixel indent and underlined text on body and put filler text in.

Can reproduce bug in build Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O;
en-US; rv:1.7.3) Gecko/20040919 Firefox/0.10. I was looking at Dreamweaver
preview window (oops!)

Comment 11

[Anne (:annevk)]

Ian: could you clarify what should happen?

Comment 12

[Hixie (not reading bugmail)]

This property describes decorations that are added to the text of an element
using the element's color. When specified on an inline element, it affects all
the boxes generated by that element; for all other elements, the decorations are
propagated to an anonymous inline box that wraps all the in-flow inline children
of the element, and to any block-level in-flow descendants. It is not, however,
further propagated to floating and absolutely positioned descendants, nor to the
contents of 'inline-table' and 'inline-block' descendants.

If an element contains no text (ignoring white space in elements that have
'white-space' set to 'normal', 'pre-line', or 'no-wrap'), user agents must
refrain from rendering text decorations on the element. For example, elements
containing only images and collapsed white space will not be underlined.

Text decorations on inline boxes are drawn across the entire element, going
across any descendant elements without paying any attention to their presence.
The 'text-decoration' property on descendant elements cannot have any effect on
the decoration of the element. In determining the position of and thickness of
text decoration lines, user agents may consider the font sizes of and dominant
baselines of descendants, but must use the same baseline and thickness on each line.

The color(s) required for the text decoration must be derived from the 'color'
property value of the element on which 'text-decoration' is set. The color of
decorations should remain the same even if descendant elements have different
'color' values.

Does that answer your question?

Comment 13

[Anne (:annevk)]

I guess. For this situation we seem to be doing the right thing then. I would
have to test how we handle floating children, position:absolute children,
white-space, inline-block and inline-table (when those are getting implemented)
in combination with text-decoration.

Marking WORKSFORME, using Gecko/20050220 on WinXP. (This is a bug in Firefox 1.0.)

Comment 14

[Boris Zbarsky [:bzbarsky]]

Actually, we know what fixed it...

Comment 15

[Boris Zbarsky [:bzbarsky]]

Fixed by checkin for bug 263374