OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <p>We have a multicol with an absolutely positioned multicol child. That child h
as a spanner inside. The absolutely positioned multicol child isn't part of its
parent multicol, since it's out of flow. The absolutely positioned multicol also
has column-span:all, but it doesn't apply, since it's out of flow. Now make it
statically positioned. That will turn it into a spanner in the parent multicol.
At the same time, change it from multicol to regular block. It will still be a s
panner, but since it's no longer multicol, its child spanner can no longer be on
e, since you cannot nest spanners in the same multicol context. So you end up wi
th a multicol with a spanner with a regular (invalid spanner) block.</p> |
| 3 <p>Below there should be four squares stacked vertically, in the following order
: hotpink, yellow, papayawhip, olive.</p> |
| 4 <div style="-webkit-column-count:3; -webkit-column-gap:0; width:50px; background
:olive;"> |
| 5 <div style="height:150px; background:hotpink;"></div> |
| 6 <div id="elm" style="position:absolute; -webkit-column-count:3; -webkit-colu
mn-span:all; padding-top:50px; background:yellow;"> |
| 7 <div style="-webkit-column-span:all; height:50px; background:papayawhip;
"></div> |
| 8 </div> |
| 9 <div style="height:150px;"></div> |
| 10 </div> |
| 11 <script> |
| 12 document.documentElement.offsetTop; |
| 13 var elm = document.getElementById("elm"); |
| 14 elm.style.position = "static"; |
| 15 elm.style.webkitColumnCount = "auto"; |
| 16 </script> |
OLD | NEW |