third_party/WebKit/LayoutTests/fast/css-generated-content/block-after.html

   1 <html>
   2 <head>
   3     <style>
   4     div {
   5         margin: 0px;
   6         padding: 0px;
   7         border: none;
   8     }
   9     div.a:after {
  10         content: 'This sentence should be after "First." and "Second."';
  11         color: red;
  12     }
  13     </style>
  14     <script>
  15     if (window.testRunner)
  16         testRunner.dumpAsText();
  17
  18     function test(){
  19         var first = document.getElementById("first");
  20         var second = document.getElementById("second");
  21
  22         //Test whether the first and second lines are laid out sequentially.
  23         //If there is something between them then it must be the css generated
  24         //content which means this bug is not fixed.
  25         if(second.offsetTop != first.offsetTop + first.offsetHeight)
  26             document.getElementById("result").innerHTML = "FAIL";
  27         else
  28             document.getElementById("result").innerHTML = "PASS";
  29     }
  30     </script>
  31 </head>
  32 <body onload="test()">
  33     <p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=32288">32288</a> - :after selector displays in wrong place with nested div</p>
  34     <div class="a" id="container">
  35         <div id="first">First.</div>
  36         <div id="second">Second.</div>
  37     </div>
  38     <p id="result"></div>
  39 </body>
  40 </html>