tor-browser

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

grid-item-auto-min-size-clamp-006-ref.html (4184B)

      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: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio item with margin:auto</title>
      9  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369">
     10  <style type="text/css">
     11 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
     12 
     13 .grid {
     14  display: grid;
     15  grid-template-columns: repeat(2,minmax(auto, 15px));
     16  grid-template-rows:    repeat(2,minmax(auto, 10px));
     17  grid-gap: 1px;
     18  align-items: start;
     19  justify-items: start;
     20  float: left;
     21  border: 1px dashed;
     22  margin-right: 16px;
     23  margin-bottom: 14px;
     24 }
     25 .sz {
     26  width: 40px;
     27  height: 40px;
     28 }
     29 
     30 .definite {
     31  grid-template-columns: repeat(2,15px);
     32  grid-template-rows:    repeat(2,10px);
     33 }
     34 .min {
     35  grid-template-columns: repeat(2,minmax(min-content, 15px));
     36  grid-template-rows:    repeat(2,minmax(min-content, 10px));
     37 }
     38 .max {
     39  grid-template-columns: repeat(2,minmax(max-content, 15px));
     40  grid-template-rows:    repeat(2,minmax(max-content, 10px));
     41 }
     42 
     43 .larger .grid {
     44  grid-template-columns: repeat(2,minmax(auto, 25px));
     45  grid-template-rows:    repeat(2,minmax(auto, 28px));
     46 }
     47 .larger .definite {
     48  grid-template-columns: repeat(2,25px);
     49  grid-template-rows:    repeat(2,28px);
     50 }
     51 .larger .min {
     52  grid-template-columns: repeat(2,minmax(min-content, 25px));
     53  grid-template-rows:    repeat(2,minmax(min-content, 28px));
     54 }
     55 .larger .max {
     56  grid-template-columns: repeat(2,minmax(max-content, 25px));
     57  grid-template-rows:    repeat(2,minmax(max-content, 28px));
     58 }
     59 
     60 .stretch .grid {
     61  align-items: stretch;
     62  justify-items: stretch;
     63 }
     64 
     65 img {
     66  grid-area: 1 / 1;
     67  border: 1px solid;
     68  padding: 1px 3px 5px 7px;
     69  margin: 0;
     70  align-self:center;
     71  justify-self:center;
     72 }
     73 .span2 {
     74  grid-area: 1 / 1 / span 2 / span 2;
     75 }
     76 .larger .grid .span2 {
     77  font-size: 32px;
     78 }
     79 .larger .grid .span2 {
     80  width: 20px;
     81  height: 32px;
     82 }
     83 
     84 x {
     85  grid-area: 1 / 1;
     86  min-width: 0;
     87  min-height: 0;
     88  align-self: stretch;
     89  justify-self: stretch;
     90  background: cyan;
     91 }
     92 
     93 br {
     94  clear: both;
     95 }
     96  </style>
     97 </head>
     98 <body>
     99 
    100 <div id="tests">
    101 <div class="grid"><x></x><img src="support/solidblue-20x32.png"></div>
    102 <div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
    103 <div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
    104 <div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
    105 
    106 <div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
    107 <div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
    108 <div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
    109 <div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
    110 
    111 <br>
    112 
    113 <div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
    114 <div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
    115 <div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
    116 <div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
    117 
    118 <div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div>
    119 <div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
    120 <div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div>
    121 <div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
    122 
    123 <br>
    124 
    125 </div>
    126 
    127 <script>
    128 var tests = document.getElementById('tests');
    129 
    130 var n = tests.cloneNode(true);
    131 var wrap = document.createElement('div');
    132 wrap.className = 'larger';
    133 wrap.appendChild(n);
    134 document.body.appendChild(wrap);
    135 
    136 var n = tests.cloneNode(true);
    137 var wrap = document.createElement('div');
    138 wrap.className = 'stretch';
    139 wrap.appendChild(n);
    140 document.body.appendChild(wrap);
    141 
    142 var n = tests.cloneNode(true);
    143 var wrap = document.createElement('div');
    144 wrap.className = 'stretch larger';
    145 wrap.appendChild(n);
    146 document.body.appendChild(wrap);
    147 
    148 </script>
    149 
    150 </body></html>