testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-rtl-001.html

   1 <!DOCTYPE html>
   2 <meta charset="utf-8">
   3 <title>CSS Grid Layout Test: Grid positioned items gaps RTL</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/#gutters" title="10.1. Gutters: the row-gap, column-gap, and gap properties">
   7 <meta name="assert" content="This test checks the behavior of the positioned items in a grid container with gaps in RTL.">
   8 <link rel="stylesheet" href="support/grid.css">
   9 <style>
  10
  11 .grid {
  12   grid-template-columns: 100px 100px 100px 100px;
  13   grid-template-rows: 50px 50px;
  14   grid-gap: 25px 50px;
  15   width: 800px;
  16   height: 200px;
  17   border: 5px solid black;
  18   margin: 30px;
  19   padding: 15px;
  20   /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
  21   position: relative;
  22 }
  23
  24 .grid > div {
  25   position: absolute;
  26   width: 100%;
  27   height: 100%;
  28   background-color: lime;
  29 }
  30
  31 .offsets {
  32   left: 0;
  33   top: 0;
  34 }
  35
  36 </style>
  37 <script src="/resources/testharness.js"></script>
  38 <script src="/resources/testharnessreport.js"></script>
  39 <script src="/resources/check-layout-th.js"></script>
  40
  41 <body onload="checkLayout('.grid')">
  42
  43 <div id="log"></div>
  44
  45 <div class="grid directionRTL">
  46   <div style="grid-column: auto / auto; grid-row: auto / auto;"
  47     data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
  48   </div>
  49 </div>
  50
  51 <div class="grid directionRTL">
  52   <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
  53     data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
  54   </div>
  55 </div>
  56
  57 <div class="grid directionRTL">
  58   <div style="grid-column: 1 / auto; grid-row: 1 / auto;"
  59     data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215">
  60   </div>
  61 </div>
  62
  63 <div class="grid directionRTL">
  64   <div class="offsets" style="grid-column: 1 / auto; grid-row: 1 / auto;"
  65     data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215">
  66   </div>
  67 </div>
  68
  69 <div class="grid directionRTL">
  70   <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
  71     data-offset-x="715" data-offset-y="15" data-expected-width="100" data-expected-height="50">
  72   </div>
  73 </div>
  74
  75 <div class="grid directionRTL">
  76   <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
  77     data-offset-x="715" data-offset-y="15" data-expected-width="100" data-expected-height="50">
  78   </div>
  79 </div>
  80
  81 <div class="grid directionRTL">
  82   <div style="grid-column: 1 / 3; grid-row: 1 / 3;"
  83     data-offset-x="565" data-offset-y="15" data-expected-width="250" data-expected-height="125">
  84   </div>
  85 </div>
  86
  87 <div class="grid directionRTL">
  88   <div class="offsets" style="grid-column: 1 / 3; grid-row: 1 / 3;"
  89     data-offset-x="565" data-offset-y="15" data-expected-width="250" data-expected-height="125">
  90   </div>
  91 </div>
  92
  93 <div class="grid directionRTL">
  94   <div style="grid-column: 1 / 4; grid-row: 1 / 4;"
  95     data-offset-x="415" data-offset-y="15" data-expected-width="400" data-expected-height="215">
  96   </div>
  97 </div>
  98
  99 <div class="grid directionRTL">
 100   <div class="offsets" style="grid-column: 1 / 4; grid-row: 1 / 4;"
 101     data-offset-x="415" data-offset-y="15" data-expected-width="400" data-expected-height="215">
 102   </div>
 103 </div>
 104
 105 <div class="grid directionRTL">
 106   <div style="grid-column: 1 / 5; grid-row: 1 / 5;"
 107     data-offset-x="265" data-offset-y="15" data-expected-width="550" data-expected-height="215">
 108   </div>
 109 </div>
 110
 111 <div class="grid directionRTL">
 112   <div class="offsets" style="grid-column: 1 / 5; grid-row: 1 / 5;"
 113     data-offset-x="265" data-offset-y="15" data-expected-width="550" data-expected-height="215">
 114   </div>
 115 </div>
 116
 117 <div class="grid directionRTL">
 118   <div style="grid-column: 1 / 6; grid-row: 1 / 6;"
 119     data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215">
 120   </div>
 121 </div>
 122
 123 <div class="grid directionRTL">
 124   <div class="offsets" style="grid-column: 1 / 6; grid-row: 1 / 6;"
 125     data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215">
 126   </div>
 127 </div>
 128
 129 <div class="grid directionRTL">
 130   <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
 131     data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140">
 132   </div>
 133 </div>
 134
 135 <div class="grid directionRTL">
 136   <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
 137     data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140">
 138   </div>
 139 </div>
 140
 141 <div class="grid directionRTL">
 142   <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
 143     data-offset-x="565" data-offset-y="90" data-expected-width="100" data-expected-height="50">
 144   </div>
 145 </div>
 146
 147 <div class="grid directionRTL">
 148   <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
 149     data-offset-x="565" data-offset-y="90" data-expected-width="100" data-expected-height="50">
 150   </div>
 151 </div>
 152
 153 <div class="grid directionRTL">
 154   <div style="grid-column: 2 / 4; grid-row: 2 / 4;"
 155     data-offset-x="415" data-offset-y="90" data-expected-width="250" data-expected-height="140">
 156   </div>
 157 </div>
 158
 159 <div class="grid directionRTL">
 160   <div class="offsets" style="grid-column: 2 / 4; grid-row: 2 / 4;"
 161     data-offset-x="415" data-offset-y="90" data-expected-width="250" data-expected-height="140">
 162   </div>
 163 </div>
 164
 165 <div class="grid directionRTL">
 166   <div style="grid-column: 2 / 5; grid-row: 2 / 5;"
 167     data-offset-x="265" data-offset-y="90" data-expected-width="400" data-expected-height="140">
 168   </div>
 169 </div>
 170
 171 <div class="grid directionRTL">
 172   <div class="offsets" style="grid-column: 2 / 5; grid-row: 2 / 5;"
 173     data-offset-x="265" data-offset-y="90" data-expected-width="400" data-expected-height="140">
 174   </div>
 175 </div>
 176
 177 <div class="grid directionRTL">
 178   <div style="grid-column: 2 / 6; grid-row: 2 / 6;"
 179     data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140">
 180   </div>
 181 </div>
 182
 183 <div class="grid directionRTL">
 184   <div class="offsets" style="grid-column: 2 / 6; grid-row: 2 / 6;"
 185     data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140">
 186   </div>
 187 </div>
 188
 189 <div class="grid directionRTL">
 190   <div style="grid-column: 3 / auto; grid-row: 3 / auto;"
 191     data-offset-x="0" data-offset-y="140" data-expected-width="515" data-expected-height="90">
 192   </div>
 193 </div>
 194
 195 <div class="grid directionRTL">
 196   <div class="offsets" style="grid-column: 3 / auto; grid-row: 3 / auto;"
 197     data-offset-x="0" data-offset-y="140" data-expected-width="515" data-expected-height="90">
 198   </div>
 199 </div>
 200
 201 <div class="grid directionRTL">
 202   <div style="grid-column: 4 / auto; grid-row: 4 / auto;"
 203     data-offset-x="0" data-offset-y="0" data-expected-width="365" data-expected-height="230">
 204   </div>
 205 </div>
 206
 207 <div class="grid directionRTL">
 208   <div class="offsets" style="grid-column: 4 / auto; grid-row: 4 / auto;"
 209     data-offset-x="0" data-offset-y="0" data-expected-width="365" data-expected-height="230">
 210   </div>
 211 </div>
 212
 213 <div class="grid directionRTL">
 214   <div style="grid-column: 5 / auto; grid-row: 5 / auto;"
 215     data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="230">
 216   </div>
 217 </div>
 218
 219 <div class="grid directionRTL">
 220   <div class="offsets" style="grid-column: 5 / auto; grid-row: 5 / auto;"
 221     data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="230">
 222   </div>
 223 </div>
 224
 225 <div class="grid directionRTL">
 226   <div style="grid-column: 6 / auto; grid-row: 6 / auto;"
 227     data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
 228   </div>
 229 </div>
 230
 231 <div class="grid directionRTL">
 232   <div class="offsets" style="grid-column: 6 / auto; grid-row: 6 / auto;"
 233     data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
 234   </div>
 235 </div>
 236
 237 <div class="grid directionRTL">
 238   <div style="grid-column: auto / 1; grid-row: auto / 1;"
 239     data-offset-x="815" data-offset-y="0" data-expected-width="15" data-expected-height="15">
 240   </div>
 241 </div>
 242
 243 <div class="grid directionRTL">
 244   <div class="offsets" style="grid-column: auto / 1; grid-row: auto / 1;"
 245     data-offset-x="815" data-offset-y="0" data-expected-width="15" data-expected-height="15">
 246   </div>
 247 </div>
 248
 249 <div class="grid directionRTL">
 250   <div style="grid-column: auto / 2; grid-row: auto / 2;"
 251     data-offset-x="715" data-offset-y="0" data-expected-width="115" data-expected-height="65">
 252   </div>
 253 </div>
 254
 255 <div class="grid directionRTL">
 256   <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
 257     data-offset-x="715" data-offset-y="0" data-expected-width="115" data-expected-height="65">
 258   </div>
 259 </div>
 260
 261 <div class="grid directionRTL">
 262   <div style="grid-column: auto / 3; grid-row: auto / 3;"
 263     data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="140">
 264   </div>
 265 </div>
 266
 267 <div class="grid directionRTL">
 268   <div class="offsets" style="grid-column: auto / 3; grid-row: auto / 3;"
 269     data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="140">
 270   </div>
 271 </div>
 272
 273 <div class="grid directionRTL">
 274   <div style="grid-column: auto / 4; grid-row: auto / 4;"
 275     data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="230">
 276   </div>
 277 </div>
 278
 279 <div class="grid directionRTL">
 280   <div class="offsets" style="grid-column: auto / 4; grid-row: auto / 4;"
 281     data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="230">
 282   </div>
 283 </div>
 284
 285 <div class="grid directionRTL">
 286   <div style="grid-column: auto / 5; grid-row: auto / 5;"
 287     data-offset-x="265" data-offset-y="0" data-expected-width="565" data-expected-height="230">
 288   </div>
 289 </div>
 290
 291 <div class="grid directionRTL">
 292   <div class="offsets" style="grid-column: auto / 5; grid-row: auto / 5;"
 293     data-offset-x="265" data-offset-y="0" data-expected-width="565" data-expected-height="230">
 294   </div>
 295 </div>
 296
 297 <div class="grid directionRTL">
 298   <div style="grid-column: auto / 6; grid-row: auto / 6;"
 299     data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
 300   </div>
 301 </div>
 302
 303 <div class="grid directionRTL">
 304   <div class="offsets" style="grid-column: auto / 6; grid-row: auto / 6;"
 305     data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
 306   </div>
 307 </div>
 308
 309 </body>