Automated verification for Auto-Fix, Code Splitting, HTML Validation, and Tab Merging
Inspect complex real-world examples in real time with step-by-step transformations
Building reliable client-side HTML parsers, splitters, and auto-fixers requires avoiding common traps (like regex over-matching inside strings, destroying structured data, or dropping text content). Below is the recommended multi-layered strategy for robust long-term test coverage:
Verify that void tags (<img>, <input>, <br>) are never flagged as unclosed, while illegal void closing tags (</img>, </input>) are detected and cleaned without touching neighboring tags.
Ensure that anything inside <script> or <style> (such as template strings containing tags or comparison operators like a < b) is masked so it never causes false positive tag mismatch errors.
Test that only executable JavaScript (no-type or type="module") is extracted to the JS tab. External scripts (src="...") and data scripts (type="application/ld+json") must remain in the HTML tab.
Every auto-fixing operation must be idempotent: fix(fix(code)) === fix(code). The second pass must always produce zero additional changes, preventing infinite oscillation loops.
Verify the complete lifecycle: Split(HTML) → [HTML, CSS, JS] → Merge([HTML, CSS, JS]) → Final HTML. The final document must render identically and validate with 0 errors.
Verify that text nodes, custom data attributes (data-*), accessibility labels (aria-*), and external CDN resources are never dropped, stripped, or altered during repair or splitting.