v0.9.1

Clean up BG image PR
horizontal list and text color
2025-08-21 13:21:56 +02:00 · 2021-04-03 15:05:45 -04:00 · 2021-04-03 15:04:31 -04:00 · 2021-04-03 14:59:41 -04:00 · 2021-04-03 14:59:19 -04:00 · 2021-04-03 14:56:36 -04:00
4 changed files with 83 additions and 19 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,3 @@
+[*]
+indent_style = space
+indent_size = 2
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# 0.9.1 (April 3, 2021)
+
+- Add background images (thanks @97arushisharma!).
+
+# 0.9.0 (April 3, 2021)
+
+- Add <details>, <address>, <object>, <embed>, <datalist> (thanks @jKratzik!).
+
 # 0.8.0 (March 19, 2018)

 - Add test for HTML comments (thanks @ep00ch!).
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
@@ -18,8 +18,10 @@
            <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>
@@ -30,7 +32,9 @@
          <li>
            <a href="#embedded">Embedded content</a>
            <ul>
+
              <li><a href="#embedded__images">Images</a></li>
+              <li><a href="#embedded__bgimages">Background images</a></li>
              <li><a href="#embedded__audio">Audio</a></li>
              <li><a href="#embedded__video">Video</a></li>
              <li><a href="#embedded__canvas">Canvas</a></li>
@@ -38,6 +42,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>
@@ -78,17 +84,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>
@@ -112,6 +107,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>
@@ -233,17 +258,22 @@
            <header><h2>Images</h2></header>
            <div>
              <h3>No <code>&lt;figure&gt;</code> element</h3>
-              <p><img src="http://placekitten.com/480/480" alt="Image alt text"></p>
+              <p><img src="https://placekitten.com/480/480" alt="Image alt text"></p>
              <h3>Wrapped in a <code>&lt;figure&gt;</code> element, no <code>&lt;figcaption&gt;</code></h3>
-              <figure><img src="http://placekitten.com/420/420" alt="Image alt text"></figure>
+              <figure><img src="https://placekitten.com/420/420" alt="Image alt text"></figure>
              <h3>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaption&gt;</code></h3>
              <figure>
-                <img src="http://placekitten.com/420/420" alt="Image alt text">
+                <img src="https://placekitten.com/420/420" alt="Image alt text">
                <figcaption>Here is a caption for this image.</figcaption>
              </figure>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
+          <article id="embedded__bgimages">
+            <header><h2>Background images</h2></header>
+            <div style="background-image:url('https://placekitten.com/300/300'); width:300px; height: 300px;"></div>
+            <footer><p><a href="#top">[Top]</a></p></footer>
+          </article>
          <article id="embedded__audio">
            <header><h2>Audio</h2></header>
            <div><audio controls="">audio</audio></div>
@@ -279,6 +309,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>
@@ -295,7 +335,7 @@
              </p>
              <p>
                <label for="input__webaddress">Web Address</label>
-                <input id="input__webaddress" type="url" placeholder="http://yoursite.com">
+                <input id="input__webaddress" type="url" placeholder="https://yoursite.com">
              </p>
              <p>
                <label for="input__emailaddress">Email Address</label>
@@ -321,6 +361,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">
@@ -397,6 +441,15 @@
                <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">
@@ -419,7 +472,7 @@
        </section>
      </main>
      <footer role="contentinfo">
-        <p>Made by <a href="http://twitter.com/cbracco">@cbracco</a>. Code on <a href="http://github.com/cbracco/html5-test-page">GitHub</a>.</p>
+        <p>Made by <a href="https://twitter.com/cbracco">@cbracco</a>. Code on <a href="https://github.com/cbracco/html5-test-page">GitHub</a>.</p>
      </footer>
    </div>
  </body>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "html5-test-page",
-  "version": "0.8.0",
+  "version": "0.9.1",
  "description": "A page filled with common HTML elements to be used for testing purposes.",
  "main": "index.html",
  "scripts": {
Author	SHA1	Message	Date
Chris Bracco	7611bf513b	v0.9.1	2021-04-03 15:05:45 -04:00
Chris Bracco	9c92199a7e	Clean up BG image PR	2021-04-03 15:04:31 -04:00
97arushisharma	5cdb76d0fb	horizontal list and text color	2021-04-03 14:59:41 -04:00
Chris Bracco	a7b56dec9b	Add .editorconfig	2021-04-03 14:59:19 -04:00
Chris Bracco	8f241cf5f1	Merge pull request #35 from cbracco/jKratzik-master Add <details>, <address>, <object>, <embed>, <datalist>	2021-04-03 14:56:36 -04:00
Chris Bracco	1fecd23aa7	v0.9.0	2021-04-03 14:55:34 -04:00
Chris Bracco	66a77835cc	Remove <keygen>; Re-organize additions	2021-04-03 14:49:23 -04:00
jKratzik	ab4675eae5	Added a few elements address, details, embed, object, file input, datalist, keygen	2021-04-03 14:34:53 -04:00