layout/reftests/css-grid/grid-item-auto-min-size-clamp-007.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 items with specified intrinsic 'width'/'height'</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-007-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   float: left;
  18   position: relative;
  19   grid-template-columns: repeat(2,20px);
  20   grid-template-rows: repeat(2,20px);
  21   align-items: start;
  22   justify-items: start;
  23   border: 1px dashed;
  24   margin-right: 16px;
  25   margin-bottom: 14px;
  26 }
  27 .c-auto { grid-template-columns: minmax(auto, 15px); }
  28 .c-min { grid-template-columns: minmax(min-content, 15px); }
  29 .c-max { grid-template-columns: minmax(max-content, 15px); }
  30 .r-auto { grid-template-rows: minmax(auto, 15px); }
  31 .r-min { grid-template-rows: minmax(min-content, 15px); }
  32 .r-max { grid-template-rows: minmax(max-content, 15px); }
  33 span {
  34   grid-area: 1 / 1;
  35   font-size: 48px;
  36   background: grey;
  37 }
  38 y {
  39   position: absolute;
  40   grid-area: 2 / 1 / 3 / 2;
  41   top:0;left:0;right:0;
  42   height: 10px;
  43   background: lightgrey;
  44 }
  45
  46 .min-content {
  47   width: -webkit-min-content;
  48   width: min-content;
  49 }
  50 .max-content {
  51   width: -webkit-max-content;
  52   width: max-content;
  53 }
  54 .fit-content {
  55   width: -moz-fit-content;
  56   width: -webkit-fit-content;
  57   width: fit-content;
  58 }
  59 .fill {
  60   width: -moz-available;
  61   width: -webkit-fill-available;
  62   width: fill;
  63 }
  64
  65 .r .min-content {
  66   height: -webkit-min-content;
  67   height: min-content;
  68 }
  69 .r .max-content {
  70   height: -webkit-max-content;
  71   height: max-content;
  72 }
  73 .r .fit-content {
  74   height: -moz-fit-content;
  75   height: -webkit-fit-content;
  76   height: fit-content;
  77 }
  78 .r .fill {
  79   height: -moz-available;
  80   height: -webkit-fill-available;
  81   height: fill;
  82 }
  83 .r y {
  84   grid-area: 1 / 2 / 2 / 3;
  85   top:0;bottom:0;left:0;
  86   width: 10px;
  87   height: auto;
  88 }
  89 br { clear: both; }
  90
  91 x { display:block; width:30px; height:40px; }
  92   </style>
  93 </head>
  94 <body>
  95
  96 <div class="grid c-auto"><y></y><span><x>X</x></span></div>
  97 <div class="grid c-auto"><y></y><span class="min-content"><x>X</x></span></div>
  98 <div class="grid c-auto"><y></y><span class="max-content"><x>X</x></span></div>
  99 <div class="grid c-auto"><y></y><span class="fit-content"><x>X</x></span></div>
 100 <div class="grid c-auto"><y></y><span class="fill"><x>X</x></span></div>
 101
 102 <br>
 103
 104 <div class="grid c-min"><y></y><span><x>X</x></span></div>
 105 <div class="grid c-min"><y></y><span class="min-content"><x>X</x></span></div>
 106 <div class="grid c-min"><y></y><span class="max-content"><x>X</x></span></div>
 107 <div class="grid c-min"><y></y><span class="fit-content"><x>X</x></span></div>
 108 <div class="grid c-min"><y></y><span class="fill"><x>X</x></span></div>
 109
 110 <br>
 111
 112 <div class="grid c-max"><y></y><span><x>X</x></span></div>
 113 <div class="grid c-max"><y></y><span class="min-content"><x>X</x></span></div>
 114 <div class="grid c-max"><y></y><span class="max-content"><x>X</x></span></div>
 115 <div class="grid c-max"><y></y><span class="fit-content"><x>X</x></span></div>
 116 <div class="grid c-max"><y></y><span class="fill"><x>X</x></span></div>
 117
 118 <br>
 119
 120 <div class="grid r r-auto"><y></y><span><x>X</x></span></div>
 121 <div class="grid r r-auto"><y></y><span class="min-content"><x>X</x></span></div>
 122 <div class="grid r r-auto"><y></y><span class="max-content"><x>X</x></span></div>
 123 <div class="grid r r-auto"><y></y><span class="fit-content"><x>X</x></span></div>
 124 <div class="grid r r-auto"><y></y><span class="fill"><x>X</x></span></div>
 125
 126 <br>
 127
 128 <div class="grid r r-min"><y></y><span><x>X</x></span></div>
 129 <div class="grid r r-min"><y></y><span class="min-content"><x>X</x></span></div>
 130 <div class="grid r r-min"><y></y><span class="max-content"><x>X</x></span></div>
 131 <div class="grid r r-min"><y></y><span class="fit-content"><x>X</x></span></div>
 132 <div class="grid r r-min"><y></y><span class="fill"><x>X</x></span></div>
 133
 134 <br>
 135
 136 <div class="grid r r-max"><y></y><span><x>X</x></span></div>
 137 <div class="grid r r-max"><y></y><span class="min-content"><x>X</x></span></div>
 138 <div class="grid r r-max"><y></y><span class="max-content"><x>X</x></span></div>
 139 <div class="grid r r-max"><y></y><span class="fit-content"><x>X</x></span></div>
 140 <div class="grid r r-max"><y></y><span class="fill"><x>X</x></span></div>
 141
 142 <br>
 143
 144 <div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div>
 145 <div class="grid r c-min r-auto"><y></y><span class="min-content"><x>X</x></span></div>
 146 <div class="grid r c-min r-auto"><y></y><span class="max-content"><x>X</x></span></div>
 147 <div class="grid r c-min r-auto"><y></y><span class="fit-content"><x>X</x></span></div>
 148 <div class="grid r c-min r-auto"><y></y><span class="fill"><x>X</x></span></div>
 149
 150 <br>
 151
 152 <div class="grid r c-min r-min"><y></y><span><x>X</x></span></div>
 153 <div class="grid r c-min r-min"><y></y><span class="min-content"><x>X</x></span></div>
 154 <div class="grid r c-min r-min"><y></y><span class="max-content"><x>X</x></span></div>
 155 <div class="grid r c-min r-min"><y></y><span class="fit-content"><x>X</x></span></div>
 156 <div class="grid r c-min r-min"><y></y><span class="fill"><x>X</x></span></div>
 157
 158 <br>
 159
 160 <div class="grid r c-min r-max"><y></y><span><x>X</x></span></div>
 161 <div class="grid r c-min r-max"><y></y><span class="min-content"><x>X</x></span></div>
 162 <div class="grid r c-min r-max"><y></y><span class="max-content"><x>X</x></span></div>
 163 <div class="grid r c-min r-max"><y></y><span class="fit-content"><x>X</x></span></div>
 164 <div class="grid r c-min r-max"><y></y><span class="fill"><x>X</x></span></div>
 165
 166 <br>
 167
 168 <div class="grid r c-max r-auto"><y></y><span><x>X</x></span></div>
 169 <div class="grid r c-max r-auto"><y></y><span class="min-content"><x>X</x></span></div>
 170 <div class="grid r c-max r-auto"><y></y><span class="max-content"><x>X</x></span></div>
 171 <div class="grid r c-max r-auto"><y></y><span class="fit-content"><x>X</x></span></div>
 172 <div class="grid r c-max r-auto"><y></y><span class="fill"><x>X</x></span></div>
 173
 174 <br>
 175
 176 <div class="grid r c-max r-min"><y></y><span><x>X</x></span></div>
 177 <div class="grid r c-max r-min"><y></y><span class="min-content"><x>X</x></span></div>
 178 <div class="grid r c-max r-min"><y></y><span class="max-content"><x>X</x></span></div>
 179 <div class="grid r c-max r-min"><y></y><span class="fit-content"><x>X</x></span></div>
 180 <div class="grid r c-max r-min"><y></y><span class="fill"><x>X</x></span></div>
 181
 182 <br>
 183
 184 <div class="grid r c-max r-max"><y></y><span><x>X</x></span></div>
 185 <div class="grid r c-max r-max"><y></y><span class="min-content"><x>X</x></span></div>
 186 <div class="grid r c-max r-max"><y></y><span class="max-content"><x>X</x></span></div>
 187 <div class="grid r c-max r-max"><y></y><span class="fit-content"><x>X</x></span></div>
 188 <div class="grid r c-max r-max"><y></y><span class="fill"><x>X</x></span></div>
 189
 190 </body></html>