509312 - Parsing bug: nesting <section> inside <a> causes DOM rearranging

Status: RESOLVED WONTFIX

(Firefox :: General, defect)

Description

[Remy Sharp]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-GB; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-GB; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2

It's valid HTML 5 to put any non-interactive element inside of a link.  So I can how wrap a link around an h1 and h2 together.

In Firefox (and Minefield) this works fine, until you nest a section element inside an a element.  If you use this markup, Firefox's parser rearranges the DOM breaking DOM layout the author intended (the result is similar to the Gecko bug where it couldn't parse unknown elements).

Reproducible: Always

Steps to Reproduce:
1. Nest a section element within an a element, eg:

<a href="#">
 <section>
  <p>p nested in a section wrapped in a link</p>
 </section>
</a>

Actual Results:  
Firefox rearranges the DOM as follows (from the above example):

<a href="#">
 <section></section>
</a>
<p>
 <a href="#">p nested in a section wrapped in a link</a>
</p>
<a href="#"></a>

It also closes an open elements upon encountering the section element (in the live example: http://jsbin.com/upiza - you'll see the article element has also been closesd).

Expected Results:  
It shouldn't rearrange the DOM and try to correct DOM.  

Using Minefield and html5.enable set to true, the parser correctly renders the layout.

Comment 1

[Remy Sharp]

I should add that I've just noticed this same bug happening when I nest a heading inside the link.  I'd say it was when the parser was coming across block elements, but it doesn't appear to trigger when it comes across a div, so it seems to be something else...

Comment 2

[Anatoly]

I have the same problem with 3.6.2 on windows. If some block level element is nest inside a link, dom model is wrong, but if we will take a look at html source it will be correct every time.

This is source copied from firebug

<a href="http://localhost/gallery-list?modal=true&amp;region=col2-1&amp;view=details&amp;imageId=8b96eef0-1935-468a-9863-0c5424347a12" target="_blank" class="imageGalleryListThumbnail">
	<div class="boxContainer imageGalleryListThumbnailBorder">
		<div class="boxCorner boxCornerTopLeft"></div>
		<div class="boxCorner boxCornerTopRight"></div>
		<div class="boxCorner boxCornerBottomRight"></div>
		<div class="boxCorner boxCornerBottomLeft"></div>
		<div class="boxTop"></div>
		<div class="boxBottom"></div>
		<div class="boxLeft"></div>
		<div class="boxRight"></div>
		<img src="http://localhost/SpacesStore/e8b04046-5485-44a9-b35b-ccd35b029045/test-img2-005-120x90?a=true" style="margin-top: -45px; margin-left: -60px;" alt="">
	</div>
</a>
<a href="http://localhost/gallery-list?modal=true&amp;region=col2-1&amp;view=details&amp;imageId=b2e3e5f6-f12d-4b4d-95a6-bdd89cc2dced" target="_blank" class="imageGalleryListThumbnail">
	</a><div class="boxContainer imageGalleryListThumbnailBorder">
<a href="http://localhost/gallery-list?modal=true&amp;region=col2-1&amp;view=details&amp;imageId=b2e3e5f6-f12d-4b4d-95a6-bdd89cc2dced" target="_blank" class="imageGalleryListThumbnail">									</a><div class="boxCorner boxCornerTopLeft"></div>
<a href="http://localhost/gallery-list?modal=true&amp;region=col2-1&amp;view=details&amp;imageId=b2e3e5f6-f12d-4b4d-95a6-bdd89cc2dced" target="_blank" class="imageGalleryListThumbnail">									</a><div class="boxCorner boxCornerTopRight"></div>
<a href="http://localhost/gallery-list?modal=true&amp;region=col2-1&amp;view=details&amp;imageId=b2e3e5f6-f12d-4b4d-95a6-bdd89cc2dced" target="_blank" class="imageGalleryListThumbnail">									</a><div class="boxCorner boxCornerBottomRight"></div>
<a href="http://localhost/gallery-list?modal=true&amp;region=col2-1&amp;view=details&amp;imageId=b2e3e5f6-f12d-4b4d-95a6-bdd89cc2dced" target="_blank" class="imageGalleryListThumbnail">									</a><div class="boxCorner boxCornerBottomLeft"></div>
<a href="http://localhost/gallery-list?modal=true&amp;region=col2-1&amp;view=details&amp;imageId=b2e3e5f6-f12d-4b4d-95a6-bdd89cc2dced" target="_blank" class="imageGalleryListThumbnail">									</a><div class="boxTop"></div>
<a href="http://localhost/gallery-list?modal=true&amp;region=col2-1&amp;view=details&amp;imageId=b2e3e5f6-f12d-4b4d-95a6-bdd89cc2dced" target="_blank" class="imageGalleryListThumbnail">									</a><div class="boxBottom"></div>
<a href="http://localhost/gallery-list?modal=true&amp;region=col2-1&amp;view=details&amp;imageId=b2e3e5f6-f12d-4b4d-95a6-bdd89cc2dced" target="_blank" class="imageGalleryListThumbnail">									</a><div class="boxLeft"></div>
<a href="http://localhost/gallery-list?modal=true&amp;region=col2-1&amp;view=details&amp;imageId=b2e3e5f6-f12d-4b4d-95a6-bdd89cc2dced" target="_blank" class="imageGalleryListThumbnail">									</a><div class="boxRight"></div>
<a href="http://localhost/gallery-list?modal=true&amp;region=col2-1&amp;view=details&amp;imageId=b2e3e5f6-f12d-4b4d-95a6-bdd89cc2dced" target="_blank" class="imageGalleryListThumbnail">									<img src="http://localhost/SpacesStore/db37b6f1-dcfe-4f26-a482-6191112261f0/test-img2-009-120x90?a=true" style="margin-top: -45px; margin-left: -60px;" alt="">
</a></div>
<a href="http://localhost/gallery-list?modal=true&amp;region=col2-1&amp;view=details&amp;imageId=b2e3e5f6-f12d-4b4d-95a6-bdd89cc2dced" target="_blank" class="imageGalleryListThumbnail">							</a>

This is standart view source:

<a href="http://localhost/gallery-list?modal=true&amp;region=col2-1&amp;view=details&amp;imageId=7aa9a559-485e-4de9-96bc-7dd9c8c29952" target="_blank" class="imageGalleryListThumbnail">
<div class="boxContainer imageGalleryListThumbnailBorder">
	<div class="boxCorner boxCornerTopLeft"></div>
	<div class="boxCorner boxCornerTopRight"></div>
	<div class="boxCorner boxCornerBottomRight"></div>
	<div class="boxCorner boxCornerBottomLeft"></div>
	<div class="boxTop"></div>

	<div class="boxBottom"></div>
	<div class="boxLeft"></div>
	<div class="boxRight"></div>
	<img src="http://localhost/SpacesStore/52bc2b1d-1da6-419f-927b-5a0e59cd5b9d/test-img2-008-120x90?a=true" style="margin-top: -45px; margin-left: -60px;" alt=""/>
</div>
</a>
<a href="http://localhost/gallery-list?modal=true&amp;region=col2-1&amp;view=details&amp;imageId=8b96eef0-1935-468a-9863-0c5424347a12" target="_blank" class="imageGalleryListThumbnail">
<div class="boxContainer imageGalleryListThumbnailBorder">
	<div class="boxCorner boxCornerTopLeft"></div>

	<div class="boxCorner boxCornerTopRight"></div>
	<div class="boxCorner boxCornerBottomRight"></div>
	<div class="boxCorner boxCornerBottomLeft"></div>
	<div class="boxTop"></div>
	<div class="boxBottom"></div>
	<div class="boxLeft"></div>
	<div class="boxRight"></div>
	<img src="http://localhost/SpacesStore/e8b04046-5485-44a9-b35b-ccd35b029045/test-img2-005-120x90?a=true" style="margin-top: -45px; margin-left: -60px;" alt=""/>
</div>

</a>

Comment 3

[Daniel.S]

Firefox 4 includes an HTML5 compatible parser, the "old" parser won't be fixed.

Block elements inside anchors only sometimes work due to bug 324875.