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