Blitz - WPT: row-auto-placed-subgrid-inherited-tracks-003.html

wpt / css / css-grid / grid-lanes / subgrid / grid-subgridded-to-grid-lanes / track-sizing / row-auto-placed-subgrid-inherited-tracks-003.html

/css/css-grid/grid-lanes/subgrid/grid-subgridded-to-grid-lanes/track-sizing/row-auto-placed-subgrid-inherited-tracks-003.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Lanes Test: Auto-placed subgrid contributes correct max-content to row grid-lanes container's intrinsic inline size</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="row-auto-placed-subgrid-inherited-tracks-003-ref.html">
<style>
.wrapper {
  width: 100px;
  height: 150px;
  background: yellow;
  position: relative;
}
.lanes {
  display: grid-lanes;
  grid-template-rows: 50px 100px;
  flow-tolerance: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.child {
  grid-row: 1;
  width: 20px;
  height: 50px;
  background: green;
}
.subgrid {
  display: grid;
  grid: subgrid / auto;
  grid-row: auto / span 1;
  overflow: hidden;
}
.subgrid-child {
  aspect-ratio: 1;
  height: 100%;
  background: green;
}
</style>
</head>
<body>
<p>Test passes if the top-left 20x50 area is green, the top-right 80x50 area is yellow, and the bottom 100x100 area is green.</p>
<div class="wrapper">
  <div class="lanes">
    <div class="child"></div>
    <div class="subgrid"><div class="subgrid-child"></div></div>
  </div>
</div>
</body>
</html>

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.wrapper {
  width: 100px;
  height: 150px;
  background: yellow;
  position: relative;
}
.top-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 50px;
  background: green;
}
.bottom {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100px;
  height: 100px;
  background: green;
}
</style>
</head>
<body>
<p>Test passes if the top-left 20x50 area is green, the top-right 80x50 area is yellow, and the bottom 100x100 area is green.</p>
<div class="wrapper">
  <div class="top-left"></div>
  <div class="bottom"></div>
</div>
</body>
</html>