tor-browser

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

grid-abspos-items-001-ref.html (3860B)


      1 <!DOCTYPE HTML>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <html><head>
      7  <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title>
      8  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
      9  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
     10 
     11  <meta charset="utf-8">
     12  <style type="text/css">
     13 body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
     14 
     15 .grid {
     16 /*display: grid;*/
     17 position: relative;
     18 border: 1px solid;
     19 grid-auto-flow: row;
     20 grid-auto-columns: 23px;
     21 grid-auto-rows: 7px;
     22 padding: 17px 7px 11px 13px;
     23 width: 100px;
     24 height: 60px;
     25 }
     26 .zero-size { width:0; height:0; }
     27 .auto-size { width:auto; height:0px; }
     28 
     29 .a {
     30  position: absolute;
     31  left: 13px; top: 31px;
     32  height: 12px; width: 44px;
     33  background: blue;
     34 }
     35 
     36 .abs {
     37  position: absolute;
     38  opacity: 0.7;
     39  width: 21px;
     40  height: 15px;
     41 }
     42 .b {
     43  left: 1px; top: 3px; bottom: 1px;
     44  width: 28px; height: auto;
     45 }
     46 .c {
     47  right: 5px; bottom: 1px;
     48  width: 112px; height: 82px;
     49 }
     50 .d {
     51  left: 1px; top: 20px;
     52  width: 5px; height: 1px;
     53 }
     54 .e {
     55  right: 5px; bottom: 1px;
     56  width: 112px; height: 51px;
     57 }
     58 .f {
     59  right: 5px; top: 3px;
     60  width: 112px; height: 11px;
     61 }
     62 .g {
     63  left: 14px; top: 27px;
     64  width: 38px; height: 1px;
     65 }
     66 .h {
     67  top:3px; left:1px; right:5px; bottom:1px;
     68  width:auto; height:auto;
     69 }
     70 .i, .j {
     71  top:3px; left:1px; right:5px; bottom:1px;
     72  border:none;
     73  width:auto; height:auto;
     74 }
     75 span {
     76  background: lime;
     77  border: 1px solid;
     78 }
     79  </style>
     80 </head>
     81 <body>
     82 
     83 <div style="float:left">
     84 
     85 <div class="grid">
     86 <span class="a"></span>
     87 <span class="b abs">b</span>
     88 </div>
     89 
     90 <div class="grid">
     91 <span class="a"></span>
     92 <span class="c abs">c</span>
     93 </div>
     94 
     95 <div class="grid">
     96 <span class="a"></span>
     97 <span class="d abs">d</span>
     98 </div>
     99 
    100 <div class="grid">
    101 <span class="a"></span>
    102 <span class="e abs">e</span>
    103 </div>
    104 
    105 <div class="grid">
    106 <span class="a"></span>
    107 <span class="f abs">f</span>
    108 </div>
    109 
    110 <div class="grid">
    111 <span class="a"></span>
    112 <span class="g abs">g</span>
    113 </div>
    114 
    115 </div><div style="float:left">
    116 
    117 <div class="grid">
    118 <span class="a"></span>
    119 <span class="b abs">b</span>
    120 </div>
    121 
    122 <div class="grid">
    123 <span class="a"></span>
    124 <span class="c abs">c</span>
    125 </div>
    126 
    127 <div class="grid">
    128 <span class="a"></span>
    129 <span class="d abs">d</span>
    130 </div>
    131 
    132 <div class="grid">
    133 <span class="a"></span>
    134 <span class="e abs">e</span>
    135 </div>
    136 
    137 <div class="grid">
    138 <span class="a"></span>
    139 <span class="f abs">f</span>
    140 </div>
    141 
    142 <div class="grid">
    143 <span class="a"></span>
    144 <span class="g abs">g</span>
    145 </div>
    146 
    147 </div><div style="float:left">
    148 
    149 <div class="grid zero-size">
    150 <span class="b abs" style="width:12px">b</span>
    151 </div>
    152 
    153 <div class="grid auto-size">
    154 <span class="h abs">h</span>
    155 </div>
    156 
    157 <div class="grid" style="height:7px">
    158 <span class="i abs">i</span>
    159 </div>
    160 
    161 <div class="grid" style="height:7px">
    162 <span class="j abs">j</span>
    163 </div>
    164 
    165 <div class="grid" style="width:43px; height:53px">
    166 <span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span>
    167 <span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span>
    168 <span class="abs" style="left:1px; bottom:1px; height:58px; width:5px;">c</span>
    169 <span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span>
    170 </div>
    171 
    172 <div class="grid" style="width:43px; height:28px; border-width:0;">
    173 <span class="abs" style="right:48px; top:3px; height:11px; width:12px;"></span>
    174 </div>
    175 <div class="grid" style="width:43px; height:28px; border-width:0;">
    176 <span class="abs" style="left:1px; bottom:57px; height:22px; width:5px;"></span>
    177 </div>
    178 <div class="grid" style="width:43px; height:28px; border-width:0;">
    179 <span class="abs" style="right:48px; bottom:85px; height:22px; width:12px;"></span>
    180 </div>
    181 
    182 </div>
    183 
    184 </body>
    185 </html>