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

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

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


<!DOCTYPE html>
<title>
    CSS Gap Decorations: Multicolumn gap decorations painted with rule visibility: all.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="multicol-gap-decorations-032-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
    body {
        margin: 0px;
    }
    .container {
        width: 270px;
        height: 205px;
        column-count: 4;
        column-width: 60px;
        column-gap: 10px;
        column-rule: 5px solid blue;
        rule-visibility-items: all;
    }
    .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>

/css/css-gaps/multicol/multicol-gap-decorations-032-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: 270px;
      height: 205px;
      column-count: 4;
      column-width: 60px;
      column-gap: 10px;
    }

    .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: 420px;
      position: absolute;
      top: 0px;
      left: 62.5px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .col-rule {
      background: blue;
      height: 100px;
      width: 5px;
    }
</style>

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

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

<div class="col-rule-container" style="left: 202.5px;">
    <div class="col-rule"></div>
    <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>