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

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

/css/css-grid/grid-lanes/subgrid/grid-subgridded-to-grid-lanes/track-sizing/column-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 column grid-lanes container's intrinsic block 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="column-auto-placed-subgrid-inherited-tracks-003-ref.html">
<style>
.wrapper {
  width: 150px;
  height: 100px;
  background: yellow;
  position: relative;
}
.lanes {
  display: grid-lanes;
  grid-template-columns: 50px 100px;
  flow-tolerance: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.child {
  grid-column: 1;
  width: 50px;
  height: 20px;
  background: green;
}
.subgrid {
  display: grid;
  writing-mode: vertical-rl;
  grid: subgrid / auto;
  grid-column: auto / span 1;
  overflow: hidden;
}
.subgrid-child {
  aspect-ratio: 1;
  height: 100%;
  background: green;
}
</style>
</head>
<body>
<p>Test passes if the top-left 50x20 area is green, the bottom-left 50x80 area is yellow, and the right 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/column-auto-placed-subgrid-inherited-tracks-003-ref.html

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