layout/reftests/css-grid/grid-item-auto-min-size-clamp-006-ref.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>Reference: Clamp 'automatic minimum size' to definite max-sizing for intrinsic ratio 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 img {
  66   grid-area: 1 / 1;
  67   border: 1px solid;
  68   padding: 1px 3px 5px 7px;
  69   margin: 0;
  70   align-self:center;
  71   justify-self:center;
  72 }
  73 .span2 {
  74   grid-area: 1 / 1 / span 2 / span 2;
  75 }
  76 .larger .grid .span2 {
  77   font-size: 32px;
  78 }
  79 .larger .grid .span2 {
  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
  93 br {
  94   clear: both;
  95 }
  96   </style>
  97 </head>
  98 <body>
  99
 100 <div id="tests">
 101 <div class="grid"><x></x><img src="support/solidblue-20x32.png"></div>
 102 <div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div>
 103 <div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
 104 <div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
 105
 106 <div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div>
 107 <div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div>
 108 <div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
 109 <div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
 110
 111 <br>
 112
 113 <div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div>
 114 <div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
 115 <div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div>
 116 <div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
 117
 118 <div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div>
 119 <div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
 120 <div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div>
 121 <div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div>
 122
 123 <br>
 124
 125 </div>
 126
 127 <script>
 128 var tests = document.getElementById('tests');
 129
 130 var n = tests.cloneNode(true);
 131 var wrap = document.createElement('div');
 132 wrap.className = 'larger';
 133 wrap.appendChild(n);
 134 document.body.appendChild(wrap);
 135
 136 var n = tests.cloneNode(true);
 137 var wrap = document.createElement('div');
 138 wrap.className = 'stretch';
 139 wrap.appendChild(n);
 140 document.body.appendChild(wrap);
 141
 142 var n = tests.cloneNode(true);
 143 var wrap = document.createElement('div');
 144 wrap.className = 'stretch larger';
 145 wrap.appendChild(n);
 146 document.body.appendChild(wrap);
 147
 148 </script>
 149
 150 </body></html>