test/demo.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Include JS (Visual) Tests</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
    <style>
      p { line-height: initial; }
      iframe { background-color: #EEE; border: 1px solid #AAA; box-shadow: inset 0 0 5px #AAA; height: 250px; width: 100%; }
      pre code { font-size: 10px; padding: 10px; }
    </style>
  </head>
  <body class="container">

    <h1>Include JS (Visual) Tests</h1>

    <h3>Examples</h3>

    <div class="row">
      <div class="four columns">
        <pre><code class="prettyprint">&lt;include src=&quot;header.html&quot;&gt;&lt;/include&gt;
&lt;article&gt;
  &lt;p&gt;
    We are ACME Inc. We manufacture
    &lt;b&gt;everything&lt;/b&gt;.
  &lt;/p&gt;
&lt;/article&gt;
&lt;include src=&quot;footer.html&quot;&gt;&lt;/include&gt;</code></pre>
      </div>
      <div class="four columns">
        <pre><code class="prettyprint">&lt;ul&gt;
  &lt;li&gt;&lt;include src=&quot;a.html&quot;&gt;&lt;/include&gt;&lt;/li&gt;
  &lt;li&gt;&lt;include src=&quot;b.html&quot;&gt;&lt;/include&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
      </div>
      <div class="four columns">
        <pre><code class="prettyprint">&lt;h1&gt;Welcome!&lt;/h1&gt;
&lt;p&gt;
  Inclusion below displays 404 content.
&lt;/p&gt;
&lt;include src=&quot;huh.html&quot;&gt;&lt;/include&gt;</code></pre>
      </div>
    </div>
    <div class="row">
      <div class="four columns">
        <iframe src="simple.html"></iframe>
        <p>
          Should display a large header "ACME Inc" (in file <code>header.html</code>) and a small footer "Copyright 2016"
          (in file <code>footer.html</code>).
        </p>
      </div>
      <div class="four columns">
        <iframe src="deep.html"></iframe>
        <p>
          Should display a cascading set of paragraphs included from each other (seven in total).
        </p>
      </div>
      <div class="four columns">
        <iframe src="error.html"></iframe>
        <p>
          Should display a 404 error. Using CSS we color the content red based on the status. The exact nature of
          the 404 content depends on what the server returns.
        </p>
      </div>
    </div>

    <script>prettyPrint()</script>
  </body>
</html>