tor-browser

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

grid-placement-abspos-implicit-001-ref.html (2045B)

      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 placement of abs.pos. grid items in negative implicit grid</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: 1px 7px 3px 13px;
     23 width: 200px;
     24 height: 60px;
     25 }
     26 
     27 .a {
     28  position: absolute;
     29  left: 59px; top: 22px;
     30  height: 12px; width: 44px;
     31 }
     32 
     33 .abs {
     34  position: absolute;
     35  opacity: 0.7;
     36  width: 21px;
     37  height: 5px;
     38 }
     39 .b {
     40  left: 1px; top: 3px; bottom: 1px;
     41  width: 74px; height: auto;
     42 }
     43 .c {
     44  left: 1px; top: 3px;
     45  width: 51px; height: 2px;
     46 }
     47 .d {
     48  left: 1px; top: 5px;
     49  width: 212px; height: 7px;
     50 }
     51 .e {
     52  right: 5px; bottom: 1px;
     53  width: 212px; height: 58px;
     54 }
     55 .f {
     56  right: 5px; bottom: 1px;
     57  width: 212px; height: 58px;
     58 }
     59 span {
     60  background: lime;
     61  border: 1px solid;
     62 }
     63  </style>
     64 </head>
     65 <body>
     66 
     67 <div class="grid">
     68 <span class="a"></span>
     69 <span class="b abs">b</span>
     70 </div>
     71 
     72 <div class="grid">
     73 <span class="a"></span>
     74 <span class="c abs">c</span>
     75 </div>
     76 
     77 <div class="grid">
     78 <span class="a"></span>
     79 <span class="d abs">d</span>
     80 </div>
     81 
     82 <div class="grid">
     83 <span class="a"></span>
     84 <span class="e abs">e</span>
     85 </div>
     86 
     87 <div class="grid">
     88 <span class="a"></span>
     89 <span class="f abs">f</span>
     90 </div>
     91 
     92 <div class="grid">
     93 <span class="b abs" style="width:212px">b</span>
     94 </div>
     95 
     96 <div class="grid">
     97 <span class="c abs">c</span>
     98 </div>
     99 
    100 <div class="grid">
    101 <span class="d abs" style="height:56px;"></span>
    102 </div>
    103 
    104 <div class="grid">
    105 <span class="e abs">e</span>
    106 </div>
    107 
    108 <div class="grid">
    109 <span class="f abs">f</span>
    110 </div>
    111 
    112 </body>
    113 </html>