<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
<link rel="match" href="ref-filled-green-100px-square-image.html">
<meta name="flags" content="image">
<meta name="assert" content="Checks that minimum size for grid items is the specified size for width (regardless the content size) and the transferred size of the image for height (even when content size is smaller).">
<style>
  #reference-overlapped-red {
    position: absolute;
    background-color: red;
    width: 100px;
    height: 100px;
    z-index: -1;
  }

  #constrained-grid {
    display: grid;
    grid-template-columns: auto auto;
    width: 10px;
    height: 10px;
  }

  .test-grid-item-overlapping-green {
    width: 50px;
    justify-self: stretch;
    align-self: stretch;
  }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
  <img class="test-grid-item-overlapping-green" src="support/25x50-green.png" alt="Image download support must be enabled" />
  <img class="test-grid-item-overlapping-green" src="support/25x50-green.png" alt="Image download support must be enabled" />
</div>