505243 - When text-shadow and underline used together, shadow is displayed over underline breaking it up.

Status: RESOLVED FIXED

(Core :: Layout: Text and Fonts, defect)

Description

[Morel Xavier]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en; rv:1.9.0.12pre) Gecko/2009070300 Camino/2.0b4pre (like Firefox/3.0.12pre)
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1.1) Gecko/20090715 Firefox/3.5.1

In strict mode, applying both text-shadow and underline on a piece of text results in an incorrect display of the underline (appears under shadow).

Reproducible: Always

Steps to Reproduce:
1. Apply text-shadow to text
2. Apply underline to same text (directly on the same element or through another parent element)
3. Ensure page is in strit mode
Actual Results:  
text-shadow is displayed over underline, breaking the latter into small parts

Expected Results:  
Text-shadow displayed under the underline

Bug is present in strict mode, but not in quirks mode

Comment 1

[Morel Xavier]

Attachment: shadow + underline, quirks mode; no bug

Comment 2

[Morel Xavier]

Attachment: shadow + underline, strict mode; incorrect rendering

Comment 3

[Ria Klaassen (not reading all bugmail)]

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.1pre) Gecko/20090718 Shiretoko/3.5.1pre

I see no difference on Windows Vista with default settings but I can reproduce it if I change the font to Verdana.

Comment 4

[Morel Xavier]

> I see no difference on Windows Vista with default settings

Ah indeed I don't see them either on my Windows machine, it seems the 3px Y-coordinate lands the underline right under the shadow letters. Uploading new testcases with a Y-coordinate of 0.5em to ensure the underline and the shadow absolutely intersect.

Comment 5

[Morel Xavier]

Attachment: shadow + underline, quirks mode; no bug

Previous testcase had a Y-coordinate of 3px on the text-shadow, making the shadow end up above the underline (and therefore not demonstrating the bug) on some platform, depending on the default font and size.

Comment 6

[Morel Xavier]

Attachment: shadow + underline, strict mode; incorrect rendering

Previous testcase had a Y-coordinate of 3px on the text-shadow, making the shadow end up above the underline (and therefore not demonstrating the bug) on some platform, depending on the default font and size.

Comment 7

[Jim Battle]

I'll add this sampling of browser behavior, all on Win XP SP3:

FF 3.6.3:
    quirks mode=text shadow behind underline
    strict mode=text shadow in front of underline

Opera 10.51:
    quirks mode=text shadow behind underline
    strict mode=text shadow behind underline

Chrome 4.1.249.1045:
    quirks mode=text shadow behind underline
    strict mode=text shadow in front of underline

Safari 4.0.4:
    quirks mode=text shadow behind underline
    strict mode=text shadow in front of underline

Not knowing the spec I don't know what is correct, but Opera is the only one which renders what I would consider the intuitive and useful thing in strict mode.

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Probably fixing bug 403524 will fix this.  (There's a long story there, but I don't have time to tell it right now.)

Comment 9

[Vitor Menezes]

Patch for bug 403524 merges the text-decoration codepath for all modes, resolving this bug as well.