tor-browser

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

descendant-static-position-002-ref.html (1961B)

      1 <!DOCTYPE html>
      2 <html><head>
      3 <meta charset="utf-8">
      4 <title>CSS Grid Layout Reference: Grid aligned descendants with static position (direction: rtl)</title>
      5 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
      6 <style>
      7 .grid {
      8  position: relative;
      9  display: grid;
     10  grid: 40px / 40px;
     11  border: 2px solid;
     12  border-top-width: 5px;
     13  border-left-width: 3px;
     14  width: 20px;
     15  padding: 2px 4px 6px 1px;
     16  direction: rtl;
     17  margin-left: 40px;
     18 }
     19 .absolute {
     20  position: absolute;
     21  grid-column: 1 / 2;
     22 }
     23 .content {
     24  float: right;
     25  width: 20px;
     26  height: 40px;
     27  background: green;
     28 }
     29 .content:nth-child(2) {
     30  background: grey;
     31 }
     32 
     33 </style></head>
     34 <body>
     35 There should be no red:
     36 
     37 <div class="grid">
     38    <div class="absolute" style="margin-top:2px">
     39      <div class="content"></div>
     40      <div class="content"></div>
     41    </div>
     42 </div>
     43 
     44 <div class="grid" style="grid-template-columns: 43px">
     45    <div class="absolute" style="margin-top:2px; margin-left:3px">
     46      <div class="content"></div>
     47      <div class="content"></div>
     48    </div>
     49 </div>
     50 
     51 <div class="grid" style="grid-template-columns: 43px">
     52    <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px">
     53      <div class="content"></div>
     54      <div class="content"></div>
     55    </div>
     56 </div>
     57 
     58 <div class="grid" style="padding-bottom: 14px">
     59    <div class="absolute" style="margin-top:10px">
     60      <div class="content"></div>
     61      <div class="content"></div>
     62    </div>
     63 </div>
     64 
     65 <div class="grid" style="grid-template-columns: 43px; padding-right:8px">
     66    <div class="absolute" style="margin-top:2px; margin-left:3px">
     67      <div class="content"></div>
     68      <div class="content"></div>
     69    </div>
     70 </div>
     71 
     72 <div class="grid" style="grid-template-columns: 43px; padding-right:8px; padding-left:10px">
     73    <div class="absolute" style="margin-top:2px;">
     74      <div class="content"></div>
     75      <div class="content"></div>
     76    </div>
     77 </div>
     78 
     79 </body>
     80 </html>