Commit 617f2094 authored by Oskar Kalbag's avatar Oskar Kalbag
Browse files

Allows semicolons at end of assertions. Added new tests. Added CSS reset.

parent 4434b1a8
v2.0 | 20110126
License: none (public domain)
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
body {
line-height: 1;
ol, ul {
list-style: none;
blockquote, q {
quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
table {
border-collapse: collapse;
border-spacing: 0;
\ No newline at end of file
body {
border: 1px solid #000;
border: 0.0625rem solid #000;
width: 1000px;
width: 62.5rem;
margin: 24px;
margin: 1.5rem;
padding: 48px;
padding: 3rem;
line-height: 24px;
line-height: 1.5rem;
font-size: 18px;
font-size: 1.125rem;
div {
width: 500px;
width: 31.25rem;
margin: 24px;
margin: 1.5rem;
background-color: #eee;
width: 'width' 50%;
h1 {
font-size: 48px;
font-size: 3rem;
line-height: 72px;
line-height: 4.5rem;
h2 {
font-size: 24px;
font-size: 1.5rem;
line-height: 36px;
line-height: 2.25rem;
margin-top: 36px;
margin-top: 2.25rem;
margin-bottom: 24px;
margin-bottom: 1.5rem;
border-bottom: 1px solid #000;
border-bottom: 0.0625rem solid #000;
#test-margin-inherit-parent-element {
margin: 42px;
margin: 2.625rem;
border: 1px dashed;
border: 0.0625rem dashed;
#test-margin-inherit {
margin: inherit;
......@@ -80,6 +117,8 @@ div {
font-size: 'font-size' inherit;
#test-font-size {
font-size: 30px;
font-size: 1.875rem;
font-size: 42px;
font-size: 2.625rem;
line-height: 63px;
line-height: 3.9375rem;
......@@ -6,6 +6,8 @@ numAssertions = 0
numPassedAssertions = 0
numFailedAssertions = 0
# console.log document.styleSheets[0].cssRules[2]
divs = document.getElementsByTagName('div')
for div in divs
......@@ -13,21 +15,31 @@ for div in divs
if dataAssertString
assertions = dataAssertString.split(';')
for assertion in assertions
assertion = assertion.trim()
assertionTokens = assertion.split(':')
# Allow for semi-colon at the end
if assertionTokens.length != 2
# Valid assertion, process it…
propertyName = assertionTokens[0].trim()
propertyValue = assertionTokens[1].trim()
computedStyle = window.getComputedStyle(div)
computedPropertyValue = computedStyle.getPropertyValue(propertyName)
# console.log
if computedPropertyValue == propertyValue
numPassedAssertions++ = 'green'
console.log propertyName + ' failed. Actual value = ' + computedPropertyValue
console.log 'Assertion failed: ' + propertyName + ' should have been ' + propertyValue + ' but was ' + computedPropertyValue + ' instead.' = 'red' = 'white'
console.log(numAssertions + ' assertions tested. ' + numPassedAssertions + ' passed. ' + numFailedAssertions + ' failed.')
// Generated by CoffeeScript 1.6.1
(function(){var e,t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m;a=0;l=0;f=0;u=document.getElementsByTagName("div");for(p=0,v=u.length;p<v;p++){o=u[p];s=o.getAttribute("data-assert");if(s){n=s.split(";");for(d=0,m=n.length;d<m;d++){e=n[d];a++;e=e.trim();t=e.split(":");c=t[0].trim();h=t[1].trim();i=window.getComputedStyle(o);r=i.getPropertyValue(c);if(r===h){l++;"green"}else{f++;console.log(c+" failed. Actual value = "+r);"red"}"white"}}}}).call(this);
\ No newline at end of file
(function(){var e,t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m;a=0;l=0;f=0;u=document.getElementsByTagName("div");for(p=0,v=u.length;p<v;p++){o=u[p];s=o.getAttribute("data-assert");if(s){n=s.split(";");for(d=0,m=n.length;d<m;d++){e=n[d];e=e.trim();t=e.split(":");if(t.length!==2)continue;a++;c=t[0].trim();h=t[1].trim();i=window.getComputedStyle(o);r=i.getPropertyValue(c);if(r===h){l++;"green"}else{f++;console.log("Assertion failed: "+c+" should have been "+h+" but was "+r+" instead.");"red"}"white"}}}console.log(a+" assertions tested. "+l+" passed. "+f+" failed.")}).call(this);
\ No newline at end of file
......@@ -155,13 +155,14 @@ line-height(h)
abstract-shorthand(attr, originalArguments)
if originalArguments[0] == 'inherit'
t = originalArguments[0]
if t == 'inherit' || t == 'auto'
{attr} originalArguments
else if unit(originalArguments[0]) == 'px'
t = originalArguments[0]
r = originalArguments[1]
b = originalArguments[2]
l = originalArguments[3]
......@@ -180,7 +181,7 @@ abstract-shorthand(attr, originalArguments)
{attr} unit(t/16, 'rem')
{attr} originalArguments
/* Abstract longhand for attributes that take a single value */
abstract-longhand(attr, originalArguments)
......@@ -2,18 +2,20 @@
<html lang='en'>
<title>Responsive Pixels Test Suite</title>
<link rel='stylesheet' href='css/reset.css'>
<link rel='stylesheet' href='css/tests.css'>
<h1>Responsive Pixels Test Suite</h1>
<section id='abc'>
<!-- Centering / non-pixel value -->
<div id='test-margin-inherit'><code>margin inherit</code></div>
<div id='test-margin-inherit-parent-element'><div id='test-margin-inherit' data-assert='margin: 42px'><code>margin inherit</code></div></div>
<div id='test-margin-horizontal-centering'><code>margin 0 auto</code></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 -->
......@@ -21,19 +23,19 @@
<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-three-arguments'><code>margin 10px 20px 30px</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'><code>margin 10px 20px 30px 40px</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>
<!-- Longhand -->
<div id='test-margin-top'><code>margin-top 10px</code></div>
<div id='test-margin-top' data-assert='margin-top: 10px'><code>margin-top 10px</code></div>
<div id='test-margin-right'><code>margin-right 20px</code></div>
<div id='test-margin-right' data-assert='margin-right: 20px'><code>margin-right 20px</code></div>
<div id='test-margin-bottom'><code>margin-bottom 30px</code></div>
<div id='test-margin-bottom' data-assert='margin-bottom: 30px'><code>margin-bottom 30px</code></div>
<div id='test-margin-left'><code>margin-left 40px</code></div>
<div id='test-margin-left' data-assert='margin-left: 40px'><code>margin-left 40px</code></div>
......@@ -41,30 +43,30 @@
<!-- Shorthand -->
<div id='test-padding-one-argument'><code>padding 10px</code></div>
<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'><code>padding 10px 20px</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'><code>padding 10px 20px 30px</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'><code>padding 10px 20px 30px 40px</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'><code>padding-top 10px</code></div>
<div id='test-padding-top' data-assert='padding-top: 10px'><code>padding-top 10px</code></div>
<div id='test-padding-right'><code>padding-right 20px</code></div>
<div id='test-padding-right' data-assert='padding-right: 20px'><code>padding-right 20px</code></div>
<div id='test-padding-bottom'><code>padding-bottom 30px</code></div>
<div id='test-padding-bottom' data-assert='padding-bottom: 30px'><code>padding-bottom 30px</code></div>
<div id='test-padding-left'><code>padding-left 40px</code></div>
<div id='test-padding-left' data-assert='padding-left: 40px'><code>padding-left 40px</code></div>
<h2>Font size</h2>
<div id='test-font-size-inherit'><code>font-size inherit</code></div>
<div id='test-font-size-inherit' data-assert='font-size: 18px'><code>font-size inherit</code></div>
<div id='test-font-size'><code>font-size 30px</code></div>
<div id='test-font-size' data-assert='font-size: 42px'><code>font-size 42px</code></div>
<script src='dom-style-test-runner.js'></script>
@import index
// Page styles and defaults to test the inherit setting.
border 1px solid black
width 1000px
margin 24px
padding 48px
line-height 24px
font-size: 18px
width 500px
margin 24px 0
background-color #eee
width 50%
font-size 48px
line-height 72px
font-size 24px
line-height 36px
margin-top 36px
margin-bottom 24px
border-bottom 1px solid black
// Margins
// Set a margin to be inherited for the test-margin-inherit test
margin 42px
border 1px dashed
margin inherit
......@@ -72,4 +97,5 @@ div
font-size inherit
font-size 30px
\ No newline at end of file
font-size 42px
line-height 63px
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment