Permalink
Jun 30, 2016
Jan 26, 2014
Jun 30, 2016
Jan 26, 2014
Oct 4, 2014
Oct 4, 2014
Jan 26, 2014
Jan 26, 2014
Apr 12, 2016
Jan 26, 2014
Mar 19, 2016
Jan 26, 2014
Jan 26, 2014
Apr 12, 2016
Jan 26, 2014
Aug 8, 2016
Jan 26, 2014
Jan 26, 2014
Jan 26, 2014
Apr 12, 2016
Jan 26, 2014
Jan 26, 2014
Jan 26, 2014
Jan 26, 2014
Apr 12, 2016
Newer
100644
441 lines (393 sloc)
13.6 KB
6
<script src="https://rawgit.com/aFarkas/html5shiv/gh-pages/dist/html5shiv.min.js"></script>
7
<link rel="stylesheet" href="normalize.css">
8
<style>
9
/*! suit-test v0.1.0 | MIT License | github.com/suitcss */
10
11
.Test {
12
background: #fff;
13
counter-reset: test-describe;
14
}
15
16
.Test-describe:before {
17
content: counter(test-describe);
18
counter-increment: test-describe;
19
}
20
21
.Test-describe {
22
counter-reset: test-it;
23
}
24
25
.Test-it:before {
26
content: counter(test-describe) "." counter(test-it);
27
counter-increment: test-it;
28
}
29
30
.Test-title {
31
font-size: 2em;
32
font-family: sans-serif;
33
padding: 20px;
34
margin: 20px 0;
35
background: #eee;
36
color: #999;
37
}
38
39
.Test-describe,
40
.Test-it {
41
background: #eee;
42
border-left: 5px solid #666;
43
color: #666;
44
font-family: sans-serif;
45
font-weight: bold;
46
margin: 20px 0;
47
padding: 0.75em 20px;
48
}
49
50
.Test-describe {
51
font-size: 1.5em;
52
margin: 60px 0 20px;
53
}
54
55
.Test-describe:before,
56
.Test-it:before {
57
color: #999;
58
display: inline-block;
59
margin-right: 10px;
60
min-width: 30px;
61
text-transform: uppercase;
62
}
63
64
/* Custom helpers */
65
66
/**
67
* Test whether the body's margin has been removed
68
*/
69
70
body {
71
background: red;
72
}
73
74
/**
75
* Highlight the bounds of direct children of a test block
76
*/
77
78
.Test-run--highlightEl > * {
79
outline: 1px solid #ADD8E6;
80
}
81
</style>
82
83
<div class="Test">
84
.
85
86
<h1 class="Test-title"><a href="https://github.com/necolas/normalize.css">Normalize.css</a>: UI tests</h1>
87
88
<h2 class="Test-describe"><code>html</code></h2>
89
<h3 class="Test-it">should have a line height of 1.15</h3>
90
<div class="Test-run">
91
abcdefghijklmnopqrstuvwxyz
92
</div>
93
94
<h2 class="Test-describe"><code>body</code></h2>
95
<h3 class="Test-it">should have no margin (opinionated)</h3>
96
<div class="Test-run">
97
(there should be no red background visible on this page)
98
</div>
99
100
<h2 class="Test-describe">
101
<code>article</code>, <code>aside</code>, <code>details</code>,
102
<code>figure</code>, <code>figcaption</code>, <code>footer</code>,
104
<code>menu</code>, <code>nav</code>, <code>section</code>,
105
<code>summary</code>
106
</h2>
107
<h3 class="Test-it">should render as block</h3>
108
<div class="Test-run Test-run--highlightEl">
109
<article>article</article>
110
<aside>aside</aside>
111
<details>
112
<summary>summary</summary>
113
details
114
</details>
115
<figure>
116
figure
117
<figcaption>figcaption</figcaption>
118
</figure>
119
<footer>footer</footer>
120
<header>header</header>
121
<main>main</main>
123
<nav>nav</nav>
124
<section>section</section>
125
</div>
126
127
<h2 class="Test-describe"><code>audio</code>, <code>canvas</code>, <code>progress</code>, <code>video</code></h2>
128
<h3 class="Test-it">should render as inline-block and baseline-aligned</h3>
129
<div class="Test-run Test-run--highlightEl">
130
<audio controls>audio</audio>
131
<canvas>canvas</canvas>
132
<progress>progress</progress>
133
<video controls>video</video>
134
</div>
135
136
<h2 class="Test-describe"><code>audio:not([controls])</code>, <code>template</code>, <code>[hidden]</code></h2>
137
<h3 class="Test-it">should not display</h3>
138
<div class="Test-run Test-run--highlightEl">
139
<audio>audio</audio>
140
<template>
141
<h1>{{title}}</h1>
142
<content></content>
143
</template>
144
<p hidden>This should be hidden</p>
145
</div>
146
147
<h2 class="Test-describe"><code>a</code></h2>
148
<h3 class="Test-it">should have a transparent background when active</h3>
149
<div class="Test-run">
150
<a href="#non">dummy anchor</a>
151
</div>
152
<h3 class="Test-it">should not skip underlines</h3>
153
<div class="Test-run">
154
<a href="#non">quip and jig</a>
155
</div>
156
<h3 class="Test-it">should not have a focus outline when both focused and hovered (opinionated)</h3>
157
<div class="Test-run">
158
<a href="#non">dummy anchor</a>
159
</div>
160
161
<h2 class="Test-describe"><code>abbr[title]</code></h2>
162
<h3 class="Test-it">should have a dotted underline with a solid underline as a fallback</h3>
163
<div class="Test-run">
164
<abbr title="abbreviation">abbr</abbr>
165
</div>
166
167
<h2 class="Test-describe"><code>b</code>, <code>strong</code></h2>
169
<div class="Test-run">
170
<b>b</b>
171
<strong>strong</strong>
172
</div>
173
174
<h2 class="Test-describe"><code>dfn</code></h2>
175
<h3 class="Test-it">should have italic font-style</h3>
176
<div class="Test-run">
177
<dfn>dfn</dfn>
178
</div>
179
180
<h2 class="Test-describe"><code>h1</code></h2>
181
<h3 class="Test-it">should not change size within an <code>article</code></h3>
182
<div class="Test-run">
183
<h1>Heading (control)</h1>
184
<article>
185
<h1>Heading (in article)</h1>
186
</article>
187
</div>
188
<h3 class="Test-it">should not change size within a <code>section</code></h3>
189
<div class="Test-run">
190
<h1>Heading (control)</h1>
191
<section>
192
<h1>Heading (in section)</h1>
193
</section>
194
</div>
195
196
<h2 class="Test-describe"><code>mark</code></h2>
197
<h3 class="Test-it">should have a yellow background</h3>
198
<div class="Test-run">
199
<mark>mark</mark>
200
</div>
201
202
<h2 class="Test-describe"><code>small</code></h2>
203
<h3 class="Test-it">should render equally small in all browsers</h3>
204
<div class="Test-run">
205
control. <small>small.</small>
206
</div>
207
208
<h2 class="Test-describe"><code>sub</code> and <code>sup</code></h2>
209
<h3 class="Test-it">should not affect a line's visual line-height</h3>
210
<div class="Test-run Test-run--highlightEl">
211
<p>control.</p>
212
<p>control. <sub>sub.</sub></p>
213
<p>control. <sup>sup.</sup></p>
214
</div>
215
216
<h2 class="Test-describe"><code>img</code></h2>
217
<h3 class="Test-it">should not have a border when wrapped in an anchor</h3>
218
<div class="Test-run">
219
<a href="#non">
220
<!-- scaled-up 1px image -->
221
<img style="background-color:#ADD8E6" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="100" height="100">
222
</a>
223
</div>
224
225
<h2 class="Test-describe"><code>svg</code></h2>
226
<h3 class="Test-it">should not overflow</h3>
227
<div class="Test-run Test-run--highlightEl">
228
<svg width="100px" height="100px">
229
<circle cx="100" cy="100" r="100" fill="#ADD8E6" />
230
</svg>
231
</div>
232
233
<h2 class="Test-describe"><code>code</code>, <code>kbd</code>, <code>pre</code>, <code>samp</code></h2>
234
<h3 class="Test-it">should render text at the same absolute size as normal text</h3>
235
<div class="Test-run">
236
<span>span: abcdefghijklmnopqrstuvwxyz.</span><br>
237
<code>code: abcdefghijklmnopqrstuvwxyz.</code><br>
238
<kbd>kbd: abcdefghijklmnopqrstuvwxyz.</kbd><br>
239
<samp>samp: abcdefghijklmnopqrstuvwxyz.</samp>
240
<pre>pre: abcdefghijklmnopqrstuvwxyz.</pre>
241
</div>
242
243
<h2 class="Test-describe"><code>figure</code></h2>
244
<h3 class="Test-it">should have margins</h3>
245
<div class="Test-run" style="outline:1px solid #ADD8E6; overflow:hidden;">
246
<figure>
247
<img style="background-color:#ADD8E6" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="400" height="200">
248
</figure>
249
</div>
250
251
<h2 class="Test-describe"><code>hr</code></h2>
252
<h3 class="Test-it">should have a <code>content-box</code> box model</h3>
253
<div class="Test-run" style="">
254
<hr style="height:2px; border:solid #ADD8E6; border-width:2px 0;">
255
</div>
256
257
<h2 class="Test-describe"><code>button</code>, <code>input</code>, <code>optgroup</code>, <code>select</code>, <code>textarea</code></h2>
258
<h3 class="Test-it">should inherit <code>font-size</code> from ancestor</h3>
259
<div class="Test-run" style="font-size: 20px;">
260
<button>button</button><br>
261
<input value="input"><br>
262
<select style="border:1px solid #999;">
263
<optgroup label="optgroup">
264
<option>option</option>
265
</optgroup>
266
<option>option</option>
267
</select><br>
268
<textarea>textarea</textarea>
269
</div>
270
<h3 class="Test-it">should not have margins</h3>
271
<div class="Test-run" id="form-collection-margins">
272
<style>
273
#form-collection-margins {
274
outline: 1px solid #ADD8E6;
275
overflow: hidden;
276
}
277
278
#form-collection-margins button,
279
#form-collection-margins input,
280
#form-collection-margins select,
281
#form-collection-margins textarea {
282
display: block;
283
}
284
</style>
285
<button>button</button>
286
<input value="input">
287
<select style="border:1px solid #999;">
288
<optgroup label="optgroup">
289
<option>option</option>
290
</optgroup>
291
<option>option</option>
292
</select>
293
<textarea>textarea</textarea>
294
</div>
295
296
<h2 class="Test-describe"><code>button</code></h2>
297
<h3 class="Test-it">should have visible overflow</h3>
298
<div class="Test-run" id="button-overflow">
299
<style>
300
#button-overflow button:after {
301
content: "";
302
background: #ADD8E6;
303
display: inline-block;
304
height: 10px;
305
position:relative;
306
right: -20px;
307
width: 10px;
308
}
309
</style>
310
<button>abcdefghijklmnopqrstuvwxyz</button>
311
</div>
312
313
<h2 class="Test-describe"><code>button</code>, <code>select</code></h2>
314
<h3 class="Test-it">should not inherit <code>text-transform</code></h3>
315
<div class="Test-run" style="text-transform:uppercase">
316
<button>button</button>
317
<select><option>option</option></select>
318
</div>
319
320
<h2 class="Test-describe"><code>button</code> and button-style <code>input</code></h2>
322
<div class="Test-run" id="button-like-style">
323
<style>
324
#button-like-style button,
325
#button-like-style input {
326
background: #ADD8E6;
327
border: 2px solid black;
328
border-radius: 2px;
329
padding: 5px;
330
}
331
</style>
332
<p><button>button</button></p>
336
<p><input type="reset" value="input (reset)"></p>
337
<p><input type="submit" value="input (submit)"></p>
338
</div>
339
340
<h2 class="Test-describe">disabled <code>button</code> and <code>input</code></h2>
341
<h3 class="Test-it">should have <code>default</code> cursor style</h3>
342
<div class="Test-run">
343
<p><button disabled>button</button></p>
344
<p><input disabled type="button" value="input (button)"></p>
345
<p><input disabled type="reset" value="input (reset)"></p>
346
<p><input disabled type="submit" value="input (submit)"></p>
347
</div>
348
349
<h2 class="Test-describe"><code>button</code>, <code>input</code></h2>
350
<h3 class="Test-it">should not have extra inner padding in Firefox</h3>
351
<div class="Test-run" id="button-input-padding">
352
<style>
353
#button-input-padding button,
354
#button-input-padding input {
355
border: 0;
356
padding: 0;
357
outline: 1px solid #ADD8E6;
358
}
359
</style>
360
<p><button>button</button></p>
361
<p><input type="button" value="input (button)"></p>
362
<p><input type="reset" value="input (reset)"></p>
363
<p><input type="submit" value="input (submit)"></p>
364
</div>
365
366
<h2 class="Test-describe"><code>fieldset</code></h2>
367
<h3 class="Test-it">should have consistent border, padding, and margin</h3>
368
<div class="Test-run">
369
<fieldset>
370
<div style="width:100%; height:100px; background:#ADD8E6;"></div>
371
</fieldset>
372
</div>
373
374
<h2 class="Test-describe"><code>legend</code></h2>
375
<h3 class="Test-it">should inherit color</h3>
376
<div class="Test-run" style="color:#ADD8E6;">
377
<fieldset>
378
<legend>legend</legend>
379
</fieldset>
380
</div>
381
<h3 class="Test-it">should not have padding</h3>
382
<div class="Test-run">
383
<fieldset>
384
<legend>legend</legend>
385
</fieldset>
386
</div>
387
<h3 class="Test-it">should wrap text</h3>
388
<div class="Test-run">
389
<fieldset>
390
<legend>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</legend>
391
</fieldset>
392
</div>
393
394
<h2 class="Test-describe"><code>textarea</code></h2>
395
<h3 class="Test-it">should not have a scrollbar unless overflowing</h3>
396
<div class="Test-run">
397
<textarea>textarea</textarea>
398
</div>
399
400
<h2 class="Test-describe"><code>[type="checkbox"]</code>, <code>[type="radio"]</code></h2>
401
<h3 class="Test-it">should have a <code>border-box</code> box model</h3>
402
<div class="Test-run Test-run--highlightEl" id="radio-box-model">
404
#radio-box-model {
405
width: 200px;
406
border: 1px solid red;
407
}
408
409
#radio-box-model input {
410
width: 100%;
411
border: 5px solid #ADD8E6;
412
display: block;
413
position: relative;
414
}
415
</style>
416
<input type="checkbox">
417
<input type="radio" name="rad">
418
</div>
419
<h3 class="Test-it">should not have padding</h3>
420
<div class="Test-run Test-run--highlightEl">
421
<input type="checkbox">
422
<input type="radio" name="rad">
423
</div>
424
426
<h3 class="Test-it">should display a default cursor for the decrement button's click target in Chrome</h3>
427
<div class="Test-run">
428
<input style="height:50px; font-size:15px;" type="number" id="in" min="0" max="10" value="5">
429
</div>
430
433
<div class="Test-run">
434
<input type="search" style="border:1px solid #ADD8E6; padding:10px; width:200px;">
435
</div>
438
<input type="text" placeholder="Text goes here" style="background-color: black; color: orange;">