fix(site-builder): address Task 25 review findings on <style> scoping
Four issues from adversarial review of the block-scoped <style> feature: 1. (Critical) transformBlock() recursed once per @media/@supports/@container nesting level with no cap -- ~7000 nested rules blew the call stack, and nothing between a Custom HTML block's toHtml() and the publish pipeline catches exceptions, so this took down the whole page's publish and crashed the live editor on every keystroke. Added MAX_NESTING_DEPTH=20 (pass the body through unscoped beyond it) and wrapped scopeCss() so it never throws on any input, matching repairOrphanNodes's existing contract. Caught and fixed a variable-shadowing bug in my own first pass at this: the new depth parameter was silently shadowed by a pre-existing `let depth` used for brace-matching in the same block, which would have defeated the cap with no type error. 2. (Important) FORCE_BODY: true was unconditional, but it isn't a no-op for style-free input: it also changes how the parser preserves whitespace after a LEADING html comment, which this repo's own fixture starts with. Verified via a raw byte-diff against HtmlBlock.tsx@6a9b227 (extracted verbatim, run standalone against real dompurify+jsdom) that the fixture gained bytes. Fixed by applying FORCE_BODY only when the input has a real (non-comment) <style> tag to rescue -- confirmed empirically that this is a true no-op for every other input. Pinned the old output as a checked-in regression fixture and added a raw toBe() diff test. 3. (Important) scopeStyleBlocks() wasn't idempotent -- pasting previously published/exported output into a fresh block nested a second wrapper and re-prefixed every selector. Added isAlreadyScoped(), which detects a lone root wrapper whose <style> content is already a no-op under scopeCss for that wrapper's own class (reusing scopeCss's own idempotency guarantee) and leaves it untouched. 4. (Minor) Documented, not fixed: the 32-bit scope-id hash is brute-forceable (CSS-only impact, same trust tier as other accepted risks here), and DOMPurify's SAFE_FOR_XML silently drops an entire <style> block when its content merely looks tag-like (e.g. content: "<Read More>"). 1155/1155 tests passing (was 1141), tsc clean. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,415 @@
|
||||
<a href="#main">Skip to content</a>
|
||||
|
||||
<header>
|
||||
<h1>HTML Test Fixture</h1>
|
||||
<p><small>A wide sample of elements for rendering, sanitizing, and parsing tests.</small></p>
|
||||
<nav aria-label="Primary">
|
||||
<ul>
|
||||
<li><a href="#text">Text</a></li>
|
||||
<li><a href="#lists">Lists</a></li>
|
||||
<li><a href="#tables">Tables</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#media">Media</a></li>
|
||||
<li><a href="#edge">Edge cases</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
|
||||
|
||||
<section id="headings">
|
||||
<h2>Headings</h2>
|
||||
<h1>Heading level 1</h1>
|
||||
<h2>Heading level 2</h2>
|
||||
<h3>Heading level 3</h3>
|
||||
<h4>Heading level 4</h4>
|
||||
<h5>Heading level 5</h5>
|
||||
<h6>Heading level 6</h6>
|
||||
<hgroup>
|
||||
<h2>Grouped heading</h2>
|
||||
<p>Subtitle paragraph inside hgroup</p>
|
||||
</hgroup>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
<section id="text">
|
||||
<h2>Text and inline elements</h2>
|
||||
|
||||
<p>A normal paragraph with a fair amount of text so you can check line height, wrapping, and measure. It runs long enough to break across several lines in most containers, which is the whole point of including it here at all.</p>
|
||||
|
||||
<p>
|
||||
<strong>strong</strong>, <b>b</b>, <em>em</em>, <i>i</i>, <u>u</u>,
|
||||
<s>s</s>, <del>del</del>, <ins>ins</ins>, <mark>mark</mark>,
|
||||
<small>small</small>, H<sub>2</sub>O, x<sup>2</sup>,
|
||||
<code>inline code</code>, <kbd>Ctrl</kbd>+<kbd>C</kbd>,
|
||||
<samp>output text</samp>, <var>variable</var>,
|
||||
<abbr title="HyperText Markup Language">HTML</abbr>,
|
||||
<dfn>definition term</dfn>,
|
||||
<time datetime="2026-08-09">August 9, 2026</time>,
|
||||
<data value="42">forty-two</data>,
|
||||
<q>short inline quote</q>,
|
||||
<cite>Cited Work</cite>,
|
||||
<bdi>إسم</bdi>,
|
||||
<bdo dir="rtl">reversed direction</bdo>,
|
||||
<ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Links:
|
||||
<a href="#top">internal anchor</a> ·
|
||||
<a href="https://example.com">absolute</a> ·
|
||||
<a href="/relative/path">relative</a> ·
|
||||
<a href="mailto:test@example.com">mailto</a> ·
|
||||
<a href="tel:+15555550123">tel</a> ·
|
||||
<a href="https://example.com" target="_blank" rel="noopener noreferrer">new tab</a> ·
|
||||
<a href="#" download="">download attr</a>
|
||||
</p>
|
||||
|
||||
<blockquote cite="https://example.com/source">
|
||||
<p>A block quotation. It contains its own paragraph and a nested quote so you can check indentation stacking.</p>
|
||||
<blockquote><p>Nested block quotation.</p></blockquote>
|
||||
<footer>— <cite>Someone, Somewhere</cite></footer>
|
||||
</blockquote>
|
||||
|
||||
<pre><code>#!/usr/bin/env bash
|
||||
set -euo pipefail
|
||||
|
||||
for i in {1..3}; do
|
||||
printf 'iteration %d\n' "$i"
|
||||
done
|
||||
|
||||
# a deliberately long line to force horizontal overflow: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
|
||||
</code></pre>
|
||||
|
||||
<p>Line break here,<br>after the break.</p>
|
||||
<p>Word break opportunity: super<wbr>cali<wbr>fragilistic<wbr>expiali<wbr>docious</p>
|
||||
|
||||
<address>
|
||||
Contact: <a href="mailto:admin@example.com">admin@example.com</a><br>
|
||||
123 Nowhere St, Somewhere
|
||||
</address>
|
||||
|
||||
<p>Entities: & < > " ' © ® ™ — … € 😀</p>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
<section id="lists">
|
||||
<h2>Lists</h2>
|
||||
|
||||
<h3>Unordered, nested</h3>
|
||||
<ul>
|
||||
<li>First item</li>
|
||||
<li>Second item
|
||||
<ul>
|
||||
<li>Nested item
|
||||
<ul><li>Deeply nested item</li></ul>
|
||||
</li>
|
||||
<li>Another nested item</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Third item with a longer body of text so that it wraps onto more than one line and you can confirm the hanging indent behaves.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Ordered variants</h3>
|
||||
<ol>
|
||||
<li>Default numbering</li>
|
||||
<li>Second
|
||||
<ol type="a"><li>Lower alpha</li><li>Second alpha</li></ol>
|
||||
</li>
|
||||
</ol>
|
||||
<ol start="5" reversed="">
|
||||
<li>Reversed, starting at 5</li>
|
||||
<li>Next</li>
|
||||
<li>Next</li>
|
||||
</ol>
|
||||
|
||||
<h3>Description list</h3>
|
||||
<dl>
|
||||
<dt>Term one</dt>
|
||||
<dd>Definition of the first term.</dd>
|
||||
<dt>Term two</dt>
|
||||
<dt>Term two, alias</dt>
|
||||
<dd>Definition covering both terms above.</dd>
|
||||
</dl>
|
||||
|
||||
<h3>Menu</h3>
|
||||
<menu>
|
||||
<li><button type="button">Copy</button></li>
|
||||
<li><button type="button">Paste</button></li>
|
||||
</menu>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
<section id="tables">
|
||||
<h2>Tables</h2>
|
||||
|
||||
<table>
|
||||
<caption>Quarterly figures with spans and a footer</caption>
|
||||
<colgroup>
|
||||
<col span="1">
|
||||
<col span="2">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Region</th>
|
||||
<th scope="col">Q1</th>
|
||||
<th scope="col">Q2</th>
|
||||
<th scope="col">Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">North</th>
|
||||
<td>1,204</td>
|
||||
<td>1,391</td>
|
||||
<td rowspan="2">Shared note spanning two rows</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">South</th>
|
||||
<td>988</td>
|
||||
<td>1,022</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">East</th>
|
||||
<td colspan="2">Merged across two quarters</td>
|
||||
<td>—</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th scope="row">Total</th>
|
||||
<td>2,192</td>
|
||||
<td>2,413</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<h3>Wide table (horizontal overflow)</h3>
|
||||
<table>
|
||||
<tbody><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th><th>H</th><th>I</th><th>J</th><th>K</th><th>L</th></tr>
|
||||
<tr><td>value-1</td><td>value-2</td><td>value-3</td><td>value-4</td><td>value-5</td><td>value-6</td><td>value-7</td><td>value-8</td><td>value-9</td><td>value-10</td><td>value-11</td><td>value-12</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
<section>
|
||||
<h2>Forms</h2>
|
||||
|
||||
<form action="#" method="get">
|
||||
<fieldset>
|
||||
<legend>Text inputs</legend>
|
||||
<p><label for="f-text">Text</label> <input id="f-text" name="text" type="text" placeholder="Placeholder" value="Prefilled"></p>
|
||||
<p><label for="f-search">Search</label> <input id="f-search" type="search" list="suggestions"></p>
|
||||
<datalist id="suggestions">
|
||||
<option value="alpha"></option>
|
||||
<option value="beta"></option>
|
||||
<option value="gamma"></option>
|
||||
</datalist>
|
||||
<p><label for="f-email">Email</label> <input id="f-email" type="email" required=""></p>
|
||||
<p><label for="f-url">URL</label> <input id="f-url" type="url"></p>
|
||||
<p><label for="f-tel">Tel</label> <input id="f-tel" type="tel" pattern="[0-9-+ ]+"></p>
|
||||
<p><label for="f-pass">Password</label> <input id="f-pass" type="password" minlength="8"></p>
|
||||
<p><label for="f-num">Number</label> <input id="f-num" type="number" min="0" max="100" step="5" value="25"></p>
|
||||
<p><label for="f-area">Textarea</label><br><textarea id="f-area" rows="4" cols="40">Multiline
|
||||
content
|
||||
here</textarea></p>
|
||||
<p><label for="f-ro">Readonly</label> <input id="f-ro" type="text" value="read only" readonly=""></p>
|
||||
<p><label for="f-dis">Disabled</label> <input id="f-dis" type="text" value="disabled" disabled=""></p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Date, time, color, range, file</legend>
|
||||
<p><label for="f-date">Date</label> <input id="f-date" type="date" value="2026-08-09"></p>
|
||||
<p><label for="f-time">Time</label> <input id="f-time" type="time" value="13:45"></p>
|
||||
<p><label for="f-dtl">Datetime-local</label> <input id="f-dtl" type="datetime-local"></p>
|
||||
<p><label for="f-month">Month</label> <input id="f-month" type="month"></p>
|
||||
<p><label for="f-week">Week</label> <input id="f-week" type="week"></p>
|
||||
<p><label for="f-color">Color</label> <input id="f-color" type="color" value="#336699"></p>
|
||||
<p><label for="f-range">Range</label> <input id="f-range" type="range" min="0" max="10" value="7"></p>
|
||||
<p><label for="f-file">File</label> <input id="f-file" type="file" multiple="" accept=".txt,.md"></p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Choices</legend>
|
||||
<p>
|
||||
<label><input type="checkbox" name="c" value="1" checked=""> Checked</label>
|
||||
<label><input type="checkbox" name="c" value="2"> Unchecked</label>
|
||||
<label><input type="checkbox" name="c" value="3" disabled=""> Disabled</label>
|
||||
</p>
|
||||
<p>
|
||||
<label><input type="radio" name="r" value="a" checked=""> Option A</label>
|
||||
<label><input type="radio" name="r" value="b"> Option B</label>
|
||||
</p>
|
||||
<p>
|
||||
<label for="f-select">Select</label>
|
||||
<select id="f-select" name="select">
|
||||
<option value="">— choose —</option>
|
||||
<optgroup label="Group one">
|
||||
<option value="1" selected="">One</option>
|
||||
<option value="2">Two</option>
|
||||
</optgroup>
|
||||
<optgroup label="Group two" disabled="">
|
||||
<option value="3">Three</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label for="f-multi">Multi-select</label><br>
|
||||
<select id="f-multi" multiple="">
|
||||
<option>Red</option><option selected="">Green</option><option>Blue</option><option>Violet</option>
|
||||
</select>
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Output and buttons</legend>
|
||||
<p><label for="f-prog">Progress</label> <progress id="f-prog" value="0.6">60%</progress></p>
|
||||
<p><label for="f-meter">Meter</label> <meter id="f-meter" min="0" max="100" value="72">72</meter></p>
|
||||
<p><output name="result" for="f-num f-range">Computed output</output></p>
|
||||
<p>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="reset">Reset</button>
|
||||
<button type="button">Plain button</button>
|
||||
<button type="button" disabled="">Disabled button</button>
|
||||
<input type="submit" value="Input submit">
|
||||
<input type="button" value="Input button">
|
||||
</p>
|
||||
<input type="hidden" name="csrf" value="hidden-value">
|
||||
</fieldset>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
<section id="media">
|
||||
<h2>Media and embeds</h2>
|
||||
|
||||
<h3>Inline SVG</h3>
|
||||
<svg width="180" height="90" viewBox="0 0 180 90" role="img" aria-label="Two shapes">
|
||||
<rect x="5" y="5" width="80" height="80" fill="none" stroke="currentColor" stroke-width="3"></rect>
|
||||
<circle cx="135" cy="45" r="40" fill="none" stroke="currentColor" stroke-width="3"></circle>
|
||||
<text x="45" y="50" text-anchor="middle" font-size="14" fill="currentColor">svg</text>
|
||||
</svg>
|
||||
|
||||
<h3>Figure with data-URI image</h3>
|
||||
<figure>
|
||||
<img alt="Small red square" width="64" height="64" src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'64'%20height%3D'64'%3E%3Crect%20width%3D'64'%20height%3D'64'%20fill%3D'%23c0392b'%2F%3E%3C%2Fsvg%3E">
|
||||
<figcaption>Figure caption describing the image above.</figcaption>
|
||||
</figure>
|
||||
|
||||
<h3>Broken image (alt-text fallback test)</h3>
|
||||
<img src="does-not-exist.png" alt="This alt text should render because the source is missing" width="200" height="100">
|
||||
|
||||
<h3>Picture element</h3>
|
||||
<picture>
|
||||
<source media="(min-width: 800px)" srcset="wide.png">
|
||||
<source media="(min-width: 400px)" srcset="medium.png">
|
||||
<img src="narrow.png" alt="Responsive image fallback" width="150" height="80">
|
||||
</picture>
|
||||
|
||||
<h3>Video and audio (sources intentionally missing)</h3>
|
||||
<video controls="" width="320" poster="poster.jpg">
|
||||
<source src="clip.webm" type="video/webm">
|
||||
<source src="clip.mp4" type="video/mp4">
|
||||
<track kind="captions" src="captions.vtt" srclang="en" label="English">
|
||||
Your browser does not support the video element.
|
||||
</video>
|
||||
<audio controls="">
|
||||
<source src="tone.ogg" type="audio/ogg">
|
||||
<source src="tone.mp3" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
|
||||
<h3>Canvas and iframe</h3>
|
||||
<canvas width="200" height="60">Canvas fallback text</canvas>
|
||||
<iframe title="Sandboxed iframe" width="300" height="120" sandbox="allow-scripts allow-same-origin allow-popups allow-forms" loading="lazy" referrerpolicy="no-referrer"></iframe>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
<section id="interactive">
|
||||
<h2>Interactive and semantic containers</h2>
|
||||
|
||||
<details>
|
||||
<summary>Collapsed disclosure</summary>
|
||||
<p>Hidden content revealed on toggle.</p>
|
||||
</details>
|
||||
<details open="">
|
||||
<summary>Open disclosure</summary>
|
||||
<ul><li>With a list inside</li><li>Second item</li></ul>
|
||||
</details>
|
||||
|
||||
|
||||
<p>Non-modal dialog content.</p>
|
||||
<button type="button">Close</button>
|
||||
|
||||
<button type="button">Open dialog</button>
|
||||
|
||||
<article>
|
||||
<header><h3>Article header</h3></header>
|
||||
<p>Article body content.</p>
|
||||
<aside><p>An aside nested inside the article.</p></aside>
|
||||
<footer><p>Article footer.</p></footer>
|
||||
</article>
|
||||
|
||||
<p><span contenteditable="true">Editable inline region</span></p>
|
||||
<p hidden="">This paragraph has the hidden attribute and should not render.</p>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
<section id="edge">
|
||||
<h2>Edge cases</h2>
|
||||
|
||||
<p>Very long unbroken token (overflow test):</p>
|
||||
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
|
||||
<p>Long URL: https://example.com/a/very/long/path/segment/that/keeps/going/and/going?query=1&another=2&third=3#fragment-identifier</p>
|
||||
|
||||
<p lang="ar" dir="rtl">هذا نص عربي لاختبار الاتجاه من اليمين إلى اليسار.</p>
|
||||
<p lang="he" dir="rtl">זהו טקסט עברי לבדיקה.</p>
|
||||
<p lang="ja">日本語のテキストです。改行と折り返しの確認用。</p>
|
||||
<p lang="de">Straßenverkehrsordnung — Grüße aus München</p>
|
||||
<p>Emoji & combining: 👋🏽 👨👩👧👦 🇺🇸 é vs é (precomposed vs combining)</p>
|
||||
<p>Zero-width chars between letters: abc</p>
|
||||
|
||||
<p>Escaped tag text: <script>alert(1)</script></p>
|
||||
<p>Attribute with quotes: <span title="He said "hello"">hover me</span></p>
|
||||
|
||||
<p>Empty elements follow:</p>
|
||||
<div></div>
|
||||
<p></p>
|
||||
<ul></ul>
|
||||
<table></table>
|
||||
|
||||
<p>Deep nesting:</p>
|
||||
<div><div><div><div><div><div><div><p>Seven levels deep.</p></div></div></div></div></div></div></div>
|
||||
|
||||
<p>Inline element stress:
|
||||
<strong><em><u><s><mark>all five at once</mark></s></u></em></strong>
|
||||
</p>
|
||||
|
||||
<p style="color: teal;">Inline style attribute (teal).</p>
|
||||
<p class="custom-class another-class" data-test-id="edge-1" data-value="42">Element with classes and data attributes.</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p><small>End of fixture — <time datetime="2026-08-09">2026-08-09</time></small></p>
|
||||
</footer>
|
||||
Reference in New Issue
Block a user