third_party/WebKit/LayoutTests/fast/multicol/dynamic/insert-spanner-pseudo-before-after.html

   1 <!DOCTYPE html>
   2 <script>
   3     onload = function() {
   4         document.body.offsetTop; // trigger layout
   5         document.getElementById('elm').className = "x";
   6     }
   7 </script>
   8 <style>
   9     .x::before, .x::after { display:block; -webkit-column-span:all; background:yellow; content:".........."; }
  10 </style>
  11 <p>Test adding ::before and ::after pseudo elements that are spanners.</p>
  12 <p>There should be three rectangles with identical sizes below. The first and third one
  13     should be yellow with some dots inside. The second one should be blue with nothing
  14     inside.</p>
  15 <div style="-webkit-columns:4; columns:4; orphans:1; widows:1; line-height:100px; background:blue;">
  16     <span id="elm">&nbsp;</span>
  17 </div>