grid-flex-track-intrinsic-sizes-003.html (8653B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Intrinsic contribution of an item with flex tracks</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="author" title="Tab Atkins-Bittner" href="mailto:jackalmage@gmail.com"> 6 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-spanning-items"> 8 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-spanning-flex-items"> 9 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#min-size-auto"> 10 <meta name="assert" content="This test checks that the intrinsic contribution of a single grid item is distributed correctly among the tracks it spans when flexible tracks are involved, and the item's size is determined by its children rather than explicitly."> 11 <style> 12 #grid { 13 display: grid; 14 width: 60px; 15 height: 60px; 16 border: solid; 17 } 18 #item { 19 background: blue; 20 } 21 #item::before { 22 content: ""; 23 display: block; 24 width: 100px; 25 height: 100px; 26 } 27 </style> 28 29 <div id="log"></div> 30 31 <div id="grid"> 32 <div id="item"></div> 33 </div> 34 35 <script src="/resources/testharness.js"></script> 36 <script src="/resources/testharnessreport.js"></script> 37 <script src="../grid-definition/support/testing-utils.js"></script> 38 <script> 39 const item = document.getElementById("item"); 40 let testset = "unlabeled"; 41 function checkTrackSizes(span, trackList, expected) { 42 item.style.gridColumn = item.style.gridRow = `span ${span}`; 43 TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expected, expected, testset); 44 } 45 46 // First check for distributing auto minimum /////////////////////////////////// 47 testset = "auto min item"; 48 49 // Item spanning an auto flexible track 50 checkTrackSizes(1, "0fr", "100px"); 51 checkTrackSizes(1, "1fr", "100px"); 52 checkTrackSizes(1, "2fr", "100px"); 53 54 // Item spanning a fixed flexible track 55 checkTrackSizes(1, "minmax(0, 0fr)", "0px"); 56 checkTrackSizes(1, "minmax(0, .5fr)", "30px"); 57 checkTrackSizes(1, "minmax(0, 1fr)", "60px"); 58 checkTrackSizes(1, "minmax(0, 2fr)", "60px"); 59 checkTrackSizes(1, "minmax(75px, 1fr)", "75px"); 60 61 // Item spanning 2 auto flexible tracks 62 checkTrackSizes(2, "0fr 0fr", "0px 0px"); 63 checkTrackSizes(2, "0fr 1fr", "0px 60px"); 64 checkTrackSizes(2, "1fr 0fr", "60px 0px"); 65 checkTrackSizes(2, "1fr 1fr", "30px 30px"); 66 checkTrackSizes(2, "1fr 3fr", "15px 45px"); 67 checkTrackSizes(2, "0fr 0fr 1fr", "0px 0px 60px"); 68 69 // Item spanning 2 fixed flexible tracks 70 checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px"); 71 checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 60px"); 72 checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 45px"); 73 checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "30px 30px"); 74 checkTrackSizes(2, "minmax(40px, 1fr) minmax(0, 1fr)", "40px 20px"); 75 76 // Item spanning an auto flexible track and a fixed flexible track 77 checkTrackSizes(2, "0fr minmax(0, 0fr)", "0px 0px"); 78 checkTrackSizes(2, "0fr minmax(0, 1fr)", "0px 60px"); 79 checkTrackSizes(2, "1fr minmax(0, 1fr)", "30px 30px"); 80 checkTrackSizes(2, "1fr minmax(25px, 1fr)", "30px 30px"); 81 82 // Item spanning an auto flexible track and an intrinsic non-flexible track 83 checkTrackSizes(2, "0fr min-content", "0px 0px"); 84 checkTrackSizes(2, "0fr auto", "0px 60px"); 85 checkTrackSizes(2, "0.5fr auto", "30px 30px"); 86 checkTrackSizes(2, "1fr auto", "60px 0px"); 87 checkTrackSizes(2, "1fr max-content", "60px 0px"); 88 checkTrackSizes(2, "1fr min-content", "60px 0px"); 89 90 // Item spanning a fixed flexible track and an intrinsic non-flexible track 91 checkTrackSizes(2, "minmax(0, 0fr) min-content", "0px 0px"); 92 checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 60px"); 93 checkTrackSizes(2, "minmax(0, 1fr) auto", "60px 0px"); 94 checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 35px"); 95 checkTrackSizes(2, "minmax(25px, 1fr) auto", "60px 0px"); 96 97 // Now check for distributing min content ////////////////////////////////////// 98 item.style.minWidth = "min-content"; // min-content = 100px > grid 99 item.style.minHeight = "100px"; // min-content doesn't resolve in block axis (yet?) 100 testset = "min-content min item"; 101 102 // Item spanning an auto flexible track 103 checkTrackSizes(1, "0fr", "100px"); 104 checkTrackSizes(1, "1fr", "100px"); 105 checkTrackSizes(1, "2fr", "100px"); 106 107 // Item spanning a fixed flexible track 108 checkTrackSizes(1, "minmax(0, 0fr)", "0px"); 109 checkTrackSizes(1, "minmax(0, .5fr)", "30px"); 110 checkTrackSizes(1, "minmax(0, 1fr)", "60px"); 111 checkTrackSizes(1, "minmax(0, 2fr)", "60px"); 112 checkTrackSizes(1, "minmax(75px, 1fr)", "75px"); 113 114 // Item spanning 2 auto flexible tracks 115 checkTrackSizes(2, "0fr 0fr", "50px 50px"); 116 checkTrackSizes(2, "0fr 1fr", "0px 100px"); 117 checkTrackSizes(2, "1fr 0fr", "100px 0px"); 118 checkTrackSizes(2, "1fr 1fr", "50px 50px"); 119 checkTrackSizes(2, "1fr 3fr", "25px 75px"); 120 checkTrackSizes(2, "0fr 0fr 1fr", "50px 50px 0px"); 121 122 // Item spanning 2 fixed flexible tracks 123 checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px"); 124 checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 60px"); 125 checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 45px"); 126 checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "30px 30px"); 127 checkTrackSizes(2, "minmax(40px, 1fr) minmax(0, 1fr)", "40px 20px"); 128 129 // Item spanning an auto flexible track and a fixed flexible track 130 checkTrackSizes(2, "0fr minmax(0, 0fr)", "100px 0px"); 131 checkTrackSizes(2, "0fr minmax(0, 1fr)", "100px 0px"); 132 checkTrackSizes(2, "1fr minmax(0, 1fr)", "100px 0px"); 133 checkTrackSizes(2, "1fr minmax(25px, 1fr)", "75px 25px"); 134 135 // Item spanning an auto flexible track and an intrinsic non-flexible track 136 checkTrackSizes(2, "0fr min-content", "100px 0px"); 137 checkTrackSizes(2, "0fr auto", "100px 0px"); 138 checkTrackSizes(2, "0.5fr auto", "100px 0px"); 139 checkTrackSizes(2, "1fr auto", "100px 0px"); 140 checkTrackSizes(2, "1fr max-content", "100px 0px"); 141 checkTrackSizes(2, "1fr min-content", "100px 0px"); 142 143 // Item spanning a fixed flexible track and an intrinsic non-flexible track 144 checkTrackSizes(2, "minmax(0, 0fr) min-content", "0px 0px"); 145 checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 60px"); 146 checkTrackSizes(2, "minmax(0, 1fr) auto", "60px 0px"); 147 checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 35px"); 148 checkTrackSizes(2, "minmax(25px, 1fr) auto", "60px 0px"); 149 150 // Now check for distributing fixed min //////////////////////////////////////// 151 item.style.minWidth = "50px"; // minimum < grid < min-content 152 item.style.minHeight = "50px"; // minimum < grid < min-content 153 testset = "50px min item"; 154 155 // Item spanning an auto flexible track 156 checkTrackSizes(1, "0fr", "50px"); 157 checkTrackSizes(1, "1fr", "60px"); 158 checkTrackSizes(1, "2fr", "60px"); 159 160 // Item spanning a fixed flexible track 161 checkTrackSizes(1, "minmax(0, 0fr)", "0px"); 162 checkTrackSizes(1, "minmax(0, .5fr)", "30px"); 163 checkTrackSizes(1, "minmax(0, 1fr)", "60px"); 164 checkTrackSizes(1, "minmax(0, 2fr)", "60px"); 165 checkTrackSizes(1, "minmax(75px, 1fr)", "75px"); 166 167 // Item spanning 2 auto flexible tracks 168 checkTrackSizes(2, "0fr 0fr", "25px 25px"); 169 checkTrackSizes(2, "0fr 1fr", "0px 60px"); 170 checkTrackSizes(2, "1fr 0fr", "60px 0px"); 171 checkTrackSizes(2, "1fr 1fr", "30px 30px"); 172 checkTrackSizes(2, "1fr 3fr", "15px 45px"); 173 checkTrackSizes(2, "0fr 0fr 1fr", "25px 25px 10px"); 174 175 // Item spanning 2 fixed flexible tracks 176 checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px"); 177 checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 60px"); 178 checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 45px"); 179 checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "30px 30px"); 180 checkTrackSizes(2, "minmax(40px, 1fr) minmax(0, 1fr)", "40px 20px"); 181 182 // Item spanning an auto flexible track and a fixed flexible track 183 checkTrackSizes(2, "0fr minmax(0, 0fr)", "50px 0px"); 184 checkTrackSizes(2, "0fr minmax(0, 1fr)", "50px 10px"); 185 checkTrackSizes(2, "1fr minmax(0, 1fr)", "50px 10px"); 186 checkTrackSizes(2, "1fr minmax(25px, 1fr)", "30px 30px"); 187 188 // Item spanning an auto flexible track and an intrinsic non-flexible track 189 checkTrackSizes(2, "0fr min-content", "50px 0px"); 190 checkTrackSizes(2, "0fr auto", "50px 10px"); 191 checkTrackSizes(2, "0.5fr auto", "50px 10px"); 192 checkTrackSizes(2, "1fr auto", "60px 0px"); 193 checkTrackSizes(2, "1fr max-content", "60px 0px"); 194 checkTrackSizes(2, "1fr min-content", "60px 0px"); 195 196 // Item spanning a fixed flexible track and an intrinsic non-flexible track 197 checkTrackSizes(2, "minmax(0, 0fr) min-content", "0px 0px"); 198 checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 60px"); 199 checkTrackSizes(2, "minmax(0, 1fr) auto", "60px 0px"); 200 checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 35px"); 201 checkTrackSizes(2, "minmax(25px, 1fr) auto", "60px 0px"); 202 </script>