mirror of
https://github.com/cbracco/html5-test-page.git
synced 2025-08-21 21:26:07 +02:00
Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
714dc01c78 | ||
|
|
9d912a6d7d | ||
|
8983ac1be5 | ||
|
|
90c0472293 | ||
|
|
1c2a244555 | ||
|
|
931b8637d5 | ||
|
|
a0c969b93e | ||
|
|
d882dfcb48 | ||
|
|
e191677997 | ||
|
f3ee1b3575 |
12
CHANGELOG.md
12
CHANGELOG.md
@@ -1,3 +1,15 @@
|
|||||||
|
# 0.9.7 (April 3, 2021)
|
||||||
|
|
||||||
|
- Self-close option tags (thanks @ConnorJamesLow!).
|
||||||
|
|
||||||
|
# 0.9.6 (April 3, 2021)
|
||||||
|
|
||||||
|
- Remove classes and valid/invalid inputs.
|
||||||
|
|
||||||
|
# 0.9.5 (April 3, 2021)
|
||||||
|
|
||||||
|
- Add <picture> element (thanks @AurelioDeRosa!).
|
||||||
|
|
||||||
# 0.9.4 (April 3, 2021)
|
# 0.9.4 (April 3, 2021)
|
||||||
|
|
||||||
- Remove unnecessary role attributes. Update headings (thanks @gipsi!).
|
- Remove unnecessary role attributes. Update headings (thanks @gipsi!).
|
||||||
|
|||||||
50
index.html
50
index.html
@@ -6,7 +6,7 @@
|
|||||||
<title>HTML5 Test Page</title>
|
<title>HTML5 Test Page</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="top" class="page" role="document">
|
<div id="top" role="document">
|
||||||
<header>
|
<header>
|
||||||
<h1>HTML5 Test Page</h1>
|
<h1>HTML5 Test Page</h1>
|
||||||
<p>This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.</p>
|
<p>This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.</p>
|
||||||
@@ -295,7 +295,7 @@
|
|||||||
<p><s>This text has a strikethrough</s>.</p>
|
<p><s>This text has a strikethrough</s>.</p>
|
||||||
<p>Superscript<sup>®</sup>.</p>
|
<p>Superscript<sup>®</sup>.</p>
|
||||||
<p>Subscript for things like H<sub>2</sub>O.</p>
|
<p>Subscript for things like H<sub>2</sub>O.</p>
|
||||||
<p><small>This small text is small for for fine print, etc.</small></p>
|
<p><small>This small text is small for fine print, etc.</small></p>
|
||||||
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></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><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><cite>This is a citation.</cite></p>
|
||||||
@@ -323,15 +323,23 @@
|
|||||||
<article id="embedded__images">
|
<article id="embedded__images">
|
||||||
<header><h2>Images</h2></header>
|
<header><h2>Images</h2></header>
|
||||||
<div>
|
<div>
|
||||||
<h3>No <code><figure></code> element</h3>
|
<h3>Plain <code><img></code> element</h3>
|
||||||
<p><img src="https://placekitten.com/480/480" alt="Image alt text"></p>
|
<p><img src="https://placekitten.com/480/480" alt="Photo of a kitten"></p>
|
||||||
<h3>Wrapped in a <code><figure></code> element, no <code><figcaption></code></h3>
|
<h3><code><figure></code> element with <code><img></code> element</h3>
|
||||||
<figure><img src="https://placekitten.com/420/420" alt="Image alt text"></figure>
|
<figure><img src="https://placekitten.com/420/420" alt="Photo of a kitten"></figure>
|
||||||
<h3>Wrapped in a <code><figure></code> element, with a <code><figcaption></code></h3>
|
<h3><code><figure></code> element with <code><img></code> and <code><figcaption></code> elements</h3>
|
||||||
<figure>
|
<figure>
|
||||||
<img src="https://placekitten.com/420/420" alt="Image alt text">
|
<img src="https://placekitten.com/420/420" alt="Photo of a kitten">
|
||||||
<figcaption>Here is a caption for this image.</figcaption>
|
<figcaption>Here is a caption for this image.</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
<h3><code><figure></code> element with a <code><picture></code> element</h3>
|
||||||
|
<figure>
|
||||||
|
<picture>
|
||||||
|
<source srcset="https://placekitten.com/800/800"
|
||||||
|
media="(min-width: 800px)">
|
||||||
|
<img src="https://placekitten.com/420/420" alt="Photo of a kitten" />
|
||||||
|
</picture>
|
||||||
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
</article>
|
</article>
|
||||||
@@ -420,15 +428,7 @@
|
|||||||
<input id="input__text2" type="number" placeholder="Enter a Number">
|
<input id="input__text2" type="number" placeholder="Enter a Number">
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="input__text3" class="error">Error</label>
|
<label for="input__file">File Input</label>
|
||||||
<input id="input__text3" class="is-error" type="text" placeholder="Text Input">
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<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">
|
<input id="input__file" type="file">
|
||||||
</p>
|
</p>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
@@ -459,7 +459,7 @@
|
|||||||
<p><a href="#top">[Top]</a></p>
|
<p><a href="#top">[Top]</a></p>
|
||||||
<fieldset id="forms__checkbox">
|
<fieldset id="forms__checkbox">
|
||||||
<legend>Checkboxes</legend>
|
<legend>Checkboxes</legend>
|
||||||
<ul class="list list--bare">
|
<ul>
|
||||||
<li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
|
<li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
|
||||||
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
|
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
|
||||||
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
|
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
|
||||||
@@ -468,10 +468,10 @@
|
|||||||
<p><a href="#top">[Top]</a></p>
|
<p><a href="#top">[Top]</a></p>
|
||||||
<fieldset id="forms__radio">
|
<fieldset id="forms__radio">
|
||||||
<legend>Radio buttons</legend>
|
<legend>Radio buttons</legend>
|
||||||
<ul class="list list--bare">
|
<ul>
|
||||||
<li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
|
<li><label for="radio1"><input id="radio1" name="radio" type="radio" checked="checked"> Option 1</label></li>
|
||||||
<li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
|
<li><label for="radio2"><input id="radio2" name="radio" type="radio"> Option 2</label></li>
|
||||||
<li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
|
<li><label for="radio3"><input id="radio3" name="radio" type="radio"> Option 3</label></li>
|
||||||
</ul>
|
</ul>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<p><a href="#top">[Top]</a></p>
|
<p><a href="#top">[Top]</a></p>
|
||||||
@@ -521,9 +521,9 @@
|
|||||||
<label for="idl">Datalist</label>
|
<label for="idl">Datalist</label>
|
||||||
<input type="text" id="idl" list="example-list">
|
<input type="text" id="idl" list="example-list">
|
||||||
<datalist id="example-list">
|
<datalist id="example-list">
|
||||||
<option value="Example #1">
|
<option value="Example #1" />
|
||||||
<option value="Example #2">
|
<option value="Example #2" />
|
||||||
<option value="Example #3">
|
<option value="Example #3" />
|
||||||
</datalist>
|
</datalist>
|
||||||
</p>
|
</p>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "html5-test-page",
|
"name": "html5-test-page",
|
||||||
"version": "0.9.4",
|
"version": "0.9.7",
|
||||||
"description": "A page filled with common HTML elements to be used for testing purposes.",
|
"description": "A page filled with common HTML elements to be used for testing purposes.",
|
||||||
"main": "index.html",
|
"main": "index.html",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
Reference in New Issue
Block a user