1757764 - innerHTML assigns a <p>with inner tags incorrectly

Status: RESOLVED INVALID

(Core :: DOM: Core & HTML, defect)

Description

[g.maslov]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0

Steps to reproduce:

In the firefox developer console

let myshit=document.createElement('p')

let somestr="<p> <span class="aaa"></span> <span class="bbb"><div>uuuu</div><div>iiiiii<br></div></span> <span class="ccc"></span> </p>"

myshit.innerHTML=somestr
"<p> <span class="aaa"></span> <span class="bbb"><div>uuuu</div><div>iiiiii<br></div></span> <span class="ccc"></span> </p>"

myshit.innerHTML
"<p> <span class="aaa"></span> <span class="bbb"></span></p><div>uuuu</div><div>iiiiii<br></div> <span class="ccc"></span> <p></p>"

Actual results:

Somehow <p> is screwed up with innerHTML

"<p> <span class="aaa"></span> <span class="bbb"></span></p><div>uuuu</div><div>iiiiii<br></div> <span class="ccc"></span> <p></p>"

Expected results:

"<p> <span class="aaa"></span> <span class="bbb"><div>uuuu</div><div>iiiiii<br></div></span> <span class="ccc"></span> </p>"

Comment 1

[Hani Yacoub, Desktop QA]

Could you please provide a test case in order to reproduce the issue? I'm not sure how could I use the one from the description in the developer console.
Thanks.

Comment 2

[g.maslov]

HI, it's pretty basic

1. Use the provided test string in a javascript or in the console.

teststring = '<p> <span class="aaa"></span> <span class="bbb"><div>uuuu</div><div>iiiiii<br></div></span> <span class="ccc"></span> </p>'

2. the following code and the assertion fails

   myElement = document.createElement('p');
   myElement.innerHtml = teststing;
   console.assert(myElement.innferHTML == teststring, "found a bug:"+myElement.innerHtml);

In particular you can notice that the <p> tag is inserted incorrectly twice

The same example with a div tag works

teststring = '<div> <span class="aaa"></span> <span class="bbb"><div>uuuu</div><div>iiiiii<br></div></span> <span class="ccc"></span> </div>'

Comment 3

[Emilio Cobos Álvarez [:emilio]]

This also happens in Chromium, it's how the html parser works, it closes <p>s when opening other blocks like <div>. I think this is invalid.

Comment 4

[g.maslov]

This is from the <p> spec

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

The start tag is required. The end tag may be omitted if the <p> element is immediately followed by an <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> or another <p> element, or if there is no more content in the parent element and the parent element is not an <a> element.

<span> is not in the list, or am I missing something?

Comment 5

[Olli Pettay [:smaug][[e-mail]]]

https://html.spec.whatwg.org/#closing-elements-that-have-implied-end-tags
and the text using that spec algorithm can be useful.