tor-browser

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

grid-abspos-items-014-ref.html (2232B)

      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  <meta charset="utf-8">
      8  <title>Reference: abs pos static position (grid container as abs.pos. CB)</title>
      9  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151243">
     10  <style type="text/css">
     11 html,body {
     12    color:black; background-color:white; font-size:16px; padding:0; margin:0;
     13 }
     14 separator { clear:both; display:block; height:6px; }
     15 
     16 .grid {
     17  display: grid;
     18  float: left;
     19  border-style: solid;
     20  border-width: 1px 3px 5px 7px;
     21  border-block-start-color: blue;
     22  border-inline-start-color: lime;
     23  grid-template: 3px 51px 5px / 5px 33px 7px;
     24  margin-right: 4px;
     25 }
     26 
     27 abs1,abs2,abs3,abs4 {
     28  grid-area: 2 / 2 / 3 / 3;
     29  position: absolute;
     30 }
     31 abs1 { top:17px; bottom:2px; background:lime; }
     32 abs2 { right:13px; left:3px; background:pink; }
     33 abs3 { right:5px; left:11px; top:9px; background:cyan; }
     34 abs4 { top:23px; bottom:1px; left:11px; background:yellow; }
     35 abs1::before { content:"1";}
     36 abs2::before { content:"2";}
     37 abs3::before { content:"3";}
     38 abs4::before { content:"4";}
     39 
     40 x {
     41  position: relative;
     42  grid-area: 2 / 2 / 3 / 3;
     43  background: grey;
     44 }
     45 
     46 .hl { writing-mode: horizontal-tb; direction:ltr; }
     47 .hr { writing-mode: horizontal-tb; direction:rtl; }
     48 .vl { writing-mode: vertical-lr; }
     49 .vr { writing-mode: vertical-rl; }
     50 .vlr { writing-mode: vertical-lr; direction:rtl; }
     51 .vrl { writing-mode: vertical-rl; direction:ltr; }
     52 
     53 </style>
     54 </head>
     55 <body>
     56 
     57 <script>
     58 document.body.style.display="none";
     59 var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
     60 for (var i = 0; i < wm.length; ++i) {
     61  for (var j = 0; j < wm.length; ++j) {
     62    var div = document.createElement("div");
     63    div.className = "grid " + wm[i];
     64    div.appendChild(x = document.createElement("x"));
     65    x.appendChild(document.createElement("abs1"));
     66    x.appendChild(document.createElement("abs2"));
     67    x.appendChild(document.createElement("abs3"));
     68    x.appendChild(document.createElement("abs4"));
     69    document.body.appendChild(div)
     70  }
     71  document.body.appendChild(document.createElement("separator"));
     72 }
     73 document.body.style.display="";
     74 </script>
     75 
     76 
     77 </body>
     78 </html>