-
Notifications
You must be signed in to change notification settings - Fork 783
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
appendTestResults() creates DOM that is invalid HTML if serialised #1301
Comments
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! |
Easy to fix, but will do in 3.0 in case any plugins depend on this. |
I've addressed this as part of a draft for the QUnit 3.0 theme, at https://github.com/Krinkle/qunit/tree/qunit3-theme:
|
This version still works fine with older versions of QUnit as well, but it now handles better the changes to the module filter buttons in QUnit 2.18.2. Also fix a few old alignment bugs, and make it not pointer-cursor hover the unclickable `<strong>` element for test source URL. This style was intended for the (clickable) test name, which happens to also be in a `<strong>` element. Not great, to be improved in QUnit 3 with new HTML Reporter structure. Ref qunitjs/qunit#1301.
Tell us about your runtime:
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.
The text was updated successfully, but these errors were encountered: