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