Ind.ie is now Small Technology Foundation.
Commit 617f2094 authored by Oskar Kalbag's avatar Oskar Kalbag

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

parent 4434b1a8
/* http://meyerweb.com/eric/tools/css/reset/
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 { body {
border: 1px solid #000; border: 1px solid #000;
border: 0.0625rem 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 { div {
width: 500px;
width: 31.25rem;
margin: 24px;
margin: 1.5rem;
background-color: #eee; 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 { #test-margin-inherit {
margin: inherit; margin: inherit;
...@@ -80,6 +117,8 @@ div { ...@@ -80,6 +117,8 @@ div {
font-size: 'font-size' inherit; font-size: 'font-size' inherit;
} }
#test-font-size { #test-font-size {
font-size: 30px; font-size: 42px;
font-size: 1.875rem; font-size: 2.625rem;
line-height: 63px;
line-height: 3.9375rem;
} }
...@@ -6,6 +6,8 @@ numAssertions = 0 ...@@ -6,6 +6,8 @@ numAssertions = 0
numPassedAssertions = 0 numPassedAssertions = 0
numFailedAssertions = 0 numFailedAssertions = 0
# console.log document.styleSheets[0].cssRules[2]
divs = document.getElementsByTagName('div') divs = document.getElementsByTagName('div')
for div in divs for div in divs
...@@ -13,21 +15,31 @@ for div in divs ...@@ -13,21 +15,31 @@ for div in divs
if dataAssertString if dataAssertString
assertions = dataAssertString.split(';') assertions = dataAssertString.split(';')
for assertion in assertions for assertion in assertions
numAssertions++
assertion = assertion.trim() assertion = assertion.trim()
assertionTokens = assertion.split(':') assertionTokens = assertion.split(':')
# Allow for semi-colon at the end
if assertionTokens.length != 2
continue
# Valid assertion, process it…
numAssertions++
propertyName = assertionTokens[0].trim() propertyName = assertionTokens[0].trim()
propertyValue = assertionTokens[1].trim() propertyValue = assertionTokens[1].trim()
computedStyle = window.getComputedStyle(div) computedStyle = window.getComputedStyle(div)
computedPropertyValue = computedStyle.getPropertyValue(propertyName) computedPropertyValue = computedStyle.getPropertyValue(propertyName)
# console.log div.style
if computedPropertyValue == propertyValue if computedPropertyValue == propertyValue
numPassedAssertions++ numPassedAssertions++
div.style.backgroundColor = 'green' div.style.backgroundColor = 'green'
else else
numFailedAssertions++ numFailedAssertions++
console.log propertyName + ' failed. Actual value = ' + computedPropertyValue console.log 'Assertion failed: ' + propertyName + ' should have been ' + propertyValue + ' but was ' + computedPropertyValue + ' instead.'
div.style.backgroundColor = 'red' div.style.backgroundColor = 'red'
div.style.color = 'white' div.style.color = 'white'
console.log(numAssertions + ' assertions tested. ' + numPassedAssertions + ' passed. ' + numFailedAssertions + ' failed.')
// Generated by CoffeeScript 1.6.1 // 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++;o.style.backgroundColor="green"}else{f++;console.log(c+" failed. Actual value = "+r);o.style.backgroundColor="red"}o.style.color="white"}}}}).call(this); (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++;o.style.backgroundColor="green"}else{f++;console.log("Assertion failed: "+c+" should have been "+h+" but was "+r+" instead.");o.style.backgroundColor="red"}o.style.color="white"}}}console.log(a+" assertions tested. "+l+" passed. "+f+" failed.")}).call(this);
\ No newline at end of file \ No newline at end of file
...@@ -155,13 +155,14 @@ line-height(h) ...@@ -155,13 +155,14 @@ line-height(h)
abstract-shorthand(attr, originalArguments) abstract-shorthand(attr, originalArguments)
if originalArguments[0] == 'inherit' t = originalArguments[0]
if t == 'inherit' || t == 'auto'
{attr} originalArguments {attr} originalArguments
else if unit(originalArguments[0]) == 'px' else if unit(originalArguments[0]) == 'px'
t = originalArguments[0]
r = originalArguments[1] r = originalArguments[1]
b = originalArguments[2] b = originalArguments[2]
l = originalArguments[3] l = originalArguments[3]
...@@ -180,7 +181,7 @@ abstract-shorthand(attr, originalArguments) ...@@ -180,7 +181,7 @@ abstract-shorthand(attr, originalArguments)
{attr} unit(t/16, 'rem') {attr} unit(t/16, 'rem')
else else
{attr} originalArguments {attr} originalArguments
/* Abstract longhand for attributes that take a single value */ /* Abstract longhand for attributes that take a single value */
abstract-longhand(attr, originalArguments) abstract-longhand(attr, originalArguments)
......
...@@ -2,18 +2,20 @@ ...@@ -2,18 +2,20 @@
<html lang='en'> <html lang='en'>
<head> <head>
<title>Responsive Pixels Test Suite</title> <title>Responsive Pixels Test Suite</title>
<link rel='stylesheet' href='css/reset.css'>
<link rel='stylesheet' href='css/tests.css'> <link rel='stylesheet' href='css/tests.css'>
</head> </head>
<body> <body>
<h1>Tests</h1> <h1>Responsive Pixels Test Suite</h1>
<section> <section id='abc'>
<h2>Margin</h2> <h2>Margin</h2>
<!-- Centering / non-pixel value --> <!-- 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 --> <!-- Shorthand -->
...@@ -21,19 +23,19 @@ ...@@ -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-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 --> <!-- 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>
</section> </section>
<section> <section>
...@@ -41,30 +43,30 @@ ...@@ -41,30 +43,30 @@
<!-- Shorthand --> <!-- 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 --> <!-- 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>
</section> </section>
<section> <section>
<h2>Font size</h2> <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>
</section> </section>
<script src='dom-style-test-runner.js'></script> <script src='dom-style-test-runner.js'></script>
......
@import index @import index
// Page styles and defaults to test the inherit setting.
body body
border 1px solid black border 1px solid black
width 1000px
margin 24px
padding 48px
line-height 24px
font-size: 18px
div div
width 500px
margin 24px 0
background-color #eee background-color #eee
width 50%
h1
font-size 48px
line-height 72px
h2
font-size 24px
line-height 36px
margin-top 36px
margin-bottom 24px
border-bottom 1px solid black
// Margins // Margins
// Set a margin to be inherited for the test-margin-inherit test
#test-margin-inherit-parent-element
margin 42px
border 1px dashed
#test-margin-inherit #test-margin-inherit
margin inherit margin inherit
...@@ -72,4 +97,5 @@ div ...@@ -72,4 +97,5 @@ div
font-size inherit font-size inherit
#test-font-size #test-font-size
font-size 30px font-size 42px
\ No newline at end of file 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