<!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 height (regardless the content size) and the transferred size for width of the image (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;
    width: 10px;
    height: 10px;
  }

  .test-grid-item-overlapping-green {
    height: 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/50x25-green.png" alt="Image download support must be enabled" />
  <img class="test-grid-item-overlapping-green" src="support/50x25-green.png" alt="Image download support must be enabled" />
</div>