Demonstrates how to test that a list has the proper CSS for custom numbering.

Response to http://stackoverflow.com/questions/20143955/testing-css-counters-using-cucumber-selenium

by lddubeau

HTML

<ul class="custom">
    <li id="a">a</li>
    <li id="b">b</li>
    <li id="c">c</li>
</ul>
<!-- Typo on purpose to simulate developer mistake. -->
<ul class="cotsum">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<div id="result"></div>

CSS

ul.custom {
    counter-reset: step;
}
.custom li:before {
    counter-increment: step;
    content: counter(step)'. ';
}

JavaScript

var qs = function (query) {
    return document.querySelector(query);
};
var result = qs("#result");

function testList(list) {
    // The CSS engine normalizes some values so the tests do not check for the exact values we put in the CSS but for the normalized ones.

    var reset = window.getComputedStyle(list).getPropertyValue("counter-reset");
    if (reset !== "step 0") result.innerHTML += "<p>incorrect counter-reset: " + reset;

    var items = list.querySelectorAll("li");
    for (var i = 0; i < items.length; ++i) {
        var item = items[i];
        var before_style = window.getComputedStyle(item, ':before');
        var content = before_style.getPropertyValue("content");
        if (content !== 'counter(step) ". "') result.innerHTML += "<p>incorrect content: " + content + "</p>";

        var counter_inc = before_style.getPropertyValue("counter-increment");
        if (counter_inc !== 'step 1') result.innerHTML += "<p>incorrect counter-increment: " + counter_inc + "</p>";
    }
}

var lists = document.querySelectorAll("ul");
for (var i = 0; i < lists.length; ++i)
    testList(lists[i]);