Blitz - WPT: flex-gap-decorations-064.html

wpt / css / css-gaps / flex / flex-gap-decorations-064.html

/css/css-gaps/flex/flex-gap-decorations-064.html

<!DOCTYPE html>
<title>
    CSS Gap Decorations: flex gap decorations extend to meet cross-direction
    decoration widths at far edge with rule-inset: overlap-join.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="flex-gap-decorations-064-ref.html">
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
<style>
    body {
        margin: 0px;
    }
    .flex {
        display: flex;
        flex-wrap: wrap;
        width: 600px;
        gap: 90px;
        column-rule: 5px solid rgba(0, 0, 255, 0.5);
        row-rule: 5px solid rgba(255, 0, 0, 0.5);
        column-rule-break: intersection;
        column-rule-inset: overlap-join;
        row-rule-break: intersection;
        row-rule-inset: overlap-join;
    }
    .item {
        height: 100px;
        background: lightgray;
    }
    .a { width: 100px; }
    .b { width: 200px; }
    .c { width: 90px; }
    .d { width: 160px; }
    .e { width: 110px; }
    .f { width: 120px; }
</style>
<div class="flex">
    <div class="item a"></div>
    <div class="item b"></div>
    <div class="item c"></div>
    <div class="item d"></div>
    <div class="item e"></div>
    <div class="item f"></div>
</div>

/css/css-gaps/flex/flex-gap-decorations-064-ref.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
<style>
    body {
        margin: 0px;
    }

    .flex {
        display: flex;
        flex-wrap: wrap;
        width: 600px;
        gap: 90px;
    }

    .item {
        height: 100px;
        background: lightgray;
    }

    .a { width: 100px; }
    .b { width: 200px; }
    .c { width: 90px; }
    .d { width: 160px; }
    .e { width: 110px; }
    .f { width: 120px; }

    .col-rule {
        position: absolute;
        width: 5px;
        background: rgba(0, 0, 255, 0.5);
        z-index: -1;
    }

    .row-rule {
        position: absolute;
        height: 5px;
        background: rgba(255, 0, 0, 0.5);
        z-index: -1;
    }
</style>

<!-- Column rules -->
<div class="col-rule" style="left: 142.5px; top: 0px; height: 147.5px;"></div>
<div class="col-rule" style="left: 432.5px; top: 0px; height: 147.5px;"></div>
<div class="col-rule" style="left: 202.5px; top: 142.5px; height: 147.5px;"></div>
<div class="col-rule" style="left: 402.5px; top: 142.5px; height: 147.5px;"></div>

<!-- Row rule segments -->
<div class="row-rule" style="left: 0px; top: 142.5px; width: 600px;"></div>

<div class="flex">
    <div class="item a"></div>
    <div class="item b"></div>
    <div class="item c"></div>
    <div class="item d"></div>
    <div class="item e"></div>
    <div class="item f"></div>
</div>