tor-browser

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

column-dense-packing-008-ref.html (954B)


      1 <!DOCTYPE html>
      2 <html>
      3 <style>
      4 .grid {
      5    display: grid;
      6    item-tolerance: 0;
      7    grid-template-columns: repeat(4, 50px);
      8    padding: 10px;
      9 }
     10 </style>
     11 <body>
     12  <p>Ensure that the auto-placement cursor does not move after dense-packing an item.</p>
     13  <div class="grid">
     14    <div style="background: lightskyblue; height: 40px; grid-column: 1;" >
     15      1
     16    </div>
     17    <div style="background: lightcoral; height: 15px; grid-column: 1 / span 3;  transform: translateY(-15px);" >
     18      2
     19    </div>
     20    <div style="background: lightgreen; height: 15px; grid-column: 1 / span 2;  transform: translateY(-15px);">
     21      3
     22    </div>
     23    <div style="background: yellow; height: 55px; grid-row: 1; grid-column: 4;">
     24      4
     25    </div>
     26    <div style="background:orchid; height: 10px; grid-row: 1; grid-column: 3;">
     27      5
     28    </div>
     29    <div style="background:orchid; height: 60px; transform: translateY(-15px);">
     30      6
     31    </div>
     32  </div>
     33 </body>
     34 </html>