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.html (4046B)

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