third_party/WebKit/LayoutTests/fast/css/getComputedStyle/computed-style-properties.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <style>
   6 #test {
   7   width: 400px;
   8   margin: 10px;
   9 }
  10 #test > div {
  11   margin: 1ex;
  12 }
  13 #outline {
  14     outline: 2px solid red;
  15     outline-offset: 5px;
  16 }
  17 #content:before {
  18     content: 'text';
  19 }
  20 #content:after {
  21   content: 'test ' url(data:image/gif;base64,R0lGODlhAQABAJAAAP8AAAAAACwAAAAAAQABAAACAgQBADs=);
  22 }
  23 #counter {
  24     counter-reset: section;
  25 }
  26 #counter > div {
  27     counter-reset: subsection 0 anothercounter 5;
  28 }
  29 #counter > h1:before {
  30     counter-increment: section;
  31     content: counter(section) '. ';
  32 }
  33 #counter > div > h2:before {
  34     counter-increment: subsection;
  35     content: counter(section) '.' counter(subsection) '. ';
  36 }
  37 </style>
  38 </head>
  39 <body>
  40 <div id="test">
  41     <div id="outline">outline</div>
  42     <div id="content">content</div>
  43     <div id="counter">
  44         counter
  45         <h1 id="counter1">Heading A</h1>
  46         <div id="subcounter">
  47             <h2 id="subcounter1">Subheading A</h2>
  48             <h2 id="subcounter2">Subheading B</h2>
  49         </div>
  50         <h1>Heading B</h1>
  51         </div>
  52     </div>
  53     <div id="console"></div>
  54 </body>
  55 <script>
  56
  57 function computedStyleFor(id, pseudo, property)
  58 {
  59     var element = document.getElementById(id);
  60     var style = window.getComputedStyle(element, pseudo);
  61     if (!style)
  62         return null;
  63     return style.getPropertyValue(property);
  64 }
  65
  66 shouldBe("computedStyleFor('outline', null, 'outline-offset')", "'5px'");
  67
  68 shouldBeEqualToString("computedStyleFor('content', 'before', 'content')", "\"text\"");
  69 shouldBeEqualToString("computedStyleFor('content', 'after', 'content')", "\"test \" url(data:image/gif;base64,R0lGODlhAQABAJAAAP8AAAAAACwAAAAAAQABAAACAgQBADs=)");
  70 shouldBe("computedStyleFor('counter', null, 'counter-reset')", "'section 0'");
  71 var str = computedStyleFor('subcounter', null, 'counter-reset');
  72 shouldBe("str.indexOf('subsection 0') != -1", "true");
  73 shouldBe("str.indexOf('anothercounter 5') != -1", "true");
  74 shouldBe("computedStyleFor('counter1', 'before', 'counter-increment')", "'section 1'");
  75 shouldBe("computedStyleFor('subcounter2', 'before', 'counter-increment')", "'subsection 1'");
  76 shouldBeEqualToString("computedStyleFor('subcounter2', 'before', 'content')", 'counter(section) "." counter(subsection) ". "');
  77 </script>
  78 </html>