grid-sizing-positioned-items-001.html (7695B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Grid sizing positioned items</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 the different size options for absolutely positioned grid items."> 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: 100px 200px; 13 grid-template-rows: 50px 150px; 14 width: 100%; 15 height: 100%; 16 border: 5px solid black; 17 margin: 30px; 18 padding: 15px; 19 /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ 20 position: relative; 21 } 22 23 .absolute { 24 position: absolute; 25 } 26 27 .lengthSize { 28 width: 50px; 29 height: 20px; 30 } 31 32 .percentageSize { 33 width: 50%; 34 height: 20%; 35 } 36 37 .offsets { 38 left: 5px; 39 right: 10px; 40 top: 15px; 41 bottom: 20px; 42 } 43 44 .onlyFirstRowOnlyFirstColumn { 45 background-color: blue; 46 grid-column: 1 / 2; 47 grid-row: 1 / 2; 48 } 49 50 .endSecondRowEndSecondColumn { 51 background-color: orange; 52 grid-column-end: 3; 53 grid-row-end: 3; 54 } 55 56 </style> 57 <script src="/resources/testharness.js"></script> 58 <script src="/resources/testharnessreport.js"></script> 59 <script src="/resources/check-layout-th.js"></script> 60 <script type="text/javascript"> 61 setup({ explicit_done: true }); 62 </script> 63 64 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 65 66 <div id="log"></div> 67 68 <div class="unconstrainedContainer"> 69 <div class="grid"> 70 <div class="absolute autoRowAutoColumn sizedToGridArea" 71 data-offset-x="0" data-offset-y="0" data-expected-width="1030" data-expected-height="1030"> 72 </div> 73 <div class="absolute secondRowSecondColumn sizedToGridArea" 74 data-offset-x="115" data-offset-y="65" data-expected-width="915" data-expected-height="965"> 75 </div> 76 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" 77 data-offset-x="15" data-offset-y="15" data-expected-width="100" data-expected-height="50"> 78 </div> 79 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea" 80 data-offset-x="0" data-offset-y="0" data-expected-width="315" data-expected-height="215"> 81 </div> 82 </div> 83 </div> 84 85 <div class="unconstrainedContainer"> 86 <div class="grid"> 87 <div class="absolute autoRowAutoColumn lengthSize" 88 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="20"> 89 </div> 90 <div class="absolute secondRowSecondColumn lengthSize" 91 data-offset-x="115" data-offset-y="65" data-expected-width="50" data-expected-height="20"> 92 </div> 93 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize" 94 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="20"> 95 </div> 96 <div class="absolute endSecondRowEndSecondColumn lengthSize" 97 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="20"> 98 </div> 99 </div> 100 </div> 101 102 <div class="unconstrainedContainer"> 103 <div class="grid"> 104 <div class="absolute autoRowAutoColumn percentageSize" 105 data-offset-x="0" data-offset-y="0" data-expected-width="515" data-expected-height="206"> 106 </div> 107 <div class="absolute secondRowSecondColumn percentageSize" 108 data-offset-x="115" data-offset-y="65" data-expected-width="457.5" data-expected-height="193"> 109 </div> 110 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize" 111 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="10"> 112 </div> 113 <div class="absolute endSecondRowEndSecondColumn percentageSize" 114 data-offset-x="0" data-offset-y="0" data-expected-width="157.5" data-expected-height="43"> 115 </div> 116 </div> 117 </div> 118 119 <div class="unconstrainedContainer"> 120 <div class="grid"> 121 <div class="absolute autoRowAutoColumn offsets" 122 data-offset-x="5" data-offset-y="15" data-expected-width="1015" data-expected-height="995"> 123 </div> 124 <div class="absolute secondRowSecondColumn offsets" 125 data-offset-x="120" data-offset-y="80" data-expected-width="900" data-expected-height="930"> 126 </div> 127 <div class="absolute onlyFirstRowOnlyFirstColumn offsets" 128 data-offset-x="20" data-offset-y="30" data-expected-width="85" data-expected-height="15"> 129 </div> 130 <div class="absolute endSecondRowEndSecondColumn offsets" 131 data-offset-x="5" data-offset-y="15" data-expected-width="300" data-expected-height="180"> 132 </div> 133 </div> 134 </div> 135 136 <div class="unconstrainedContainer"> 137 <div class="grid directionRTL"> 138 <div class="absolute autoRowAutoColumn sizedToGridArea" 139 data-offset-x="0" data-offset-y="0" data-expected-width="1030" data-expected-height="1030"> 140 </div> 141 <div class="absolute secondRowSecondColumn sizedToGridArea" 142 data-offset-x="0" data-offset-y="65" data-expected-width="915" data-expected-height="965"> 143 </div> 144 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" 145 data-offset-x="915" data-offset-y="15" data-expected-width="100" data-expected-height="50"> 146 </div> 147 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea" 148 data-offset-x="715" data-offset-y="0" data-expected-width="315" data-expected-height="215"> 149 </div> 150 </div> 151 </div> 152 153 <div class="unconstrainedContainer"> 154 <div class="grid directionRTL"> 155 <div class="absolute autoRowAutoColumn lengthSize" 156 data-offset-x="980" data-offset-y="0" data-expected-width="50" data-expected-height="20"> 157 </div> 158 <div class="absolute secondRowSecondColumn lengthSize" 159 data-offset-x="865" data-offset-y="65" data-expected-width="50" data-expected-height="20"> 160 </div> 161 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize" 162 data-offset-x="965" data-offset-y="15" data-expected-width="50" data-expected-height="20"> 163 </div> 164 <div class="absolute endSecondRowEndSecondColumn lengthSize" 165 data-offset-x="980" data-offset-y="0" data-expected-width="50" data-expected-height="20"> 166 </div> 167 </div> 168 </div> 169 170 <div class="unconstrainedContainer"> 171 <div class="grid directionRTL"> 172 <div class="absolute autoRowAutoColumn percentageSize" 173 data-offset-x="515" data-offset-y="0" data-expected-width="515" data-expected-height="206"> 174 </div> 175 <div class="absolute secondRowSecondColumn percentageSize" 176 data-offset-x="457.5" data-offset-y="65" data-expected-width="457.5" data-expected-height="193"> 177 </div> 178 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize" 179 data-offset-x="965" data-offset-y="15" data-expected-width="50" data-expected-height="10"> 180 </div> 181 <div class="absolute endSecondRowEndSecondColumn percentageSize" 182 data-offset-x="873" data-offset-y="0" data-expected-width="157.5" data-expected-height="43"> 183 </div> 184 </div> 185 </div> 186 187 <div class="unconstrainedContainer"> 188 <div class="grid directionRTL"> 189 <div class="absolute autoRowAutoColumn offsets" 190 data-offset-x="5" data-offset-y="15" data-expected-width="1015" data-expected-height="995"> 191 </div> 192 <div class="absolute secondRowSecondColumn offsets" 193 data-offset-x="5" data-offset-y="80" data-expected-width="900" data-expected-height="930"> 194 </div> 195 <div class="absolute onlyFirstRowOnlyFirstColumn offsets" 196 data-offset-x="920" data-offset-y="30" data-expected-width="85" data-expected-height="15"> 197 </div> 198 <div class="absolute endSecondRowEndSecondColumn offsets" 199 data-offset-x="720" data-offset-y="15" data-expected-width="300" data-expected-height="180"> 200 </div> 201 </div> 202 </div> 203 204 </body>