tor-browser

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

descendant-static-position-004-ref.html (1989B)

      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: 100px;
     15  justify-content: center;
     16  padding: 2px 4px 6px 1px;
     17  direction: rtl;
     18  margin-left: 40px;
     19 }
     20 .absolute {
     21  position: absolute;
     22  grid-column: 1 / 2;
     23 }
     24 .content {
     25  float: right;
     26  width: 20px;
     27  height: 40px;
     28  background: green;
     29 }
     30 .content:nth-child(2) {
     31  background: grey;
     32 }
     33 
     34 </style></head>
     35 <body>
     36 There should be no red:
     37 
     38 <div class="grid">
     39    <div class="absolute" style="margin-top:2px">
     40      <div class="content"></div>
     41      <div class="content"></div>
     42    </div>
     43 </div>
     44 
     45 <div class="grid" style="grid-template-columns: 44px">
     46    <div class="absolute" style="margin-top:2px; margin-left:4px">
     47      <div class="content"></div>
     48      <div class="content"></div>
     49    </div>
     50 </div>
     51 
     52 <div class="grid" style="grid-template-columns: 44px">
     53    <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:2px">
     54      <div class="content"></div>
     55      <div class="content"></div>
     56    </div>
     57 </div>
     58 
     59 <div class="grid" style="padding-bottom: 14px">
     60    <div class="absolute" style="margin-top:10px">
     61      <div class="content"></div>
     62      <div class="content"></div>
     63    </div>
     64 </div>
     65 
     66 <div class="grid" style="grid-template-columns: 43px; padding-right:8px">
     67    <div class="absolute" style="margin-top:2px; margin-left:3px">
     68      <div class="content"></div>
     69      <div class="content"></div>
     70    </div>
     71 </div>
     72 
     73 <div class="grid" style="grid-template-columns: 43px; padding-right:8px; padding-left:10px">
     74    <div class="absolute" style="margin-top:2px;">
     75      <div class="content"></div>
     76      <div class="content"></div>
     77    </div>
     78 </div>
     79 
     80 </body>
     81 </html>