site-builder/craft/src/components/basic/__fixtures__/html-block-test-body.pre-task25-output.html

<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: &amp; &lt; &gt; " ' © ® ™ &nbsp; — … € 😀</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&amp;another=2&amp;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 &amp; combining: 👋🏽 👨‍👩‍👧‍👦 🇺🇸 é vs é (precomposed vs combining)</p>
    <p>Zero-width chars between letters: a​b​c</p>

    <p>Escaped tag text: &lt;script&gt;alert(1)&lt;/script&gt;</p>
    <p>Attribute with quotes: <span title="He said &quot;hello&quot;">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>