layout/reftests/css-grid/grid-max-sizing-flex-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: Testing track sizing</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
  10   <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-track-sizing">
  11   <link rel="match" href="grid-max-sizing-flex-004-ref.html">
  12   <style type="text/css">
  13 body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
  14
  15 body { width: 800px; }
  16 .grid {
  17   display: grid;
  18   border: 3px dashed blue;
  19   margin-bottom:20px;
  20   float: left;
  21   clear: left;
  22 }
  23 .flex {
  24   grid-auto-rows: minmax(0,1fr);
  25   grid-auto-columns: minmax(0,1fr);
  26 }
  27 .flex10 {
  28   grid-auto-rows: minmax(0,1fr);
  29   grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)
  30                          minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)
  31                          minmax(0,1fr) minmax(0,1fr);
  32 }
  33 .mm {
  34   grid-auto-rows: minmax(min-content,max-content);
  35   grid-auto-columns: minmax(min-content,max-content);
  36 }
  37 .zero {
  38   grid-auto-rows: minmax(0,0);
  39   grid-auto-columns: minmax(0,0);
  40 }
  41
  42 .c1 { grid-column: 1 / span 2; min-height:10px; min-width:0px;  }
  43 .c2 { grid-column: 2 / span 3; min-height:20px; min-width:10px; }
  44 .c3 { grid-column: 3 / span 1; min-height:0;    min-width:20px; }
  45 .r1 { grid-row: 1; }
  46 .x1 { grid-row: 1; min-height:10px; min-width:0px; border-style:none; }
  47
  48 span {
  49   background: gray;
  50   border-style: solid;
  51   border-width: 1px 3px 5px 7px;
  52 }
  53
  54 x { display:inline-block; height:10px; width:18px; }
  55   </style>
  56 </head>
  57 <body>
  58
  59 <div class="grid flex" style="width:0;height:0;"></div>
  60 <div class="grid flex" style="width:1px;height:1px;"></div>
  61 <div class="grid mm" style="width:0;height:0;"></div>
  62 <div class="grid mm" style="width:1px;height:1px;"></div>
  63 <div class="grid zero" style="width:0;height:0;"></div>
  64 <div class="grid zero" style="width:1px;height:1px;"></div>
  65
  66 <!-- TODO: fails due to broken align:stretch
  67 <div class="grid flex" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
  68 <div class="grid flex" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
  69 -->
  70 <div class="grid mm" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
  71 <div class="grid mm" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
  72 <!-- TODO: fails due to broken align:stretch
  73 <div class="grid zero" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
  74 <div class="grid zero" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div>
  75 -->
  76
  77 <div class="grid flex">
  78 <span class="c1 r1"><x></x></span><span class="c1 r1"><x></x></span>
  79 <span class="c1 r1"><x></x></span><span class="c1 r1"><x></x></span>
  80 </div>
  81
  82 <div class="grid flex10">
  83 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
  84 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
  85 </div>
  86
  87 <div class="grid flex10" style="width:0.010px; clear:none;">
  88 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
  89 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
  90 </div>
  91
  92 <div class="grid flex10" style="width:0.020px; clear:none;">
  93 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
  94 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
  95 </div>
  96
  97 <div class="grid flex10" style="width:0.040px; clear:none;">
  98 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
  99 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 100 </div>
 101
 102 <div class="grid flex10" style="width:0.15px; clear:none;">
 103 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 104 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 105 </div>
 106
 107 <div class="grid flex10" style="width:0.18px; clear:none;">
 108 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 109 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 110 </div>
 111
 112 <div class="grid flex10" style="width:0.19px; clear:none;">
 113 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 114 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 115 </div>
 116
 117 <div class="grid flex10" style="width:1px; clear:none;">
 118 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 119 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 120 </div>
 121
 122 <div class="grid flex10" style="width:2px; clear:none;">
 123 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 124 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 125 </div>
 126
 127 <div class="grid flex10" style="width:3px; clear:none;">
 128 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 129 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 130 </div>
 131
 132 <div class="grid flex10" style="width:4px; clear:none;">
 133 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 134 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 135 </div>
 136
 137 <div class="grid flex10" style="width:5px; clear:none;">
 138 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 139 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 140 </div>
 141
 142 <div class="grid flex10" style="width:6px; clear:none;">
 143 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 144 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 145 </div>
 146
 147 <div class="grid flex10" style="width:7px; clear:none;">
 148 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 149 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 150 </div>
 151
 152 <div class="grid flex10" style="width:8px; clear:none;">
 153 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 154 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 155 </div>
 156
 157 <div class="grid flex10" style="width:9px; clear:none;">
 158 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 159 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 160 </div>
 161
 162 <div class="grid flex10" style="width:10px; clear:none;">
 163 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 164 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 165 </div>
 166
 167 <div class="grid flex10" style="width:11px; clear:none;">
 168 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 169 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span>
 170 </div>
 171
 172 </body>
 173 </html>