jQuery, slideDown

by rwaldron

HTML

<ul id="dom" class="hidden">
    <li class="read">a</li>
    <li>b</li>
    <li class="read">c</li>    
    <li>d</li>    
</ul>

<ul id="jq" class="hidden">
    <li class="read">a</li>
    <li>b</li>
    <li class="read">c</li>    
    <li>d</li>    
</ul>

CSS

.hidden { 
    display: none 
}

.read { 
    display: none 
}

#dom {
    background: lightpink
}
#jq {
    background: lightyellow
}

JavaScript

var ul, $ul, results;

ul = document.getElementById("dom");
$ul = $("#jq");


ul.classList.remove("hidden");
$ul.slideDown();

// Gather the comupted styles using only native DOM API, 
// to avoid potential conspiracy theories.

results = {
    dom: {
        a: getComputedStyle(ul.children[0]).getPropertyValue("display"),
        b: getComputedStyle(ul.children[1]).getPropertyValue("display")
    },
    jq: {
        a: getComputedStyle($ul[0].children[0]).getPropertyValue("display"),
        b: getComputedStyle($ul[0].children[1]).getPropertyValue("display")
    }
};

console.log( results.dom.a === results.jq.a ? "PASS" : "FAIL" );
console.log( results.dom.b === results.jq.b ? "PASS" : "FAIL" );