grid-min-max-height-001.html (2426B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Grid: min-height and max-height</title> 4 <link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid/#intrinsic-sizes"> 6 <link rel="stylesheet" href="/css/support/grid.css"> 7 <meta name="assert" content="This test checks that min-height and max-height are accounted for when computing the grid container's height."> 8 <style> 9 .minHeightGrid { 10 min-height: 100px; 11 grid-template-columns: 40px; 12 grid-template-rows: 50px; 13 } 14 .maxHeightGrid { 15 max-height: 100px; 16 grid-template-columns: 40px; 17 grid-template-rows: 150px 50px; 18 } 19 20 .minHeightAutoGrid { 21 min-height: 100px; 22 } 23 24 .maxHeightAutoGrid { 25 max-height: 100px; 26 } 27 </style> 28 <script src="/resources/testharness.js"></script> 29 <script src="/resources/testharnessreport.js"></script> 30 <script src="/resources/check-layout-th.js"></script> 31 <body onload="checkLayout('.grid')"> 32 33 <div class="constrainedContainer"> 34 <div class="grid minHeightGrid" data-expected-height="100" data-expected-width="10"></div> 35 <div class="grid maxHeightGrid" data-expected-height="100" data-expected-width="10"></div> 36 <div class="grid minHeightAutoGrid" data-expected-height="100" data-expected-width="10"></div> 37 <div class="grid maxHeightAutoGrid" data-expected-height="0" data-expected-width="10"></div> 38 39 <div class="grid minHeightAutoGrid" data-expected-height="150" data-expected-width="10"> 40 <div style="height: 150px"></div> 41 </div> 42 <div class="grid maxHeightAutoGrid" data-expected-height="100" data-expected-width="10"> 43 <div style="height: 300px"></div> 44 </div> 45 </div> 46 47 <div class="unconstrainedContainer"> 48 <div class="grid minHeightGrid" data-expected-height="100" data-expected-width="1000"></div> 49 <div class="grid maxHeightGrid" data-expected-height="100" data-expected-width="1000"></div> 50 <div class="grid minHeightAutoGrid" data-expected-height="100" data-expected-width="1000"></div> 51 <div class="grid maxHeightAutoGrid" data-expected-height="0" data-expected-width="1000"></div> 52 53 <div class="grid minHeightAutoGrid" data-expected-height="150" data-expected-width="1000"> 54 <div style="height: 150px"></div> 55 </div> 56 <div class="grid maxHeightAutoGrid" data-expected-height="100" data-expected-width="1000"> 57 <div style="height: 300px"></div> 58 </div> 59 </div> 60 61 </body> 62 </html>