border-spacing-break-before-unbreakable-row.html

<!DOCTYPE html>
<style>
    #multicol { position:relative; columns:4; column-gap:0; column-fill:auto; width:20px; height:50px; line-height:20px; }
    table { width:100%; border-spacing:0 20px; }
    tr { break-inside:avoid; }
    td { padding:0; }
    td > div { height:20px; box-sizing:border-box; }
    .squarepart { position:relative; background:blue; }
</style>
<p>There should be a blue square below.</p>
<div id="multicol">
    <!-- All table rows are 20px tall, potentially with some overflow past the
         bottom (which isn't enough to affect fragmentation). -->
    <table>
        <tr>
            <td>
                <div>
                    <div class="squarepart"><br></div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div style="padding-top:10px;">
                    <div class="squarepart"><br></div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div style="padding-top:20px;">
                    <div class="squarepart"><br></div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div style="padding-top:20px;">
                    <div class="squarepart"><br></div>
                </div>
            </td>
        </tr>
    </table>
</div>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script>
test(() => {
    var squareparts = document.getElementsByClassName("squarepart");
    assert_equals(squareparts.length, 4);
    assert_equals(squareparts[0].offsetTop, 20);
    assert_equals(squareparts[1].offsetTop, 20);
    assert_equals(squareparts[2].offsetTop, 20);
    assert_equals(squareparts[3].offsetTop, 20);
}, "It's okay to break inside border spacing");
</script>
chromium/third_party/blink/web_tests/fragmentation/border-spacing-break-before-unbreakable-row.html
