Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
Showing with 159 additions and 31 deletions
css/reset.css 0 → 100644
View file @ 617f2094
/* 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
css/tests.css
View file @ 617f2094
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;
}
dom-style-test-runner.coffee
View file @ 617f2094
......@@ -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
numAssertions++
assertion = assertion.trim()
assertionTokens = assertion.split(':')
# Allow for semi-colon at the end
if assertionTokens.length != 2
continue
# Valid assertion, process it…
numAssertions++
propertyName = assertionTokens[0].trim()
propertyValue = assertionTokens[1].trim()
computedStyle = window.getComputedStyle(div)
computedPropertyValue = computedStyle.getPropertyValue(propertyName)
# console.log div.style
if computedPropertyValue == propertyValue
numPassedAssertions++
div.style.backgroundColor = 'green'
else
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.color = 'white'
console.log(numAssertions + ' assertions tested. ' + numPassedAssertions + ' passed. ' + numFailedAssertions + ' failed.')
dom-style-test-runner.js
View file @ 617f2094
// 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);
\ 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++;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
index.styl
View file @ 617f2094
......@@ -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')
else
{attr} originalArguments
/* Abstract longhand for attributes that take a single value */
abstract-longhand(attr, originalArguments)
......
tests.html
View file @ 617f2094
......@@ -2,18 +2,20 @@
<html lang='en'>
<head>
<title>Responsive Pixels Test Suite</title>
<link rel='stylesheet' href='css/reset.css'>
<link rel='stylesheet' href='css/tests.css'>
</head>
<body>
<h1>Tests</h1>
<section>
<h1>Responsive Pixels Test Suite</h1>
<section id='abc'>
<h2>Margin</h2>
<!-- 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>
</section>
<section>
......@@ -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>
</section>
<section>
<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>
<script src='dom-style-test-runner.js'></script>
......
tests.styl
View file @ 617f2094
@import index
// Page styles and defaults to test the inherit setting.
body
border 1px solid black
width 1000px
margin 24px
padding 48px
line-height 24px
font-size: 18px
div
width 500px
margin 24px 0
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
// 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
margin inherit
......@@ -72,4 +97,5 @@ div
font-size inherit
#test-font-size
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

Like this? Fund us! Your patronage helps keep us independent and going.