Blitz - WPT: grid-gap-decorations-078.html

wpt / css / css-gaps / grid / grid-gap-decorations-078.html

/css/css-gaps/grid/grid-gap-decorations-078.html

<!DOCTYPE html>
<title>
  CSS Gap Decorations: grid gap decorations extend to meet cross-direction
  decoration width at far edge with rule-inset: overlap-join. Tests scenario
  for so called "donut" case, plus the dangling endpoints with -5px cap inset.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="grid-gap-decorations-078-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>

body  {
  margin: 0;
}

.container {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  rule: 6px solid;
  column-rule-color: rgba(128 0 0 / 0.5);
  row-rule-color: rgba(0 0 128 / 0.5);
  padding: 10px;
}

.between {
  rule-visibility-items: between;
}
.overlapjoin {
  rule-inset-junction: overlap-join;
  rule-inset-cap: -5px;
}

.item {
  background: rgba(192 192 192 / 0.75);
}

body {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 20px;
}

.row {
  padding-top: 30px;
}

</style>
<div class="container between overlapjoin">
  <div class="item" style="grid-area: 1/1/4/2">L</div>
  <div class="item" style="grid-area: 1/4/4/5">R</div>
  <div class="item" style="grid-area: 1/2/2/3">A</div>
  <div class="item" style="grid-area: 1/3/2/4">B</div>
  <div class="item" style="grid-area: 3/2/4/3">C</div>
  <div class="item" style="grid-area: 3/3/4/4">D</div>
  <div class="item" style="grid-area: 4/2/5/3">E</div>
</div>

/css/css-gaps/grid/grid-gap-decorations-078-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 {
    display: grid;
    grid-template: repeat(4, 100px) / repeat(4, 100px);
    gap: 20px;
    padding: 10px;
    position: relative;
  }
  .item {
    background: rgba(192 192 192 / 0.75);
  }
  .col-rule {
    position: absolute;
    width: 0px;
    border-left: 6px solid rgba(128 0 0 / 0.5);
  }
  .row-rule {
    position: absolute;
    height: 0px;
    border-top: 6px solid rgba(0 0 128 / 0.5);
  }
</style>
<div class="container">
  <div class="item" style="grid-area: 1/1/4/2">L</div>
  <div class="item" style="grid-area: 1/4/4/5">R</div>
  <div class="item" style="grid-area: 1/2/2/3">A</div>
  <div class="item" style="grid-area: 1/3/2/4">B</div>
  <div class="item" style="grid-area: 3/2/4/3">C</div>
  <div class="item" style="grid-area: 3/3/4/4">D</div>
  <div class="item" style="grid-area: 4/2/5/3">E</div>
  <div class="col-rule" style="left: 117px; top: 5px; height: 110px;"></div>
  <div class="col-rule" style="left: 117px; top: 245px; height: 118px;"></div>
  <div class="col-rule" style="left: 237px; top: 5px; height: 110px;"></div>
  <div class="col-rule" style="left: 237px; top: 245px; height: 118px;"></div>
  <div class="col-rule" style="left: 357px; top: 5px; height: 110px;"></div>
  <div class="col-rule" style="left: 357px; top: 245px; height: 110px;"></div>
  <div class="row-rule" style="left: 117px; top: 357px; width: 126px;"></div>
</div>