appendTestResults() creates DOM that is invalid HTML if serialised

[kjax]

Tell us about your runtime:

• QUnit version: 2.6.1
• What environment are you running QUnit in? (e.g., browser, Node): Browser
• How are you running QUnit? (e.g., script, testem, Grunt): grunt

What are you trying to do?

If the contents of "#qunit" is extracted with innerHTML and written to a HTML file, the resultant HTML is invalid. This is because "#qunit-testresult" is created as a "p" and its innerHTML is filled with several "divs" like "#qunit-testresult-display" and "#qunit-testresult-controls".

The problem is that a "div" element is not valid content of a "p". In fact the HTML spec states that a "p" followed by a "div" should assume that the end tag of the "p" has been omitted.

The result of parsing <p id=qunit-testresult"><div id=qunit-testresult-display /></p> is an empty "p" element with the "divs" as siblings. This breaks any CSS used to format this section.

The fix is to make "#qunit-testresult" a "div" instead.

[Krinkle]

Thanks for reporting. I've reproduced it in a small test case at CodePen: https://codepen.io/Krinkle/pen/zywGYE.

While I'm familiar with this behaviour for other elements in the HTML spec (such as list items and tables), I was surprised to see it apply to well-balanced elements like this. I know that for anchor tags, for example, the spec was updated to match reality (that is, they are allowed to span block elements).

Looks like we should get this fixed!

[mgol]

I hit this issue when migrating the jQuery repository from QUnit 1 to 2. Not a very big deal but it messes up formatting of the tests results header a little.

[Krinkle]

Easy to fix, but will do in 3.0 in case any plugins depend on this.

[Krinkle]

I've addressed this as part of a draft for the QUnit 3.0 theme, at https://github.com/Krinkle/qunit/tree/qunit3-theme:

• Previously, the #qunit-testresult element was a P with a DIV child
  of #qunit-testresult-display. This element nesting has been reversed,
  to be less strange. The testresult is now a DIV, and the display child
  is now a P.