baseline.css tests
html
The page should have a default (arrow) cursor
The page should not scale below 300px wide
The page should force a vertical scrollbar
Should hide the tap highlight color in iOS and Android
body
Should have sans-serif font family
Lacus ac ligula pulvinar elit mauris ad eget quisque platea mi nam proin a quam adipiscing
Should have a font size of 14px (1.4em)
Lacus ac ligula pulvinar elit mauris ad eget quisque platea mi nam proin a quam adipiscing
Should have a font color of #333
Lacus ac ligula pulvinar elit mauris ad eget quisque platea mi nam proin a quam adipiscing
Should have a line height of 1.5
Per tristique vestibulum pulvinar eget a sociosqu parturient adipiscing ipsum suspendisse pretium a vestibulum ullamcorper scelerisque bibendum a. Dictum commodo non risus per dolor imperdiet a ultrices scelerisque a porta adipiscing condimentum parturient massa placerat vulputate lobortis diam. Inceptos a a id id nascetur a elementum ac facilisis a condimentum suspendisse aliquam volutpat mi lobortis adipiscing tempus convallis adipiscing.
html,
body
The page should always fill at least the entire height of the viewport
*,
::before,
::after
Should have no default styling from the browser (padding, margin, border, background)
Backgrounds should not repeat
Elements should inherit their typography
Lacus ac ligula pulvinar elit mauris ad eget quisque platea mi nam proin a quam adipiscing
Elements should have a box-sizing of border-box by default
Elements should inherit their box-sizing
a
Should have a font color of #337ab7 with no text decoration by default
a:hover,
a:focus
Should transition to a font color of #095f8a
a:hover
Should have an underline text decoration on hover
a:focus
Should have an outline on focus
h1
Should be bold and have a font size of 2.6em
Heading 1
h2
Should be bold and have a font size of 2.2em
Heading 2
h3
Should be bold and have a font size of 1.8em
Heading 3
h4
Should be bold and have a font size of 1.6em
Heading 4
h5
Should be bold and have a font size of 1.4em
Heading 5
h6
Should be bold and have a font size of 1.2em
Heading 6
p + *
Should restore the margin between a paragraph and the next element
Lacus ac ligula pulvinar elit mauris ad eget
quisque platea mi nam proin a quam adipiscing
p:empty
Empty paragraphs should be hidden
@media (max-width: 767px)
Should force word breaks on small screens
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
main
Should center the main content
Should automatically apply clearfix to floating elements
table
A table should not have any border separation or spacing
| 1 | 2 | 3 |
|---|---|---|
| 1 | 2 | 3 |
nav ol,
nav ul
Should remove the list style on navigation lists
blockquote,
q
Should remove default quotes
Lacus ac ligula pulvinar elit mauris ad eget quisque platea mi nam proin a quam adipiscing
abbr[title],
dfn[title]
Should indicate that an element is a helpful resource with the help cursor
HTML
pre
Should provide scrollbars if the content exceeds its height
Suscipit dui parturient placerat per suspendisse a ante a ridiculus elementum scelerisque condimentum aliquam sodales. Sed elit morbi vitae ac scelerisque parturient adipiscing proin pharetra a feugiat phasellus tempor ultrices ad adipiscing vestibulum ut elit senectus gravida a lacus a adipiscing vestibulum accumsan adipiscing. Mattis parturient tristique placerat sem eget lobortis felis dignissim urna vestibulum curabitur ligula parturient suspendisse a odio purus dis pulvinar a. Adipiscing parturient gravida purus a vulputate vestibulum feugiat gravida ullamcorper ornare tellus fames potenti duis tincidunt urna urna per.
Should preserve new lines, spaces, and tabs but force text wrapping
Suscipit dui parturient placerat per suspendisse a ante a ridiculus elementum scelerisque condimentum aliquam sodales.
Sed elit morbi vitae ac scelerisque parturient adipiscing proin pharetra a feugiat phasellus tempor
button,
input,
select,
textarea
Should remove the default styling in all browsers
button,
label,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"],
input[type="image"]
Should indicate that a form element is actionable with a pointer cursor
button
Should prevent button text from being selectable
button:focus
Should restore button focus outline in Firefox/IE
textarea
Should allow only vertical resizing of textareas
select[multiple],
select[size]
Should not have a fixed height or scrollbars
select::-ms-value
Should reset the font color of the selected option value to the body font color (IE 11+)
input,
select
Should align labels to the middle of the field
input[type="radio"]
Should align labels with the radio button
input[type="checkbox"]
Should align labels with the checkbox
select[multiple],
select[size],
textarea
Should align labels to the top of the field
input[readonly],
textarea[readonly]
Should grey out a readonly field and display default cursor
input[readonly]:focus,
textarea[readonly]:focus,
input[readonly]:active,
textarea[readonly]:active
Should remove the focus outline for readonly inputs and textareas
:disabled
Should indicate than a form field element is disabled via transparency and cursor
Should prevent resizing
Should remove the focus outline
:invalid:focus
Should indicate than a form field element is invalid via outline color
audio,
canvas,
iframe,
img,
svg,
video
Should remove the default white space at the bottom of the element
%202012-2015%20Ivan%20Malopinsky%20-%20http%3A%2F%2Fimsky.co%0A--%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C!%5BCDATA%5B%23holder_154fea75ae5%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_154fea75ae5%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%2F%3E%3Cg%3E%3Ctext%20x%3D%2275.5%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E)
audio,
embed,
img,
object,
video
Should make media elements responsive by default
img[width],
img[height]
Should disable responsiveness if an image has width and/or height attributes
[tabindex="-1"]:focus
Should not be focusable via keyboard navigation
a,
area,
button,
input,
label,
select,
textarea,
[tabindex]:not([tabindex="-1"])
Should remove the click delay on mobile devices
[aria-disabled]:not(:disabled),
[disabled]:not(:disabled)
Should indicate than a non-form element is disabled via transparency and cursor
Should prevent user interaction
Should remove the focus outline
::selection
Should remove the text shadow on text selections
Lacus ac ligula pulvinar elit mauris ad eget quisque platea mi nam proin a quam adipiscing
[aria-busy="true"]
Should indicate that an element is in a busy/loading state with a loading cursor
[aria-controls],
[role="button"]
Should indicate that an element is a button/control with a pointer cursor
Button