Commit 4434b1a8 authored by Oskar Kalbag's avatar Oskar Kalbag

Added a DOM-style CSS test runner.

parent 3ce26432
# Simple test runner for DOM-style CSS unit tests.
#
# Copyright © 2013 Aral Balkan
numAssertions = 0
numPassedAssertions = 0
numFailedAssertions = 0
divs = document.getElementsByTagName('div')
for div in divs
dataAssertString = div.getAttribute('data-assert')
if dataAssertString
assertions = dataAssertString.split(';')
for assertion in assertions
numAssertions++
assertion = assertion.trim()
assertionTokens = assertion.split(':')
propertyName = assertionTokens[0].trim()
propertyValue = assertionTokens[1].trim()
computedStyle = window.getComputedStyle(div)
computedPropertyValue = computedStyle.getPropertyValue(propertyName)
if computedPropertyValue == propertyValue
numPassedAssertions++
div.style.backgroundColor = 'green'
else
numFailedAssertions++
console.log propertyName + ' failed. Actual value = ' + computedPropertyValue
div.style.backgroundColor = 'red'
div.style.color = 'white'
// 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
......@@ -12,14 +12,14 @@
<!-- Centering / non-pixel value -->
<div id='test-margin-inherit'><code>margin inherit</code></div>
<div id='test-margin-horizontal-centering'><code>margin 0 auto</code></div>
<!-- Shorthand -->
<div id='test-margin-one-argument'><code>margin 10px</code></div>
<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'><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>
......@@ -66,5 +66,7 @@
<div id='test-font-size'><code>font-size 30px</code></div>
</section>
<script src='dom-style-test-runner.js'></script>
</body>
</html>
\ 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