collapsing-class-a-breakpoints.html

<!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>
chromium/third_party/blink/web_tests/fragmentation/collapsing-class-a-breakpoints.html
