Blitz - WPT: column-auto-placed-subgrid-nested-subgrid-inherited-tracks-002.html

wpt / css / css-grid / grid-lanes / subgrid / grid-subgridded-to-grid-lanes / track-sizing / column-auto-placed-subgrid-nested-subgrid-inherited-tracks-002.html

/css/css-grid/grid-lanes/subgrid/grid-subgridded-to-grid-lanes/track-sizing/column-auto-placed-subgrid-nested-subgrid-inherited-tracks-002.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Lanes Test: Nested subgrid inside auto-placed subgrid inherits resolved auto column track</title>
<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids">
<link rel="match" href="column-auto-placed-subgrid-inherited-tracks-002-ref.html">
<style>
.wrapper {
  width: 150px;
  height: 100px;
  background: red;
  position: relative;
}
.lanes {
  display: grid-lanes;
  grid-template-columns: 50px auto;
  flow-tolerance: 0;
  position: absolute;
  width: 150px;
  top: 0;
  left: 0;
}
.child {
  grid-column: 1;
  width: 50px;
  height: 100px;
  background: green;
}
.subgrid {
  display: grid;
  writing-mode: vertical-rl;
  grid: subgrid / auto;
  grid-column: auto / span 1;
  overflow: hidden;
}
.nested-subgrid {
  display: grid;
  grid: subgrid / auto;
  grid-row: 1 / -1;
}
.nested-child {
  aspect-ratio: 1;
  height: 100%;
  background: green;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
<div class="wrapper">
  <div class="lanes">
    <div class="child"></div>
    <div class="subgrid">
      <div class="nested-subgrid">
        <div class="nested-child"></div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

/css/css-grid/grid-lanes/subgrid/grid-subgridded-to-grid-lanes/track-sizing/column-auto-placed-subgrid-inherited-tracks-002-ref.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.ref {
  width: 150px;
  height: 100px;
  background: green;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
<div class="ref"></div>
</body>
</html>