fix: [#2052] Correct caption element content model to allow flow content

[atzzCokeK]

Fixes #2052

Problem

The <caption> element was incorrectly configured with contentModel: textOrComments, which only allowed text nodes and comments as children. According to the HTML specification, caption elements should contain flow content (including inline and block elements), except table elements.

This caused inline elements like <b>, <em>, <span>, etc. to be incorrectly moved outside the caption during HTML parsing, resulting in broken DOM structures.

Reproduction

import { Window } from 'happy-dom';

const window = new Window();
window.document.write(`
  <table>
    <caption>
      This <b>is</b> a caption.
    </caption>
  </table>
`);

console.log(window.document.documentElement.outerHTML);
// Before fix: <b></b><table><caption>This is a caption.</caption>...
// After fix:  <table><caption>This <b>is</b> a caption.</caption>...

Changes

packages/happy-dom/src/config/HTMLElementConfig.ts

Updated the caption element configuration to follow the HTML spec and match the pattern used by other table elements (td, th):

caption: {
    className: 'HTMLTableCaptionElement',
    contentModel: HTMLElementConfigContentModelEnum.noForbiddenFirstLevelDescendants,
    forbiddenDescendants: ['table', 'tbody', 'thead', 'tfoot', 'tr', 'td', 'th', 'col', 'colgroup'],
    permittedParents: ['table']
}

Changes explained:

• contentModel: Changed from textOrComments to noForbiddenFirstLevelDescendants to allow flow content
• forbiddenDescendants: Added table structure elements (per HTML spec: "Flow content, but with no descendant table elements")
• permittedParents: Added ['table'] to ensure caption only appears as a child of table elements

packages/happy-dom/test/html-parser/HTMLParser.malformedHTML.test.ts

Added comprehensive test coverage (9 new tests) for the caption element content model:

1. Inline elements preservation - Tests that <b>, <strong>, <em>, <span>, <a> are correctly preserved inside caption
2. Nested inline elements - Tests that nested structures like <small><b>text</b></small> work correctly
3. Block-level elements - Tests that block elements like <p> and <div> are allowed (flow content)
4. Table element prohibition - Tests that <table> elements inside caption are correctly moved outside
5. Content serialization - Tests that caption content is preserved when serializing to HTML
6. permittedParents validation - Tests that caption tags are removed when parent is not <table> or when used standalone

Implementation Details

This implementation follows the same pattern as PR #2007 (paragraph elements), using the existing noForbiddenFirstLevelDescendants content model. While this approach doesn't recursively check for deeply nested table elements (e.g., <caption><div><table>...</table></div></caption>), it:

• Matches the established codebase patterns
• Handles the vast majority of real-world use cases
• Provides dual protection through both forbiddenDescendants and permittedParents
• Maintains consistency with other table-related elements

Test Coverage

All tests pass:

✓ test/html-parser/HTMLParser.malformedHTML.test.ts (16 tests) 17ms
  Test Files  1 passed (1)
  Tests  16 passed (16)

Full test suite:

Test Files  294 passed (294)
Tests  7164 passed (7164)

[atzzCokeK]

CI Test Failure Note

The failing Fetch test is unrelated to this PR's changes (caption element only). The same failure occurs in #2048 and is linked to #2022/#2023.

All 16 caption-related tests pass successfully in my environment.

[Spixmaster]

Was this done an LLM? Who on earth writes such pull request descriptions?

[atzzCokeK]

I did use an LLM as a writing aid and reviewed the content myself. Please let me know if you have any feedback on the actual changes👋

[capricorn86]

Thank you for your contribution @atzzCokeK! :star