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-001-ref.html (4489B)

      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</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(max-content, 15px));
     36  grid-template-rows:    repeat(2,minmax(max-content, 10px));
     37 }
     38 .max {
     39  grid-template-columns: repeat(2,minmax(min-content, 15px));
     40  grid-template-rows:    repeat(2,minmax(min-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 .a.grid {
     66  width: 34px;
     67 }
     68 .a.grid.max {
     69  width: 54px;
     70 }
     71 .larger .a.grid {
     72  width: 51px;
     73 }
     74 .larger .a.grid.max {
     75  width: 64px;
     76 }
     77 .a2.grid {
     78  width: 31px;
     79 }
     80 .larger .a2.grid {
     81  width: 51px;
     82 }
     83 .grid.sz.max {
     84  width: 40px;
     85 }
     86 .larger .grid.max.a span {
     87  width:20px;
     88 }
     89 .larger .grid.max.a2 span {
     90  width:20px;
     91 }
     92 
     93 span {
     94  grid-area: 1 / 1;
     95  font-size: 48px;
     96  background: grey;
     97  background-clip: content-box;
     98  border: 1px solid;
     99  padding: 1px 3px 5px 7px;
    100  margin: 3px 5px 7px 1px;
    101 }
    102 .span2 {
    103  grid-area: 1 / 1 / span 2 / span 2;
    104 }
    105 .grid.max span {
    106  width:20px;
    107 }
    108 .larger .grid .span2 {
    109  font-size: 32px;
    110  width: 20px;
    111  height: 32px;
    112 }
    113 .stretch.larger .grid .span2 {
    114  width: 33px;
    115  height: 39px;
    116 }
    117 .stretch.larger .grid.sz .span2 {
    118  width: 22px;
    119  height: 32px;
    120 }
    121 .stretch.larger .grid.definite .span2 {
    122  width: 33px;
    123  height: 39px;
    124 }
    125 
    126 x {
    127  grid-area: 1 / 1;
    128  min-width: 0;
    129  min-height: 0;
    130  align-self: stretch;
    131  justify-self: stretch;
    132  background: cyan;
    133 }
    134 c {
    135  display: block;
    136  width: 20px;
    137  height: 32px;
    138 }
    139 
    140 br {
    141  clear: both;
    142 }
    143  </style>
    144 </head>
    145 <body>
    146 
    147 <div id="tests">
    148 <div class="grid a"><x></x><span><c>X</c></span></div>
    149 <div class="grid definite"><x></x><span><c>X</c></span></div>
    150 <div class="grid a2"><x></x><span class="span2"><c>X</c></span></div>
    151 <div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
    152 
    153 <div class="grid sz"><x></x><span><c>X</c></span></div>
    154 <div class="grid sz definite"><x></x><span><c>X</c></span></div>
    155 <div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
    156 <div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
    157 
    158 <br>
    159 
    160 <div class="grid min"><x></x><span><c>X</c></span></div>
    161 <div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
    162 <div class="grid sz min"><x></x><span><c>X</c></span></div>
    163 <div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
    164 
    165 <div class="grid a max"><x></x><span><c>X</c></span></div>
    166 <div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
    167 <div class="grid a2 sz max"><x></x><span><c>X</c></span></div>
    168 <div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
    169 
    170 <br>
    171 
    172 </div>
    173 
    174 <script>
    175 var tests = document.getElementById('tests');
    176 
    177 var n = tests.cloneNode(true);
    178 var wrap = document.createElement('div');
    179 wrap.className = 'larger';
    180 wrap.appendChild(n);
    181 document.body.appendChild(wrap);
    182 
    183 var n = tests.cloneNode(true);
    184 var wrap = document.createElement('div');
    185 wrap.className = 'stretch';
    186 wrap.appendChild(n);
    187 document.body.appendChild(wrap);
    188 
    189 var n = tests.cloneNode(true);
    190 var wrap = document.createElement('div');
    191 wrap.className = 'stretch larger';
    192 wrap.appendChild(n);
    193 document.body.appendChild(wrap);
    194 
    195 </script>
    196 
    197 </body></html>