diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000000000000000000000000000000000000..cf3d1dd178ec2fd1ced38d54d89d21917b5916ef --- /dev/null +++ b/css/reset.css @@ -0,0 +1,48 @@ +/* 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 diff --git a/css/tests.css b/css/tests.css index 9ba6e22a57b798b45857609c788dd88d06e8f8ff..b8f7ae01e93cfddfc8e7ffa257b2cd0a2a7c41be 100644 --- a/css/tests.css +++ b/css/tests.css @@ -1,10 +1,47 @@ 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; } diff --git a/dom-style-test-runner.coffee b/dom-style-test-runner.coffee index a10aa2a0c926cf7da3da073134390aebcc17cac7..57f7b181b4cfb7f36790485a373ee39f07d4c39f 100644 --- a/dom-style-test-runner.coffee +++ b/dom-style-test-runner.coffee @@ -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.') + diff --git a/dom-style-test-runner.js b/dom-style-test-runner.js index c3ae165a15522c850db0985c9b57f75aa5072cc5..4136ba8a4d4102f2e8e1339533362d7610475729 100644 --- a/dom-style-test-runner.js +++ b/dom-style-test-runner.js @@ -1,2 +1,2 @@ // 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 Responsive Pixels Test Suite + -

Tests

-
+

Responsive Pixels Test Suite

+

Margin

-
margin inherit
+
margin inherit
-
margin 0 auto
+ +
margin 0 auto
@@ -21,19 +23,19 @@
margin 10px 20px
-
margin 10px 20px 30px
+
margin 10px 20px 30px
-
margin 10px 20px 30px 40px
+
margin 10px 20px 30px 40px
-
margin-top 10px
+
margin-top 10px
-
margin-right 20px
+
margin-right 20px
-
margin-bottom 30px
+
margin-bottom 30px
-
margin-left 40px
+
margin-left 40px
@@ -41,30 +43,30 @@ -
padding 10px
+
padding 10px
-
padding 10px 20px
+
padding 10px 20px
-
padding 10px 20px 30px
+
padding 10px 20px 30px
-
padding 10px 20px 30px 40px
+
padding 10px 20px 30px 40px
-
padding-top 10px
+
padding-top 10px
-
padding-right 20px
+
padding-right 20px
-
padding-bottom 30px
+
padding-bottom 30px
-
padding-left 40px
+
padding-left 40px

Font size

-
font-size inherit
+
font-size inherit
-
font-size 30px
+
font-size 42px
diff --git a/tests.styl b/tests.styl index 75f22b5c65449e830db143dba0adea6b5f802e06..4365d7a35afbbefb3676c43bde8972c60c2a1ed1 100644 --- a/tests.styl +++ b/tests.styl @@ -1,14 +1,39 @@ @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