third_party/WebKit/LayoutTests/fast/multicol/dynamic/insert-spanner-pseudo-before-after-in-content.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. The DOM element contains
  12     something, and is also preceded and followed by content, which means that what used to be one column
  13     row needs to be split into three.</p>
  14 <p>There should be five rectangles with identical sizes below. The first, third and fifth
  15     one should be blue with nothing inside. The second and fourth one should be yellow with some
  16     dots inside.</p>
  17 <div style="-webkit-columns:4; line-height:50px; background:blue;">
  18     &nbsp;
  19     <span id="elm">&nbsp;</span>
  20     &nbsp;
  21 </div>