src/third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-columns.html

   1 <!DOCTYPE html>
   2 <html>
   3 <script>
   4 if (window.testRunner)
   5     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
   6 </script>
   7 <link href="resources/grid.css" rel="stylesheet">
   8 <style>
   9 .gridMaxMaxContent {
  10     grid-template-columns: minmax(10px, max-content) minmax(10px, 1fr);
  11     grid-template-rows: 50px;
  12 }
  13
  14 .gridMinMinContent {
  15     grid-template-columns: minmax(10px, 1fr) minmax(min-content, 50px);
  16     grid-template-rows: 50px;
  17 }
  18
  19 .gridWithIntrinsicSizeBiggerThanFlex {
  20     grid-template-columns: minmax(min-content, 0.5fr) minmax(18px, 2fr);
  21     grid-template-rows: 50px;
  22 }
  23
  24 .gridShrinkBelowItemsIntrinsicSize {
  25     grid-template-columns: minmax(0px, 1fr) minmax(0px, 2fr);
  26     grid-template-rows: 50px;
  27 }
  28
  29 .gridWithNonFlexingItems {
  30     grid-template-columns: 40px minmax(min-content, 1fr) auto minmax(20px, 2fr);
  31     grid-template-rows: 50px;
  32 }
  33
  34 .firstRowThirdColumn {
  35     grid-column: 3;
  36     grid-row: 1;
  37 }
  38 .firstRowFourthColumn {
  39     grid-column: 4;
  40     grid-row: 1;
  41 }
  42 </style>
  43 <script src="../../resources/check-layout.js"></script>
  44 <body onload="checkLayout('.grid');">
  45
  46 <p>Test that resolving auto tracks on grid items works properly.</p>
  47
  48 <div class="constrainedContainer">
  49     <div class="grid gridMaxMaxContent">
  50         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XXXXX</div>
  51         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
  52     </div>
  53 </div>
  54
  55 <!-- Allow the extra logical space distribution to occur. -->
  56 <div style="width: 40px; height: 10px">
  57     <div class="grid gridMaxMaxContent">
  58         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="30" data-expected-height="50">XXXXX</div>
  59         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
  60     </div>
  61 </div>
  62
  63 <div style="width: 110px; height: 10px;">
  64     <div class="grid gridMaxMaxContent">
  65         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
  66         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="60" data-expected-height="50"></div>
  67     </div>
  68 </div>
  69
  70
  71 <div class="constrainedContainer">
  72     <div class="grid gridMinMinContent">
  73         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XX XX</div>
  74         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50">XX XX</div>
  75     </div>
  76 </div>
  77
  78 <!-- Allow the extra logical space distribution to occur. -->
  79 <div style="width: 40px; height: 10px">
  80     <div class="grid gridMinMinContent">
  81         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XX XX</div>
  82         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="30" data-expected-height="50">XX XX</div>
  83     </div>
  84 </div>
  85
  86 <div style="width: 110px; height: 10px;">
  87     <div class="grid gridMinMinContent">
  88         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60" data-expected-height="50">XX XX</div>
  89         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="50">XX XX</div>
  90     </div>
  91 </div>
  92
  93
  94 <div style="width: 220px; height: 10px;">
  95     <div class="grid gridWithIntrinsicSizeBiggerThanFlex">
  96         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="200" data-expected-height="50">
  97             <div style="display: inline-block; width: 200px;"></div>
  98         </div>
  99         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div>
 100     </div>
 101 </div>
 102
 103
 104 <div style="width: 120px; height: 10px;">
 105     <div class="grid gridShrinkBelowItemsIntrinsicSize">
 106         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50">
 107             <div style="display: inline-block; width: 200px;"></div>
 108         </div>
 109         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50">XXXXXXXXXX</div>
 110     </div>
 111 </div>
 112
 113
 114 <!-- No space available for the <flex> -->
 115 <div style="width: 220px; height: 10px;">
 116     <div class="grid gridWithNonFlexingItems">
 117         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
 118         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50">
 119             <div style="display: inline-block; width: 100px;"></div>
 120         </div>
 121         <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="100" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div>
 122         <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="20" data-expected-height="50"></div>
 123     </div>
 124 </div>
 125
 126 <!-- The second track should be sized after the min-content as the <flex> value should be too small. -->
 127 <div style="width: 380px; height: 10px;">
 128     <div class="grid gridWithNonFlexingItems">
 129         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
 130         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50">
 131             <div style="display: inline-block; width: 100px;"></div>
 132         </div>
 133         <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div>
 134         <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="40" data-expected-height="50"></div>
 135     </div>
 136 </div>
 137
 138 <div style="width: 400px; height: 10px;">
 139     <div class="grid gridWithNonFlexingItems">
 140         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
 141         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50">
 142             <div style="display: inline-block; width: 100px;"></div>
 143         </div>
 144         <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div>
 145         <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="60" data-expected-height="50"></div>
 146     </div>
 147 </div>
 148
 149 </body>
 150 </html>