layout/reftests/css-grid/grid-item-auto-min-size-clamp-004.html

   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>