OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../resources/check-layout.js"></script> |
| 3 <style> |
| 4 #multicol { position:relative; overflow:auto; columns:2; column-gap:0; colum
n-fill:auto; width:200px; height:200px; } |
| 5 .outerChild { width:50px; padding:5px; background:hotpink; } |
| 6 .middleChild { border:5px solid black; } |
| 7 .innerChild { height:40px; } |
| 8 .breakAfter { break-after:column; column-break-after:always; } |
| 9 .breakBefore { break-before:column; column-break-before:always; } |
| 10 </style> |
| 11 <p>There's only one class A break point inside this multicol container, and it's
between the |
| 12 two hotpink boxes.</p> |
| 13 <p>Below there should be two filled hotpink squares beside each other. Each squa
re should contain a |
| 14 slightly smaller and perfectly center/middle aligned unfilled black square.
There should be no |
| 15 scrollbars.</p> |
| 16 <div id="multicol"> |
| 17 <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expec
ted-height="60" class="outerChild breakAfter"> |
| 18 <div class="middleChild breakAfter"> |
| 19 <div class="innerChild breakAfter"></div> |
| 20 </div> |
| 21 </div> |
| 22 <div data-offset-x="100" data-offset-y="0" data-expected-width="60" data-exp
ected-height="60" class="outerChild breakBefore"> |
| 23 <div class="middleChild breakBefore"> |
| 24 <div class="innerChild breakBefore"></div> |
| 25 </div> |
| 26 </div> |
| 27 </div> |
| 28 <script> |
| 29 checkLayout("#multicol"); |
| 30 </script> |
OLD | NEW |