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

      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 intrinsic ratio 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-004-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 img {
     68  writing-mode: vertical-rl;
     69  grid-area: 1 / 1;
     70  border: 1px solid;
     71  padding: 1px 3px 5px 7px;
     72  margin: 3px 5px 7px 1px;
     73 }
     74 .span2 {
     75  grid-area: 1 / 1 / span 2 / span 2;
     76 }
     77 .larger .grid .span2 {
     78  font-size: 32px;
     79 }
     80 
     81 x {
     82  grid-area: 1 / 1;
     83  min-width: 0;
     84  min-height: 0;
     85  align-self: stretch;
     86  justify-self: stretch;
     87  background: cyan;
     88 }
     89 
     90 br {
     91  clear: both;
     92 }
     93  </style>
     94 </head>
     95 <body>
     96 
     97 <div id="tests">
     98 <div class="grid"><x></x><img src="support/solidblue-20x32.png"></div>
     99 <div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
    100 <div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
    101 <div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
    102 
    103 <div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
    104 <div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
    105 <div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
    106 <div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
    107 
    108 <br>
    109 
    110 <div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
    111 <div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
    112 <div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
    113 <div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
    114 
    115 <div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div>
    116 <div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
    117 <div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div>
    118 <div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
    119 
    120 <br>
    121 
    122 </div>
    123 
    124 <script>
    125 var tests = document.getElementById('tests');
    126 
    127 var n = tests.cloneNode(true);
    128 var wrap = document.createElement('div');
    129 wrap.className = 'larger';
    130 wrap.appendChild(n);
    131 document.body.appendChild(wrap);
    132 
    133 var n = tests.cloneNode(true);
    134 var wrap = document.createElement('div');
    135 wrap.className = 'stretch';
    136 wrap.appendChild(n);
    137 document.body.appendChild(wrap);
    138 
    139 var n = tests.cloneNode(true);
    140 var wrap = document.createElement('div');
    141 wrap.className = 'stretch larger';
    142 wrap.appendChild(n);
    143 document.body.appendChild(wrap);
    144 
    145 </script>
    146 
    147 <!--  For generating image size results in -ref file
    148 <script>
    149 document.body.clientHeight;
    150 var imgs = document.querySelectorAll('img');
    151 var s = '  [\n';
    152 for (var i = 0; i < imgs.length; ++i) {
    153  s += "  ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n";
    154 }
    155 s += ']';
    156 console.log(s)
    157 </script>
    158 -->
    159 
    160 </body></html>