layout/reftests/css-grid/grid-item-intrinsic-size-normal-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: stretching intrinsic size items with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
  10   <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
  11   <link rel="match" href="grid-item-intrinsic-ratio-normal-003-ref.html">
  12   <style type="text/css">
  13 * { vertical-align: bottom; }
  14 .grid {
  15   display: inline-grid;
  16   border: 3px solid grey;
  17   grid: 32px / 4px;
  18   margin-right:20px;
  19 }
  20 .r { grid: 4px / 32px; }
  21
  22 button {
  23   border: 1px solid;
  24   padding: 0;
  25   margin: 0;
  26   background: lightgrey;
  27 }
  28
  29 .start {align-self:start; justify-self:start}
  30 .na {align-self:normal; justify-self:start}
  31 .sa {align-self:stretch; justify-self:start}
  32 .an {align-self:start; justify-self:normal}
  33 .as {align-self:start; justify-self:stretch}
  34 .w20 { width: 20px }
  35 .mw20 { min-width: 20px }
  36 .mxw10 { max-width: 10px }
  37 .mxw2 { max-width: 2px }
  38 .mw0 { min-width: 0px }
  39
  40 .h20 { height: 20px }
  41 .mh20 { min-height: 20px }
  42 .mxh10 { max-height: 10px }
  43 .mxh2 { max-height: 2px }
  44 .mh0 { min-height: 0px }
  45
  46   </style>
  47 </head>
  48 <body>
  49
  50 <div class="grid r"><button></button></div>
  51 <div class="grid r"><button class="start"></button></div>
  52 <div class="grid r"><button class="sa"></button></div>
  53 <div class="grid r"><button class="sa mxw10"></button></div>
  54 <div class="grid r"><button class="na"></button></div>
  55 <div class="grid r"><button class="na mxw2"></button></div>
  56
  57 <pre><!--min-height:20px--></pre>
  58 <div class="grid r"><button class="mh20"></button></div>
  59 <div class="grid r"><button class="mh20 mxw10"></button></div>
  60 <div class="grid r"><button class="start mh20"></button></div>
  61 <div class="grid r"><button class="start mh20 mxw10"></button></div>
  62 <div class="grid r"><button class="sa mh20"></button></div>
  63 <div class="grid r"><button class="sa mh20 mxw10"></button></div>
  64 <div class="grid r"><button class="na mh20"></button></div>
  65 <div class="grid r"><button class="na mh20 mxw10"></button></div>
  66
  67 <pre><!--min-height:0--></pre>
  68 <div class="grid r"><button class="mh0"></button></div>
  69 <div class="grid r"><button class="mh0 mxw10"></button></div>
  70 <div class="grid r"><button class="start mh0"></button></div>
  71 <div class="grid r"><button class="start mh0 mxw10"></button></div>
  72 <div class="grid r"><button class="sa mh0"></button></div>
  73 <div class="grid r"><button class="sa mh0 mxw10"></button></div>
  74 <div class="grid r"><button class="na mh0"></button></div>
  75 <div class="grid r"><button class="na mh0 mxw2"></button></div>
  76
  77 <pre><!----></pre>
  78
  79 <div class="grid"><button></button></div>
  80 <div class="grid"><button class="mxw2"></button></div>
  81 <div class="grid"><button class="start"></button></div>
  82 <div class="grid"><button class="start mxw2"></button></div>
  83 <div class="grid"><button class="sa"></button></div>
  84 <div class="grid"><button class="sa mxw2"></button></div>
  85 <div class="grid"><button class="na"></button></div>
  86 <div class="grid"><button class="na mxw2"></button></div>
  87
  88 <pre><!--min-width:20px--></pre>
  89 <div class="grid"><button class="mw20"></button></div>
  90 <div class="grid"><button class="mw20 mxh10"></button></div>
  91 <div class="grid"><button class="start mw20"></button></div>
  92 <div class="grid"><button class="start mw20 mxh10"></button></div>
  93 <div class="grid"><button class="sa mw20"></button></div>
  94 <div class="grid"><button class="sa mw20 mxh10"></button></div>
  95 <div class="grid"><button class="na mw20"></button></div>
  96 <div class="grid"><button class="na mw20 mxh10"></button></div>
  97
  98 <pre><!--min-width:0--></pre>
  99 <div class="grid"><button class="mw0"></button></div>
 100 <div class="grid"><button class="mw0 mxh10"></button></div>
 101 <div class="grid"><button class="start mw0"></button></div>
 102 <div class="grid"><button class="start mw0 mxh10"></button></div>
 103 <div class="grid"><button class="sa mw0"></button></div>
 104 <div class="grid"><button class="sa mw0 mxh10"></button></div>
 105 <div class="grid"><button class="na mw0"></button></div>
 106 <div class="grid"><button class="na mw0 mxh10"></button></div>
 107
 108 <pre><!--width:20px--></pre>
 109
 110 <div class="grid r"><button class="w20"></button></div>
 111 <div class="grid r"><button class="w20 mxh10"></button></div>
 112 <div class="grid r"><button class="start w20"></button></div>
 113 <div class="grid r"><button class="start w20 mxh10"></button></div>
 114 <div class="grid r"><button class="sa w20"></button></div>
 115 <div class="grid r"><button class="sa w20 mxh2"></button></div>
 116 <div class="grid r"><button class="na w20"></button></div>
 117 <div class="grid r"><button class="na w20 mxh2"></button></div>
 118
 119 <pre><!--width:20px--></pre>
 120
 121 <div class="grid"><button class="start w20"></button></div>
 122 <div class="grid"><button class="start w20 mxh10"></button></div>
 123 <div class="grid"><button class="start w20"></button></div>
 124 <div class="grid"><button class="start w20 mxh10"></button></div>
 125 <div class="grid"><button class="sa w20"></button></div>
 126 <div class="grid"><button class="sa w20 mxh10"></button></div>
 127 <div class="grid"><button class="na w20"></button></div>
 128 <div class="grid"><button class="na w20 mxh10"></button></div>
 129
 130 <pre><!--height:20px--></pre>
 131
 132 <div class="grid r"><button class="h20"></button></div>
 133 <div class="grid r"><button class="h20 mxw10"></button></div>
 134 <div class="grid r"><button class="start h20"></button></div>
 135 <div class="grid r"><button class="start h20 mxw10"></button></div>
 136 <div class="grid r"><button class="as h20"></button></div>
 137 <div class="grid r"><button class="as h20 mxw10"></button></div>
 138 <div class="grid r"><button class="an h20"></button></div>
 139 <div class="grid r"><button class="an h20 mxw10"></button></div>
 140
 141 <pre><!--height:20px--></pre>
 142
 143 <div class="grid"><button class="h20"></button></div>
 144 <div class="grid"><button class="h20 mxw2"></button></div>
 145 <div class="grid"><button class="start h20"></button></div>
 146 <div class="grid"><button class="start h20 mxw10"></button></div>
 147 <div class="grid"><button class="as h20"></button></div>
 148 <div class="grid"><button class="as h20 mxw2"></button></div>
 149 <div class="grid"><button class="an h20"></button></div>
 150 <div class="grid"><button class="an h20 mxw10"></button></div>
 151
 152
 153 <!--  For generating button size results in -ref file
 154 <script>
 155 document.body.clientHeight;
 156 var buttons = document.querySelectorAll('button');
 157 var s = '  [\n';
 158 for (var i = 0; i < buttons.length; ++i) {
 159   var cs = window.getComputedStyle(buttons[i]);
 160   s += "  ['"+ cs['width'] + "', '" + cs['height'] + "'],\n";
 161 }
 162 s += ']';
 163 console.log(s)
 164 </script>
 165 -->
 166
 167 </body>
 168 </html>