<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
<style>
#test {
  width: 400px;
  margin: 10px;
}
#test > div {
  margin: 1ex;
}
#outline {
    outline: 2px solid red;
    outline-offset: 5px;
}
#content:before {
    content: 'text';
}
#content:after {
  content: 'test ' url(data:image/gif;base64,R0lGODlhAQABAJAAAP8AAAAAACwAAAAAAQABAAACAgQBADs=);
}
#counter {
    counter-reset: section;
}
#counter > div {
    counter-reset: subsection 0 anothercounter 5;
}
#counter > h1:before {
    counter-increment: section;
    content: counter(section) '. ';
}
#counter > div > h2:before {
    counter-increment: subsection;
    content: counter(section) '.' counter(subsection) '. ';
}
</style>
</head>
<body>
<div id="test">
    <div id="outline">outline</div>
    <div id="content">content</div>
    <div id="counter">
        counter
        <h1 id="counter1">Heading A</h1>
        <div id="subcounter">
            <h2 id="subcounter1">Subheading A</h2>
            <h2 id="subcounter2">Subheading B</h2>
        </div>
        <h1>Heading B</h1>
        </div>
    </div>
    <div id="console"></div>
</body>
<script>
  
function computedStyleFor(id, pseudo, property)
{
    var element = document.getElementById(id);
    var style = window.getComputedStyle(element, pseudo);
    if (!style)
        return null;
    return style.getPropertyValue(property);
}

shouldBe("computedStyleFor('outline', null, 'outline-offset')", "'5px'");

shouldBeEqualToString("computedStyleFor('content', 'before', 'content')", '"text"');
shouldBeEqualToString("computedStyleFor('content', 'after', 'content')", `"test " url(\"data:image/gif;base64,R0lGODlhAQABAJAAAP8AAAAAACwAAAAAAQABAAACAgQBADs=\")`);
shouldBeEqualToString("computedStyleFor('counter', null, 'counter-reset')", "section 0");
var str = computedStyleFor('subcounter', null, 'counter-reset');
shouldBe("str.indexOf('subsection 0') != -1", "true");
shouldBe("str.indexOf('anothercounter 5') != -1", "true");
shouldBeEqualToString("computedStyleFor('counter1', 'before', 'counter-increment')", "section 1");
shouldBeEqualToString("computedStyleFor('subcounter2', 'before', 'counter-increment')", "subsection 1");
shouldBeEqualToString("computedStyleFor('subcounter2', 'before', 'content')", `counter(section) "." counter(subsection) ". "`);
</script>
<script src="../../../resources/js-test-post.js"></script>
</html>