vein.js tests

by chad

HTML

<script src="http://israelidanny.github.io/veinjs/vein.js"></script>
<h1 class="sizer">
    Vein CSS Injection
    <button class="reset">Reset tests</button>
</h1>
<div class="content">
    <section>
        <h3>Tests</h3>
        <div class="tests"></div>
    </section>
    <section>
        <h3>Test sequences</h3>
        <div class="sequences"></div>
    </section>
</div>

CSS

body {
    font-family: sans-serif;
    padding-top: 72px;
}
section {
    padding-left: 25px;
    margin-bottom: 20px;
}
h1 {
    position: fixed;
    background: white;
    top: 0;
    z-index: 2;
    margin-top: 0;
    padding-top: 1em;
}
h3 {
    position: absolute;
	-webkit-transform: rotate(90deg) translateX(-28px) translateY(15px);
	-moz-transform: rotate(90deg) translateX(-28px) translateY(15px);
	transform: rotate(90deg) translateX(-28px) translateY(15px);
	-webkit-transform-origin: 0 50% 0;
	-moz-transform-origin: 0 50% 0;
	transform-origin: 0 50% 0;
}
.reset {
    display: none;
    position: relative;
    top: -5px;
}
.sizer {
    border-bottom: solid 1px black;
    width: 400px;
    margin-left: -8px;
    padding-left: 8px;
    box-sizing: border-box;
}
.set {
    margin-bottom: .5em;
}
.advancer {
    margin: 0 10px;
}
.selected {
    background: black;
    color: white;
}
.dim {
    color: #ccc;
}
ul {
    display: inline;
    padding: 0;
    margin: 0;
}
li {
    display: inline-block;
    padding: 2px 6px;
    margin-left: 4px;
    border-radius: 20px;
}
li:before {
    content: '›';
}
li:first-child {
    margin-left: 0;
}

@media (min-width: 400px) {
    body:after {
        position: fixed;
        top: 10px;
        right: 10px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: green;
        content: '';
    }
}

JavaScript

//
// Vein Functions
//
var vein_functions = {
    blue: function(){
        var target = 'h1';
        vein.inject(target, {'color':'blue'});
    },
    green: function(){
        var target = 'h1';
        vein.inject(target, {'color':'green'});
    },
    clear: function(){
        var target = 'h1';
        vein.inject(target, null);
    },
    pink_mq: function(){
        var target = [{'@media (min-width: 400px)': ['h1']}];
        vein.inject(target, {'color': 'pink'});
    },
    orange_mq: function(){
        var target = [{'@media (min-width: 400px)': ['h1']}];
        vein.inject(target, {'color': 'orange'});
    },
    clear_mq: function(){
        var target = [{'@media (min-width: 400px)': ['h1']}];
        vein.inject(target, null);
    },
    clear_array: function(){
        var target = ['h1', {'@media (min-width: 400px)': ['h1']}];
        vein.inject(target, null);
    },
    clear_array_mq_1st: function(){
        var target = [{'@media (min-width: 400px)': ['h1']}, 'h1'];
        vein.inject(target, null);
    },
    clear_2x: function(){
        var target1 = 'h1'
          , target2 = [{'@media (min-width: 400px)': ['h1']}];
        vein.inject(target1, null);
        vein.inject(target2, null);
    }
}


//
// Layout
//
var layout = function(object, target, template){
    // Build layout from object, insert into target, 
    // using template object to control html entities
    for(var key in object){
        var items = object[key]
          , wrapper = $(template.wrapper)
          , items_container = $(template.items_container);
        for (var i = 0; i < items.length; ++i){
            $(template.item)
                .append(items[i])
                .appendTo(items_container);
        }
        wrapper
            .append(key)
            .append(template.control)
            .append(items_container);
        target.append(wrapper);
    }
}


//
// Tests
//
var tests = {
    'h1':
        ['blue','green','clear'],
    'min-width:...