grid-positioned-items-within-grid-implicit-track-001.html (7083B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Grid positioned items within grid implicit track</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 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#implicit-grids" title="7.5. The Implicit Grid"> 7 <meta name="assert" content="This test checks that positioned grid items are placed properly (including implicit tracks) even if the grid has implicit tracks."> 8 <link rel="stylesheet" href="/css/support/grid.css"> 9 <style> 10 11 .grid { 12 grid-template-columns: 200px 300px; 13 grid-template-rows: 150px 250px; 14 grid-auto-columns: 100px; 15 grid-auto-rows: 50px; 16 width: 800px; 17 height: 600px; 18 border: 5px solid black; 19 margin: 30px; 20 padding: 15px; 21 /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ 22 position: relative; 23 } 24 25 .absolute { 26 position: absolute; 27 top: 0; 28 left: 0; 29 width: 100%; 30 height: 100%; 31 background: cyan; 32 } 33 34 .sixRowsAndSixColumns { 35 background: magenta; 36 grid-row: -5 / 5; 37 grid-column: -5 / 5; 38 } 39 40 </style> 41 <script src="/resources/testharness.js"></script> 42 <script src="/resources/testharnessreport.js"></script> 43 <script src="/resources/check-layout-th.js"></script> 44 45 <body onload="checkLayout('.grid')"> 46 47 <div id="log"></div> 48 49 <div class="grid"> 50 <div class="sixRowsAndSixColumns" 51 data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600"> 52 </div> 53 <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;" 54 data-offset-x="0" data-offset-y="0" data-expected-width="215" data-expected-height="115"> 55 </div> 56 </div> 57 58 <div class="grid"> 59 <div class="sixRowsAndSixColumns" 60 data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600"> 61 </div> 62 <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;" 63 data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expected-height="265"> 64 </div> 65 </div> 66 67 <div class="grid"> 68 <div class="sixRowsAndSixColumns" 69 data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600"> 70 </div> 71 <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;" 72 data-offset-x="715" data-offset-y="515" data-expected-width="115" data-expected-height="115"> 73 </div> 74 </div> 75 76 <div class="grid"> 77 <div class="sixRowsAndSixColumns" 78 data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600"> 79 </div> 80 <div class="absolute" style="grid-column: 2 / auto; grid-row: 2 / auto;" 81 data-offset-x="415" data-offset-y="265" data-expected-width="415" data-expected-height="365"> 82 </div> 83 </div> 84 85 <div class="grid"> 86 <div class="sixRowsAndSixColumns" 87 data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600"> 88 </div> 89 <div class="absolute" style="grid-column: -4 / 1; grid-row: -4 / 1;" 90 data-offset-x="115" data-offset-y="65" data-expected-width="100" data-expected-height="50"> 91 </div> 92 </div> 93 94 <div class="grid"> 95 <div class="sixRowsAndSixColumns" 96 data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600"> 97 </div> 98 <div class="absolute" style="grid-column: -4 / 2; grid-row: -4 / 2;" 99 data-offset-x="115" data-offset-y="65" data-expected-width="300" data-expected-height="200"> 100 </div> 101 </div> 102 103 <div class="grid"> 104 <div class="sixRowsAndSixColumns" 105 data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600"> 106 </div> 107 <div class="absolute" style="grid-column: 3 / 4; grid-row: 3 / 4;" 108 data-offset-x="715" data-offset-y="515" data-expected-width="100" data-expected-height="50"> 109 </div> 110 </div> 111 112 <div class="grid"> 113 <div class="sixRowsAndSixColumns" 114 data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600"> 115 </div> 116 <div class="absolute" style="grid-column: 2 / 4; grid-row: 2 / 4;" 117 data-offset-x="415" data-offset-y="265" data-expected-width="400" data-expected-height="300"> 118 </div> 119 </div> 120 121 <div class="grid directionRTL"> 122 <div class="sixRowsAndSixColumns" 123 data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600"> 124 </div> 125 <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;" 126 data-offset-x="615" data-offset-y="0" data-expected-width="215" data-expected-height="115"> 127 </div> 128 </div> 129 130 <div class="grid directionRTL"> 131 <div class="sixRowsAndSixColumns" 132 data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600"> 133 </div> 134 <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;" 135 data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="265"> 136 </div> 137 </div> 138 139 <div class="grid directionRTL"> 140 <div class="sixRowsAndSixColumns" 141 data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600"> 142 </div> 143 <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;" 144 data-offset-x="0" data-offset-y="515" data-expected-width="115" data-expected-height="115"> 145 </div> 146 </div> 147 148 <div class="grid directionRTL"> 149 <div class="sixRowsAndSixColumns" 150 data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600"> 151 </div> 152 <div class="absolute" style="grid-column: 2 / auto; grid-row: 2 / auto;" 153 data-offset-x="0" data-offset-y="265" data-expected-width="415" data-expected-height="365"> 154 </div> 155 </div> 156 157 <div class="grid directionRTL"> 158 <div class="sixRowsAndSixColumns" 159 data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600"> 160 </div> 161 <div class="absolute" style="grid-column: -4 / 1; grid-row: -4 / 1;" 162 data-offset-x="615" data-offset-y="65" data-expected-width="100" data-expected-height="50"> 163 </div> 164 </div> 165 166 <div class="grid directionRTL"> 167 <div class="sixRowsAndSixColumns" 168 data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600"> 169 </div> 170 <div class="absolute" style="grid-column: -4 / 2; grid-row: -4 / 2;" 171 data-offset-x="415" data-offset-y="65" data-expected-width="300" data-expected-height="200"> 172 </div> 173 </div> 174 175 <div class="grid directionRTL"> 176 <div class="sixRowsAndSixColumns" 177 data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600"> 178 </div> 179 <div class="absolute" style="grid-column: 3 / 4; grid-row: 3 / 4;" 180 data-offset-x="15" data-offset-y="515" data-expected-width="100" data-expected-height="50"> 181 </div> 182 </div> 183 184 <div class="grid directionRTL"> 185 <div class="sixRowsAndSixColumns" 186 data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600"> 187 </div> 188 <div class="absolute" style="grid-column: 2 / 4; grid-row: 2 / 4;" 189 data-offset-x="15" data-offset-y="265" data-expected-width="400" data-expected-height="300"> 190 </div> 191 </div> 192 193 </body>