OLD | NEW |
(Empty) | |
| 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:y
ellow; content:".........."; } |
| 10 </style> |
| 11 <p>Test adding ::before and ::after pseudo elements that are spanners. The DOM e
lement contains |
| 12 something, and is also preceded and followed by content, which means that wh
at 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 |
| 19 <span id="elm"> </span> |
| 20 |
| 21 </div> |
OLD | NEW |