From 5b57298fc3ed1be2cafc7c02aef83a7f07bb1a5e Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 25 Jan 2014 20:39:18 -0800 Subject: [PATCH] Explicit tests for each normalization Use a test-like presentation to make it clearer what the test file is looking to test. Don't use the file as a dumping ground for every HTML element. This change makes the tests more focused and useful. Fix gh-276 Fix gh-284 Fix gh-285 --- test.html | 785 +++++++++++++++++++++++++++++++----------------------- 1 file changed, 455 insertions(+), 330 deletions(-) diff --git a/test.html b/test.html index a2257ba..e6d63e7 100644 --- a/test.html +++ b/test.html @@ -1,383 +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 san-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.
+
- +

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 stylable

+
+ +

+

+

+

+

+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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

+
+ +

+

+

+

+

+
-
-
-
- Fieldset with a wider child -
-
-
+

input

+

should not inherit line-height

+
+ +
-
- Color inheritance -

-

-

-

-

-
+

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 stylable

+
+ +
+

should have a content-box box model

+
+
+ +
+
+

should not have a cancel button in Safari or Chrome

+
+ +
-
- Inputs as siblings of labels -

-

-

-

-

-

-

-

+

fieldset

+

should have consistent border, padding, and margin

+
+
+
+
+
-

-

-

-

+

legend

+

should inherit color

+
+
+ legend +
+
+

should not have padding

+
+
+ legend +
+
-

-

-
+

legend

+

should not have a scrollbar unless overflowing

+
+ +
-
- Clickable inputs and buttons -

-

-

-

-

+

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 -
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
- -
-
- -
-
-
-
- -
-
-
-
-
- - - +