0.5.0

update iframe src; add viewport meta tag
v0.4.0
2025-08-22 21:53:47 +02:00 · 2015-12-03 18:38:55 -05:00 · 2015-12-03 18:38:34 -05:00 · 2015-08-17 20:41:31 +02:00 · 2015-08-17 20:40:17 +02:00 · 2015-08-17 20:30:20 +02:00
4 changed files with 200 additions and 38 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,32 @@
 # 0.5.0 (December 13, 2015)
 - Update `<iframe>` source attribute to point to `index.html` (so meta).
 - Add viewport `<meta>` tag to `<head>` of `index.html`.
 # 0.4.0 (August 17, 2015)
 - Add `<meter>` element (thanks @haroenv!). Reorganize a few existing elements.
 # 0.3.1 (August 17, 2015)
 - Change placeholder image dimensions to one that works properly (thanks @haroenv!).
 # 0.3.0 (August 17, 2015)
 - Add phone number input field (thanks @johnpolacek!).
 # 0.2.2 (May 13, 2015)
 - Fix validation errors.
 # 0.2.1 (March 21, 2015)
 - Fix duplicate IDs and formatting.
 # 0.2.0 (April 8, 2014)
 - add `<caption>` element to `<table>` examples.
 # 0.1.0 (April 4, 2014)
 - Initial release!
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -0,0 +1,114 @@
 # Contributing to this project
 *This information is heavily based on [this CONTRIBUTING.md document](https://github.com/necolas/normalize.css/edit/master/CONTRIBUTING.md).*
 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`
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# HTML5 Test Page - 0.1.0
+# 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.
@@ -28,4 +28,4 @@ HTML Test Page is licensed under the MIT Open Source license. For more informati
 ## Colophon
-Made by [@cbracco](http://twitter.com/cbracco).
+Made by [@cbracco](http://cbracco.me).
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Test Page</title>
 </head>
 <body>
@@ -22,7 +23,7 @@
                        <li><a href="#text__lists">Lists</a></li>
                        <li><a href="#text__hr">Horizontal rules</a></li>
                        <li><a href="#text__tables">Tabular data</a></li>
-                        <li><a href="#text__syntax">Syntax</a></li>
+                        <li><a href="#text__code">Code</a></li>
                        <li><a href="#text__inline">Inline elements</a></li>
                    </ul>
                </li>
@@ -33,18 +34,20 @@
                        <li><a href="#embedded__audio">Audio</a></li>
                        <li><a href="#embedded__video">Video</a></li>
                        <li><a href="#embedded__canvas">Canvas</a></li>
-                        <li><a href="#embedded__progress">Progress bars</a></li>
+                        <li><a href="#embedded__meter">Meter</a></li>
                        <li><a href="#embedded__progress">Progress</a></li>
                        <li><a href="#embedded__svg">Inline SVG</a></li>
-                        <li><a href="#embedded__iframes">IFrames</a></li>
+                        <li><a href="#embedded__iframe">IFrames</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#forms">Form elements</a>
                    <ul>
-                        <li><a href="#forms__text">Text fields</a></li>
+                        <li><a href="#forms__input">Input fields</a></li>
                        <li><a href="#forms__select">Select menus</a></li>
                        <li><a href="#forms__checkbox">Checkboxes</a></li>
                        <li><a href="#forms__radio">Radio buttons</a></li>
                        <li><a href="#forms__textareas">Textareas</a></li>
                        <li><a href="#forms__html5">HTML5 inputs</a></li>
                        <li><a href="#forms__action">Action buttons</a></li>
                    </ul>
@@ -90,7 +93,7 @@
                        <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>
+                            <cite><a href="#!">Said no one, ever.</a></cite>
                        </blockquote>
                    </div>
@@ -195,8 +198,8 @@
                    <footer><p><a href="#top">[Top]</a></p></footer>
                </article>
-                <article id="text__syntax">
+                <article id="text__code">
-                    <header><h1>Syntax</h1></header>
+                    <header><h1>Code</h1></header>
                    <div>
                        <p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
@@ -205,8 +208,7 @@
                        <h2>Pre-formatted text</h2>
-                        <pre>
+                        <pre>P R E F O R M A T T E D T E X T
 P R E F O R M A T T E D T E X T
 ! " # $ % &amp; ' ( ) * + , - . /
 0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
@@ -222,7 +224,7 @@ p q r s t u v w x y z { | } ~ </pre>
                    <header><h1>Inline elements</h1></header>
                    <div>
-                        <p><a href="#">This is a text link</a>.</p>
+                        <p><a href="#!">This is a text link</a>.</p>
                        <p><strong>Strong is used to indicate strong importance.</strong></p>
@@ -275,7 +277,7 @@ p q r s t u v w x y z { | } ~ </pre>
                        <figure><img src="http://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/360/360" alt="Image alt text">
+                            <img src="http://placekitten.com/420/420" alt="Image alt text">
                            <figcaption>Here is a caption for this image.</figcaption>
                        </figure>
                    </div>
@@ -300,8 +302,14 @@ p q r s t u v w x y z { | } ~ </pre>
                    <footer><p><a href="#top">[Top]</a></p></footer>
                </article>
                <article id="embedded__meter">
                    <header><h2>Meter</h2></header>
                    <div><meter value="2" min="0" max="10">2 out of 10</meter></div>
                    <footer><p><a href="#top">[Top]</a></p></footer>
                </article>
                <article id="embedded__progress">
-                    <header><h2>Progress bars</h2></header>
+                    <header><h2>Progress</h2></header>
                    <div><progress>progress</progress></div>
                    <footer><p><a href="#top">[Top]</a></p></footer>
                </article>
@@ -312,9 +320,9 @@ p q r s t u v w x y z { | } ~ </pre>
                    <footer><p><a href="#top">[Top]</a></p></footer>
                </article>
-                <article id="embedded__iframes">
+                <article id="embedded__iframe">
-                    <header><h2>IFrames</h2></header>
+                    <header><h2>IFrame</h2></header>
-                    <div><iframe src="http://www.google.com" width="100%" height="300" frameborder="0"></iframe></div>
+                    <div><iframe src="index.html" height="300"></iframe></div>
                    <footer><p><a href="#top">[Top]</a></p></footer>
                </article>
            </section>
@@ -322,45 +330,45 @@ p q r s t u v w x y z { | } ~ </pre>
            <section id="forms">
                <header><h1>Form elements</h1></header>
-                <form action="">
+                <form>
-                    <fieldset id="forms__text">
+                    <fieldset id="forms__input">
-                        <legend>Text fields</legend>
+                        <legend>Input fields</legend>
                        <p>
-                            <label for="text">Text Input <abbr title="Required">*</abbr></label>
+                            <label for="input__text">Text Input</label>
-                            <input id="text" type="text" placeholder="Text Input">
+                            <input id="input__text" type="text" placeholder="Text Input">
                        </p>
                        <p>
-                            <label for="password">Password</label>
+                            <label for="input__password">Password</label>
-                            <input id="password" type="password" placeholder="Type your Password">
+                            <input id="input__password" type="password" placeholder="Type your Password">
                        </p>
                        <p>
-                            <label for="webaddress">Web Address</label>
+                            <label for="input__webaddress">Web Address</label>
-                            <input id="webaddress" type="url" placeholder="http://yoursite.com">
+                            <input id="input__webaddress" type="url" placeholder="http://yoursite.com">
                        </p>
                        <p>
-                            <label for="emailaddress">Email Address</label>
+                            <label for="input__emailaddress">Email Address</label>
-                            <input id="emailaddress" type="email" placeholder="name@email.com">
+                            <input id="input__emailaddress" type="email" placeholder="name@email.com">
                        </p>
                        <p>
-                            <label for="search">Search</label>
+                            <label for="input__phone">Phone Number</label>
-                            <input id="search" type="search" placeholder="Enter Search Term">
+                            <input id="input__phone" type="tel" placeholder="(999) 999-9999">
                        </p>
                        <p>
-                            <label for="text">Number Input <abbr title="Required">*</abbr></label>
+                            <label for="input__search">Search</label>
-                            <input id="text" type="number" placeholder="Enter a Number" pattern="[0-9]*">
+                            <input id="input__search" type="search" placeholder="Enter Search Term">
                        </p>
                        <p>
-                            <label for="textarea">Textarea</label>
+                            <label for="input__text2">Number Input</label>
-                            <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
+                            <input id="input__text2" type="number" placeholder="Enter a Number">
                        </p>
                        <p>
-                            <label class="error">Error</label>
+                            <label for="input__text3" class="error">Error</label>
-                            <input class="is-error" type="text" placeholder="Text Input">
+                            <input id="input__text3" class="is-error" type="text" placeholder="Text Input">
                        </p>
                        <p>
-                            <label class="valid">Valid</label>
+                            <label for="input__text4" class="valid">Valid</label>
-                            <input class="is-valid" type="text" placeholder="Text Input">
+                            <input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
                        </p>
                    </fieldset>
@@ -407,6 +415,17 @@ p q r s t u v w x y z { | } ~ </pre>
                    <p><a href="#top">[Top]</a></p>
                    <fieldset id="forms__textareas">
                        <legend>Textareas</legend>
                        <p>
                            <label for="textarea">Textarea</label>
                            <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
                        </p>
                    </fieldset>
                    <p><a href="#top">[Top]</a></p>
                    <fieldset id="forms__html5">
                        <legend>HTML5 inputs</legend>
Author	SHA1	Message	Date
cbracco	0d014c55f7	0.5.0	2015-12-03 18:38:55 -05:00
cbracco	4727a9b233	update iframe src; add viewport meta tag	2015-12-03 18:38:34 -05:00
cbracco	7f81d9f7a3	v0.4.0	2015-08-17 20:41:31 +02:00
cbracco	47719944bc	add meter element; reorganize a few existing elements	2015-08-17 20:40:17 +02:00
cbracco	63bafc731c	rename test.html to index.html	2015-08-17 20:30:20 +02:00
cbracco	8baaacd77e	v0.3.1	2015-08-17 15:58:46 +02:00
cbracco	76753ba02f	Merge branch 'Haroenv-patch-1' * Haroenv-patch-1: place kitten fix	2015-08-17 15:57:46 +02:00
cbracco	cf00512063	Merge branch 'patch-1' of https://github.com/Haroenv/html5-test-page into Haroenv-patch-1 * 'patch-1' of https://github.com/Haroenv/html5-test-page: place kitten fix	2015-08-17 15:57:31 +02:00
cbracco	527134b89a	Merge branch 'master' of https://github.com/cbracco/html5-test-page * 'master' of https://github.com/cbracco/html5-test-page:	2015-08-17 15:30:33 +02:00
cbracco	4f2ed28992	Merge branch 'johnpolacek-master' * johnpolacek-master: add phone number input type	2015-08-17 15:30:28 +02:00
cbracco	649dfac7ae	Merge branch 'johnpolacek-master' * johnpolacek-master: add phone number input type	2015-08-17 15:29:07 +02:00
johnpolacek	033d46eb24	add phone number input type	2015-08-16 07:28:05 -05:00
cbracco	1c0f3d7367	v0.2.2	2015-05-13 16:30:46 +02:00
cbracco	3a86d42023	fix validation errors	2015-05-13 16:29:37 +02:00
Haroen Viaene	12dfea9c4f	place kitten fix	2015-05-04 18:27:01 +02:00
cbracco	3ce9efeb8e	v0.2.1	2015-03-21 19:17:37 +01:00
cbracco	36e69fb5bc	update readme	2015-03-21 19:09:03 +01:00
cbracco	1602ce3a45	Merge branch 'miller345-patch-1' * miller345-patch-1: update formatting and IDs Fixed duplicate IDs	2015-03-21 19:08:03 +01:00
cbracco	a73b6fef0b	update formatting and IDs	2015-03-21 19:07:32 +01:00
Joel Miller	8a1c7b6906	Fixed duplicate IDs there was 3 instances of id="text"	2015-03-20 21:08:11 +00:00
Chris Bracco	7856bae2a3	Update CONTRIBUTING.md Removed some irrelevant information.	2014-04-09 18:49:23 -04:00
cbracco	557ee5c23b	added CONTRIBUTING.md	2014-04-08 11:50:43 -04:00