80 lines
2.3 KiB
HTML
80 lines
2.3 KiB
HTML
<!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>
|