| <!DOCTYPE html> |
| <script src="../resources/check-layout.js"></script> |
| <style> |
| #multicol { position:relative; overflow:auto; columns:2; column-gap:0; column-fill:auto; width:200px; height:200px; } |
| .outerChild { width:50px; padding:5px; background:hotpink; } |
| .middleChild { border:5px solid black; } |
| .innerChild { height:40px; } |
| .breakAfter { break-after:column; column-break-after:always; } |
| .breakBefore { break-before:column; column-break-before:always; } |
| </style> |
| <p>There's only one class A break point inside this multicol container, and it's between the |
| two hotpink boxes.</p> |
| <p>Below there should be two filled hotpink squares beside each other. Each square should contain a |
| slightly smaller and perfectly center/middle aligned unfilled black square. There should be no |
| scrollbars.</p> |
| <div id="multicol"> |
| <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="60" class="outerChild breakAfter"> |
| <div class="middleChild breakAfter"> |
| <div class="innerChild breakAfter"></div> |
| </div> |
| </div> |
| <div data-offset-x="100" data-offset-y="0" data-expected-width="60" data-expected-height="60" class="outerChild breakBefore"> |
| <div class="middleChild breakBefore"> |
| <div class="innerChild breakBefore"></div> |
| </div> |
| </div> |
| </div> |
| <script> |
| checkLayout("#multicol"); |
| </script> |
