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-002-ref.html (4284B)

      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 orthogonal item</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-left: 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(max-content, 25px));
     53  grid-template-rows:    repeat(2,minmax(max-content, 28px));
     54 }
     55 .larger .max {
     56  grid-template-columns: repeat(2,minmax(min-content, 25px));
     57  grid-template-rows:    repeat(2,minmax(min-content, 28px));
     58 }
     59 
     60 .stretch .grid {
     61  align-items: stretch;
     62  justify-items: stretch;
     63 }
     64 .grid.a.max {
     65  height:61px;
     66 }
     67 .larger .grid.a.max {
     68  height:79px;
     69 }
     70 
     71 span {
     72  writing-mode: vertical-rl;
     73  grid-area: 1 / 1;
     74  font-size: 48px;
     75  background: grey;
     76  background-clip: content-box;
     77  border: 1px solid;
     78  padding: 1px 3px 5px 7px;
     79  margin: 3px 5px 7px 1px;
     80 }
     81 .span2 {
     82  grid-area: 1 / 1 / span 2 / span 2;
     83 }
     84 .larger .grid .span2 {
     85  font-size: 32px;
     86  width: 20px;
     87  height: 32px;
     88 }
     89 .stretch.larger .grid .span2 {
     90  width: 33px;
     91  height: 39px;
     92 }
     93 .stretch.larger .grid.sz .span2 {
     94  width: 22px;
     95  height: 32px;
     96 }
     97 .stretch.larger .grid.definite .span2 {
     98  width: 33px;
     99  height: 39px;
    100 }
    101 .grid.max span {
    102  height:32px;
    103 }
    104 
    105 x {
    106  grid-area: 1 / 1;
    107  min-width: 0;
    108  min-height: 0;
    109  align-self: stretch;
    110  justify-self: stretch;
    111  background: cyan;
    112 }
    113 c {
    114  display: block;
    115  width: 20px;
    116  height: 32px;
    117 }
    118 
    119 br {
    120  clear: both;
    121 }
    122  </style>
    123 </head>
    124 <body>
    125 
    126 <div id="tests">
    127 <div class="grid"><x></x><span><c>X</c></span></div>
    128 <div class="grid definite"><x></x><span><c>X</c></span></div>
    129 <div class="grid"><x></x><span class="span2"><c>X</c></span></div>
    130 <div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
    131 
    132 <div class="grid sz"><x></x><span><c>X</c></span></div>
    133 <div class="grid sz definite"><x></x><span><c>X</c></span></div>
    134 <div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
    135 <div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
    136 
    137 <br>
    138 
    139 <div class="grid min"><x></x><span><c>X</c></span></div>
    140 <div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
    141 <div class="grid sz min"><x></x><span><c>X</c></span></div>
    142 <div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
    143 
    144 <div class="grid a max"><x></x><span><c>X</c></span></div>
    145 <div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
    146 <div class="grid sz max"><x></x><span><c>X</c></span></div>
    147 <div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
    148 
    149 <br>
    150 
    151 </div>
    152 
    153 <script>
    154 var tests = document.getElementById('tests');
    155 
    156 var n = tests.cloneNode(true);
    157 var wrap = document.createElement('div');
    158 wrap.className = 'larger';
    159 wrap.appendChild(n);
    160 document.body.appendChild(wrap);
    161 
    162 var n = tests.cloneNode(true);
    163 var wrap = document.createElement('div');
    164 wrap.className = 'stretch';
    165 wrap.appendChild(n);
    166 document.body.appendChild(wrap);
    167 
    168 var n = tests.cloneNode(true);
    169 var wrap = document.createElement('div');
    170 wrap.className = 'stretch larger';
    171 wrap.appendChild(n);
    172 document.body.appendChild(wrap);
    173 
    174 </script>
    175 
    176 </body></html>