tests.html 4.9 KB
Newer Older
1 2 3
<!doctype html>
<html lang='en'>
<head>
4
	<meta charset='utf-8'>
5
	<title>Responsive Pixels Test Suite</title>
6
	<link rel='stylesheet' href='css/reset.css'>
7 8 9
	<link rel='stylesheet' href='css/tests.css'>
</head>
<body>
10 11
	<h1>Responsive Pixels Test Suite</h1>
	<section id='abc'>
12 13 14 15
		<h2>Margin</h2>

		<!-- Centering / non-pixel value -->

16
		<div id='test-margin-inherit-parent-element'><div id='test-margin-inherit' data-assert='margin: 42px'><code>margin inherit</code></div></div>
17

18 19
		<!-- Body is 1000px wide. Divs are 500px wide. When centered, left & right margins should be equal to 250px -->
		<div id='test-margin-horizontal-centering' data-assert='margin-left: 250px; margin-right: 250px'><code>margin 0 auto</code></div>
20 21 22

		<!-- Shorthand -->

23
		<div id='test-margin-one-argument' data-assert='margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px'><code>margin 10px</code></div>
24

25
		<div id='test-margin-two-arguments' data-assert='margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-right: 20px'><code>margin 10px 20px</code></div>
26

27 28
		<div id='test-margin-two-arguments-with-zero' data-assert='margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-right: 0px'><code>margin 10px 0</code></div>

29
		<div id='test-margin-three-arguments' data-assert='margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 20px'><code>margin 10px 20px 30px</code></div>
30

31
		<div id='test-margin-four-arguments' data-assert='margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px'><code>margin 10px 20px 30px 40px</code></div>
32

33 34
		<div id='test-margin-four-hairlines' data-assert='margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px'><code>margin hairline hairline hairline hairline</code></div>

35 36
		<!-- Longhand -->

37
		<div id='test-margin-top' data-assert='margin-top: 10px'><code>margin-top 10px</code></div>
38

39
		<div id='test-margin-right' data-assert='margin-right: 20px'><code>margin-right 20px</code></div>
40

41
		<div id='test-margin-bottom' data-assert='margin-bottom: 30px'><code>margin-bottom 30px</code></div>
42

43
		<div id='test-margin-left' data-assert='margin-left: 40px'><code>margin-left 40px</code></div>
44

45 46 47
		<div id='test-margin-hairline' data-assert='margin-left: 1px'><code>margin-left hairline</code></div>


48 49 50 51 52 53
	</section>
	<section>
		<h2>Padding</h2>

		<!-- Shorthand -->

54
		<div id='test-padding-one-argument' data-assert='padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px'><code>padding 10px</code></div>
55

56
		<div id='test-padding-two-arguments' data-assert='padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;'><code>padding 10px 20px</code></div>
57

58
		<div id='test-padding-three-arguments' data-assert='padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 20px'><code>padding 10px 20px 30px</code></div>
59

60
		<div id='test-padding-four-arguments' data-assert='padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px'><code>padding 10px 20px 30px 40px</code></div>
61 62 63

		<!-- Longhand -->

64
		<div id='test-padding-top' data-assert='padding-top: 10px'><code>padding-top 10px</code></div>
65

66
		<div id='test-padding-right' data-assert='padding-right: 20px'><code>padding-right 20px</code></div>
67

68
		<div id='test-padding-bottom' data-assert='padding-bottom: 30px'><code>padding-bottom 30px</code></div>
69

70
		<div id='test-padding-left' data-assert='padding-left: 40px'><code>padding-left 40px</code></div>
71 72 73 74
	</section>
	<section>
		<h2>Font size</h2>

75
		<div id='test-font-size-inherit' data-assert='font-size: 18px'><code>font-size inherit</code></div>
76

77
		<div id='test-font-size' data-assert='font-size: 42px'><code>font-size 42px</code></div>
78
	</section>
79
	<section>
Oskar Kalbag's avatar
Oskar Kalbag committed
80
		<h2>Width (%)</h2>
81 82
		<div id='test-width-hundred-percent' data-assert='width: 1000px'>width 100%</div>
	</section>
83 84 85 86
	<section>
		<h2>Height</h2>
		<div id='test-height' data-assert='height: 50px'>height 50px</div>
	</section>
87
	<section>
Oskar Kalbag's avatar
Oskar Kalbag committed
88
		<h2>Max-width (none)</h2>
89 90
		<div id='test-max-width' data-assert='width: 500px'>max-width none</div>
	</section>
91 92
	<section>
		<h2>Background size</h2>
93
		<div id='test-background-size' data-assert='background-size: 500px 500px'>background-size 500px 500px</div>
94
		<div id='test-background-size-cover' data-assert='background-size: cover'>background-size cover</div>
95
		<div id='test-background-size-contain' data-assert='background-size: contain'>background-size contain</div>
96
		<div id='test-background-size-one-hundred-percent' data-assert='background-size: 100%'>background-size 100%</div>
97
	</section>
98 99 100 101
	<section>
		<h2>!imporant</h2>
		<div id='test-bang-important' data-assert='width:100px'>width 100px !important</div>
	</section>
102 103
	<section>
		<h2>Vertical rhythm helpers</h2>
104
		<div id='test-padding-at-half-line-height' data-assert='padding: 12px 0px 12px 12px'>padding HalfLineHeight 0 HalfLineHeight HalfLineHeight</div>
105
	</section>
106 107
	<script src='dom-style-test-runner.js'></script>

108

109 110
</body>
</html>