grid-self-alignment.html (17929B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> 3 <meta name="assert" content="This test checks that the self-start/self-end alignment values are applied correctly in all writing-modes for inflow content."> 4 <style> 5 body { 6 line-height: 30px; 7 } 8 .grid { 9 position: relative; 10 display: inline-grid; 11 grid-template-columns: 20px; 12 grid-template-rows: 20px; 13 width: 20px; 14 height: 20px; 15 border: solid; 16 vertical-align: bottom; 17 } 18 .child { 19 background: green; 20 width: 10px; 21 height: 10px; 22 } 23 </style> 24 <script src="/resources/testharness.js"></script> 25 <script src="/resources/testharnessreport.js"></script> 26 <script src="/resources/check-layout-th.js"></script> 27 <body onload="checkLayout('.child')"> 28 29 <div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> 30 <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> 31 </div> 32 <div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> 33 <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> 34 </div> 35 <div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> 36 <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> 37 </div> 38 <div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> 39 <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> 40 </div> 41 <div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> 42 <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> 43 </div> 44 <div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> 45 <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> 46 </div> 47 <div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> 48 <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div> 49 </div> 50 <div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> 51 <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div> 52 </div> 53 <div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> 54 <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> 55 </div> 56 <div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> 57 <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> 58 </div> 59 <div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> 60 <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div> 61 </div> 62 <div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> 63 <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div> 64 </div> 65 <br> 66 <div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> 67 <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> 68 </div> 69 <div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> 70 <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> 71 </div> 72 <div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> 73 <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> 74 </div> 75 <div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> 76 <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> 77 </div> 78 <div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> 79 <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> 80 </div> 81 <div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> 82 <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> 83 </div> 84 <div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> 85 <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div> 86 </div> 87 <div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> 88 <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div> 89 </div> 90 <div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> 91 <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> 92 </div> 93 <div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> 94 <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> 95 </div> 96 <div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> 97 <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div> 98 </div> 99 <div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> 100 <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div> 101 </div> 102 <br> 103 <div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> 104 <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> 105 </div> 106 <div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> 107 <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> 108 </div> 109 <div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> 110 <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> 111 </div> 112 <div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> 113 <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> 114 </div> 115 <div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> 116 <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> 117 </div> 118 <div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> 119 <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> 120 </div> 121 <div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> 122 <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div> 123 </div> 124 <div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> 125 <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div> 126 </div> 127 <div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> 128 <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> 129 </div> 130 <div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> 131 <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> 132 </div> 133 <div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> 134 <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div> 135 </div> 136 <div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> 137 <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div> 138 </div> 139 <br> 140 <div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> 141 <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> 142 </div> 143 <div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> 144 <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> 145 </div> 146 <div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> 147 <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> 148 </div> 149 <div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> 150 <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> 151 </div> 152 <div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> 153 <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> 154 </div> 155 <div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> 156 <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> 157 </div> 158 <div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> 159 <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div> 160 </div> 161 <div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> 162 <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div> 163 </div> 164 <div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> 165 <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> 166 </div> 167 <div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> 168 <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> 169 </div> 170 <div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> 171 <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div> 172 </div> 173 <div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> 174 <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div> 175 </div> 176 <br> 177 <div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> 178 <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> 179 </div> 180 <div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> 181 <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> 182 </div> 183 <div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> 184 <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> 185 </div> 186 <div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> 187 <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> 188 </div> 189 <div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> 190 <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> 191 </div> 192 <div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> 193 <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> 194 </div> 195 <div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> 196 <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div> 197 </div> 198 <div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> 199 <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div> 200 </div> 201 <div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> 202 <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> 203 </div> 204 <div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> 205 <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> 206 </div> 207 <div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> 208 <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div> 209 </div> 210 <div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> 211 <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div> 212 </div> 213 <br> 214 <div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> 215 <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> 216 </div> 217 <div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> 218 <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> 219 </div> 220 <div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> 221 <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> 222 </div> 223 <div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> 224 <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> 225 </div> 226 <div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> 227 <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> 228 </div> 229 <div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> 230 <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> 231 </div> 232 <div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> 233 <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div> 234 </div> 235 <div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> 236 <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div> 237 </div> 238 <div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> 239 <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> 240 </div> 241 <div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> 242 <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> 243 </div> 244 <div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> 245 <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div> 246 </div> 247 <div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> 248 <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div> 249 </div>