Blitz - WPT: multicol-gap-decorations-007.html

wpt / css / css-gaps / multicol / multicol-gap-decorations-007.html

/css/css-gaps/multicol/multicol-gap-decorations-007.html

<!DOCTYPE html>
<title>
    CSS Gap Decorations: Multicolumn gap decorations painted with nested fragmented multicol.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="multicol-gap-decorations-007-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
    body {
        margin: 0px;
    }

    #outer {
        width: 620px;
        columns: 2;
        column-fill: auto;
        gap: 20px;
        height: 200px;
        background: yellow;
    }

    #inner {
        columns: 3;
        border: 2px solid;
        gap: 20px;
        column-height: 100px;
        column-rule-style: solid;
        column-rule-color: blue;
        column-rule-width: 10px;
        row-rule-style: solid;
        row-rule-color: green;
        row-rule-width: 10px;
        column-wrap: wrap;
        background: cyan;
    }
</style>

<div id="outer">
    <div id="inner">
        <div style="height:60px; background:hotpink;"></div>
        <div style="column-span:all; background: grey; opacity: 0.5; height:18px"></div>
        <div style="height:750px; background:hotpink;"></div>
    </div>
</div>

/css/css-gaps/multicol/multicol-gap-decorations-007-ref.html

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

    #outer {
        width: 620px;
        height: 200px;
        background: yellow;
    }

    .inner1 {
        border-top: 2px solid;
        border-left: 2px solid;
        border-right: 2px solid;
        background: cyan;
        height: 198px;
        width: 296px;
    }

    .inner2 {
        border-bottom: 2px solid;
        border-left: 2px solid;
        border-right: 2px solid;
        position: absolute;
        left: 320px;
        top: 0px;
        height: 130px;
        width: 296px;
        background: cyan
    }

    .inner-flex {
        display: flex;
        column-gap: 20px;
    }

    .inner-items {
        background: hotpink;
        width: 85.333px;
    }

    .column-gap1 {
        width: 10px;
        background: blue;
        position: absolute;
        top: 2px;
    }

    .column-gap2 {
        width: 10px;
        background: blue;
        position: absolute;
        top: 40px;
    }

    .spanner {
        background: grey;
        opacity: 0.5;
        height: 18px;
        width: 296px;
    }

    .row-gap1 {
        height: 10px;
        background: green;
        position: relative;
        width: 296px;
        top: 105px;
    }

    .row-gap2 {
        height: 10px;
        background: green;
        position: absolute;
        width: 296px;
        top: 105px;
    }

    .column-gap3 {
        background: blue;
        height: 100px;
        position: absolute;
        width: 10px;
        top: 0px;
    }
</style>

<div id="outer">
    <div class="inner1">
        <div class="inner-flex">
            <div class="inner-items" style="height:20px;"></div>
            <div class="inner-items" style="height:20px" ;></div>
            <div class="inner-items" style="height:20px;"></div>
        </div>
        <div class="inner-flex" style="position: absolute; left:2px; top:40px">
            <div class="inner-items" style="height:100px;"></div>
            <div class="inner-items" style="height:100px" ;></div>
            <div class="inner-items" style="height:100px;"></div>
        </div>
        <div class="inner-flex" style="position: absolute; left:2px; top:160px">
            <div class="inner-items" style="height:40px;"></div>
            <div class="inner-items" style="height:40px" ;></div>
            <div class="inner-items" style="height:40px;"></div>
        </div>
        <div class="spanner"></div>
        <div class="column-gap1" style="height: 20px; left:calc(2px + 85.333px + 5px)"></div>
        <div class="column-gap1" style="height: 20px; left:calc(2px + 85.333px + 5px + 10px + 5px + 85.333px + 5px)">
        </div>
        <div class="column-gap2" style="height: 100px; left:calc(2px + 85.333px + 5px)"></div>
        <div class="column-gap2" style="height: 100px; left:calc(2px + 85.333px + 5px + 10px + 5px + 85.333px + 5px)"></div>
        <div class="column-gap2" style="top: 160px; height: 40px; left:calc(2px + 85.333px + 5px)"></div>
        <div class="column-gap2" style="top: 160px; height: 40px; left:calc(2px + 85.333px + 5px + 10px + 5px + 85.333px + 5px)"></div>
        <div class="row-gap1"></div>
    </div>
    <div class="inner2">
        <div class="inner-flex">
            <div class="inner-items" style="height:100px"></div>
            <div class="inner-items" style="height:100px"></div>
            <div class="inner-items" style="height:100px"></div>
        </div>
        <div class="inner-flex" style="position: absolute; top:120px;">
            <div class="inner-items" style="height:10px"></div>
            <div class="inner-items" style="height:10px"></div>
            <div class="inner-items" style="height:10px"></div>
        </div>
        <div class="column-gap3" style="left:calc(85.333px + 5px);"></div>
        <div class="column-gap3" style="left:calc(85.333px + 5px + 10px + 5px + 85.333px + 5px);"></div>
        <div class="column-gap3" style="top: 120px; height: 10px;left:calc(85.333px + 5px);"></div>
        <div class="column-gap3" style="top: 120px; height: 10px;left:calc(85.333px + 5px + 10px + 5px + 85.333px + 5px);"></div>
        <div class="row-gap2"></div>
    </div>