grid-auto-repeat-max-size-001.tentative.html (7047B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Auto repeat tracks and max sizes</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8963"> 7 <meta name="assert" content="This test checks that auto repeat tracks use max size when size is indefinite to compute the number of tracks."> 8 <link rel="stylesheet" href="/css/support/grid.css"> 9 <style> 10 .grid { 11 position: relative; 12 display: grid; 13 grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px); 14 max-width: 300px; 15 max-height: 200px; 16 } 17 .border { 18 border: 10px solid; 19 } 20 .border-box { 21 box-sizing: border-box; 22 } 23 .item { 24 background: lime; 25 /* Place item on the last cell. */ 26 grid-column: -2; 27 grid-row: -2; 28 } 29 .pad-calc { 30 border-width: 0; 31 padding: calc(10% + 20px); 32 } 33 .pad-percent { 34 border-width: 0; 35 padding: 10%; 36 } 37 </style> 38 <script src="/resources/testharness.js"></script> 39 <script src="/resources/testharnessreport.js"></script> 40 <script src="/resources/check-layout-th.js"></script> 41 <body onload="checkLayout('.grid');"> 42 43 <div id="log"></div> 44 45 <div class="grid" data-expected-width="300" data-expected-height="200"> 46 <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> 47 </div> 48 49 <div class="grid" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100"> 50 <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> 51 </div> 52 53 <div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200"> 54 <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> 55 </div> 56 57 <div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200"> 58 <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> 59 </div> 60 61 <div class="grid border" data-expected-width="320" data-expected-height="220"> 62 <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> 63 </div> 64 65 <div class="grid border" style="width: 200px; height: 100px;" data-expected-width="220" data-expected-height="120"> 66 <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> 67 </div> 68 69 <div class="grid border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220"> 70 <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> 71 </div> 72 73 <div class="grid border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220"> 74 <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> 75 </div> 76 77 <div class="grid border border-box" data-expected-width="300" data-expected-height="170"> 78 <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div> 79 </div> 80 81 <div style="width:min-content" data-expected-width="300" data-expected-height="160"> 82 <div class="grid border border-box pad-percent" data-expected-width="300" data-expected-height="160"> 83 <div class="item" data-offset-x="130" data-offset-y="80" data-expected-width="100" data-expected-height="50">x</div> 84 </div> 85 </div> 86 87 <div style="width:min-content" data-expected-width="240" data-expected-height="188"> 88 <div class="grid border border-box pad-calc" data-expected-width="240" data-expected-height="188"> 89 <div class="item" data-offset-x="44" data-offset-y="94" data-expected-width="100" data-expected-height="50"></div> 90 </div> 91 </div> 92 93 <div class="grid border border-box" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100"> 94 <div class="item" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> 95 </div> 96 97 <div style="width:min-content" data-expected-width="200" data-expected-height="100"> 98 <div class="grid border border-box pad-percent" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100"> 99 <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="50"></div> 100 </div> 101 </div> 102 103 <div style="width:min-content" data-expected-width="200" data-expected-height="100"> 104 <div class="grid border border-box pad-calc" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100"> 105 <div class="item" data-offset-x="40" data-offset-y="40" data-expected-width="100" data-expected-height="50"></div> 106 </div> 107 </div> 108 109 <div class="grid border border-box" style="width: min-content; height: min-content;" data-expected-width="220" data-expected-height="170"> 110 <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div> 111 </div> 112 113 <div style="width:min-content" data-expected-width="300" data-expected-height="160"> 114 <div class="grid border border-box pad-percent" style="width: min-content; height: min-content;" data-expected-width="260" data-expected-height="160" title="Percentage padding, min-content"> 115 <div class="item" data-offset-x="130" data-offset-y="80" data-expected-width="100" data-expected-height="50"></div> 116 </div> 117 </div> 118 119 <div style="width:min-content" data-expected-width="240" data-expected-height="188"> 120 <div class="grid border border-box pad-calc" style="width: min-content; height: min-content;" data-expected-width="288" data-expected-height="188"> 121 <div class="item" data-offset-x="144" data-offset-y="94" data-expected-width="100" data-expected-height="50"></div> 122 </div> 123 </div> 124 125 <div class="grid border border-box" style="width: max-content; height: max-content;" data-expected-width="220" data-expected-height="170"> 126 <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div> 127 </div> 128 129 <div style="width:min-content" data-expected-width="300" data-expected-height="160"> 130 <div class="grid border border-box pad-percent" style="width: max-content; height: max-content;" data-expected-width="260" data-expected-height="160" title="Percentage padding, max-content"> 131 <div class="item" data-offset-x="130" data-offset-y="80" data-expected-width="100" data-expected-height="50"></div> 132 </div> 133 </div> 134 135 <div style="width:min-content" data-expected-width="240" data-expected-height="188"> 136 <div class="grid border border-box pad-calc" style="width: max-content; height: max-content;" data-expected-width="288" data-expected-height="188"> 137 <div class="item" data-offset-x="144" data-offset-y="94" data-expected-width="100" data-expected-height="50"></div> 138 </div> 139 </div> 140 141 </body>