286048 - Left-floating anchor elements with nested divs behave weirdly depending on size of HTML file

Status: RESOLVED DUPLICATE of bug 324875

(Core :: Layout: Floats, defect)

Description

[Timwi]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1 StumbleUpon/1.9992
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1 StumbleUpon/1.9992

I will attach a test case in a moment. This is an HTML which consists of:
1) a small CSS declaration at the top
2) a big HTML comment with loads of x's in it
3) 10 identical(!) copies of an <a> element with two identical <div>s in each.

AT MOST ONE of the 10 <a> elements is displayed as if the two divs were in
separate <a>s, but they're not. The other 9 elements, or sometimes all 10, are
displayed correctly. Reloading the exact same file sometimes switches between
correct and incorrect display.

WHICH ONE of the 10 elements is displayed incorrectly, and in what proportion of
successive reloads there is an incorrect element at all, depends on the CSS
declaration, the size of the HTML comment with the x's, the use of whitespace in
the file, whether or not the file is loaded as a local file or via an Apache
server, and the phases of the moon.

Reproducible: Sometimes

Steps to Reproduce:

Comment 1

[Timwi]

Attachment: Test case

This is the test case. Remember that I said that it does not always trigger the
bug. Loading it here in BugZilla may not trigger the bug (I can't try that
before uploading it). If this does not trigger it, please download the file and
place it into the document root of an Apache server running on your localhost.
This is assuming the bug does not depend on the humidity of the air you are
breathing.

Comment 2

[Timwi]

Attachment: Test case - screenshot

*sigh* Of course the attachment didn't trigger the bug, just as I expected.

So I'm attaching here a screenshot of what the test case displays like for me,
when I view the file through a local installation of Apache.

One subtle detail about my original bugreport was inaccurate. I said that the
element that is rendered incorrectly renders as two elements. Actually, it
renders as five elements, only two of which contain text. You can see the
little 2x2-pixel blobs in the screenshot which are empty left-floating divs
with a 1px red border.

Comment 3

[Timwi]

Attachment: Test case - screenshot (2)

Same test case, same situation, but smaller window size. Notice how the first
of the five "wrong" elements is in the first row, the other 4 in the second.

Comment 4

[j.j.]

Hallo!
This is invalid HTML, you know?

<a class='test_case'>
 <div>
   Some text
 </div>
 <div>
   Some text
 </div>
</a>

(Inline-element a must not contain block-element div)

tschüs, jürgen

Comment 5

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

That it's invalid HTML is not relevant to the bug.  If a layout bug shows up
with invalid HTML it probably shows up with valid HTML too.

Comment 6

[Ben Fowler]

Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8b2) Gecko/20050227
Firefox/1.0+

Thank you for the report. I can't reproduce from

1) Bugzilla
2) file
3) local Apache Server

Any other hints?

Comment 7

[Timwi]

I don't know if this helps, but I've just discovered something interesting. When
the bug does occur, and then I use File/Save Page As, and I choose "Web page,
complete", then the file is significantly changed in such a way that the deviant
display could be regarded as correct.

Notice that it still affects only ONE of the ten <a>s-with-<div>s, even though
they are all identical. Again, WHICH one of the ten is affected depends, among
other things, on the HTML comment in the file as well as the amount of whitespace.

The original version is:
            <a class="test_case">
                <div>
                    Some text
                </div>
                <div>
                    Some text
                </div>
            </a>

The version modified by File/Save Page As is:
            <a class="test_case">
                </a><div>
<a class="test_case">                    Some text
                </a></div>
<a class="test_case">                </a><div>
<a class="test_case">                    Some text
                </a></div>
<a class="test_case">            </a>

Kind of makes sense if it's trying to somehow transform it into valid HTML.
Also, it now becomes obvious why there are five floating elements, two of which
contain text. But it's still bizarre that it does that to only one of the ten
identical elements.

Comment 8

[Boris Zbarsky [:bzbarsky]]

Would be good to have a testcase that reliably shows the problem....

Comment 9

[Martijn Wargers (dead)]

Attachment: testcase2

Using <script></script> in the divs makes the bug appear reliably.
I think this is a duplicate of bug 273543.

Comment 10

[Boris Zbarsky [:bzbarsky]]

Yeah, almost certainly.

Comment 11

[Daniel.S]

Boris is right, but I'm duping this to bug 324875 because that's the bug that's about fixing this issue.