tor-browser

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

grid-order-placement-definite-001.html (1924B)

      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>CSS Test: Testing definite placement of grid items with 'order'</title>
      9  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
     10  <link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo">
     11  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property">
     12  <link rel="match" href="grid-order-placement-definite-001-ref.html">
     13  <style type="text/css">
     14 body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
     15 
     16 .grid {
     17 display: grid;
     18 position: relative;
     19 grid-template-columns: 20px 20px 20px 20px;
     20 grid-template-rows: 20px;
     21 padding: 17px 7px 11px 13px;
     22 width: 100px;
     23 height: 25px;
     24 }
     25 
     26 .a { order:4; grid-column-start:4; grid-row-start:1; width: 40px; background:lime; }
     27 .b { order:3; grid-column-start:3; grid-row-start:1; width: 60px; background:pink; }
     28 .c { order:2; grid-column-start:2; grid-row-start:1; width: 80px; background:yellow; }
     29 .d { order:1; grid-column-start:1; grid-row-start:1; width: 100px; background:silver; }
     30 .e { order:1; grid-column-start:1; grid-row-start:1; width: 100px; background:red; }
     31 
     32 span {
     33  border: 1px solid;
     34 }
     35 
     36 .f2 { background:white; }
     37 .f2 span { opacity: 0.5; }
     38 .f2 span.e { display:none; }
     39  </style>
     40 </head>
     41 <body>
     42 
     43 <f>
     44 
     45 <div class="grid">
     46 <span class="a">a</span>
     47 <span class="b">b</span>
     48 <span class="c">c</span>
     49 <span class="e"></span>
     50 <span class="d">d</span>
     51 </div>
     52 
     53 <div class="grid">
     54 <span class="e"></span>
     55 <span class="d">d</span>
     56 <span class="b">b</span>
     57 <span class="c">c</span>
     58 <span class="a">a</span>
     59 </div>
     60 
     61 </f>
     62 
     63 <script>
     64  var f = document.querySelector('f');
     65  var f2 = f.cloneNode(true);
     66  f2.className = 'f2';
     67  document.body.appendChild(f2);
     68 </script>
     69 
     70 </body>
     71 </html>