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

      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 for orthogonal item</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-002-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-left: 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  writing-mode: vertical-rl;
     69  grid-area: 1 / 1;
     70  font-size: 48px;
     71  background: grey;
     72  background-clip: content-box;
     73  border: 1px solid;
     74  padding: 1px 3px 5px 7px;
     75  margin: 3px 5px 7px 1px;
     76 }
     77 .span2 {
     78  grid-area: 1 / 1 / span 2 / span 2;
     79 }
     80 .larger .grid .span2 {
     81  font-size: 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  </style>
    102 </head>
    103 <body>
    104 
    105 <div id="tests">
    106 <div class="grid"><x></x><span><c>X</c></span></div>
    107 <div class="grid definite"><x></x><span><c>X</c></span></div>
    108 <div class="grid"><x></x><span class="span2"><c>X</c></span></div>
    109 <div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
    110 
    111 <div class="grid sz"><x></x><span><c>X</c></span></div>
    112 <div class="grid sz definite"><x></x><span><c>X</c></span></div>
    113 <div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
    114 <div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
    115 
    116 <br>
    117 
    118 <div class="grid min"><x></x><span><c>X</c></span></div>
    119 <div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
    120 <div class="grid sz min"><x></x><span><c>X</c></span></div>
    121 <div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
    122 
    123 <div class="grid max"><x></x><span><c>X</c></span></div>
    124 <div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
    125 <div class="grid sz max"><x></x><span><c>X</c></span></div>
    126 <div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
    127 
    128 <br>
    129 
    130 </div>
    131 
    132 <script>
    133 var tests = document.getElementById('tests');
    134 
    135 var n = tests.cloneNode(true);
    136 var wrap = document.createElement('div');
    137 wrap.className = 'larger';
    138 wrap.appendChild(n);
    139 document.body.appendChild(wrap);
    140 
    141 var n = tests.cloneNode(true);
    142 var wrap = document.createElement('div');
    143 wrap.className = 'stretch';
    144 wrap.appendChild(n);
    145 document.body.appendChild(wrap);
    146 
    147 var n = tests.cloneNode(true);
    148 var wrap = document.createElement('div');
    149 wrap.className = 'stretch larger';
    150 wrap.appendChild(n);
    151 document.body.appendChild(wrap);
    152 
    153 </script>
    154 
    155 </body></html>