-
Notifications
You must be signed in to change notification settings - Fork 1
/
pnh_tag_test_html5.inc.html
350 lines (317 loc) · 17.3 KB
/
pnh_tag_test_html5.inc.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
<!-- pnh_tag_test.html -->
<!-- this is a test, its only a test -->
<!-- include, or copy and paste this document into the content area of
your template to check that a variety of html tags are styled properly -->
<!-- Originally Released 3.15.2006 - Chris Casciano - http://placenamehere.com/ -->
<!-- Latest Version at: https://github.com/placenamehere/PNHTagTest -->
<p>start test of text styling of many html tags <a href="#pttindex">jump to index</a></p>
<!-- HEADER TESTS -->
<!-- HEADER TESTS -->
<!-- HEADER TESTS -->
<h1 id="pttheaders">Header Test h1</h1>
<h2>Header Test h2</h2>
<h3>Header Test h3</h3>
<h4>Header Test h4</h4>
<h5>Header Test h5</h5>
<h6>Header Test h6</h6>
<h1>Long Header Test h1 – This may cause the <a href="#">text to wrap</a>. That is the intention. This may cause the <a href="#">text to wrap</a>. That is the intention. This may cause the <a href="#">text to wrap</a>. That is the intention. – h1</h1>
<h2>Long Header Test h2 – This may cause the <a href="#">text to wrap</a>. That is the intention. This may cause the <a href="#">text to wrap</a>. That is the intention. This may cause the <a href="#">text to wrap</a>. That is the intention. – h2</h2>
<h3>Long Header Test h3 – This may cause the <a href="#">text to wrap</a>. That is the intention. This may cause the <a href="#">text to wrap</a>. That is the intention. This may cause the <a href="#">text to wrap</a>. That is the intention. – h3</h3>
<h4>Long Header Test h4 – This may cause the <a href="#">text to wrap</a>. That is the intention. This may cause the <a href="#">text to wrap</a>. That is the intention. This may cause the <a href="#">text to wrap</a>. That is the intention. – h4</h4>
<h5>Long Header Test h5 – This may cause the <a href="#">text to wrap</a>. That is the intention. This may cause the <a href="#">text to wrap</a>. That is the intention. This may cause the <a href="#">text to wrap</a>. That is the intention. – h5</h5>
<h6>Long Header Test h6 – This may cause the <a href="#">text to wrap</a>. That is the intention. This may cause the <a href="#">text to wrap</a>. That is the intention. This may cause the <a href="#">text to wrap</a>. That is the intention. – h6</h6>
<!-- STANDARD TEXT TESTS -->
<!-- STANDARD TEXT TESTS -->
<!-- STANDARD TEXT TESTS -->
<p id="pttcopy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</p>
<!--LIST SPACING TESTS -->
<!--LIST SPACING TESTS -->
<!--LIST SPACING TESTS -->
<ul id="pttlists">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </li>
<li>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Epsum factorial non deposit quid pro quo hic escorol.</li>
<li>Souvlaki ignitus carborundum e pluribus unum. </li>
</ul>
<ol>
<li>Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. </li>
<li>Quote meon an estimate et non interruptus stadium.
<ol>
<li>Lorem ipsum</li>
<li>Dolor sit
<ul>
<li>Consectetuer</li>
<li>Adipiscing elit</li>
</ul>
</li>
<li>Diam</li>
</ol>
</li>
<li>Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. </li>
<li>Epsum factorial non deposit quid pro quo hic escorol. </li>
</ol>
<!--PRE TESTS -->
<!--PRE TESTS -->
<!--PRE TESTS -->
<p id="pttpre">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<pre>
pre
pre
pre
pre pre
</pre>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<pre><code><meta name="robots" content="noindex" /></code></pre>
<!--INLINE ELEMENT TESTS -->
<!--INLINE ELEMENT TESTS -->
<!--INLINE ELEMENT TESTS -->
<h2 id="pttinline">Header Test – the following is a test of numerous inline tags – h2</h2>
<p>In the following paragraphs look for the usage of the <code>a</code>, <code>abbr</code>, <code>dfn</code>, <code>sup</code>, <code>del</code>, <code>ins</code>, <code>q</code>, <code>em</code>, <code>strong</code>, and <code>cite</code> elements.</p>
<p>Epsum factorial non deposit quid pro quo hic escorol, <a href="#">link</a>. Olypian quarrels et gorilla congolium sic ad nauseum. <dfn><abbr title="abbreviation test">ACRO</abbr></dfn> Souvlaki ignitus<sup><a href="#fn12981848494416dc5dc7453">1</a></sup> carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline <del>del nolo</del> contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. <ins>Glorious baklava insert</ins> ex librus<sup><a href="#fn1106312694416dc5dc75db">2</a></sup> hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. <em>Not a Marquee but emphasis</em> selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. <strong>Strong Souvlaki</strong> ignitus carborundum e pluribus unum.</p>
<p>Lorem ipsum dolor sit amet, <q>quote consectetuer adipiscing elit</q>, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <abbr title="abbreviation test">ACRO</abbr> Ut wisi enim ad minim veniam, quis nostrud<sup><a href="#fn17763587224416dc5dc76c4">3</a></sup> exerci<sup><a href="#fn14102765224416dc5dc78ed">4</a></sup> tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure <code>code dolor code dolor code dolor</code> in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore <cite>cite: te feugait nulla facilisi.[5]</cite></p>
<!-- BLOCKQUOTE TESTS -->
<!-- BLOCKQUOTE TESTS -->
<!-- BLOCKQUOTE TESTS -->
<blockquote id="pttblockquote">
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilita; de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<blockquote cite="test">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </li>
<li>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Epsum factorial non deposit quid pro quo hic escorol.</li>
</ul>
</blockquote>
<blockquote>
<ol>
<li>Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. </li>
<li>Quote meon an estimate et non interruptus stadium.</li>
</ol>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<!-- DESCRIPTION LIST TESTS -->
<!-- DESCRIPTION LIST TESTS -->
<!-- DESCRIPTION LIST TESTS -->
<dl id="pttdl">
<dt>example</dt>
<dd>One that is representative of a group as a whole</dd>
<dd>One serving as a pattern of a specific kind</dd>
<dt>item</dt>
<dd>A single article or unit in a collection, enumeration, or series.</dd>
</dl>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<!-- TABLE TESTS -->
<!-- TABLE TESTS -->
<!-- TABLE TESTS -->
<table id="ptttables">
<tr>
<td>This</td>
<td>is</td>
<td>a</td>
<td>simple</td>
<td>table</td>
</tr>
<tr>
<th>This</th>
<th>is</th>
<th>a</th>
<th>simple header</th>
<th>row</th>
</tr>
<tr>
<td>This</td>
<td>is</td>
<td>a</td>
<td>simple normal row row row</td>
<td>your boat</td>
</tr>
<tr>
<th>THeader</th>
<td>is</td>
<td>a</td>
<td>simple</td>
<td>row</td>
</tr>
<tr>
<td>This</td>
<td>is</td>
<td>a</td>
<td>simple</td>
<td>row</td>
</tr>
<tr>
<td>This</td>
<td>is</td>
<td>a</td>
<td>simple</td>
<td>row</td>
</tr>
</table>
<p class="note">Note: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<table>
<caption>Table caption</caption>
<tr>
<td>This</td>
<td>is</td>
<td>a</td>
<td>simple</td>
<td>table</td>
</tr>
<tr>
<th>This</th>
<th>is</th>
<th>a</th>
<th>simple header</th>
<th>row</th>
</tr>
<tr>
<td>This</td>
<td>is</td>
<td>a</td>
<td>simple normal row row row</td>
<td>your boat</td>
</tr>
</table>
<address><a href="#">Address of Author</a>
5 Happy St.
</address>
<!--COMMON MARKUP TESTS -->
<!--COMMON MARKUP TESTS -->
<!--COMMON MARKUP TESTS -->
<h6>Header Test – the following is a test of footnote styling – h6</h6>
<p class="footnote" id="fn12981848494416dc5dc7453"><sup>1</sup> Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. </p>
<p class="footnote" id="fn1106312694416dc5dc75db"><sup>2</sup> Quote meon an estimate et non interruptus stadium.</p>
<p class="footnote" id="fn17763587224416dc5dc76c4"><sup>3</sup> Lorem ipsum</p>
<p class="footnote" id="fn14102765224416dc5dc78ed"><sup>4</sup> <a href="#">Dolor sit</a></p>
<p class="footnote" id="fn5"><sup>5</sup> Consectetuer</p>
<!-- FORM ELEMENT TESTS -->
<!-- FORM ELEMENT TESTS -->
<!-- FORM ELEMENT TESTS -->
<h3 id="pttform">Header Test – form element appearance (not layout) – h3</h3>
<form action="#" method="get">
<fieldset><legend>Legend</legend>
</fieldset>
</form>
<form action="#" method="get">
<fieldset>
<legend>a legend</legend>
<input type="text"><br>
<input type="radio"><br>
<input type="checkbox"><br>
<input type="file"><br>
<input type="submit"><br>
<input type="number"><br>
<input type="time"><br>
<input type="month"><br>
<input type="week"><br>
<input type="datetime"><br>
<input type="datetime-local"><br>
<input type="date"><br>
<input type="email"><br>
<input type="color"><br>
<input type="range"><br>
<input type="tel"><br>
<input type="url"><br>
<textarea cols="40" rows="6"></textarea><br>
<select size="1">
<option>Single Item Select</option>
<option>Single Item Select</option>
<option>Single Item Select</option>
</select><br>
<select size="4" multiple="multiple">
<option>Multiple Item Select</option>
<option>Multiple Item Select</option>
<option>Multiple Item Select</option>
<option>Multiple Item Select</option>
<option>Multiple Item Select</option>
<option>Multiple Item Select</option>
</select>
</fieldset>
<fieldset>
<legend>form element states</legend>
<input type="text" value="default"><br>
<input type="text" value="" placeholder="placeholder"><br>
<input type="text" value="required" required><br>
<input type="text" value="readonly" readonly><br>
<input type="text" value="disabled" disabled><br>
</fieldset>
</form>
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.2">20%</meter>
<progress max="100" value="70"><span>70</span>% progress</progress>
<form action="#" method="get">
<div>
<label>Label Text: <input type="text"></label><br>
<label><input type="radio">Label Text</label><br>
<label>Label Text: <textarea cols="40" rows="6"></textarea></label>
</div>
</form>
<!-- FIGURE TESTS -->
<!-- FIGURE TESTS -->
<!-- FIGURE TESTS -->
<h3 id="pttfigure">Figure Tests</h3>
<p>Three separate Figures follow this paragraph</p>
<figure>
<img src="http://placekitten.com/310/310" alt="placeholder image sample">
<figcaption>Here we see a placeholder image courtesy of <a href="http://placekitten.com/">http://placekitten.com/</a></figcaption>
</figure>
<figure>
<figcaption>Here we see a placeholder image courtesy of <a href="http://placekitten.com/">http://placekitten.com/</a>. This caption is before the image</figcaption>
<img src="http://placekitten.com/310/310" alt="placeholder image sample">
</figure>
<figure>
<img src="http://placekitten.com/110/310" alt="placeholder image sample">
<img src="http://placekitten.com/110/310" alt="placeholder image sample">
<img src="http://placekitten.com/110/310" alt="placeholder image sample">
</figure>
<!-- EXAMPLE FORM STRUCTURE TESTS -->
<!-- EXAMPLE FORM STRUCTURE TESTS -->
<!-- EXAMPLE FORM STRUCTURE TESTS -->
<h2 id="pttformlayout">Header Test – the following is a test of sample form layout – h2</h2>
<form action="#" method="get">
<fieldset>
<div class="field">
<label for="atext">Text Field</label>
<input id="atext" name="atext">
</div>
<div class="field">
<label for="p1">Phone Field</label>
<input id="p1" name="p1"><input id="p2" name="p2"><input id="p3" name="p3">
</div>
<div class="field">
<label for="tarea">Textarea</label>
<textarea id="tarea" name="tarea" cols="40" rows="6">textarea content</textarea>
</div>
<p class="field"><input id="acheck" name="acheck" type="checkbox"> <label for="acheck">Agree?</label></p>
</fieldset>
<fieldset class="actions">
<input type="submit">
</fieldset>
</form>
<!--
<h4>Header Test – not checked in current version – h4</h4>
<ul>
<li>images in a few situations incl floated & missing (alt)</li>
<li>Link states</li>
<li>objects / embeds</li>
<li>microformats</li>
<li>html5 structural elements such as article, section, aside</li>
</ul>
-->
<nav id="pttindex">
<h3>PNHTagTestIndex</h3>
<ul>
<li><a href="#pttheaders">headers</a></li>
<li><a href="#pttcopy">copy</a></li>
<li><a href="#pttlists">lists</a></li>
<li><a href="#pttpre">preformatted text</a></li>
<li><a href="#pttinline">inline elements</a></li>
<li><a href="#pttblockquote">blockquotes</a></li>
<li><a href="#pttdl">DLs</a></li>
<li><a href="#ptttables">tables</a></li>
<li><a href="#pttform">form elements</a></li>
<li><a href="#pttfigure">figures</a></li>
<li><a href="#pttformlayout">form layout sample</a></li>
</ul>
</nav>