<html lang="en">

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Normalize CSS: UI tests</title>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<link rel="stylesheet" href="normalize.css">

/*! suit-test v0.1.0 | MIT License | github.com/suitcss */

.Test {

background: #fff;

counter-reset: test-describe;

}

.Test-describe:before {

content: counter(test-describe);

counter-increment: test-describe;

}

.Test-describe {

counter-reset: test-it;

}

.Test-it:before {

content: counter(test-describe) "." counter(test-it);

counter-increment: test-it;

}

.Test-title {

font-size: 2em;

font-family: sans-serif;

padding: 20px;

margin: 20px 0;

background: #eee;

color: #999;

}

.Test-describe,

.Test-it {

background: #eee;

border-left: 5px solid #666;

color: #666;

font-family: sans-serif;

font-weight: bold;

margin: 20px 0;

padding: 0.75em 20px;

}

.Test-describe {

font-size: 1.5em;

margin: 60px 0 20px;

}

.Test-describe:before,

.Test-it:before {

color: #999;

display: inline-block;

margin-right: 10px;

min-width: 30px;

text-transform: uppercase;

}

/* Custom helpers */

/**

body {

background: red;

}

/**

.Test-run--highlightEl > * {

outline: 1px solid #ADD8E6;

}

<div class="Test">

.

<h1 class="Test-title"><a href="https://github.com/necolas/normalize.css">Normalize.css</a>: UI tests</h1>

<h2 class="Test-describe"><code>html</code></h2>

<h3 class="Test-it">should have sans-serif font family (opinionated)</h3>

<div class="Test-run">

abcdefghijklmnopqrstuvwxyz

</div>

<h2 class="Test-describe"><code>body</code></h2>

<h3 class="Test-it">should have no margin (opinionated)</h3>

<div class="Test-run">

(there should be no red background visible on this page)

</div>

<h2 class="Test-describe">

<code>article</code>, <code>aside</code>, <code>details</code>,

<code>figure</code>, <code>figcaption</code>, <code>footer</code>,

<code>header</code>, <code>hgroup</code>, <code>main</code>,

<code>menu</code>, <code>nav</code>, <code>section</code>,

<code>summary</code>

</h2>

<h3 class="Test-it">should render as block</h3>

<div class="Test-run Test-run--highlightEl">

<article>article</article>

<aside>aside</aside>

<details>

<summary>summary</summary>

details

</details>

<figure>

figure

<figcaption>figcaption</figcaption>

</figure>

<footer>footer</footer>

<header>header</header>

<hgroup>hgroup</hgroup>

<main>main</main>

<menu><li>menu</li></menu>

<nav>nav</nav>

<section>section</section>

</div>

<h2 class="Test-describe"><code>audio</code>, <code>canvas</code>, <code>progress</code>, <code>video</code></h2>

<h3 class="Test-it">should render as inline-block and baseline-aligned</h3>

<div class="Test-run Test-run--highlightEl">

<audio controls>audio</audio>

<canvas>canvas</canvas>

<progress>progress</progress>

<video controls>video</video>

</div>

<h2 class="Test-describe"><code>audio:not([controls])</code>, <code>template</code>, <code>[hidden]</code></h2>

<h3 class="Test-it">should not display</h3>

<div class="Test-run Test-run--highlightEl">

<audio>audio</audio>

<template>

<h1>{{title}}</h1>

<content></content>

</template>

<p hidden>This should be hidden</p>

</div>

<h2 class="Test-describe"><code>a</code></h2>

<h3 class="Test-it">should have a transparent background when active</h3>

<div class="Test-run">

<a href="#non">dummy anchor</a>

</div>

<h3 class="Test-it">should not have a focus outline when both focused and hovered (opinionated)</h3>

<div class="Test-run">

<a href="#non">dummy anchor</a>

</div>

<h2 class="Test-describe"><code>abbr[title]</code></h2>

<h3 class="Test-it">should have a dotted bottom border</h3>

<div class="Test-run">

<abbr title="abbreviation">abbr</abbr>

</div>

<h2 class="Test-describe"><code>b</code>, <code>strong</code></h2>

<h3 class="Test-it">should have bold font-weight</h3>

<div class="Test-run">

<b>b</b>

<strong>strong</strong>

</div>

<h2 class="Test-describe"><code>dfn</code></h2>

<h3 class="Test-it">should have italic font-style</h3>

<div class="Test-run">

<dfn>dfn</dfn>

</div>

<h2 class="Test-describe"><code>h1</code></h2>

<h3 class="Test-it">should not change size within an <code>article</code></h3>

<div class="Test-run">

<h1>Heading (control)</h1>

<article>

<h1>Heading (in article)</h1>

</article>

</div>

<h3 class="Test-it">should not change size within a <code>section</code></h3>

<div class="Test-run">

<h1>Heading (control)</h1>

<section>

<h1>Heading (in section)</h1>

</section>

</div>

<h2 class="Test-describe"><code>mark</code></h2>

<h3 class="Test-it">should have a yellow background</h3>

<div class="Test-run">

<mark>mark</mark>

</div>

<h2 class="Test-describe"><code>small</code></h2>

<h3 class="Test-it">should render equally small in all browsers</h3>

<div class="Test-run">

control. <small>small.</small>

</div>

<h2 class="Test-describe"><code>sub</code> and <code>sup</code></h2>

<h3 class="Test-it">should not affect a line's visual line-height</h3>

<div class="Test-run Test-run--highlightEl">

<p>control.</p>

<p>control. _sub.</p>

<p>control. ^sup.</p>

</div>

<h2 class="Test-describe"><code>img</code></h2>

<h3 class="Test-it">should not have a border when wrapped in an anchor</h3>

<div class="Test-run">

<a href="#non">

<!-- scaled-up 1px image -->

<img style="background-color:#ADD8E6" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="100" height="100">

</a>

</div>

<h2 class="Test-describe"><code>svg</code></h2>

<h3 class="Test-it">should not overflow</h3>

<div class="Test-run Test-run--highlightEl">

<svg width="100px" height="100px">

<circle cx="100" cy="100" r="100" fill="#ADD8E6" />

</svg>

</div>

<h2 class="Test-describe"><code>figure</code></h2>

<h3 class="Test-it">should have margins</h3>

<div class="Test-run" style="outline:1px solid #ADD8E6; overflow:hidden;">

<figure>

<img style="background-color:#ADD8E6" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="400" height="200">

</figure>

</div>

<h2 class="Test-describe"><code>hr</code></h2>

<h3 class="Test-it">should have a <code>content-box</code> box model</h3>

<div class="Test-run" style="">

<hr style="height:2px; border:solid #ADD8E6; border-width:2px 0;">

</div>

<h2 class="Test-describe"><code>pre</code></h2>

<h3 class="Test-it">should trigger a scrollbar when too wide for its container</h3>

<div class="Test-run" style="max-width:300px; outline:1px solid #ADD8E6;">

<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</pre>

</div>

<h2 class="Test-describe"><code>code</code>, <code>kbd</code>, <code>pre</code>, <code>samp</code></h2>

<h3 class="Test-it">should render <code>em</code>-unit preformatted text at the same absolute size as normal text</h3>

<div class="Test-run">

<span>span: abcdefghijklmnopqrstuvwxyz.</span><br>

<code>code: abcdefghijklmnopqrstuvwxyz.</code><br>

<kbd>kbd: abcdefghijklmnopqrstuvwxyz.</kbd><br>

<samp>samp: abcdefghijklmnopqrstuvwxyz.</samp>

<pre>pre: abcdefghijklmnopqrstuvwxyz.</pre>

</div>

<h2 class="Test-describe"><code>button</code>, <code>input</code>, <code>optgroup</code>, <code>select</code>, <code>textarea</code></h2>

<h3 class="Test-it">should inherit <code>color</code> from ancestor</h3>

<div class="Test-run" style="color:#ADD8E6;">

<button>button</button><br>

<input value="input"><br>

<select style="border:1px solid #999;">

<optgroup label="optgroup">

<option>option</option>

</optgroup>

<option>option</option>

</select><br>

<textarea>textarea</textarea>

</div>

<h3 class="Test-it">should inherit <code>font</code> from ancestor</h3>

<div class="Test-run" style="font:bold italic 20px/1 serif;">

<button>button</button><br>

<input value="input"><br>

<select style="border:1px solid #999;">

<optgroup label="optgroup">

<option>option</option>

</optgroup>

<option>option</option>

</select><br>

<textarea>textarea</textarea>

</div>

<h3 class="Test-it">should not have margins</h3>

<div class="Test-run" id="form-collection-margins">

<style>

#form-collection-margins {

outline: 1px solid #ADD8E6;

overflow: hidden;

}

#form-collection-margins button,

#form-collection-margins input,

#form-collection-margins select,

#form-collection-margins textarea {

display: block;

}

</style>

<button>button</button>

<input value="input">

<select style="border:1px solid #999;">

<optgroup label="optgroup">

<option>option</option>

</optgroup>

<option>option</option>

</select>

<textarea>textarea</textarea>

</div>

<h2 class="Test-describe"><code>button</code></h2>

<h3 class="Test-it">should have visible overflow</h3>

<div class="Test-run" id="button-overflow">

<style>

#button-overflow button:after {

content: "";

background: #ADD8E6;

display: inline-block;

height: 10px;

position:relative;

right: -20px;

width: 10px;

}

</style>

<button>abcdefghijklmnopqrstuvwxyz</button>

</div>

<h2 class="Test-describe"><code>button</code>, <code>select</code></h2>

<h3 class="Test-it">should not inherit <code>text-transform</code></h3>

<div class="Test-run" style="text-transform:uppercase">

<button>button</button>

<select><option>option</option></select>

</div>

<h2 class="Test-describe"><code>button</code> and button-style <code>input</code></h2>

<h3 class="Test-it">should have <code>pointer</code> cursor style</h3>

<div class="Test-run">

<p><button>button</button></p>

<p><input type="image" src="http://lorempixel.com/90/24" alt="input (image)"></p>

<p><input type="button" value="input (button)"></p>

<p><input type="reset" value="input (reset)"></p>

<p><input type="submit" value="input (submit)"></p>

</div>

<h3 class="Test-it">should be styleable</h3>

<div class="Test-run" id="button-like-style">

<style>

#button-like-style button,

#button-like-style input {

background: #ADD8E6;

border: 2px solid black;

border-radius: 2px;

padding: 5px;

}

</style>

<p><button>button</button></p>

<p><input type="image" src="http://lorempixel.com/90/24" alt="input (image)"></p>

<p><input type="button" value="input (button)"></p>

<p><input type="reset" value="input (reset)"></p>

<p><input type="submit" value="input (submit)"></p>

</div>

<h2 class="Test-describe">disabled <code>button</code> and <code>input</code></h2>

<h3 class="Test-it">should have <code>default</code> cursor style</h3>

<div class="Test-run">

<p><button disabled>button</button></p>

<p><input disabled type="image" src="http://lorempixel.com/90/24" alt="input (image)"></p>

<p><input disabled type="button" value="input (button)"></p>

<p><input disabled type="reset" value="input (reset)"></p>

<p><input disabled type="submit" value="input (submit)"></p>

</div>

<h2 class="Test-describe"><code>button</code>, <code>input</code></h2>

<h3 class="Test-it">should not have extra inner padding in Firefox</h3>

<div class="Test-run" id="button-input-padding">

<style>

#button-input-padding button,

#button-input-padding input {

border: 0;

padding: 0;

outline: 1px solid #ADD8E6;

}

</style>

<p><button>button</button></p>

<p><input value="input (text)"></p>

<p><input type="button" value="input (button)"></p>

<p><input type="reset" value="input (reset)"></p>

<p><input type="submit" value="input (submit)"></p>

</div>

<h2 class="Test-describe"><code>input</code></h2>

<h3 class="Test-it">should not inherit <code>line-height</code></h3>

<div class="Test-run" style="line-height:50px">

<input value="input (text)">

</div>

<h2 class="Test-describe"><code>input[type="checkbox"]</code>, <code>input[type="radio"]</code></h2>

<h3 class="Test-it">should have a <code>border-box</code> box model</h3>

<div class="Test-run Test-run--highlightEl" id="radio-box-model">

<style>

#radio-box-model {

width: 200px;

border: 1px solid red;

}

#radio-box-model input {

width: 100%;

border: 5px solid #ADD8E6;

display: block;

position: relative;

}

</style>

<input type="checkbox">

<input type="radio" name="rad">

</div>

<h3 class="Test-it">should not have padding</h3>

<div class="Test-run Test-run--highlightEl">

<input type="checkbox">

<input type="radio" name="rad">

</div>

<h2 class="Test-describe"><code>input[type="number"]</code></h2>

<h3 class="Test-it">should display a default cursor for the decrement button's click target in Chrome</h3>

<div class="Test-run">

<input style="height:50px; font-size:15px;" type="number" id="in" min="0" max="10" value="5">

</div>

<h2 class="Test-describe"><code>input[type="search"]</code></h2>

<h3 class="Test-it">should be styleable</h3>

<div class="Test-run">

<input type="search" style="border:1px solid #ADD8E6; padding:10px; width:200px;">

</div>

<h3 class="Test-it">should have a <code>content-box</code> box model</h3>

<div class="Test-run">

<div style="background:red; display:inline-block; height:62px; width:242px;">

<input type="search" style="border:1px solid #ADD8E6; height:20px; padding:20px; width:200px;">

</div>

</div>

<h3 class="Test-it">should not have a cancel button in Safari or Chrome</h3>

<div class="Test-run">

<input type="search" value="search">

</div>

<h2 class="Test-describe"><code>fieldset</code></h2>

<h3 class="Test-it">should have consistent border, padding, and margin</h3>

<div class="Test-run">

<fieldset>

<div style="width:100%; height:100px; background:#ADD8E6;"></div>

</fieldset>

</div>

<h2 class="Test-describe"><code>legend</code></h2>

<h3 class="Test-it">should inherit color</h3>

<div class="Test-run" style="color:#ADD8E6;">

<fieldset>

<legend>legend</legend>

</fieldset>

</div>

<h3 class="Test-it">should not have padding</h3>

<div class="Test-run">

<fieldset>

<legend>legend</legend>

</fieldset>

</div>

<h2 class="Test-describe"><code>textarea</code></h2>

<h3 class="Test-it">should not have a scrollbar unless overflowing</h3>

<div class="Test-run">

<textarea>textarea</textarea>

</div>

<h2 class="Test-describe"><code>table</code></h2>

<h3 class="Test-it">should not have spaces between cells</h3>

<div class="Test-run">

<table>

<caption>Jimi Hendrix - albums</caption>

<thead>

<tr>

<th>Album</th>

<th>Year</th>

<th>Price</th>

</tr>

</thead>

<tfoot>

<tr>

<th>Album</th>

<th>Year</th>

<th>Price</th>

</tr>

</tfoot>

<tbody>

<tr>

<td>Are You Experienced</td>

<td>1967</td>

<td>$10.00</td>

</tr>

<tr>

<td>Axis: Bold as Love</td>

<td>1967</td>

<td>$12.00</td>

</tr>

<tr>

<td>Electric Ladyland</td>

<td>1968</td>

<td>$10.00</td>

</tr>

<tr>

<td>Band of Gypsys</td>

<td>1970</td>

<td>$12.00</td>

</tr>

</tbody>

</table>

</div>