mirror of
https://github.com/cbracco/html5-test-page.git
synced 2025-08-20 21:01:51 +02:00
Compare commits
22 Commits
0.6.0
...
97arushish
| Author | SHA1 | Date | |
|---|---|---|---|
|
7611bf513b | ||
|
|
9c92199a7e | ||
|
5cdb76d0fb | ||
|
|
a7b56dec9b | ||
|
|
8f241cf5f1 | ||
|
|
1fecd23aa7 | ||
|
|
66a77835cc | ||
|
ab4675eae5 | ||
|
|
3b85be264e | ||
|
|
d4d5224177 | ||
|
|
23c3d5f7c9 | ||
|
ffd3e00512 | ||
|
|
3a0973f6fa | ||
|
|
58308fc6bd | ||
|
|
f54b5040be | ||
|
c7d89818d6 | ||
|
|
5ff15df75d | ||
|
|
5c388acf5e | ||
|
a6d11b25a2 | ||
|
|
e437f3a7c2 | ||
|
|
d0784b7184 | ||
|
|
334369bc88 |
3
.editorconfig
Normal file
3
.editorconfig
Normal file
@@ -0,0 +1,3 @@
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
29
CHANGELOG.md
29
CHANGELOG.md
@@ -1,4 +1,31 @@
|
||||
# 0.6.0 (February 1, 2015)
|
||||
# 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!).
|
||||
|
||||
# 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.
|
||||
|
||||
117
CONTRIBUTING.md
117
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!
|
||||
|
||||
20
README.md
20
README.md
@@ -1,10 +1,10 @@
|
||||
# HTML5 Test Page
|
||||
|
||||
[](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)
|
||||
|
||||
120
index.html
120
index.html
@@ -1,4 +1,4 @@
|
||||
<!doctype html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@@ -18,18 +18,23 @@
|
||||
<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>
|
||||
<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>
|
||||
@@ -37,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>
|
||||
@@ -77,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>
|
||||
@@ -111,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>
|
||||
@@ -206,33 +232,48 @@
|
||||
<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">
|
||||
<header><h2>Images</h2></header>
|
||||
<div>
|
||||
<h3>No <code><figure></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><figure></code> element, no <code><figcaption></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><figure></code> element, with a <code><figcaption></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>
|
||||
@@ -268,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>
|
||||
@@ -284,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>
|
||||
@@ -310,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">
|
||||
@@ -386,15 +441,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"><button type=submit></button>
|
||||
<button type="button"><button type=button></button>
|
||||
<button type="reset"><button type=reset></button>
|
||||
<button type="button" disabled><button disabled></button>
|
||||
</p>
|
||||
</fieldset>
|
||||
<p><a href="#top">[Top]</a></p>
|
||||
@@ -402,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>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "html5-test-page",
|
||||
"version": "0.6.0",
|
||||
"version": "0.9.1",
|
||||
"description": "A page filled with common HTML elements to be used for testing purposes.",
|
||||
"main": "index.html",
|
||||
"scripts": {
|
||||
|
||||
Reference in New Issue
Block a user