| <!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> |
