grid-container-sizing-constraints-001.html (3821B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: min|max-content sizing constraints on grid containers</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://www.w3.org/TR/css-grid-1/#intrinsic-sizes"> 6 <link rel="help" href="https://www.w3.org/TR/css-sizing-3/#sizing-values"> 7 <meta name="assert" content="The test checks the intrinsic size of a grid container when sized under different constraints. In inline axis min|max-content have some effect, however in block axis they behave as auto."> 8 <style> 9 .grid { 10 display: grid; 11 float: left; 12 background: lime; 13 } 14 15 .grid-columns-minmax-50-100 { 16 grid-template-columns: minmax(50px, 100px); 17 } 18 19 .grid-columns-minmax-100-200 { 20 grid-template-columns: minmax(100px, 200px); 21 } 22 23 .grid-rows-minmax-50-100 { 24 grid-template-rows: minmax(50px, 100px); 25 } 26 27 .min-content { 28 width: min-content; 29 height: min-content; 30 } 31 32 .max-content { 33 width: max-content; 34 height: max-content; 35 } 36 </style> 37 <script src="/resources/testharness.js"></script> 38 <script src="/resources/testharnessreport.js"></script> 39 <script src="/resources/check-layout-th.js"></script> 40 41 <body onload="checkLayout('.grid');"> 42 43 <div id="log"></div> 44 45 <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100" 46 data-expected-width="100" data-expected-height="100"></div> 47 48 <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100" 49 data-expected-width="100" data-expected-height="100"></div> 50 51 <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100" 52 data-expected-width="100" data-expected-height="100"></div> 53 54 <div class="min-content"> 55 <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100" 56 data-expected-width="100" data-expected-height="100"></div> 57 </div> 58 59 <div class="max-content"> 60 <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100" 61 data-expected-width="100" data-expected-height="100"></div> 62 </div> 63 64 <div style="writing-mode: vertical-lr;"> 65 66 <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100" 67 data-expected-width="100" data-expected-height="100"></div> 68 69 <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100" 70 data-expected-width="100" data-expected-height="100"></div> 71 72 <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100" 73 data-expected-width="100" data-expected-height="100"></div> 74 75 <div class="min-content"> 76 <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100" 77 data-expected-width="100" data-expected-height="100"></div> 78 </div> 79 80 <div class="max-content"> 81 <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100" 82 data-expected-width="100" data-expected-height="100"></div> 83 </div> 84 85 </div> 86 87 <div style="writing-mode: vertical-rl;"> 88 89 <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100" 90 data-expected-width="100" data-expected-height="100"></div> 91 92 <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100" 93 data-expected-width="100" data-expected-height="100"></div> 94 95 <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100" 96 data-expected-width="100" data-expected-height="100"></div> 97 98 <div class="min-content"> 99 <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100" 100 data-expected-width="100" data-expected-height="100"></div> 101 </div> 102 103 <div class="max-content"> 104 <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100" 105 data-expected-width="100" data-expected-height="100"></div> 106 </div> 107 108 </div> 109 110 </body>