multicol-gap-decorations-020.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-gaps/multicol/multicol-gap-decorations-020.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>

    CSS Gap Decorations: Multicolumn gap decorations painted in container with two spanners and rule break none.

</title>

<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">

<link rel="match" href="multicol-gap-decorations-020-ref.html">

<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">

 <style>

  body {

    margin: 0px;

  #container {

    border: 2px solid rgb(96 139 168);

    width: 200px;

    height: 200px;

    column-gap: 10px;

    row-gap: 10px;

    column-rule-width: 10px;

    column-rule-style: solid;

    column-rule-color: blue;

    column-rule-break: none;

    column-rule-outset: 0;

    row-rule-width: 10px;

    row-rule-style: solid;

    row-rule-color: gold;

    column-width: 60px;

    column-count: 3;

    column-fill: auto;

p {

    background: rgb(96 139 168 / 0.2);

    height: 50px;

    margin: 0px;

  h2 {

    column-span: all;

    background-color: #4d4e53;

    color: #fff;

    margin: 0px;

    opacity: 0.5;

</style>

<body>

  <div id="container">

    <p>One</p>

    <p>Two</p>

    <h2>Spanner</h2>

    <p>Three</p>

    <p>Four</p>

    <p>Five</p>

    <h2>Spanner</h2>

    <p>Six</p>

    <p>Seven</p>

    <p>Eight</p>

  </div>

</body>