Commit
Author: Adam Argyle [atom@argyleink.com]
Hash: ec061372a47c8772731288c1f1f0750699c6b51d
Timestamp: Fri, 17 Sep 2021 04:57:45 +0000 (3 years ago)

+422 -0 +/-1 browse
add a test file for insuring no regressions in reset
1diff --git a/test/index.html b/test/index.html
2new file mode 100644
3index 0000000..2a40239
4--- /dev/null
5+++ b/test/index.html
6 @@ -0,0 +1,422 @@
7+ <!DOCTYPE html>
8+ <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
9+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
10+ <title>HTML5 Test Page</title>
11+ <link rel="stylesheet" href="../props.css">
12+ <link rel="stylesheet" href="../reset.css">
13+ </head>
14+ <body>
15+ <div id="top" class="page" role="document">
16+ <header role="banner">
17+ <h1>HTML5 Test Page</h1>
18+ <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>
19+ </header>
20+ <nav role="navigation">
21+ <ul>
22+ <li>
23+ <a href="https://cbracco.github.io/html5-test-page/#text">Text</a>
24+ <ul>
25+ <li><a href="https://cbracco.github.io/html5-test-page/#text__headings">Headings</a></li>
26+ <li><a href="https://cbracco.github.io/html5-test-page/#text__paragraphs">Paragraphs</a></li>
27+ <li><a href="https://cbracco.github.io/html5-test-page/#text__blockquotes">Blockquotes</a></li>
28+ <li><a href="https://cbracco.github.io/html5-test-page/#text__lists">Lists</a></li>
29+ <li><a href="https://cbracco.github.io/html5-test-page/#text__hr">Horizontal rules</a></li>
30+ <li><a href="https://cbracco.github.io/html5-test-page/#text__tables">Tabular data</a></li>
31+ <li><a href="https://cbracco.github.io/html5-test-page/#text__code">Code</a></li>
32+ <li><a href="https://cbracco.github.io/html5-test-page/#text__inline">Inline elements</a></li>
33+ <li><a href="https://cbracco.github.io/html5-test-page/#text__comments">HTML Comments</a></li>
34+ </ul>
35+ </li>
36+ <li>
37+ <a href="https://cbracco.github.io/html5-test-page/#embedded">Embedded content</a>
38+ <ul>
39+ <li><a href="https://cbracco.github.io/html5-test-page/#embedded__images">Images</a></li>
40+ <li><a href="https://cbracco.github.io/html5-test-page/#embedded__audio">Audio</a></li>
41+ <li><a href="https://cbracco.github.io/html5-test-page/#embedded__video">Video</a></li>
42+ <li><a href="https://cbracco.github.io/html5-test-page/#embedded__canvas">Canvas</a></li>
43+ <li><a href="https://cbracco.github.io/html5-test-page/#embedded__meter">Meter</a></li>
44+ <li><a href="https://cbracco.github.io/html5-test-page/#embedded__progress">Progress</a></li>
45+ <li><a href="https://cbracco.github.io/html5-test-page/#embedded__svg">Inline SVG</a></li>
46+ <li><a href="https://cbracco.github.io/html5-test-page/#embedded__iframe">IFrames</a></li>
47+ </ul>
48+ </li>
49+ <li>
50+ <a href="https://cbracco.github.io/html5-test-page/#forms">Form elements</a>
51+ <ul>
52+ <li><a href="https://cbracco.github.io/html5-test-page/#forms__input">Input fields</a></li>
53+ <li><a href="https://cbracco.github.io/html5-test-page/#forms__select">Select menus</a></li>
54+ <li><a href="https://cbracco.github.io/html5-test-page/#forms__checkbox">Checkboxes</a></li>
55+ <li><a href="https://cbracco.github.io/html5-test-page/#forms__radio">Radio buttons</a></li>
56+ <li><a href="https://cbracco.github.io/html5-test-page/#forms__textareas">Textareas</a></li>
57+ <li><a href="https://cbracco.github.io/html5-test-page/#forms__html5">HTML5 inputs</a></li>
58+ <li><a href="https://cbracco.github.io/html5-test-page/#forms__action">Action buttons</a></li>
59+ </ul>
60+ </li>
61+ </ul>
62+ </nav>
63+ <main role="main">
64+ <section id="text">
65+ <header><h1>Text</h1></header>
66+ <article id="text__headings">
67+ <header>
68+ <h1>Headings</h1>
69+ </header>
70+ <div>
71+ <h1>Heading 1</h1>
72+ <h2>Heading 2</h2>
73+ <h3>Heading 3</h3>
74+ <h4>Heading 4</h4>
75+ <h5>Heading 5</h5>
76+ <h6>Heading 6</h6>
77+ </div>
78+ <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
79+ </article>
80+ <article id="text__paragraphs">
81+ <header><h1>Paragraphs</h1></header>
82+ <div>
83+ <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
84+ </div>
85+ <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
86+ </article>
87+ <article id="text__blockquotes">
88+ <header><h1>Blockquotes</h1></header>
89+ <div>
90+ <blockquote>
91+ <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>
92+ <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>
93+ <cite><a href="https://cbracco.github.io/html5-test-page/#!">Said no one, ever.</a></cite>
94+ </blockquote>
95+ </div>
96+ <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
97+ </article>
98+ <article id="text__lists">
99+ <header><h1>Lists</h1></header>
100+ <div>
101+ <h3>Definition list</h3>
102+ <dl>
103+ <dt>Definition List Title</dt>
104+ <dd>This is a definition list division.</dd>
105+ </dl>
106+ <h3>Ordered List</h3>
107+ <ol>
108+ <li>List Item 1</li>
109+ <li>List Item 2</li>
110+ <li>List Item 3</li>
111+ </ol>
112+ <h3>Unordered List</h3>
113+ <ul>
114+ <li>List Item 1</li>
115+ <li>List Item 2</li>
116+ <li>List Item 3</li>
117+ </ul>
118+ </div>
119+ <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
120+ </article>
121+ <article id="text__hr">
122+ <header><h1>Horizontal rules</h1></header>
123+ <div>
124+ <hr>
125+ </div>
126+ <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
127+ </article>
128+ <article id="text__tables">
129+ <header><h1>Tabular data</h1></header>
130+ <table>
131+ <caption>Table Caption</caption>
132+ <thead>
133+ <tr>
134+ <th>Table Heading 1</th>
135+ <th>Table Heading 2</th>
136+ <th>Table Heading 3</th>
137+ <th>Table Heading 4</th>
138+ <th>Table Heading 5</th>
139+ </tr>
140+ </thead>
141+ <tfoot>
142+ <tr>
143+ <th>Table Footer 1</th>
144+ <th>Table Footer 2</th>
145+ <th>Table Footer 3</th>
146+ <th>Table Footer 4</th>
147+ <th>Table Footer 5</th>
148+ </tr>
149+ </tfoot>
150+ <tbody>
151+ <tr>
152+ <td>Table Cell 1</td>
153+ <td>Table Cell 2</td>
154+ <td>Table Cell 3</td>
155+ <td>Table Cell 4</td>
156+ <td>Table Cell 5</td>
157+ </tr>
158+ <tr>
159+ <td>Table Cell 1</td>
160+ <td>Table Cell 2</td>
161+ <td>Table Cell 3</td>
162+ <td>Table Cell 4</td>
163+ <td>Table Cell 5</td>
164+ </tr>
165+ <tr>
166+ <td>Table Cell 1</td>
167+ <td>Table Cell 2</td>
168+ <td>Table Cell 3</td>
169+ <td>Table Cell 4</td>
170+ <td>Table Cell 5</td>
171+ </tr>
172+ <tr>
173+ <td>Table Cell 1</td>
174+ <td>Table Cell 2</td>
175+ <td>Table Cell 3</td>
176+ <td>Table Cell 4</td>
177+ <td>Table Cell 5</td>
178+ </tr>
179+ </tbody>
180+ </table>
181+ <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
182+ </article>
183+ <article id="text__code">
184+ <header><h1>Code</h1></header>
185+ <div>
186+ <p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
187+ <p><strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code></p>
188+ <p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
189+ <h2>Pre-formatted text</h2>
190+ <pre>P R E F O R M A T T E D T E X T
191+ ! " # $ % &amp; ' ( ) * + , - . /
192+ 0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
193+ @ A B C D E F G H I J K L M N O
194+ P Q R S T U V W X Y Z [ \ ] ^ _
195+ ` a b c d e f g h i j k l m n o
196+ p q r s t u v w x y z { | } ~ </pre>
197+ </div>
198+ <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
199+ </article>
200+ <article id="text__inline">
201+ <header><h1>Inline elements</h1></header>
202+ <div>
203+ <p><a href="https://cbracco.github.io/html5-test-page/#!">This is a text link</a>.</p>
204+ <p><strong>Strong is used to indicate strong importance.</strong></p>
205+ <p><em>This text has added emphasis.</em></p>
206+ <p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
207+ <p>The <i>i element</i> is text that is offset from the normal text.</p>
208+ <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
209+ <p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
210+ <p><s>This text has a strikethrough</s>.</p>
211+ <p>Superscript<sup>®</sup>.</p>
212+ <p>Subscript for things like H<sub>2</sub>O.</p>
213+ <p><small>This small text is small for for fine print, etc.</small></p>
214+ <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
215+ <p><q cite="./index_files/q">This text is a short inline quotation.</q></p>
216+ <p><cite>This is a citation.</cite></p>
217+ <p>The <dfn>dfn element</dfn> indicates a definition.</p>
218+ <p>The <mark>mark element</mark> indicates a highlight.</p>
219+ <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
220+ <p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
221+ </div>
222+ <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
223+ </article>
224+ <article id="text__comments">
225+ <header><h1>HTML Comments</h1></header>
226+ <div>
227+ <p>There is comment here: <!--This comment should not be displayed--></p>
228+ <p>There is a comment spanning multiple tags and lines below here.</p>
229+ <!--<p><a href="#!">This is a text link. But it should not be displayed in a comment</a>.</p>
230+               <p><strong>Strong is used to indicate strong importance. But, it should not be displayed in a comment</strong></p>
231+               <p><em>This text has added emphasis. But, it should not be displayed in a comment</em></p>-->
232+ </div>
233+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
234+ </article>
235+ </section>
236+ <section id="embedded">
237+ <header><h1>Embedded content</h1></header>
238+ <article id="embedded__images">
239+ <header><h2>Images</h2></header>
240+ <div>
241+ <h3>No <code>&lt;figure&gt;</code> element</h3>
242+ <p><img src="./index_files/480" alt="Image alt text"></p>
243+ <h3>Wrapped in a <code>&lt;figure&gt;</code> element, no <code>&lt;figcaption&gt;</code></h3>
244+ <figure><img src="./index_files/420" alt="Image alt text"></figure>
245+ <h3>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaption&gt;</code></h3>
246+ <figure>
247+ <img src="./index_files/420" alt="Image alt text">
248+ <figcaption>Here is a caption for this image.</figcaption>
249+ </figure>
250+ </div>
251+ <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
252+ </article>
253+ <article id="embedded__audio">
254+ <header><h2>Audio</h2></header>
255+ <div><audio controls="">audio</audio></div>
256+ <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
257+ </article>
258+ <article id="embedded__video">
259+ <header><h2>Video</h2></header>
260+ <div><video controls="">video</video></div>
261+ <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
262+ </article>
263+ <article id="embedded__canvas">
264+ <header><h2>Canvas</h2></header>
265+ <div><canvas>canvas</canvas></div>
266+ <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
267+ </article>
268+ <article id="embedded__meter">
269+ <header><h2>Meter</h2></header>
270+ <div><meter value="2" min="0" max="10">2 out of 10</meter></div>
271+ <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
272+ </article>
273+ <article id="embedded__progress">
274+ <header><h2>Progress</h2></header>
275+ <div><progress>progress</progress></div>
276+ <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
277+ </article>
278+ <article id="embedded__svg">
279+ <header><h2>Inline SVG</h2></header>
280+ <div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div>
281+ <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
282+ </article>
283+ <article id="embedded__iframe">
284+ <header><h2>IFrame</h2></header>
285+ <div><iframe src="./index_files/index.html" height="300"></iframe></div>
286+ <footer><p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p></footer>
287+ </article>
288+ </section>
289+ <section id="forms">
290+ <header><h1>Form elements</h1></header>
291+ <form>
292+ <fieldset id="forms__input">
293+ <legend>Input fields</legend>
294+ <p>
295+ <label for="input__text">Text Input</label>
296+ <input id="input__text" type="text" placeholder="Text Input">
297+ </p>
298+ <p>
299+ <label for="input__password">Password</label>
300+ <input id="input__password" type="password" placeholder="Type your Password">
301+ </p>
302+ <p>
303+ <label for="input__webaddress">Web Address</label>
304+ <input id="input__webaddress" type="url" placeholder="http://yoursite.com">
305+ </p>
306+ <p>
307+ <label for="input__emailaddress">Email Address</label>
308+ <input id="input__emailaddress" type="email" placeholder="name@email.com">
309+ </p>
310+ <p>
311+ <label for="input__phone">Phone Number</label>
312+ <input id="input__phone" type="tel" placeholder="(999) 999-9999">
313+ </p>
314+ <p>
315+ <label for="input__search">Search</label>
316+ <input id="input__search" type="search" placeholder="Enter Search Term">
317+ </p>
318+ <p>
319+ <label for="input__text2">Number Input</label>
320+ <input id="input__text2" type="number" placeholder="Enter a Number">
321+ </p>
322+ <p>
323+ <label for="input__text3" class="error">Error</label>
324+ <input id="input__text3" class="is-error" type="text" placeholder="Text Input">
325+ </p>
326+ <p>
327+ <label for="input__text4" class="valid">Valid</label>
328+ <input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
329+ </p>
330+ </fieldset>
331+ <p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p>
332+ <fieldset id="forms__select">
333+ <legend>Select menus</legend>
334+ <p>
335+ <label for="select">Select</label>
336+ <select id="select">
337+ <optgroup label="Option Group">
338+ <option>Option One</option>
339+ <option>Option Two</option>
340+ <option>Option Three</option>
341+ </optgroup>
342+ </select>
343+ </p>
344+ </fieldset>
345+ <p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p>
346+ <fieldset id="forms__checkbox">
347+ <legend>Checkboxes</legend>
348+ <ul class="list list--bare">
349+ <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
350+ <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
351+ <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
352+ </ul>
353+ </fieldset>
354+ <p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p>
355+ <fieldset id="forms__radio">
356+ <legend>Radio buttons</legend>
357+ <ul class="list list--bare">
358+ <li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
359+ <li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
360+ <li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
361+ </ul>
362+ </fieldset>
363+ <p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p>
364+ <fieldset id="forms__textareas">
365+ <legend>Textareas</legend>
366+ <p>
367+ <label for="textarea">Textarea</label>
368+ <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
369+ </p>
370+ </fieldset>
371+ <p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p>
372+ <fieldset id="forms__html5">
373+ <legend>HTML5 inputs</legend>
374+ <p>
375+ <label for="ic">Color input</label>
376+ <input type="color" id="ic" value="#000000">
377+ </p>
378+ <p>
379+ <label for="in">Number input</label>
380+ <input type="number" id="in" min="0" max="10" value="5">
381+ </p>
382+ <p>
383+ <label for="ir">Range input</label>
384+ <input type="range" id="ir" value="10">
385+ </p>
386+ <p>
387+ <label for="idd">Date input</label>
388+ <input type="date" id="idd" value="1970-01-01">
389+ </p>
390+ <p>
391+ <label for="idm">Month input</label>
392+ <input type="month" id="idm" value="1970-01">
393+ </p>
394+ <p>
395+ <label for="idw">Week input</label>
396+ <input type="week" id="idw" value="1970-W01">
397+ </p>
398+ <p>
399+ <label for="idt">Datetime input</label>
400+ <input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
401+ </p>
402+ <p>
403+ <label for="idtl">Datetime-local input</label>
404+ <input type="datetime-local" id="idtl" value="1970-01-01T00:00">
405+ </p>
406+ </fieldset>
407+ <p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p>
408+ <fieldset id="forms__action">
409+ <legend>Action buttons</legend>
410+ <p>
411+ <input type="submit" value="&lt;input type=submit&gt;">
412+ <input type="button" value="&lt;input type=button&gt;">
413+ <input type="reset" value="&lt;input type=reset&gt;">
414+ <input type="submit" value="&lt;input disabled&gt;" disabled="">
415+ </p>
416+ <p>
417+ <button type="submit">&lt;button type=submit&gt;</button>
418+ <button type="button">&lt;button type=button&gt;</button>
419+ <button type="reset">&lt;button type=reset&gt;</button>
420+ <button type="button" disabled="">&lt;button disabled&gt;</button>
421+ </p>
422+ </fieldset>
423+ <p><a href="https://cbracco.github.io/html5-test-page/#top">[Top]</a></p>
424+ </form>
425+ </section>
426+ </main>
427+ </div>
428+ </body></html>
429\ No newline at end of file