layout/reftests/css-grid/grid-item-auto-min-size-clamp-001.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</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-001-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-right: 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 span {
  68   grid-area: 1 / 1;
  69   font-size: 48px;
  70   background: grey;
  71   background-clip: content-box;
  72   border: 1px solid;
  73   padding: 1px 3px 5px 7px;
  74   margin: 3px 5px 7px 1px;
  75 }
  76 .span2 {
  77   grid-area: 1 / 1 / span 2 / span 2;
  78 }
  79 .larger .grid .span2 {
  80   font-size: 32px;
  81 }
  82
  83 x {
  84   grid-area: 1 / 1;
  85   min-width: 0;
  86   min-height: 0;
  87   align-self: stretch;
  88   justify-self: stretch;
  89   background: cyan;
  90 }
  91 c {
  92   display: block;
  93   width: 20px;
  94   height: 32px;
  95 }
  96
  97 br {
  98   clear: both;
  99 }
 100   </style>
 101 </head>
 102 <body>
 103
 104 <div id="tests">
 105 <div class="grid"><x></x><span><c>X</c></span></div>
 106 <div class="grid definite"><x></x><span><c>X</c></span></div>
 107 <div class="grid"><x></x><span class="span2"><c>X</c></span></div>
 108 <div class="grid definite"><x></x><span class="span2"><c>X</c></span></div>
 109
 110 <div class="grid sz"><x></x><span><c>X</c></span></div>
 111 <div class="grid sz definite"><x></x><span><c>X</c></span></div>
 112 <div class="grid sz"><x></x><span class="span2"><c>X</c></span></div>
 113 <div class="grid sz definite"><x></x><span class="span2"><c>X</c></span></div>
 114
 115 <br>
 116
 117 <div class="grid min"><x></x><span><c>X</c></span></div>
 118 <div class="grid min"><x></x><span class="span2"><c>X</c></span></div>
 119 <div class="grid sz min"><x></x><span><c>X</c></span></div>
 120 <div class="grid sz min"><x></x><span class="span2"><c>X</c></span></div>
 121
 122 <div class="grid max"><x></x><span><c>X</c></span></div>
 123 <div class="grid max"><x></x><span class="span2"><c>X</c></span></div>
 124 <div class="grid sz max"><x></x><span><c>X</c></span></div>
 125 <div class="grid sz max"><x></x><span class="span2"><c>X</c></span></div>
 126
 127 <br>
 128
 129 </div>
 130
 131 <script>
 132 var tests = document.getElementById('tests');
 133
 134 var n = tests.cloneNode(true);
 135 var wrap = document.createElement('div');
 136 wrap.className = 'larger';
 137 wrap.appendChild(n);
 138 document.body.appendChild(wrap);
 139
 140 var n = tests.cloneNode(true);
 141 var wrap = document.createElement('div');
 142 wrap.className = 'stretch';
 143 wrap.appendChild(n);
 144 document.body.appendChild(wrap);
 145
 146 var n = tests.cloneNode(true);
 147 var wrap = document.createElement('div');
 148 wrap.className = 'stretch larger';
 149 wrap.appendChild(n);
 150 document.body.appendChild(wrap);
 151
 152 </script>
 153
 154 </body></html>