<font> tag is improperly replicated to contents introduced with document.write

RESOLVED FIXED

Status

()

RESOLVED FIXED
10 years ago
9 years ago

People

(Reporter: garth, Unassigned)

Tracking

({testcase})

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [fixed by the HTML5 parser])

Attachments

(1 attachment)

(Reporter)

Description

10 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1a2pre) Gecko/2008080403 Minefield/3.1a2pre

I'm guessing that this is really a more general problem with best-effort rendering of HTML that contains block-level elements within in-line elements. Even though the HTML is invalid, the problem is common and could still be handled better.

In the example below, Firefox replicates the <font> tag in an apparent effort to conform to the author's intent. However, because the tag replication is placed adjacent to the text, it contradicts explicit style settings on the <div> around the text. The short HTML document below summarizes the problem.

Reproducible: Always

Steps to Reproduce:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
    <body>
        <div style="color: #008080;">Should be green; is green</div>
        <font color="#ff0000">
			<script type="text/javascript">
				document.write('<div style="color: #008080;">Should be green; is red</div>');
            </script>
        </font>
    </body>
</html>
Actual Results:  
From Web Developer -> View Generated Source:

<html>
    <head></head>
    <body>
        <div style="color: rgb(0, 128, 128);">Should be green; is green</div>
        <font color="#ff0000">
			<script type="text/javascript">
				document.write('<div style="color: #008080;">Should be green; is red</div>');
			</script>
        </font>
        <div style="color: rgb(0, 128, 128);"><font color="#ff0000">Should be green; is red</font></div>
        <font color="#ff0000"> </font>
    </body>
</html>


Expected Results:  
I would expect <div style="color: #008080;">Green</div> to always render as green text regardless of any enclosing <font>, legitimately nested or not.

As a fixup for bad HTML of this type, would it not make more sense to convert the <font> tag to a <div> with style attributes? Then there would be no need to mechanically replicate the tag, and the CSS hierarchy would be more accurately preserved.

Not sure if this happened in FF2, but it happens in both 3.0.1 and 3.1a2pre.

Updated

10 years ago
Component: General → HTML: Parser
Keywords: testcase
Product: Firefox → Core
QA Contact: general → parser

Comment 1

10 years ago
Created attachment 332318 [details]
testcase

Comment 2

10 years ago
Looks like the same issue as bug 432099.  Isn't block-in-inline (aka residual style) parsing fun?
This is either a dupe or depends on the HTML5 parsing bug. The reason for the apparent inconsistency here is that the parser actually tries to avoid activating residual style handling in cases where it "knows" that the tags are nested correctly (e.g. <b><div>foo</div></b>). The problem is that the <script> forces us to process the tags before we know that they're nested, so you consistently get RS handling.

For a concrete example of this, look at the DOMs of the two testscases:
  <b><div>foo<script></script></div></b>
  <b><div>foo</div></b>

Updated

10 years ago
Depends on: 373864
Status: UNCONFIRMED → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → FIXED
Whiteboard: [fixed by the HTML5 parser]
You need to log in before you can comment on or make changes to this bug.