flex-and-intrinsic-sizes.html | Explore in Territory

<!DOCTYPE html>
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
<link href="resources/grid.css" rel="stylesheet">

<style>
.container {
    width: 100px;
    height: 100px;
}

.grid {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

div { font: 10px/1 Ahem; }
</style>

<script src="../../resources/check-layout.js"></script>

<body onload="checkLayout('.grid')">

<p>This test checks that fr tracks are properly sized when the grid container is under a fill-available constraint.</p>

<div class="container">
  <div class="grid fill-available" data-expected-width="100" data-expected-height="100">
    <div>XXX XXX</div>
  </div>
</div>

</body>

chromium/third_party/blink/web_tests/fast/css-grid-layout/flex-and-intrinsic-sizes.html