tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

grid-positioned-items-gaps-rtl-001.html (10482B)

      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="/css/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>