positioned-grid-items-should-not-take-up-space-001.html (7440B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Positioned grid items should not take up space</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/#abspos" title="9. Absolute Positioning"> 6 <meta name="assert" content="This test checks that positioned items shouldn't take up space or otherwise participate in the layout of the grid."> 7 <link rel="stylesheet" href="/fonts/ahem.css"> 8 <link href="/css/support/grid.css" rel="stylesheet"> 9 <style> 10 11 .grid { 12 grid-template-columns: 50px 100px; 13 grid-template-rows: 50px 100px; 14 width: 150px; 15 height: 150px; 16 /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ 17 position: relative; 18 /* Ensures that the grid container is the containing block of the fixed positioned grid children. */ 19 transform: translate(10px, 20px); 20 } 21 22 .absolute { 23 position: absolute; 24 } 25 26 .fixed { 27 position: fixed; 28 } 29 30 .offsetLeft100 { 31 left: 100px; 32 } 33 34 </style> 35 <script src="/resources/testharness.js"></script> 36 <script src="/resources/testharnessreport.js"></script> 37 <script src="/resources/check-layout-th.js"></script> 38 <script type="text/javascript"> 39 setup({ explicit_done: true }); 40 </script> 41 42 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 43 44 <div id="log"></div> 45 46 <p>Absolutely positioned:</p> 47 48 <div class="grid"> 49 <div class="sizedToGridArea absolute autoRowAutoColumn" 50 data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150"> 51 </div> 52 <div class="sizedToGridArea autoRowAutoColumn" 53 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> 54 </div> 55 </div> 56 57 <div class="grid"> 58 <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100" 59 data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150"> 60 </div> 61 <div class="sizedToGridArea autoRowAutoColumn" 62 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> 63 </div> 64 </div> 65 66 <div class="grid"> 67 <div class="sizedToGridArea autoRowAutoColumn" 68 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> 69 </div> 70 <div class="sizedToGridArea absolute autoRowAutoColumn" 71 data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150"> 72 </div> 73 <div class="sizedToGridArea autoRowAutoColumn" 74 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"> 75 </div> 76 </div> 77 78 <div class="grid"> 79 <div class="sizedToGridArea autoRowAutoColumn" 80 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> 81 </div> 82 <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100" 83 data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150"> 84 </div> 85 <div class="sizedToGridArea autoRowAutoColumn" 86 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"> 87 </div> 88 </div> 89 90 <div class="grid"> 91 <div class="sizedToGridArea autoRowAutoColumn" 92 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> 93 </div> 94 <div class="sizedToGridArea autoRowAutoColumn" 95 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"> 96 <div class="sizedToGridArea absolute autoRowAutoColumn" 97 data-offset-x="50" data-offset-y="0" data-expected-width="150" data-expected-height="150"> 98 </div> 99 </div> 100 <div class="sizedToGridArea autoRowAutoColumn" 101 data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"> 102 </div> 103 </div> 104 105 <div class="grid"> 106 <div class="sizedToGridArea autoRowAutoColumn" 107 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> 108 </div> 109 <div class="sizedToGridArea autoRowAutoColumn" 110 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"> 111 <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100" 112 data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150"> 113 </div> 114 </div> 115 <div class="sizedToGridArea autoRowAutoColumn" 116 data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"> 117 </div> 118 </div> 119 120 <p>Fixed positioned:</p> 121 122 <div class="grid"> 123 <div class="sizedToGridArea fixed autoRowAutoColumn" 124 data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150"> 125 </div> 126 <div class="sizedToGridArea autoRowAutoColumn" 127 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> 128 </div> 129 </div> 130 131 <div class="grid"> 132 <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100" 133 data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150"> 134 </div> 135 <div class="sizedToGridArea autoRowAutoColumn" 136 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> 137 </div> 138 </div> 139 140 <div class="grid"> 141 <div class="sizedToGridArea autoRowAutoColumn" 142 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> 143 </div> 144 <div class="sizedToGridArea fixed autoRowAutoColumn" 145 data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150"> 146 </div> 147 <div class="sizedToGridArea autoRowAutoColumn" 148 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"> 149 </div> 150 </div> 151 152 <div class="grid"> 153 <div class="sizedToGridArea autoRowAutoColumn" 154 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> 155 </div> 156 <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100" 157 data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150"> 158 </div> 159 <div class="sizedToGridArea autoRowAutoColumn" 160 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"> 161 </div> 162 </div> 163 164 <div class="grid"> 165 <div class="sizedToGridArea autoRowAutoColumn" 166 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> 167 </div> 168 <div class="sizedToGridArea autoRowAutoColumn" 169 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"> 170 <div class="sizedToGridArea fixed autoRowAutoColumn" 171 data-offset-x="50" data-offset-y="0" data-expected-width="150" data-expected-height="150"> 172 </div> 173 </div> 174 <div class="sizedToGridArea autoRowAutoColumn" 175 data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"> 176 </div> 177 </div> 178 179 <div class="grid"> 180 <div class="sizedToGridArea autoRowAutoColumn" 181 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> 182 </div> 183 <div class="sizedToGridArea autoRowAutoColumn" 184 data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"> 185 <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100" 186 data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150"> 187 </div> 188 </div> 189 <div class="sizedToGridArea autoRowAutoColumn" 190 data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"> 191 </div> 192 </div> 193 194 </body>