@tkeron/html-parser 1.4.0 → 1.5.0

package/README.md

@@ -9,8 +9,9 @@ A fast and lightweight HTML parser for Bun that converts HTML strings into DOM D
 - 🪶 **Lightweight**: Zero external dependencies
 - 🌐 **Standards Compliant**: Returns standard DOM Document objects
 - 🔧 **TypeScript Support**: Full TypeScript definitions included
-- ✅ **Well Tested**: Comprehensive test suite (5600+ tests passing)
+- ✅ **Well Tested**: Comprehensive test suite (5660+ tests passing)
 - 🎯 **HTML5 Spec**: Implements Adoption Agency Algorithm for proper formatting element handling
+- 🧩 **Fragment Parsing**: Parse HTML fragments with context element support
 
 ## Installation
 
@@ -76,6 +77,28 @@ Parses an HTML string and returns a DOM Document object.
 
 - `Document`: A standard DOM Document object with all the usual methods like `querySelector`, `getElementById`, etc.
 
+### `parseHTMLFragment(html: string, contextTagName: string): Node[]`
+
+Parses an HTML string as a fragment within a context element. Useful for parsing innerHTML-style content.
+
+**Parameters:**
+
+- `html` (string): The HTML string to parse
+- `contextTagName` (string): The tag name of the context element (e.g., `"div"`, `"body"`)
+
+**Returns:**
+
+- `Node[]`: An array of parsed nodes
+
+**Example:**
+
+```typescript
+import { parseHTMLFragment } from "@tkeron/html-parser";
+
+const nodes = parseHTMLFragment("<b>Hello</b> <i>World</i>", "div");
+console.log(nodes.length); // 3 (b element, text node, i element)
+```
+
 ## Development
 
 This project is built with Bun. To get started:

package/index.ts

@@ -1,13 +1,17 @@
 import { tokenize } from "./src/tokenizer/index.js";
-import { parse } from "./src/parser/index.js";
+import { parse, parseFragment } from "./src/parser/index.js";
 import { astToDOM } from "./src/dom-simulator.js";
 
 export function parseHTML(html: string = ""): Document {
   const tokens = tokenize(html);
   const ast = parse(tokens);
-  // If parse already returns a DOM document, return it directly
   if (ast && typeof ast.nodeType === "number" && ast.nodeType === 9) {
     return ast;
   }
   return astToDOM(ast);
 }
+
+export function parseHTMLFragment(html: string, contextTagName: string): any[] {
+  const tokens = tokenize(html);
+  return parseFragment(tokens, contextTagName);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tkeron/html-parser",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A fast and lightweight HTML parser for Bun",
   "main": "index.js",
   "module": "index.ts",

package/src/parser/constants.ts

@@ -135,3 +135,15 @@ export const VALID_TR_CHILDREN = new Set([
   "template",
   "style",
 ]);
+
+export const BUTTON_SCOPE_TERMINATORS = new Set([
+  "applet",
+  "caption",
+  "html",
+  "table",
+  "td",
+  "th",
+  "marquee",
+  "object",
+  "template",
+]);

package/src/parser/index.ts

@@ -1,4 +1,4 @@
-export { parse } from "./parse";
+export { parse, parseFragment } from "./parse";
 export { domToAST } from "./dom-to-ast";
 export type { ParserState, ParseError, InsertionMode, ASTNode } from "./types";
 export { ASTNodeType } from "./types";

package/src/parser/parse.ts

@@ -21,9 +21,9 @@ import {
   VALID_TABLE_CHILDREN,
   VALID_TABLE_SECTION_CHILDREN,
   VALID_TR_CHILDREN,
+  BUTTON_SCOPE_TERMINATORS,
 } from "./constants";
 import {
-  findFormattingElementInStack,
   findFurthestBlock,
   getCommonAncestor,
   cloneFormattingElement,
@@ -333,7 +333,16 @@ const parseTokenInInBodyMode = (state: ParserState, token: Token): void => {
   if (token.type === TokenType.TAG_OPEN) {
     const tagName = token.value.toLowerCase();
 
-    handleAutoClosing(state, tagName);
+    if (tagName === "a") {
+      const existingA = state.activeFormattingElements.find(
+        (el) => el && el.tagName && el.tagName.toLowerCase() === "a",
+      );
+      if (existingA) {
+        runAdoptionAgencyAlgorithm(state, "a");
+      }
+    }
+
+    const closedParagraph = handleAutoClosing(state, tagName);
 
     const inTableContext = isInTableContext(state);
     const isTableStructureElement =
@@ -354,7 +363,7 @@ const parseTokenInInBodyMode = (state: ParserState, token: Token): void => {
       if (tableParent) {
         popStackUntilTableContext(state);
       }
-    } else if (!parentIsTableContext) {
+    } else if (!parentIsTableContext && !closedParagraph) {
       reconstructActiveFormattingElements(state);
     }
 
@@ -365,6 +374,8 @@ const parseTokenInInBodyMode = (state: ParserState, token: Token): void => {
       namespaceURI = SVG_NAMESPACE;
     } else if (tagName === "math") {
       namespaceURI = MATHML_NAMESPACE;
+    } else {
+      namespaceURI = getCurrentNamespace(state);
     }
 
     const element = createElement(
@@ -413,24 +424,28 @@ const parseTokenInInBodyMode = (state: ParserState, token: Token): void => {
       }
 
       if (isFormattingElement) {
-        state.activeFormattingElements.push(element);
+        pushToActiveFormattingElements(state, element);
       }
     }
   } else if (token.type === TokenType.TAG_CLOSE) {
     const tagName = token.value.toLowerCase();
 
-    if (FORMATTING_ELEMENTS.has(tagName)) {
+    if (FORMATTING_ELEMENTS.has(tagName) && !isInForeignContent(state)) {
       runAdoptionAgencyAlgorithm(state, tagName);
       return;
     }
 
+    if (tagName === "p") {
+      closeParagraphElement(state);
+      return;
+    }
+
     const impliedEndTags = [
       "dd",
       "dt",
       "li",
       "option",
       "optgroup",
-      "p",
       "rb",
       "rp",
       "rt",
@@ -479,76 +494,132 @@ const runAdoptionAgencyAlgorithm = (
   state: ParserState,
   tagName: string,
 ): void => {
-  const result = findFormattingElementInStack(state.stack, tagName);
+  const maxIterations = 8;
 
-  if (!result) {
-    return;
-  }
+  for (let iteration = 0; iteration < maxIterations; iteration++) {
+    const formattingElementIndex = state.activeFormattingElements.findIndex(
+      (el) =>
+        el && el.tagName && el.tagName.toLowerCase() === tagName.toLowerCase(),
+    );
 
-  const { element: formattingElement, index: formattingElementIndex } = result;
+    if (formattingElementIndex === -1) {
+      return;
+    }
 
-  const currentElement = getCurrentElement(state);
-  if (currentElement === formattingElement) {
-    state.stack.pop();
-    removeFromActiveFormattingElements(state, formattingElement);
-    return;
-  }
+    const formattingElement =
+      state.activeFormattingElements[formattingElementIndex];
+    const stackIndex = state.stack.indexOf(formattingElement);
 
-  const fbResult = findFurthestBlock(state.stack, formattingElementIndex);
+    if (stackIndex === -1) {
+      state.activeFormattingElements.splice(formattingElementIndex, 1);
+      return;
+    }
 
-  if (!fbResult) {
-    while (state.stack.length > formattingElementIndex) {
+    const currentElement = getCurrentElement(state);
+    if (currentElement === formattingElement) {
       state.stack.pop();
+      removeFromActiveFormattingElements(state, formattingElement);
+      return;
     }
-    removeFromActiveFormattingElements(state, formattingElement);
-    return;
-  }
 
-  const { element: furthestBlock, index: furthestBlockIndex } = fbResult;
-  const commonAncestor = getCommonAncestor(state.stack, formattingElementIndex);
+    const fbResult = findFurthestBlock(state.stack, stackIndex);
 
-  if (!commonAncestor) {
-    return;
-  }
+    if (!fbResult) {
+      while (state.stack.length > stackIndex) {
+        state.stack.pop();
+      }
+      removeFromActiveFormattingElements(state, formattingElement);
+      return;
+    }
+
+    const { element: furthestBlock, index: furthestBlockIndex } = fbResult;
+    const commonAncestor = getCommonAncestor(state.stack, stackIndex);
+
+    if (!commonAncestor) {
+      return;
+    }
+
+    let lastNode = furthestBlock;
+    const clonedNodes: any[] = [];
+    const nodesToRemoveFromStack: any[] = [];
+    let innerLoopCounter = 0;
+    let nodeIndex = furthestBlockIndex;
+
+    while (true) {
+      innerLoopCounter++;
+      nodeIndex--;
+      const node = state.stack[nodeIndex];
+
+      if (node === formattingElement) {
+        break;
+      }
+
+      if (
+        innerLoopCounter > 3 &&
+        state.activeFormattingElements.includes(node)
+      ) {
+        removeFromActiveFormattingElements(state, node);
+      }
 
-  let lastNode = furthestBlock;
-  const clonedNodes: any[] = [];
+      if (!state.activeFormattingElements.includes(node)) {
+        nodesToRemoveFromStack.push(node);
+        continue;
+      }
+
+      const nodeClone = cloneFormattingElement(node);
+      clonedNodes.unshift(nodeClone);
 
-  for (let i = furthestBlockIndex - 1; i > formattingElementIndex; i--) {
-    const node = state.stack[i];
-    const nodeClone = cloneFormattingElement(node);
-    clonedNodes.unshift(nodeClone);
+      replaceInActiveFormattingElements(state, node, nodeClone);
 
-    replaceInActiveFormattingElements(state, node, nodeClone);
+      const nodeChildIdx = node.childNodes.indexOf(lastNode);
+      if (nodeChildIdx !== -1) {
+        node.childNodes.splice(nodeChildIdx, 1);
+      }
 
-    const nodeChildIdx = node.childNodes.indexOf(lastNode);
-    if (nodeChildIdx !== -1) {
-      node.childNodes.splice(nodeChildIdx, 1);
+      appendChild(nodeClone, lastNode);
+      lastNode = nodeClone;
     }
 
-    appendChild(nodeClone, lastNode);
-    lastNode = nodeClone;
-  }
+    for (const node of nodesToRemoveFromStack) {
+      const idx = state.stack.indexOf(node);
+      if (idx !== -1) {
+        state.stack.splice(idx, 1);
+      }
+    }
 
-  const fbIdx = formattingElement.childNodes.indexOf(furthestBlock);
-  if (fbIdx !== -1) {
-    formattingElement.childNodes.splice(fbIdx, 1);
-    furthestBlock.parentNode = null;
-  }
+    const fbIdx = formattingElement.childNodes.indexOf(furthestBlock);
+    if (fbIdx !== -1) {
+      formattingElement.childNodes.splice(fbIdx, 1);
+      furthestBlock.parentNode = null;
+    }
 
-  appendChild(commonAncestor, lastNode);
+    appendChild(commonAncestor, lastNode);
 
-  const newFormattingElement = cloneFormattingElement(formattingElement);
-  reparentChildren(furthestBlock, newFormattingElement);
-  appendChild(furthestBlock, newFormattingElement);
+    const newFormattingElement = cloneFormattingElement(formattingElement);
+    reparentChildren(furthestBlock, newFormattingElement);
+    appendChild(furthestBlock, newFormattingElement);
 
-  removeFromActiveFormattingElements(state, formattingElement);
+    removeFromActiveFormattingElements(state, formattingElement);
+    state.activeFormattingElements.splice(
+      formattingElementIndex,
+      0,
+      newFormattingElement,
+    );
+
+    const elementsAfterFurthestBlock = state.stack.slice(
+      furthestBlockIndex + 1,
+    );
 
-  state.stack.length = formattingElementIndex;
-  for (const clonedNode of clonedNodes) {
-    state.stack.push(clonedNode);
+    state.stack.length = stackIndex;
+    for (const clonedNode of clonedNodes) {
+      state.stack.push(clonedNode);
+    }
+    state.stack.push(furthestBlock);
+    state.stack.push(newFormattingElement);
+    for (const element of elementsAfterFurthestBlock) {
+      state.stack.push(element);
+    }
   }
-  state.stack.push(furthestBlock);
 };
 
 const removeFromActiveFormattingElements = (
@@ -572,6 +643,60 @@ const replaceInActiveFormattingElements = (
   }
 };
 
+const pushToActiveFormattingElements = (
+  state: ParserState,
+  element: any,
+): void => {
+  const list = state.activeFormattingElements;
+  const tagName = element.tagName?.toLowerCase();
+
+  let count = 0;
+  let oldestMatchIndex = -1;
+
+  for (let i = list.length - 1; i >= 0; i--) {
+    const entry = list[i];
+    if (entry === null) {
+      break;
+    }
+
+    if (
+      entry.tagName?.toLowerCase() === tagName &&
+      attributesMatch(entry, element)
+    ) {
+      if (oldestMatchIndex === -1) {
+        oldestMatchIndex = i;
+      }
+      count++;
+      if (count >= 3) {
+        list.splice(oldestMatchIndex, 1);
+        break;
+      }
+      oldestMatchIndex = i;
+    }
+  }
+
+  list.push(element);
+};
+
+const attributesMatch = (el1: any, el2: any): boolean => {
+  const attrs1 = el1.attributes || {};
+  const attrs2 = el2.attributes || {};
+  const keys1 = Object.keys(attrs1);
+  const keys2 = Object.keys(attrs2);
+
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+
+  for (const key of keys1) {
+    if (attrs1[key] !== attrs2[key]) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
 const parseText = (state: ParserState, token: Token): void => {
   const content = token.value;
 
@@ -621,18 +746,57 @@ const parseProcessingInstruction = (state: ParserState, token: Token): void => {
   appendChild(currentParent, piNode);
 };
 
-const handleAutoClosing = (state: ParserState, tagName: string): void => {
+const closeParagraphElement = (state: ParserState): void => {
+  let pIndex = -1;
+  for (let i = state.stack.length - 1; i >= 0; i--) {
+    const element = state.stack[i];
+    const elementTag = element.tagName?.toLowerCase();
+
+    if (elementTag === "p") {
+      pIndex = i;
+      break;
+    }
+
+    if (elementTag && BUTTON_SCOPE_TERMINATORS.has(elementTag)) {
+      return;
+    }
+  }
+
+  if (pIndex === -1) {
+    return;
+  }
+
+  while (state.stack.length > pIndex) {
+    state.stack.pop();
+  }
+};
+
+const handleAutoClosing = (state: ParserState, tagName: string): boolean => {
   const autoCloseList = AUTO_CLOSE_RULES[tagName];
-  if (!autoCloseList) return;
+  if (!autoCloseList) return false;
 
-  const currentElement = getCurrentElement(state);
-  if (
-    currentElement &&
-    currentElement.tagName &&
-    autoCloseList.includes(currentElement.tagName.toLowerCase())
-  ) {
+  let targetIndex = -1;
+  for (let i = state.stack.length - 1; i >= 0; i--) {
+    const element = state.stack[i];
+    const elementTag = element.tagName?.toLowerCase();
+
+    if (elementTag && autoCloseList.includes(elementTag)) {
+      targetIndex = i;
+      break;
+    }
+
+    if (elementTag && BUTTON_SCOPE_TERMINATORS.has(elementTag)) {
+      return false;
+    }
+  }
+
+  if (targetIndex === -1) return false;
+
+  while (state.stack.length > targetIndex) {
     state.stack.pop();
   }
+
+  return true;
 };
 
 const getCurrentParent = (state: ParserState): any => {
@@ -748,6 +912,32 @@ const isInTableContext = (state: ParserState): boolean => {
   return false;
 };
 
+const isInForeignContent = (state: ParserState): boolean => {
+  for (let i = state.stack.length - 1; i >= 0; i--) {
+    const el = state.stack[i];
+    if (
+      el.namespaceURI === SVG_NAMESPACE ||
+      el.namespaceURI === MATHML_NAMESPACE
+    ) {
+      return true;
+    }
+    if (el.tagName && el.tagName.toLowerCase() === "html") {
+      return false;
+    }
+  }
+  return false;
+};
+
+const getCurrentNamespace = (state: ParserState): string | undefined => {
+  for (let i = state.stack.length - 1; i >= 0; i--) {
+    const el = state.stack[i];
+    if (el.namespaceURI) {
+      return el.namespaceURI;
+    }
+  }
+  return undefined;
+};
+
 const findTableContextParent = (state: ParserState): any | null => {
   for (let i = state.stack.length - 1; i >= 0; i--) {
     const el = state.stack[i];
@@ -922,3 +1112,33 @@ const getActiveFormattingElementsBeforeMarker = (state: ParserState): any[] => {
   }
   return result;
 };
+
+export const parseFragment = (tokens: Token[], contextTagName: string): any => {
+  const root = createDocument();
+  const contextElement = createElement(contextTagName.toLowerCase(), {});
+  appendChild(root, contextElement);
+
+  const state: ParserState = {
+    tokens,
+    position: 0,
+    length: tokens.length,
+    stack: [root, contextElement],
+    root,
+    insertionMode: InsertionMode.InBody,
+    errors: [],
+    activeFormattingElements: [],
+  };
+
+  while (state.position < state.length) {
+    const token = getCurrentToken(state);
+
+    if (!token || token.type === TokenType.EOF) {
+      break;
+    }
+
+    parseToken(state, token);
+    advance(state);
+  }
+
+  return contextElement.childNodes;
+};

package/tests/adoption-multiple-iterations.test.ts

@@ -0,0 +1,118 @@
+import { it, expect } from "bun:test";
+import { parseHTML } from "../index.js";
+import { serializeToHtml5lib } from "./helpers/tree-adapter.js";
+
+it("should run AAA 2 times - test case with nested divs", () => {
+  const html = "<a>1<div>2<div>3</a>4</div>5</div>";
+  const doc = parseHTML(html);
+  const serialized = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+  const expected = `| <html>
+|   <head>
+|   <body>
+|     <a>
+|       "1"
+|     <div>
+|       <a>
+|         "2"
+|       <div>
+|         <a>
+|           "3"
+|         "4"
+|       "5"
+`;
+
+  expect(serialized).toBe(expected);
+});
+
+it("should run AAA 8 times - deeply nested divs", () => {
+  const html =
+    "<div><a><b><div><div><div><div><div><div><div><div><div><div></a>";
+  const doc = parseHTML(html);
+  const serialized = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+  const expected = `| <html>
+|   <head>
+|   <body>
+|     <div>
+|       <a>
+|         <b>
+|       <b>
+|         <div>
+|           <a>
+|           <div>
+|             <a>
+|             <div>
+|               <a>
+|               <div>
+|                 <a>
+|                 <div>
+|                   <a>
+|                   <div>
+|                     <a>
+|                     <div>
+|                       <a>
+|                       <div>
+|                         <a>
+|                           <div>
+|                             <div>
+`;
+
+  expect(serialized).toBe(expected);
+});
+
+it("should run AAA 2 times - with style and address elements", () => {
+  const html = "<a><div><style></style><address><a>";
+  const doc = parseHTML(html);
+  const serialized = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+  const expected = `| <html>
+|   <head>
+|   <body>
+|     <a>
+|     <div>
+|       <a>
+|         <style>
+|       <address>
+|         <a>
+|         <a>
+`;
+
+  expect(serialized).toBe(expected);
+});
+
+it("should run AAA with formatting element cloning", () => {
+  const html = "<a>x<div>y</a>z</div>";
+  const doc = parseHTML(html);
+  const serialized = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+  const expected = `| <html>
+|   <head>
+|   <body>
+|     <a>
+|       "x"
+|     <div>
+|       <a>
+|         "y"
+|       "z"
+`;
+
+  expect(serialized).toBe(expected);
+});
+
+it("should stop AAA when no more formatting elements to adopt", () => {
+  const html = "<b>text</b><div>content</div>";
+  const doc = parseHTML(html);
+  const serialized = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+  const expected = `| <html>
+|   <head>
+|   <body>
+|     <b>
+|       "text"
+|     <div>
+|       "content"
+`;
+
+  expect(serialized).toBe(expected);
+});

package/tests/helpers/tree-adapter.ts

@@ -25,12 +25,12 @@ export function serializeToHtml5lib(
 
       let nsPrefix = "";
       if (ns === "http://www.w3.org/2000/svg") {
-        nsPrefix = " svg";
+        nsPrefix = "svg ";
       } else if (ns === "http://www.w3.org/1998/Math/MathML") {
-        nsPrefix = " math";
+        nsPrefix = "math ";
       }
 
-      lines.push(`${indent}<${tagName}${nsPrefix}>`);
+      lines.push(`${indent}<${nsPrefix}${tagName}>`);
 
       // Atributos en orden alfabético
       const attrs = Object.entries(node.attributes || {}).sort(([a], [b]) =>
@@ -68,3 +68,52 @@ export function serializeToHtml5lib(
   serialize(doc, 0);
   return lines.join("\n") + "\n";
 }
+
+export function serializeFragmentToHtml5lib(nodes: any[]): string {
+  const lines: string[] = [];
+
+  function serialize(node: any, depth: number): void {
+    const indent = "| " + "  ".repeat(depth);
+
+    if (node.nodeType === 1) {
+      const tagName = node.tagName.toLowerCase();
+      const ns = node.namespaceURI;
+
+      let nsPrefix = "";
+      if (ns === "http://www.w3.org/2000/svg") {
+        nsPrefix = "svg ";
+      } else if (ns === "http://www.w3.org/1998/Math/MathML") {
+        nsPrefix = "math ";
+      }
+
+      lines.push(`${indent}<${nsPrefix}${tagName}>`);
+
+      const attrs = Object.entries(node.attributes || {}).sort(([a], [b]) =>
+        a.localeCompare(b),
+      );
+      for (const [name, value] of attrs) {
+        lines.push(`${indent}  ${name}="${value}"`);
+      }
+
+      if (node.tagName.toLowerCase() === "template" && node.content) {
+        lines.push(`${indent}  content`);
+        serialize(node.content, depth + 2);
+      }
+
+      for (const child of node.childNodes || []) {
+        serialize(child, depth + 1);
+      }
+    } else if (node.nodeType === 3) {
+      lines.push(`${indent}"${node.textContent}"`);
+    } else if (node.nodeType === 8) {
+      const commentData = node.data || node.nodeValue || node.textContent || "";
+      lines.push(`${indent}<!-- ${commentData} -->`);
+    }
+  }
+
+  for (const node of nodes) {
+    serialize(node, 0);
+  }
+
+  return lines.join("\n") + "\n";
+}

package/tests/implicit-close-formatting.test.ts

@@ -0,0 +1,113 @@
+import { describe, it, expect } from "bun:test";
+import { parseHTML } from "../index.js";
+import { serializeToHtml5lib } from "./helpers/tree-adapter.js";
+
+describe("implicit close with formatting element reconstruction", () => {
+  it("should close <p> and reconstruct <b> elements when new <p> opens", () => {
+    const html = "<p><b><b><b><b><p>x";
+    const doc = parseHTML(html);
+    const result = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+    expect(result).toBe(`| <html>
+|   <head>
+|   <body>
+|     <p>
+|       <b>
+|         <b>
+|           <b>
+|             <b>
+|     <p>
+|       <b>
+|         <b>
+|           <b>
+|             "x"
+`);
+  });
+
+  it("should close <p> through nested formatting and reconstruct (single <b>)", () => {
+    const html = "<p><b><p>x";
+    const doc = parseHTML(html);
+    const result = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+    expect(result).toBe(`| <html>
+|   <head>
+|   <body>
+|     <p>
+|       <b>
+|     <p>
+|       <b>
+|         "x"
+`);
+  });
+
+  it("should handle text before and after implicit close", () => {
+    const html = "<p><b>1<p>2";
+    const doc = parseHTML(html);
+    const result = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+    expect(result).toBe(`| <html>
+|   <head>
+|   <body>
+|     <p>
+|       <b>
+|         "1"
+|     <p>
+|       <b>
+|         "2"
+`);
+  });
+
+  it("should handle multiple different formatting elements", () => {
+    const html = "<p><b><i><p>x";
+    const doc = parseHTML(html);
+    const result = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+    expect(result).toBe(`| <html>
+|   <head>
+|   <body>
+|     <p>
+|       <b>
+|         <i>
+|     <p>
+|       <b>
+|         <i>
+|           "x"
+`);
+  });
+
+  it("should handle div closing <p> and reconstructing formatting", () => {
+    const html = "<p><b><div>x";
+    const doc = parseHTML(html);
+    const result = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+    expect(result).toBe(`| <html>
+|   <head>
+|   <body>
+|     <p>
+|       <b>
+|     <div>
+|       <b>
+|         "x"
+`);
+  });
+
+  it("should handle multiple auto-closing with formatting", () => {
+    const html = "<p><b><p><i><p>x";
+    const doc = parseHTML(html);
+    const result = serializeToHtml5lib(doc, { skipImplicitDoctype: true });
+
+    expect(result).toBe(`| <html>
+|   <head>
+|   <body>
+|     <p>
+|       <b>
+|     <p>
+|       <b>
+|         <i>
+|     <p>
+|       <b>
+|         <i>
+|           "x"
+`);
+  });
+});

package/tests/tree-construction-adoption01.test.ts

@@ -1,6 +1,9 @@
 import { expect, it, describe } from "bun:test";
-import { parseHTML } from "../index";
-import { serializeToHtml5lib } from "./helpers/tree-adapter";
+import { parseHTML, parseHTMLFragment } from "../index";
+import {
+  serializeToHtml5lib,
+  serializeFragmentToHtml5lib,
+} from "./helpers/tree-adapter";
 import { readFileSync } from "fs";
 
 describe("Tree Construction Adoption01 Tests", () => {
@@ -15,10 +18,18 @@ describe("Tree Construction Adoption01 Tests", () => {
     let data = "";
     let document = "";
     let inDocument = false;
-    let inData = true; // Start with data since we split on #data\n
+    let inData = true;
+    let isFragmentTest = false;
+    let fragmentContext = "";
 
     for (const line of lines) {
-      if (line.startsWith("#document")) {
+      if (line.startsWith("#document-fragment")) {
+        isFragmentTest = true;
+        inDocument = false;
+        inData = false;
+      } else if (isFragmentTest && !fragmentContext && !line.startsWith("#")) {
+        fragmentContext = line.trim();
+      } else if (line.startsWith("#document")) {
         inDocument = true;
         inData = false;
       } else if (line.startsWith("#errors")) {
@@ -31,16 +42,21 @@ describe("Tree Construction Adoption01 Tests", () => {
       }
     }
 
-    const passingTests = [1, 2, 3, 4, 6, 7, 8, 9, 11, 12, 16];
-    const testFn = passingTests.includes(index + 1) ? it : it.skip;
-
-    testFn(`Adoption test ${index + 1}`, () => {
-      const doc = parseHTML(data);
-      const hasExplicitDoctype = data.toLowerCase().includes("<!doctype");
-      const serialized = serializeToHtml5lib(doc, {
-        skipImplicitDoctype: !hasExplicitDoctype,
+    if (isFragmentTest) {
+      it(`Adoption test ${index + 1} (fragment: ${fragmentContext})`, () => {
+        const nodes = parseHTMLFragment(data, fragmentContext);
+        const serialized = serializeFragmentToHtml5lib(nodes);
+        expect(serialized).toBe(document);
       });
-      expect(serialized).toBe(document);
-    });
+    } else {
+      it(`Adoption test ${index + 1}`, () => {
+        const doc = parseHTML(data);
+        const hasExplicitDoctype = data.toLowerCase().includes("<!doctype");
+        const serialized = serializeToHtml5lib(doc, {
+          skipImplicitDoctype: !hasExplicitDoctype,
+        });
+        expect(serialized).toBe(document);
+      });
+    }
   });
 });

package/tests/tree-construction-adoption02.test.ts

@@ -9,7 +9,7 @@ describe("Tree Construction Adoption02 Tests", () => {
     "utf8",
   );
   const sections = content.split("#data\n").slice(1);
-  const passingTests = [1];
+  const passingTests = [1, 2];
 
   sections.forEach((section, index) => {
     const lines = section.trim().split("\n");