tests.html 4.9 KB
<!doctype html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>Responsive Pixels Test Suite</title>
	<link rel='stylesheet' href='css/reset.css'>
	<link rel='stylesheet' href='css/tests.css'>
</head>
<body>
	<h1>Responsive Pixels Test Suite</h1>
	<section id='abc'>
		<h2>Margin</h2>

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

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

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

		<!-- Shorthand -->

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

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

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

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

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

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

		<!-- Longhand -->

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

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

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

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

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


	</section>
	<section>
		<h2>Padding</h2>

		<!-- Shorthand -->

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

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

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

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

		<!-- Longhand -->

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

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

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

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

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

		<div id='test-font-size' data-assert='font-size: 42px'><code>font-size 42px</code></div>
	</section>
	<section>
		<h2>Width (%)</h2>
		<div id='test-width-hundred-percent' data-assert='width: 1000px'>width 100%</div>
	</section>
	<section>
		<h2>Height</h2>
		<div id='test-height' data-assert='height: 50px'>height 50px</div>
	</section>
	<section>
		<h2>Max-width (none)</h2>
		<div id='test-max-width' data-assert='width: 500px'>max-width none</div>
	</section>
	<section>
		<h2>Background size</h2>
		<div id='test-background-size' data-assert='background-size: 500px 500px'>background-size 500px 500px</div>
		<div id='test-background-size-cover' data-assert='background-size: cover'>background-size cover</div>
		<div id='test-background-size-contain' data-assert='background-size: contain'>background-size contain</div>
		<div id='test-background-size-one-hundred-percent' data-assert='background-size: 100%'>background-size 100%</div>
	</section>
	<section>
		<h2>!imporant</h2>
		<div id='test-bang-important' data-assert='width:100px'>width 100px !important</div>
	</section>
	<section>
		<h2>Vertical rhythm helpers</h2>
		<div id='test-padding-at-half-line-height' data-assert='padding: 12px 0px 12px 12px'>padding HalfLineHeight 0 HalfLineHeight HalfLineHeight</div>
	</section>
	<script src='dom-style-test-runner.js'></script>


</body>
</html>