dom-to-image-more/spec/resources/page.html

Generates an image from a DOM node using HTML5 canvas and SVG

<style>
    * {
        box-sizing: border-box;
    }

    /* Always reserve the vertical scrollbar gutter so the viewport width stays
       constant whether or not the page overflows. The harness injects each
       render's clone into #cloned-node between renders, which can tip the page
       into a scrollbar mid-test; without a reserved gutter that shifts the
       measured node width by ~15px and makes size-dependent computed styles
       (inline-size, transform-origin, perspective-origin) differ between
       otherwise-identical renders (breaks "should compute correct keys"). */
    html {
        overflow-y: scroll;
    }
</style>

<style id="style"></style>

<div>
    <h1>DOM node</h1>
    <div id="dom-node"></div>
</div>

<div>
    <h1>Cloned node</h1>
    <div id="cloned-node"></div>
</div>

<div>
    <h1>Rendered image</h1>
    <canvas id="canvas"></canvas>
</div>

<div>
    <h1>Control image</h1>
    <img id="control-image" alt="What we loaded from the spec" />
</div>