| <!DOCTYPE html> |
| |
| <style> |
| .grid { |
| display: grid; |
| font: 50px/1 Ahem; |
| border: 5px dashed magenta; |
| width: 150px; |
| height: 150px; |
| } |
| .item { |
| border: 50px solid rgba(0, 255, 250, 0.5); |
| } |
| .gridFR { |
| grid: 1fr / 1fr; |
| } |
| .gridMaxContent { |
| grid: max-content / max-content; |
| } |
| .gridMinContent { |
| grid: min-content / min-content; |
| } |
| .gridAuto { |
| grid: auto / auto; |
| } |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| |
| <body onload="checkLayout('.grid')"> |
| |
| <div class="grid gridFR" data-expected-width="160" data-expected-height="160" data-expected-client-width="150" data-expected-client-height="150"> |
| <div class="item" data-expected-width="150" data-expected-height="150" data-expected-client-width="50" data-expected-client-height="50">X</div> |
| </div> |
| |
| <div class="grid gridMinContent" data-expected-width="160" data-expected-height="160" data-expected-client-width="150" data-expected-client-height="150"> |
| <div class="item" data-expected-width="150" data-expected-height="150" data-expected-client-width="50" data-expected-client-height="50">X</div> |
| </div> |
| |
| <div class="grid gridMaxContent" data-expected-width="160" data-expected-height="160" data-expected-client-width="150" data-expected-client-height="150"> |
| <div class="item" data-expected-width="150" data-expected-height="150" data-expected-client-width="50" data-expected-client-height="50">X</div> |
| </div> |
| |
| <div class="grid gridAuto" data-expected-width="160" data-expected-height="160" data-expected-client-width="150" data-expected-client-height="150"> |
| <div class="item" data-expected-width="150" data-expected-height="150" data-expected-client-width="50" data-expected-client-height="50">X</div> |
| </div> |
| |
| </body> |
