From 7c0c11edcd8f36579e00deb32f436863447d1a16 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Tue, 28 Jan 2014 10:01:31 -0800 Subject: [PATCH] Add 3.0.0 --- 3.0.0/normalize.css | 423 ++++++++++++++++++++++++ 3.0.0/test.html | 508 +++++++++++++++++++++++++++++ index.html | 10 +- latest/normalize.css | 349 ++++++++++---------- latest/test.html | 762 ++++++++++++++++++++++++++----------------- 5 files changed, 1574 insertions(+), 478 deletions(-) create mode 100644 3.0.0/normalize.css create mode 100644 3.0.0/test.html diff --git a/3.0.0/normalize.css b/3.0.0/normalize.css new file mode 100644 index 0000000..196d223 --- /dev/null +++ b/3.0.0/normalize.css @@ -0,0 +1,423 @@ +/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9. + * Hide the `template` element in IE, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8+, and Opera + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/3.0.0/test.html b/3.0.0/test.html new file mode 100644 index 0000000..002b07b --- /dev/null +++ b/3.0.0/test.html @@ -0,0 +1,508 @@ + + + + +Normalize CSS: UI tests + + + + +
+ . + +

Normalize.css: UI tests

+ +

html

+

should have sans-serif font family (opinionated)

+
+ abcdefghijklmnopqrstuvwxyz +
+ +

body

+

should have no margin (opinionated)

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

article, aside, details, figure, figcaption, footer, header, hgroup, main, nav, section, summary

+

should render as block

+
+
article
+ +
+ summary + details +
+
+ figure +
figcaption
+
+
footer
+
header
+
hgroup
+
main
+ +
section
+
+ +

audio, canvas, progress, video

+

should render as inline-block and baseline-aligned

+
+ + canvas + progress + +
+ +

audio:not([controls]), template, [hidden]

+

should not display

+
+ + + +
+ +

a

+

should have a transparent background when active

+
+ dummy anchor +
+

should not have a focus outline when both focused and hovered (opinionated)

+
+ dummy anchor +
+ +

abbr[title]

+

should have a dotted bottom border

+
+ abbr +
+ +

b, strong

+

should have bold font-weight

+
+ b + strong +
+ +

dfn

+

should have italic font-style

+
+ dfn +
+ +

h1

+

should not change size within an article

+
+

Heading (control)

+
+

Heading (in article)

+
+
+

should not change size within a section

+
+

Heading (control)

+
+

Heading (in section)

+
+
+ +

mark

+

should have a yellow background

+
+ mark +
+ +

small

+

should render equally small in all browsers

+
+ control. small. +
+ +

sub and sup

+

should not affect a line's visual line-height

+
+

control.

+

control. sub.

+

control. sup.

+
+ +

img

+

should not have a border when wrapped in an anchor

+
+ + + + +
+ +

svg

+

should not overflow

+
+ + + +
+ +

figure

+

should have margins

+
+
+ +
+
+ +

hr

+

should have a content-box box model

+
+
+
+ +

pre

+

should trigger a scrollbar when too wide for its container

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

code, kbd, pre, samp

+

should render em-unit preformatted text at the same absolute size as normal text

+
+ span: abcdefghijklmnopqrstuvwxyz.
+ code: abcdefghijklmnopqrstuvwxyz.
+ kbd: abcdefghijklmnopqrstuvwxyz.
+ samp: abcdefghijklmnopqrstuvwxyz. + 
pre: abcdefghijklmnopqrstuvwxyz.
+
+ +

button, input, optgroup, select, textarea

+

should inherit color from ancestor

+
+
+
+
+ +
+

should inherit font from ancestor

+
+
+
+
+ +
+

should not have margins

+
+ + + + + +
+ +

button

+

should have visible overflow

+
+ + +
+ +

button, select

+

should not inherit text-transform

+
+ + +
+ +

button and button-style input

+

should have pointer cursor style

+
+

+

+

+

+

+
+

should be styleable

+
+ +

+

+

+

+

+
+ +

disabled button and input

+

should have default cursor style

+
+

+

+

+

+

+
+ +

button, input

+

should not have extra inner padding in Firefox

+
+ +

+

+

+

+

+
+ +

input

+

should not inherit line-height

+
+ +
+ +

input[type="checkbox"], input[type="radio"]

+

should have a border-box box model

+
+ + + +
+

should not have padding

+
+ + +
+ +

input[type="number"]

+

should display a default cursor for the decrement button's click target in Chrome

+
+ +
+ +

input[type="search"]

+

should be styleable

+
+ +
+

should have a content-box box model

+
+
+ +
+
+

should not have a cancel button in Safari or Chrome

+
+ +
+ +

fieldset

+

should have consistent border, padding, and margin

+
+
+
+
+
+ +

legend

+

should inherit color

+
+
+ legend +
+
+

should not have padding

+
+
+ legend +
+
+ +

textarea

+

should not have a scrollbar unless overflowing

+
+ +
+ +

table

+

should not have spaces between cells

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Jimi Hendrix - albums
AlbumYearPrice
AlbumYearPrice
Are You Experienced1967$10.00
Axis: Bold as Love1967$12.00
Electric Ladyland1968$10.00
Band of Gypsys1970$12.00
+
+ +
diff --git a/index.html b/index.html index 9662d76..0ee1b31 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Normalize.css: Make browsers render all elements more consistently. - + @@ -20,13 +20,13 @@
+ href="http://necolas.github.com/normalize.css/3.0.0/normalize.css"> Download - v2.1.3 + v3.0.0 -
IE 8+, Firefox 4+, Safari 5+, Opera, Chrome
+
Chrome, Firefox, Opera, Safari 6+, IE 8+
See the CHANGELOG + href="https://github.com/necolas/normalize.css/blob/3.0.0/CHANGELOG.md">See the CHANGELOG
diff --git a/latest/normalize.css b/latest/normalize.css index c2de8df..196d223 100644 --- a/latest/normalize.css +++ b/latest/normalize.css @@ -1,7 +1,26 @@ -/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ +/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ -/* ========================================================================== - HTML5 display definitions +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions ========================================================================== */ /** @@ -20,17 +39,20 @@ main, nav, section, summary { - display: block; + display: block; } /** - * Correct `inline-block` display not defined in IE 8/9. + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, +progress, video { - display: inline-block; + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ } /** @@ -39,8 +61,8 @@ video { */ audio:not([controls]) { - display: none; - height: 0; + display: none; + height: 0; } /** @@ -50,35 +72,10 @@ audio:not([controls]) { [hidden], template { - display: none; + display: none; } -/* ========================================================================== - Base - ========================================================================== */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* ========================================================================== - Links +/* Links ========================================================================== */ /** @@ -86,15 +83,7 @@ body { */ a { - background: transparent; -} - -/** - * Address `outline` inconsistency between Chrome and other browsers. - */ - -a:focus { - outline: thin dotted; + background: transparent; } /** @@ -103,29 +92,18 @@ a:focus { a:active, a:hover { - outline: 0; + outline: 0; } -/* ========================================================================== - Typography +/* Text-level semantics ========================================================================== */ -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari 5, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - /** * Address styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { - border-bottom: 1px dotted; + border-bottom: 1px dotted; } /** @@ -134,7 +112,7 @@ abbr[title] { b, strong { - font-weight: bold; + font-weight: bold; } /** @@ -142,17 +120,17 @@ strong { */ dfn { - font-style: italic; + font-style: italic; } /** - * Address differences between Firefox and other browsers. + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. */ -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; +h1 { + font-size: 2em; + margin: 0.67em 0; } /** @@ -160,36 +138,8 @@ hr { */ mark { - background: #ff0; - color: #000; -} - -/** - * Correct font family set oddly in Safari 5 and Chrome. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - font-size: 1em; -} - -/** - * Improve readability of pre-formatted text in all browsers. - */ - -pre { - white-space: pre-wrap; -} - -/** - * Set consistent quote types. - */ - -q { - quotes: "\201C" "\201D" "\2018" "\2019"; + background: #ff0; + color: #000; } /** @@ -197,7 +147,7 @@ q { */ small { - font-size: 80%; + font-size: 80%; } /** @@ -206,22 +156,21 @@ small { sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sup { - top: -0.5em; + top: -0.5em; } sub { - bottom: -0.25em; + bottom: -0.25em; } -/* ========================================================================== - Embedded content +/* Embedded content ========================================================================== */ /** @@ -229,7 +178,7 @@ sub { */ img { - border: 0; + border: 0; } /** @@ -237,11 +186,10 @@ img { */ svg:not(:root) { - overflow: hidden; + overflow: hidden; } -/* ========================================================================== - Figures +/* Grouping content ========================================================================== */ /** @@ -249,68 +197,82 @@ svg:not(:root) { */ figure { - margin: 0; + margin: 1em 40px; } -/* ========================================================================== - Forms +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms ========================================================================== */ /** - * Define consistent border, margin, and padding. + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. */ -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - /** - * 1. Correct `color` not being inherited in IE 8/9. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * 1. Correct font family not being inherited in all browsers. - * 2. Correct font size not being inherited in all browsers. + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ button, input, +optgroup, select, textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 2 */ - margin: 0; /* 3 */ + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Address `overflow` set to `hidden` in IE 8/9/10. */ -button, -input { - line-height: normal; +button { + overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. - * Correct `select` style inheritance in Firefox 4+ and Opera. + * Correct `button` style inheritance in Firefox, IE 8+, and Opera + * Correct `select` style inheritance in Firefox. */ button, select { - text-transform: none; + text-transform: none; } /** @@ -325,8 +287,8 @@ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ } /** @@ -335,18 +297,51 @@ input[type="submit"] { button[disabled], html input[disabled] { - cursor: default; + cursor: default; } /** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; } /** @@ -356,44 +351,61 @@ input[type="radio"] { */ input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; } /** - * Remove inner padding and search cancel button in Safari 5 and Chrome - * on OS X. + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } /** - * Remove inner padding and border in Firefox 4+. + * Define consistent border, margin, and padding. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } /** - * 1. Remove default vertical scrollbar in IE 8/9. - * 2. Improve readability and alignment in all browsers. + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9. */ textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ + overflow: auto; } -/* ========================================================================== - Tables +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables ========================================================================== */ /** @@ -401,6 +413,11 @@ textarea { */ table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; } diff --git a/latest/test.html b/latest/test.html index c900991..002b07b 100644 --- a/latest/test.html +++ b/latest/test.html @@ -1,360 +1,508 @@ - - - - Normalize CSS - - - - - -

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
+ + +Normalize CSS: UI tests + + + - - +
+ . -

img

+

Normalize.css: UI tests

- - +

html

+

should have sans-serif font family (opinionated)

+
+ abcdefghijklmnopqrstuvwxyz +
-

svg

+

body

+

should have no margin (opinionated)

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

article, aside, details, figure, figcaption, footer, header, hgroup, main, nav, section, summary

+

should render as block

+
+
article
+ +
+ summary + details +
+
+ figure +
figcaption
+
+
footer
+
header
+
hgroup
+
main
+ +
section
+
-

video

+

audio, canvas, progress, video

+

should render as inline-block and baseline-aligned

+
+ + canvas + progress + +
- - +

audio:not([controls]), template, [hidden]

+

should not display

+
+ + + +
-

Interactive content

+

a

+

should have a transparent background when active

+
+ dummy anchor +
+

should not have a focus outline when both focused and hovered (opinionated)

+
+ dummy anchor +
-

details / summary

-
- More info -

Additional information

-
    -
  • Point 1
    • -
  • Point 2
    • -
-
+

abbr[title]

+

should have a dotted bottom border

+
+ abbr +
-

Grouping content

+

b, strong

+

should have bold font-weight

+
+ b + strong +
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

+

dfn

+

should have italic font-style

+
+ dfn +
-

pre

+

h1

+

should not change size within an article

+
+

Heading (control)

+
+

Heading (in article)

+
+
+

should not change size within a section

+
+

Heading (control)

+
+

Heading (in section)

+
+
- 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
+

mark

+

should have a yellow background

+
+ mark +
- 
<html>
-    <head>
-    </head>
-    <body>
-        <div class="main"> <div>
-    </body>
-</html>
+

small

+

should render equally small in all browsers

+
+ control. small. +
-

blockquote

+

sub and sup

+

should not affect a line's visual line-height

+
+

control.

+

control. sub.

+

control. sup.

+
-
-

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

-
+

img

+

should not have a border when wrapped in an anchor

+
+ + + + +
-
Even better philosophical quote marked up with just a <blockquote> element.
+

svg

+

should not overflow

+
+ + + +
-

ordered list

+

figure

+

should have margins

+
+
+ +
+
-
    -
  1. list item 1
    2. -
  2. list item 1 -
      -
    1. list item 2
      2. -
    2. list item 2 -
        -
      1. list item 3
        2. -
      2. list item 3
        3. -
      -
      3. -
    3. list item 2
      4. -
    4. list item 2
      5. -
    -
    3. -
  3. list item 1
    4. -
  4. list item 1
    5. -
+

hr

+

should have a content-box box model

+
+
+
-

unordered list

+

pre

+

should trigger a scrollbar when too wide for its container

+
+ 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
+
-
    -
  • list item 1
    • -
  • list item 1 -
      -
    • list item 2
      • -
    • list item 2 -
        -
      • list item 3
        • -
      • list item 3
        • -
      -
      • -
    • list item 2
      • -
    • list item 2
      • -
    -
    • -
  • list item 1
    • -
  • list item 1
    • -
+

code, kbd, pre, samp

+

should render em-unit preformatted text at the same absolute size as normal text

+
+ span: abcdefghijklmnopqrstuvwxyz.
+ code: abcdefghijklmnopqrstuvwxyz.
+ kbd: abcdefghijklmnopqrstuvwxyz.
+ samp: abcdefghijklmnopqrstuvwxyz. + 
pre: abcdefghijklmnopqrstuvwxyz.
+
-

description list

+

button, input, optgroup, select, textarea

+

should inherit color from ancestor

+
+
+
+
+ +
+

should inherit font from ancestor

+
+
+
+
+ +
+

should not have margins

+
+ + + + + +
-

figure

+

button

+

should have visible overflow

+
+ + +
-
- -
Figcaption content
-
+

button, select

+

should not inherit text-transform

+
+ + +
-

Tabular data

+

button and button-style input

+

should have pointer cursor style

+
+

+

+

+

+

+
+

should be styleable

+
+ +

+

+

+

+

+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Jimi Hendrix - albums
AlbumYearPrice
AlbumYearPrice
Are You Experienced1967$10.00
Axis: Bold as Love1967$12.00
Electric Ladyland1968$10.00
Band of Gypsys1970$12.00
+

disabled button and input

+

should have default cursor style

+
+

+

+

+

+

+
-

Forms

+

button, input

+

should not have extra inner padding in Firefox

+
+ +

+

+

+

+

+
-
-
- Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping. -

-

-

-

-

-

-

+

input

+

should not inherit line-height

+
+ +
-

-

-

-

+

input[type="checkbox"], input[type="radio"]

+

should have a border-box box model

+
+ + + +
+

should not have padding

+
+ + +
-
- Inputs as siblings of labels -

-

-

-

-

-

-

-

+

input[type="number"]

+

should display a default cursor for the decrement button's click target in Chrome

+
+ +
-

-

-

-

+

input[type="search"]

+

should be styleable

+
+ +
+

should have a content-box box model

+
+
+ +
+
+

should not have a cancel button in Safari or Chrome

+
+ +
-

-

-
+

fieldset

+

should have consistent border, padding, and margin

+
+
+
+
+
-
- Clickable inputs and buttons -

-

-

-

-

+

legend

+

should inherit color

+
+
+ legend +
+
+

should not have padding

+
+
+ legend +
+
+

textarea

+

should not have a scrollbar unless overflowing

+
+ +
-

-

-

-

-
+

table

+

should not have spaces between cells

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Jimi Hendrix - albums
AlbumYearPrice
AlbumYearPrice
Are You Experienced1967$10.00
Axis: Bold as Love1967$12.00
Electric Ladyland1968$10.00
Band of Gypsys1970$12.00
+
-
- box-sizing tests -
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
- -
-
- -
-
-
-
- -
-
-
-
- - - - +