tor-browser

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

row-auto-placement-min-content-ref.html (2257B)

      1 <!DOCTYPE html>
      2 <html>
      3 <link rel="help" href="https://drafts.csswg.org/css-grid-3">
      4 <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com">
      5 <style>
      6 html,body {
      7  color:black; font:15px/1 monospace; padding:0; margin:0;
      8 }
      9 
     10 .grid {
     11    display: grid;
     12    grid-template-rows: 15px auto auto;
     13    width: max-content;
     14    background: gray;
     15    align-items: start;
     16    padding: 10px;
     17 }
     18 </style>
     19 <body>
     20  <p>Ensure that grid-lanes containers are sized correctly under min-content constraints even if the items do not have the min-content style.</p>
     21  <div id="shown-items" class="grid">
     22    <div style="background: lightskyblue; width: max-content; grid-row: 1; grid-column: 1;">
     23        Number 1
     24    </div>
     25    <div style="background: brown; height: 30px; width: max-content; grid-row: 1; grid-column: 2;">
     26      Number 4
     27    </div>
     28    <div style="grid-row: 2; grid-column: 1;">
     29      <div style="background: lightcoral;">
     30        Number 2
     31    </div>
     32    </div>
     33    <div style="grid-row: 3; grid-column: 1;">
     34      <div style="background: lightgreen;">
     35        Number 3
     36      </div>
     37    </div>
     38  </div>
     39  <div id="grid-with-min-content" class="grid" style="visibility: hidden;">
     40    <div id="number1" style="visibility: hidden; width: min-content; grid-row: 1; grid-column: 1;">
     41      Number 1
     42    </div>
     43    <div id="number4" style="visibility: hidden; height: 30px; width: min-content; grid-row: 1; grid-column: 2;">
     44      Number 4
     45    </div>
     46    <div style="grid-row: 2; grid-column: 1; width: min-content;">
     47      <div style="visibility: hidden;">
     48        Number 2
     49    </div>
     50    </div>
     51    <div style="grid-row: 3; grid-column: 1; width: min-content;">
     52      <div style="visibility: hidden;">
     53        Number 3
     54      </div>
     55    </div>
     56  </div>
     57 </body>
     58 <script>
     59 window.addEventListener('DOMContentLoaded', function() {
     60  const grid_with_min_content = document.getElementById('grid-with-min-content');
     61  const shown_items = document.getElementById('shown-items');
     62 
     63  let gray_bg = document.getElementById('gray-bg');
     64 
     65  // Set grayBg size to match grid-with-min-content width and shown-items height
     66  gray_bg.style.width = grid_with_min_content.offsetWidth + 'px';
     67  gray_bg.style.height = shown_items.offsetHeight + 'px';
     68 });
     69 </script>