v0.9.0

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

CHANGELOG.md

@@ -1,4 +1,27 @@
-# 0.6.0 (February 1, 2015)
+# 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!).
+- Fix incorrect years in `CHANGELOG.md`.
+
+# 0.6.1 (February 2, 2016)
+
+- Simplify the instructions in `CHANGELOG.md`.
+- Rename `LICENSE.md` to `LICENSE`.
+- Update `README.md` content.
+
+# 0.6.0 (February 1, 2016)
 
 - Update indentation and whitespace.
 - Add to npm.

CONTRIBUTING.md

@@ -1,114 +1,7 @@
-# Contributing to this project
+# Contributing Guidelines
 
-*This information is heavily based on [this CONTRIBUTING.md document](https://github.com/necolas/normalize.css/edit/master/CONTRIBUTING.md).*
+- ⇄ Pull requests and ★ Stars are always welcome.
+- For bugs and feature requests, please create an issue.
+- Pull requests must be accompanied by passing all existing automated tests (`$ npm test`).
 
-Before making a contribution, please take a moment to review this document. It will make the process easier and more enjoyable for everyone involved.
-
-Following the guidelines in this document shows that you respect the time of the maintainers of this open-source project. In return, maintainers should show their respect for you by addressing your requests, issues, and contributions in a timely fashion.
-
-## Submitting issues
-
-GitHub’s built-in issue tracker is the preferred channel for bug reports, feature requests, and submitting pull requests.
-
-**Do not** use the issue tracker for personal support questions. They will probably not be addressed.
-**Do not** derail or troll issues. Please try to keep things on topic and be respectful to others.
-
-## Bug reports
-
-*Demo or it didn’t happen.*
-
-A bug is a problem that you can demonstrate to a maintainer on this open-source project. Good bug reports are very helpful, and encouraged!
-
-If you are thinking about reporting a bug, please do the following:
-
-1. **Search for existing issues** - it could have already been reported.
-2. **Check for fixes** - try to reproduce the bug using the latest release on the `master` branch in the repository.
-3. **If the bug persists**, submit an issue and create a live example of the bug using a public service like [jsFiddle](http://jsfiddle.net) or [Codepen](http://codepen.io). Link to your example in the issue that you submit.
-
-Please be as detailed as possible. Ask yourself: What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? What would you expect to be the outcome?
-
-## Feature requests
-
-Feel free to request whatever you like, but please take a moment to think about whether your request is within the scope of the project. You should make a strong case for your request, otherwise the maintaining developers will probably not consider it. Provide as much detail as you can.
-
-## Pull requests
-
-Good pull requests are awesome. Bad pull requests are a headache. They should always be limited by the scope of the request, and avoid including unrelated commits.
-
-**Please file an issue first** before deciding to do a lot of work. Otherwise, you run the risk of wasting time working on something that might not get merged into the project.
-
-Follow this process if you’d like your work to be considered for inclusion in the project:
-
-1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork,
-   and configure the remotes:
-
-   ```bash
-   # Clone your fork of the repo into the current directory
-   git clone https://github.com/<your-username>/html5-test-page
-   # Navigate to the newly cloned directory
-   cd html5-test-page
-   # Assign the original repo to a remote called "upstream"
-   git remote add upstream https://github.com/cbracco/html5-test-page
-   ```
-
-2. If you cloned a while ago, get the latest changes from upstream:
-
-   ```bash
-   git checkout master
-   git pull upstream master
-   ```
-
-3. **Never work directly on `master`**. Create a new topic branch (off the latest version of `master`) to contain your feature, change, or fix:
-
-   ```bash
-   git checkout -b <topic-branch-name>
-   ```
-
-4. Commit your changes in logical chunks. Please adhere to these [git commit
-   message conventions](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
-   or your code is unlikely be merged into the main project. Use Git’s
-   [interactive rebase](https://help.github.com/articles/interactive-rebase)
-   feature to tidy up your commits before making them public.
-
-   Please add a test to the `test.html` file if appropriate, and test
-   your change(s) in all supported browsers.
-
-5. Locally rebase the upstream development branch into your topic branch:
-
-   ```bash
-   git pull --rebase upstream master
-   ```
-
-6. Push your topic branch up to your fork:
-
-   ```bash
-   git push origin <topic-branch-name>
-   ```
-
-10. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) with a clear title and description.
-
-**IMPORTANT**: By submitting a patch, you agree to allow the project owner to
-license your work under the same license as that used by the project.
-
-## Maintainers
-
-If you have commit access, please follow this process for merging patches and
-cutting new releases.
-
-### Accepting patches
-
-1. Check that a patch is within the scope and philosophy of the project.
-2. Check that a patch has any necessary tests and a proper, descriptive commit
-   message.
-3. Test the patch locally.
-4. Do not use GitHub’s merge button. Apply the patch to `master` locally
-   (either via `git am` or by checking the whole branch out). Amend minor
-   problems with the author’s original commit if necessary. Then push to GitHub.
-
-### Releasing a new version
-
-1. Include all new functional changes in the CHANGELOG.
-2. Use a dedicated commit to increment the version. The version needs to be added to the `README.md` and `CHANGELOG.md` (inc. date) files.
-3. The commit message must be of `v0.0.0` format.
-4. Create an annotated tag for the version: `git tag -m "v0.0.0" 0.0.0`.
-5. Push the changes and tags to GitHub: `git push --tags origin master`
+Thanks in advance for helping out!

README.md

@@ -1,10 +1,10 @@
 # HTML5 Test Page
 
+[![npm version](https://badge.fury.io/js/html5-test-page.svg)](https://badge.fury.io/js/html5-test-page)
+
 This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.
 
-I have not been able to find a sufficient test page out there, so I made one.
-
-The HTML elements are loosely categorized as either text, embedded content, or form elements.
+I have not been able to find a dead-simple, standalone test page out there, so I made one. The HTML elements are loosely categorized as either text, embedded content, or form elements.
 
 ## Versioning
 
@@ -16,16 +16,10 @@ HTML5 Test Page will be maintained using the [Semantic Versioning](http://semver
 * New code that does not break backwards compatibility increments `minor`, while resetting `patch`.
 * Bug fixes and other small changes increment `patch`.
 
-## Contributing
-
-Do you have ideas or requests? Please [submit an issue](https://github.com/cbracco/html5-test-page/issues/new) here on GitHub. Or, if you are feeling especially motivated, write some code and submit a pull request!
-
-When submitting a pull request, **please checkout a new feature branch, and submit your pull request from it.** Do not submit pull requests from your `master` branch. Please and thank you.
-
-## License
-
-HTML Test Page is licensed under the MIT Open Source license. For more information, see the [LICENSE.md](https://github.com/cbracco/html5-test-page/blob/master/LICENSE.md) file in this repository.
-
 ## Credits
 
 Made by [@cbracco](http://cbracco.me). This project is based on the [test file](https://github.com/necolas/normalize.css/blob/master/test.html) included in [@necolas](https://github.com/necolas/)’s [normalize.css](https://github.com/necolas/normalize.css/) project.
+
+## [Contributing](CONTRIBUTING.md)
+
+## [License](LICENSE)

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>
@@ -206,16 +230,26 @@
               <p><small>This small text is small for for fine print, etc.</small></p>
               <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
               <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
-              <p><cite>This is a citation.</cite>
-              </p><p>The <dfn>dfn element</dfn> indicates a definition.</p>
+              <p><cite>This is a citation.</cite></p>
+              <p>The <dfn>dfn element</dfn> indicates a definition.</p>
               <p>The <mark>mark element</mark> indicates a highlight.</p>
               <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
               <p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
             </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">
-                <button type="submit">Button</button>
-                <input type="reset" value="Reset">
-                <input type="submit" value="Disabled" disabled>
+                <input type="submit" value="<input type=submit>">
+                <input type="button" value="<input type=button>">
+                <input type="reset" value="<input type=reset>">
+                <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.0",
+  "version": "0.9.0",
   "description": "A page filled with common HTML elements to be used for testing purposes.",
   "main": "index.html",
   "scripts": {