grid-max-sizing-flex-007.html (4306B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ 4 --> 5 <!DOCTYPE html> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Grid Test: Testing track flex max-sizing with min/max</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1309407"> 10 <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-flex-tracks"> 11 <link rel="match" href="grid-max-sizing-flex-007-ref.html"> 12 <style type="text/css"> 13 .grid { 14 display: grid; 15 border:1px dashed; 16 margin: 3px; 17 } 18 .rows { 19 float: left; 20 grid: minmax(10px, 1fr) minmax(10px, 4fr) / 50px; 21 grid-row-gap: 33px; 22 } 23 .cols { 24 display: inline-grid; 25 grid: 50px / minmax(10px, 1fr) minmax(10px, 4fr); 26 grid-column-gap: 33px; 27 } 28 29 .item:nth-child(1) { background-color: purple; } 30 .item:nth-child(2) { background-color: blue; } 31 32 </style> 33 34 </head><body> 35 36 <!-- 37 NOTE: The resulting size (in the relevant axis) is 83px for all tests below 38 in the "If the free space is an indefinite length" algo here: 39 https://drafts.csswg.org/css-grid/#algo-flex-tracks 40 These tests verifies that we then also apply min/max sizes per the spec: 41 "If using this flex fraction would cause the grid to be smaller than the grid 42 container’s min-width/height (or larger than the grid container’s max-width/ 43 height), then redo this step, treating the free space as definite and the 44 available grid space as equal to the grid container’s content box size when 45 it’s sized to its min-width/height (max-width/height)." 46 --> 47 48 <pre>These grids should look the same:</pre> 49 <div class="grid rows" style="max-height:70px"> 50 <div class="item"></div> 51 <div class="item"></div> 52 </div> 53 <div class="grid rows" style="min-height:70px; max-height:60px"> 54 <div class="item"></div> 55 <div class="item"></div> 56 </div> 57 <div class="grid rows" style="height:70px"> 58 <div class="item"></div> 59 <div class="item"></div> 60 </div> 61 62 <br clear="all"> 63 64 <pre>These grids should look the same:</pre> 65 <div class="grid rows" style="min-height:90px"> 66 <div class="item"></div> 67 <div class="item"></div> 68 </div> 69 <div class="grid rows" style="min-height:90px; max-height:60px"> 70 <div class="item"></div> 71 <div class="item"></div> 72 </div> 73 <div class="grid rows" style="height:90px"> 74 <div class="item"></div> 75 <div class="item"></div> 76 </div> 77 78 <br clear="all"> 79 80 <pre>These grids should look the same:</pre> 81 <div class="grid cols" style="max-width:70px"> 82 <div class="item"></div> 83 <div class="item"></div> 84 </div> 85 <div class="grid cols" style="min-width:70px; max-width:60px"> 86 <div class="item"></div> 87 <div class="item"></div> 88 </div> 89 <div class="grid cols" style="width:70px"> 90 <div class="item"></div> 91 <div class="item"></div> 92 </div> 93 94 <pre>These grids should look the same:</pre> 95 <div class="grid cols" style="min-width:90px"> 96 <div class="item"></div> 97 <div class="item"></div> 98 </div> 99 <div class="grid cols" style="min-width:90px; max-width:60px"> 100 <div class="item"></div> 101 <div class="item"></div> 102 </div> 103 <div class="grid cols" style="width:90px"> 104 <div class="item"></div> 105 <div class="item"></div> 106 </div> 107 108 <pre>The first 6 grids should look the same:</pre> 109 <div class="grid rows" style="grid: 1fr / 30px; min-height:83px"> 110 <div class="item"></div> 111 </div> 112 <div class="grid rows" style="grid: 10px 1fr / 30px; min-height:83px"> 113 <div class="item" style="grid-row:span 2"></div> 114 </div> 115 <div class="grid rows" style="grid: 1fr / 30px; max-height:30px; min-height:83px"> 116 <div class="item"></div> 117 </div> 118 <div class="grid rows" style="grid: 1fr 1fr / 30px; max-height:83px"> 119 <div class="item" style="grid-row:span 2"><div style="height:90px"></div></div> 120 </div> 121 <div class="grid rows" style="grid: 1fr auto / 30px; max-height:83px"> 122 <div class="item" style="grid-row:span 2"><div style="height:90px"></div></div> 123 </div> 124 <div class="grid rows" style="grid: 10px 1fr / 30px; max-height:83px"> 125 <div class="item" style="grid-row:span 2"><div style="height:90px"></div></div> 126 </div> 127 <div class="grid rows" style="grid: 1fr 1fr / 30px; grid-row-gap:10px; max-height:83px"> 128 <div class="item" style="grid-row:span 2"><div style="height:40px"></div></div> 129 <div class="item"><div style="height:40px"></div></div> 130 </div> 131 132 </body></html>