| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Grid Layout Test: Grid Track Sizing Algorithm Flexible Tracks and Gutters</title> |
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> |
| <link rel="help" href="https://drafts.csswg.org/css-grid/#gutters"> |
| <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-find-fr-size"> |
| <meta name="assert" content="This test checks that the size of flexible tracks is properly computed when the grid container is content based and you have items spanning flexbile tracks that are smaller than the gutter sizes."> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| <style> |
| .grid { |
| position: relative; |
| display: inline-grid; |
| grid-gap: 50px 100px; |
| font: 10px/1 Ahem; |
| margin: 50px; |
| } |
| |
| .grid div:nth-child(1) { background: magenta; } |
| </style> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/check-layout-th.js"></script> |
| <body onload="checkLayout('.grid')"> |
| |
| <div id="log"></div> |
| |
| <div class="grid" style="grid: 50px 1fr / 100px 1fr;"> |
| <div style="grid-column: span 2;" |
| data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50">X</div> |
| </div> |
| |
| <div class="grid" style="grid: 50px 1fr / 100px 1fr;"> |
| <div style="grid-row: span 2;" |
| data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100">X</div> |
| </div> |
| |
| <div class="grid" style="grid: 50px 1fr / 100px 1fr;"> |
| <div style="grid-column: span 2; grid-row: span 2;" |
| data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">X</div> |
| </div> |
| |
| <div class="grid" style="grid: 0px 1fr / 0px 1fr;"> |
| <div style="grid-column: span 2;" |
| data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0">X</div> |
| </div> |
| |
| <div class="grid" style="grid: 0px 1fr / 0px 1fr;"> |
| <div style="grid-row: span 2;" |
| data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="50">X</div> |
| </div> |
| |
| <div class="grid" style="grid: 0px 1fr / 0px 1fr;"> |
| <div style="grid-column: span 2; grid-row: span 2;" |
| data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">X</div> |
| </div> |
