grid-align.html (15438B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout test: align-self property</title> 4 <link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> 6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values"> 7 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-direction"> 8 <meta name="assert" content="This test checks that the align-self property is applied correctly for RL and LR, vertical and horizontal writing modes."> 9 <meta name="flags" content="ahem"> 10 <link rel="stylesheet" href="/css/support/grid.css"> 11 <link rel="stylesheet" href="/css/support/alignment.css"> 12 <link rel="stylesheet" href="/css/support/width-keyword-classes.css"> 13 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 14 15 <style> 16 17 .grid { 18 grid-template-columns: 100px 100px; 19 grid-template-rows: 200px 200px; 20 margin-bottom: 20px; 21 } 22 23 .cell { 24 width: 20px; 25 height: 40px; 26 } 27 28 .item { 29 width: 8px; 30 height: 16px; 31 background: black; 32 } 33 </style> 34 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 style="position: relative"> 45 <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> 46 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> 47 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 48 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 49 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> 50 </div> 51 </div> 52 53 <div style="position: relative"> 54 <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> 55 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 56 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 57 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> 58 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div> 59 </div> 60 </div> 61 62 <!-- Default alignment and initial values. --> 63 <div style="position: relative"> 64 <div class="grid fit-content alignItemsCenter" data-expected-width="200" data-expected-height="400"> 65 <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 66 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 67 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> 68 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div> 69 </div> 70 </div> 71 72 <div style="position: relative"> 73 <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> 74 <div class="alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> 75 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 76 <div class="cell alignSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> 77 <div class="cell alignSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div> 78 </div> 79 </div> 80 81 <!-- RTL direction (it should not affect the block-flow direction). --> 82 <div style="position: relative"> 83 <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400"> 84 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> 85 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 86 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="80" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 87 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> 88 </div> 89 </div> 90 91 <div style="position: relative"> 92 <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400"> 93 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="180" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 94 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 95 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> 96 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="80" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div> 97 </div> 98 </div> 99 100 <!-- RTL direction (it should not affect the block-flow) with opposite directions grid container vs grid item. --> 101 <div style="position: relative"> 102 <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> 103 <div class="alignSelfStretch firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> 104 <div class="cell alignSelfStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 105 <div class="cell alignSelfEnd firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 106 <div class="cell alignSelfCenter secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> 107 </div> 108 </div> 109 110 <div style="position: relative"> 111 <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> 112 <div class="cell alignSelfFlexEnd firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 113 <div class="cell alignSelfFlexStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 114 <div class="cell alignSelfSelfStart secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> 115 <div class="cell alignSelfSelfEnd secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div> 116 </div> 117 </div> 118 119 <!-- Vertical RL writing mode. --> 120 <div style="position: relative"> 121 <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200"> 122 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> 123 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 124 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 125 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 126 </div> 127 </div> 128 129 <div style="position: relative"> 130 <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200"> 131 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 132 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 133 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 134 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 135 </div> 136 </div> 137 138 <!-- Vertical LR writing mode. --> 139 <div style="position: relative"> 140 <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200"> 141 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> 142 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 143 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 144 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 145 </div> 146 </div> 147 148 <div style="position: relative"> 149 <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200"> 150 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 151 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 152 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 153 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 154 </div> 155 </div> 156 157 <!-- Vertical RL writing mode with opposite block-flow directions grid container vs grid item. --> 158 <div style="position: relative"> 159 <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200"> 160 <div class="alignSelfStretch firstRowFirstColumn verticalLR" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"> 161 </div> 162 <div class="cell alignSelfStart firstRowSecondColumn verticalLR" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"> 163 <div class="item"></div> 164 </div> 165 <div class="cell alignSelfEnd firstRowSecondColumn verticalLR" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"> 166 <div class="item"></div> 167 </div> 168 <div class="cell alignSelfCenter secondRowFirstColumn verticalLR" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"> 169 <div class="item"></div> 170 </div> 171 </div> 172 </div> 173 174 <div style="position: relative"> 175 <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200"> 176 <div class="cell alignSelfFlexEnd firstRowFirstColumn verticalLR" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"> 177 <div class="item"></div> 178 </div> 179 <div class="cell alignSelfFlexStart firstRowSecondColumn verticalLR" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"> 180 <div class="item"></div> 181 </div> 182 <div class="cell alignSelfSelfStart secondRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"> 183 <div class="item"></div> 184 </div> 185 <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalLR" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"> 186 <div class="item"></div> 187 </div> 188 </div> 189 </div> 190 191 <!-- Vertical LR writing mode with opposite block-flow directions grid container vs grid item. --> 192 <div style="position: relative"> 193 <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200"> 194 <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"> 195 </div> 196 <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"> 197 <div class="item"></div> 198 </div> 199 <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"> 200 <div class="item"></div> 201 </div> 202 <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"> 203 <div class="item"></div> 204 </div> 205 </div> 206 </div> 207 208 <div style="position: relative"> 209 <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200"> 210 <div class="cell alignSelfFlexEnd firstRowFirstColumn verticalRL" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"> 211 <div class="item"></div> 212 </div> 213 <div class="cell alignSelfFlexStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"> 214 <div class="item"></div> 215 </div> 216 <div class="cell alignSelfSelfStart secondRowFirstColumn verticalRL" data-offset-x="380" data-offset-y="0" data-expected-width="20" data-expected-height="40"> 217 <div class="item"></div> 218 </div> 219 <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalRL" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"> 220 <div class="item"></div> 221 </div> 222 </div> 223 </div> 224 225 </body>