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

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

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

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

    .container {
        width: 200px;
        height: 310px;
        column-count: 3;
        column-width: 60px;
        column-gap: 10px;
        column-rule: 5px solid blue;
        rule-visibility-items: around;
        rule-break: none;
    }

    .items {
        background: rgb(96 139 168 / 0.2);
        height: 100px;
        width: 60px;
        margin: 0px;
        writing-mode: vertical-rl;
    }

    .spanner {
      height: 5px;
      background: cyan;
      column-span: all;
      opacity: 0.5;
    }
</style>

<div class="container">
    <div class="items"></div>
    <div class="spanner"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="spanner"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
</div>

/css/css-gaps/multicol/multicol-gap-decorations-029-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;
    }

    .container {
        width: 200px;
        height: 310px;
        column-count: 3;
        column-width: 60px;
        column-gap: 10px;
        rule-break: none;
    }

    .items {
        background: rgb(96 139 168 / 0.2);
        height: 100px;
        width: 60px;
        margin: 0px;
        writing-mode: vertical-rl;
    }

    .spanner {
      height: 5px;
      background: cyan;
      column-span: all;
      opacity: 0.5;
    }

    .col-rule-container {
      width: 5px;
      height: 310px;
      position: absolute;
      top: 0px;
      left: 62.5px;
      display: flex;
      flex-direction: column;
    }

    .col-rule {
      background: blue;
      height: 100px;
      width: 5px;
      height: 310px
    }


</style>

<div class="col-rule-container">
    <div class="col-rule"></div>
</div>


<div class="col-rule-container" style="left: 132.5px; height: 210px; top: 100px;">
    <div class="col-rule"></div>
</div>

<div class="container">
    <div class="items"></div>
    <div class="spanner"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="spanner"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
</div>