From f3faf024b3da215f4621f81f541bd6eea0252afc Mon Sep 17 00:00:00 2001
From: Timo Tijhof <krinkle@fastmail.com>
Date: Mon, 1 Jul 2024 22:49:30 +0100
Subject: [PATCH] HTML Reporter: Change `#qunit-testresult` from P to DIV

The previous DOM structure was impossible to represent in an HTML
string, which meant that systems like TestSwarm that serialize the
page and save or transfer it elsewhere, will end up with a corruption
when that same page is then retrieved and rendered again later, because
the element will be implicitly closed by the first DIV child.

The paragraph was already styled with `margin/padding: 0`, so this
makes no visual difference.

The Theme API has only been documented since yesterday during the
QUnit 3.0 dev cycle. Given this wasn't documented before, any change
is considered a breaking change and thus part of QUnit 3.0.

Going forward, the Theme API documents the selector for this by ID
only, not by tag name. That documentation was written based on how
most themes seem to style it, hence this is not likely to break
themes in practice.

Fixes https://github.com/qunitjs/qunit/issues/1301.
---
 docs/browser.md               | 22 +++++++++++++++++++++-
 src/reporters/HtmlReporter.js |  2 +-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/docs/browser.md b/docs/browser.md
index 290c49ce0..f1f1305eb 100644
--- a/docs/browser.md
+++ b/docs/browser.md
@@ -184,17 +184,37 @@ For failed assertions, the parenthical reports the failed, passed, and total num
 
 The HTML Reporter populates the `<div id="qunit">` element with the following structure:
 
+QUnit 1.x, 2.x:
+
 ```html
 <div id="qunit">
   <h1 id="qunit-header">…</h1>
   <h2 id="qunit-banner"></h2>
   <div id="qunit-testrunner-toolbar">…</div>
-  <h2 id="qunit-userAgent">¬</h2>
+  <h2 id="qunit-userAgent">…</h2>
   <p id="qunit-testresult">…</p>
   <ol id="qunit-tests"></ol>
 </div>
 ```
 
+<details markdown="1">
+<summary>As of QUnit 3.0</summary>
+
+```html
+<div id="qunit">
+  <h1 id="qunit-header">…</h1>
+  <h2 id="qunit-banner"></h2>
+  <div id="qunit-testrunner-toolbar">…</div>
+  <h2 id="qunit-userAgent">…</h2>
+  <div id="qunit-testresult">…</div>
+  <ol id="qunit-tests"></ol>
+</div>
+```
+
+</details>
+
+-----
+
 You can style these to create your own theme, or add custom styles to the default theme.
 
 Examples: [Theme plugins](./plugins.md)
diff --git a/src/reporters/HtmlReporter.js b/src/reporters/HtmlReporter.js
index ea8be4d13..c8208bcf5 100644
--- a/src/reporters/HtmlReporter.js
+++ b/src/reporters/HtmlReporter.js
@@ -608,7 +608,7 @@ export default class HtmlReporter {
 
     if (tests) {
       tests.innerHTML = '';
-      result = document.createElement('p');
+      result = document.createElement('div');
       result.id = 'qunit-testresult';
       result.className = 'result';
       tests.parentNode.insertBefore(result, tests);