fix(runtime): close body before </html> not after, to avoid crossed tags

hqhq1025 · hqhq1025 · commit 3f48024ef0f9 · 2026-04-19T16:20:53.000+08:00
diff --git a/packages/runtime/src/index.test.ts b/packages/runtime/src/index.test.ts
@@ -115,6 +115,44 @@ describe('buildSrcdoc', () => {
       expect(bodyOpen).toBeLessThan(contentIdx);
     });
 
+    it('shape 2 with </html>: inserts </body> BEFORE </html>, not after', () => {
+      const html = '<html><head></head><body><p>open only</p></html>';
+      const out = buildSrcdoc(html);
+      const bodyClose = out.indexOf('</body>');
+      const htmlClose = out.indexOf('</html>');
+      expect(bodyClose).toBeGreaterThanOrEqual(0);
+      expect(htmlClose).toBeGreaterThan(bodyClose);
+      expect(out).not.toMatch(/<\/html\s*>[\s\S]*<\/body\s*>/i);
+    });
+
+    it('shape 4 with <html>...</html> shell: <body> after <html>, </body> before </html>', () => {
+      const html = '<html><p>shell only</p></html>';
+      const out = buildSrcdoc(html);
+      const htmlOpen = out.search(/<html[^>]*>/i);
+      const bodyOpen = out.search(BODY_OPEN_RE);
+      const content = out.indexOf('<p>shell only</p>');
+      const bodyClose = out.indexOf('</body>');
+      const htmlClose = out.indexOf('</html>');
+      expect(htmlOpen).toBeLessThan(bodyOpen);
+      expect(bodyOpen).toBeLessThan(content);
+      expect(content).toBeLessThan(bodyClose);
+      expect(bodyClose).toBeLessThan(htmlClose);
+    });
+
+    it('shape 4 with </head> + </html>: <body> after </head>, </body> before </html>', () => {
+      const html = '<html><head><title>t</title></head><p>x</p></html>';
+      const out = buildSrcdoc(html);
+      const headClose = out.indexOf('</head>');
+      const bodyOpen = out.search(BODY_OPEN_RE);
+      const content = out.indexOf('<p>x</p>');
+      const bodyClose = out.indexOf('</body>');
+      const htmlClose = out.indexOf('</html>');
+      expect(headClose).toBeLessThan(bodyOpen);
+      expect(bodyOpen).toBeLessThan(content);
+      expect(content).toBeLessThan(bodyClose);
+      expect(bodyClose).toBeLessThan(htmlClose);
+    });
+
     it('shape 4: wraps content in <body>...</body> when neither tag is present', () => {
       const out = buildSrcdoc('<div>none</div>');
       expect(out).toContain('<body>');
diff --git a/packages/runtime/src/index.ts b/packages/runtime/src/index.ts
@@ -27,15 +27,19 @@ const BODY_CLOSE_RE = /<\/body\s*>/i;
  * baseline/overlay injection can rely on them. Handles all four input
  * shapes: both tags, opener only, closer only, neither.
  */
+function closeBody(html: string): string {
+  return /<\/html\s*>/i.test(html)
+    ? html.replace(/<\/html\s*>/i, '</body></html>')
+    : `${html}</body>`;
+}
+
 function normalizeBodyTags(html: string): string {
   const hasOpen = BODY_OPEN_RE.test(html);
   const hasClose = BODY_CLOSE_RE.test(html);
 
   if (hasOpen && hasClose) return html;
 
-  if (hasOpen && !hasClose) {
-    return `${html}</body>`;
-  }
+  if (hasOpen && !hasClose) return closeBody(html);
 
   if (!hasOpen && hasClose) {
     if (HEAD_CLOSE_RE.test(html)) {
@@ -48,12 +52,8 @@ function normalizeBodyTags(html: string): string {
   }
 
   // Neither opener nor closer.
-  if (HEAD_CLOSE_RE.test(html)) {
-    return `${html.replace(HEAD_CLOSE_RE, (m) => `${m}<body>`)}</body>`;
-  }
-  if (HTML_RE.test(html)) {
-    return `${html.replace(HTML_RE, (m) => `${m}<body>`)}</body>`;
-  }
+  if (HEAD_CLOSE_RE.test(html)) return closeBody(html.replace(HEAD_CLOSE_RE, (m) => `${m}<body>`));
+  if (HTML_RE.test(html)) return closeBody(html.replace(HTML_RE, (m) => `${m}<body>`));
   return `<body>${html}</body>`;
 }
 
