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-005-ref.html (4197B)

      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 of block 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 span {
     66  grid-area: 1 / 1;
     67  font-size: 48px;
     68  background: grey;
     69  background-clip: content-box;
     70  border: 1px solid;
     71  padding: 1px 3px 5px 7px;
     72  margin: 0;
     73 }
     74 .span2 {
     75  grid-area: 1 / 1 / span 2 / span 2;
     76 }
     77 
     78 .larger .grid .span2 {
     79  font-size: 16px;
     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 c {
     93  display: block;
     94  width: 20px;
     95  height: 32px;
     96 }
     97 
     98 br {
     99  clear: both;
    100 }
    101 
    102 .larger .center > span {
    103  justify-self: center;
    104  align-self: center;
    105 }
    106 .larger .ml4 > span {
    107  margin-left: 4px;
    108 }
    109  </style>
    110 </head>
    111 <body>
    112 
    113 <div id="tests">
    114 <div class="grid"><x></x><span><c>X</c></span></div>
    115 <div class="grid definite"><x></x><span><c>X</c></span></div>
    116 <div class="grid center"><x></x><span class="span2"><c>X</c></span></div>
    117 <div class="grid center definite"><x></x><span class="span2"><c>X</c></span></div>
    118 
    119 <div class="grid sz"><x></x><span><c>X</c></span></div>
    120 <div class="grid sz definite"><x></x><span><c>X</c></span></div>
    121 <div class="grid ml4 sz"><x></x><span class="span2"><c>X</c></span></div>
    122 <div class="grid center sz definite"><x></x><span class="span2"><c>X</c></span></div>
    123 
    124 <br>
    125 
    126 <div class="grid min"><x></x><span><c>X</c></span></div>
    127 <div class="grid center min"><x></x><span class="span2"><c>X</c></span></div>
    128 <div class="grid sz min"><x></x><span><c>X</c></span></div>
    129 <div class="grid ml4 sz min"><x></x><span class="span2"><c>X</c></span></div>
    130 
    131 <div class="grid max"><x></x><span><c>X</c></span></div>
    132 <div class="grid center max"><x></x><span class="span2"><c>X</c></span></div>
    133 <div class="grid sz max"><x></x><span><c>X</c></span></div>
    134 <div class="grid ml4 sz max"><x></x><span class="span2"><c>X</c></span></div>
    135 
    136 <br>
    137 
    138 </div>
    139 
    140 <script>
    141 var tests = document.getElementById('tests');
    142 
    143 var n = tests.cloneNode(true);
    144 var wrap = document.createElement('div');
    145 wrap.className = 'larger';
    146 wrap.appendChild(n);
    147 document.body.appendChild(wrap);
    148 
    149 /* TODO: sort out https://bugs.chromium.org/p/chromium/issues/detail?id=789927 first
    150 var n = tests.cloneNode(true);
    151 var wrap = document.createElement('div');
    152 wrap.className = 'stretch';
    153 wrap.appendChild(n);
    154 document.body.appendChild(wrap);
    155 
    156 var n = tests.cloneNode(true);
    157 var wrap = document.createElement('div');
    158 wrap.className = 'stretch larger';
    159 wrap.appendChild(n);
    160 document.body.appendChild(wrap);
    161 */
    162 
    163 </script>
    164 
    165 </body></html>