Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-gaps/grid-lanes/row-subgrid-parent-rule-break-none.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Gap Decorations: continuous parent row rules paint behind an opposite-direction subgrid</title>
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<link rel="match" href="row-subgrid-parent-rule-break-none-ref.html">
<style>
body {
margin: 0;
}
.scene {
height: 380px;
position: relative;
width: 180px;
}
.lanes {
background: lightgray;
column-gap: 20px;
column-rule-style: none;
direction: rtl;
display: grid-lanes;
grid-template-rows: 40px 60px 80px 50px 70px;
height: 380px;
row-gap: 20px;
row-rule-style: solid;
row-rule-width: 8px;
rule-break: none;
rule-color: blue, gold;
width: 180px;
}
.outer,
.parent-item {
background: purple;
}
.outer {
width: 180px;
}
.parent-item {
width: 30px;
}
.track-one {
grid-row: 1;
}
.track-two {
grid-row: 2;
}
.track-three {
grid-row: 3;
}
.track-four {
grid-row: 4;
}
.track-five {
grid-row: 5;
}
.subgrid {
background: transparent;
column-gap: 20px;
column-rule-style: none;
direction: ltr;
display: grid;
grid-row: 2 / span 3;
grid-template-columns: repeat(2, 30px);
grid-template-rows: subgrid;
row-rule-style: solid;
row-rule-width: 4px;
rule-color: green, red;
}
.cell {
background: teal;
}
</style>
<div class="scene">
<div class="lanes">
<div class="outer track-one"></div>
<div class="parent-item track-two"></div>
<div class="parent-item track-three"></div>
<div class="parent-item track-four"></div>
<div class="outer track-five"></div>
<div class="subgrid">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="parent-item track-two"></div>
<div class="parent-item track-three"></div>
<div class="parent-item track-four"></div>
</div>
</div>