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

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

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

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

    .mc {
        position: absolute;
        top: 0px;
        width: 100px;
        height: 100px;
        columns: 2;
        column-fill: auto;
        column-gap: 10px;
        column-rule-color: gold;
        column-rule-width: 10px;
        column-rule-style: solid;
        column-rule-inset: 4px;
    }
</style>

<div class="mc">
    <div style="height: 400px; background: cyan;">
    </div>
</div>

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

<!DOCTYPE html>
<style>
     body {
        margin: 0px;
    }

    .mc {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100px;
        height: 100px;
        columns: 2;
        column-fill: auto;
        column-gap: 10px;
    }

    .fake-column-gaps {
        position: absolute;
        top: 4px;
        left: 45px;
        display: flex;
        height: 92px;
        column-gap: 45px;
    }

    .column-gap {
        width: 10px;
        background: gold;
    }
</style>

<div class="fake-column-gaps">
    <div class="column-gap"></div>
    <div class="column-gap"></div>
    <div class="column-gap"></div>
</div>
<div class="mc">
    <div style="height: 400px; background: cyan;">
    </div>
</div>