v0.9.0

address, details, embed, object, file input, datalist, keygen

CHANGELOG.md

@@ -1,3 +1,15 @@
+# 0.9.0 (March 19, 2018)
+
+- Add <details>, <address>, <object>, <embed>, <datalist> (thanks @jKratzik!).
+
+# 0.8.0 (March 19, 2018)
+
+- Add test for HTML comments (thanks @ep00ch!).
+
+# 0.7.1 (April 5, 2016)
+
+- Add missing form button types (thanks @gnowland!).
+
 # 0.6.2 (March 14, 2016)
 
 - Minor formatting change (thanks @gilluminate!).

index.html

@@ -18,12 +18,15 @@
             <ul>
               <li><a href="#text__headings">Headings</a></li>
               <li><a href="#text__paragraphs">Paragraphs</a></li>
-              <li><a href="#text__blockquotes">Blockquotes</a></li>
               <li><a href="#text__lists">Lists</a></li>
+              <li><a href="#text__blockquotes">Blockquotes</a></li>
+              <li><a href="#text__details">Details / Summary</a></li>
+              <li><a href="#text__address">Address</a></li>
               <li><a href="#text__hr">Horizontal rules</a></li>
               <li><a href="#text__tables">Tabular data</a></li>
               <li><a href="#text__code">Code</a></li>
               <li><a href="#text__inline">Inline elements</a></li>
+              <li><a href="#text__comments">HTML Comments</a></li>
             </ul>
           </li>
           <li>
@@ -37,6 +40,8 @@
               <li><a href="#embedded__progress">Progress</a></li>
               <li><a href="#embedded__svg">Inline SVG</a></li>
               <li><a href="#embedded__iframe">IFrames</a></li>
+              <li><a href="#embedded__embed">Embed</a></li>
+              <li><a href="#embedded__object">Object</a></li>
             </ul>
           </li>
           <li>
@@ -77,17 +82,6 @@
             </div>
             <footer><p><a href="#top">[Top]</a></p></footer>
           </article>
-          <article id="text__blockquotes">
-            <header><h1>Blockquotes</h1></header>
-            <div>
-              <blockquote>
-                <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
-                <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
-                <cite><a href="#!">Said no one, ever.</a></cite>
-              </blockquote>
-            </div>
-            <footer><p><a href="#top">[Top]</a></p></footer>
-          </article>
           <article id="text__lists">
             <header><h1>Lists</h1></header>
             <div>
@@ -111,6 +105,36 @@
             </div>
             <footer><p><a href="#top">[Top]</a></p></footer>
           </article>
+          <article id="text__blockquotes">
+            <header><h1>Blockquotes</h1></header>
+            <div>
+              <blockquote>
+                <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
+                <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
+                <cite><a href="#!">Said no one, ever.</a></cite>
+              </blockquote>
+            </div>
+            <footer><p><a href="#top">[Top]</a></p></footer>
+          </article>
+          <article id="text__details">
+            <header><h1>Details / Summary</h1></header>
+            <details>
+              <summary>Expand for details</summary>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique voluptatibus dicta consequuntur animi. Quaerat facilis quidem unde eos! Ipsa.</p>
+            </details>
+            <footer><p><a href="#top">[Top]</a></p></footer>
+          </article>
+          <article id="text__address">
+            <header><h1>Address</h1></header>
+            <address>
+              Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
+              Visit us at:<br>
+              Example.com<br>
+              Box 564, Disneyland<br>
+              USA
+            </address>
+            <footer><p><a href="#top">[Top]</a></p></footer>
+          </article>
           <article id="text__hr">
             <header><h1>Horizontal rules</h1></header>
             <div>
@@ -214,8 +238,18 @@
             </div>
             <footer><p><a href="#top">[Top]</a></p></footer>
           </article>
+          <article id="text__comments">
+            <header><h1>HTML Comments</h1></header>
+            <div>
+              <p>There is comment here: <!--This comment should not be displayed--></p>
+              <p>There is a comment spanning multiple tags and lines below here.</p>
+              <!--<p><a href="#!">This is a text link. But it should not be displayed in a comment</a>.</p>
+              <p><strong>Strong is used to indicate strong importance. But, it should not be displayed in a comment</strong></p>
+              <p><em>This text has added emphasis. But, it should not be displayed in a comment</em></p>-->
+            </div>
+            <footer><p><a href="#top">[Top]</a></p></footer>
+          </article>
         </section>
-
         <section id="embedded">
           <header><h1>Embedded content</h1></header>
           <article id="embedded__images">
@@ -268,6 +302,16 @@
             <div><iframe src="index.html" height="300"></iframe></div>
             <footer><p><a href="#top">[Top]</a></p></footer>
           </article>
+          <article id="embedded__embed">
+            <header><h2>Embed</h2></header>
+            <div><embed src="index.html" height="300"></div>
+            <footer><p><a href="#top">[Top]</a></p></footer>
+          </article>
+          <article id="embedded__object">
+            <header><h2>Object</h2></header>
+            <div><object data="index.html" height="300"></object></div>
+            <footer><p><a href="#top">[Top]</a></p></footer>
+          </article>
         </section>
         <section id="forms">
           <header><h1>Form elements</h1></header>
@@ -310,6 +354,10 @@
                 <label for="input__text4" class="valid">Valid</label>
                 <input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
               </p>
+              <p>
+                <label for="input__file" class="button">File Input</label>
+                <input id="input__file" type="file">
+              </p>
             </fieldset>
             <p><a href="#top">[Top]</a></p>
             <fieldset id="forms__select">
@@ -386,15 +434,30 @@
                 <label for="idtl">Datetime-local input</label>
                 <input type="datetime-local" id="idtl" value="1970-01-01T00:00">
               </p>
+              <p>
+                <label for="idl">Datalist</label>
+                <input type="text" id="idl" list="example-list">
+                <datalist id="example-list">
+                  <option value="Example #1">
+                  <option value="Example #2">
+                  <option value="Example #3">
+                </datalist>
+              </p>
             </fieldset>
             <p><a href="#top">[Top]</a></p>
             <fieldset id="forms__action">
               <legend>Action buttons</legend>
               <p>
-                <input type="submit" value="Input">
+                <input type="submit" value="<input type=submit>">
-                <button type="submit">Button</button>
+                <input type="button" value="<input type=button>">
-                <input type="reset" value="Reset">
+                <input type="reset" value="<input type=reset>">
-                <input type="submit" value="Disabled" disabled>
+                <input type="submit" value="<input disabled>" disabled>
+              </p>
+              <p>
+                <button type="submit">&lt;button type=submit&gt;</button>
+                <button type="button">&lt;button type=button&gt;</button>
+                <button type="reset">&lt;button type=reset&gt;</button>
+                <button type="button" disabled>&lt;button disabled&gt;</button>
               </p>
             </fieldset>
             <p><a href="#top">[Top]</a></p>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html5-test-page",
-  "version": "0.6.2",
+  "version": "0.9.0",
   "description": "A page filled with common HTML elements to be used for testing purposes.",
   "main": "index.html",
   "scripts": {