src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script>
   5     if (window.testRunner)
   6         testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
   7 </script>
   8 <link href="resources/grid.css" rel=stylesheet>
   9 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel=stylesheet>
  10 <style>
  11 .gridMinContentFixed {
  12     grid-template-columns: minmax(min-content, 40px) minmax(min-content, 40px);
  13     grid-template-rows: 10px;
  14     font: 10px/1 Ahem;
  15 }
  16
  17 .gridFixedMinContent {
  18     grid-template-columns: minmax(30px, min-content) minmax(30px, min-content);
  19     grid-template-rows: 10px;
  20     font: 10px/1 Ahem;
  21 }
  22
  23 .gridFixedMaxContent {
  24     grid-template-columns: minmax(40px, max-content) minmax(40px, max-content);
  25     grid-template-rows: 10px;
  26     font: 10px/1 Ahem;
  27 }
  28
  29 .gridFixedFixed {
  30     grid-template-columns: minmax(30px, 40px) minmax(30px, 40px);
  31     grid-template-rows: 10px;
  32 }
  33
  34 .gridAutoContent {
  35     grid-template-columns: auto auto;
  36     grid-template-rows: 10px;
  37     font: 10px/1 Ahem;
  38 }
  39
  40 .gridFixedFraction {
  41     grid-template-columns: minmax(10px, 1fr) minmax(2fr, 20px);
  42     grid-template-rows: 10px;
  43 }
  44
  45 .margins {
  46     margin: 10px 20px 30px 40px;
  47 }
  48 </style>
  49 </head>
  50 <script src="../../resources/check-layout.js"></script>
  51 <body onload="checkLayout('.grid')">
  52 <body>
  53 <p>This test checks that the grid element's preferred logical widths are properly computed with different combinations of minmax().</p>
  54 <div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="40">
  55     <div class="firstRowFirstColumn">XX XX XX</div>
  56     <div class="firstRowSecondColumn">XX XX XX</div>
  57 </div>
  58 <div class="grid gridMinContentFixed max-content" data-expected-height="10" data-expected-width="80">
  59     <div class="firstRowFirstColumn">XX XX XX</div>
  60     <div class="firstRowSecondColumn">XX XX XX</div>
  61 </div>
  62 <div class="grid gridFixedMinContent min-content" data-expected-height="10" data-expected-width="60">
  63     <div class="firstRowFirstColumn">XXXXX XXXXX</div>
  64     <div class="firstRowSecondColumn">XXXXX XXXXX</div>
  65 </div>
  66 <div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="100">
  67     <div class="firstRowFirstColumn">XXXXX XXXXX</div>
  68     <div class="firstRowSecondColumn">XXXXX XXXXX</div>
  69 </div>
  70 <div class="grid gridFixedMaxContent min-content" data-expected-height="10" data-expected-width="80">
  71     <div class="firstRowFirstColumn">XX XX XX</div>
  72     <div class="firstRowSecondColumn">XX XX XX</div>
  73 </div>
  74 <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="160">
  75     <div class="firstRowFirstColumn">XX XX XX</div>
  76     <div class="firstRowSecondColumn">XX XX XX</div>
  77 </div>
  78 <div class="grid gridFixedFixed min-content" data-expected-height="10" data-expected-width="60"></div>
  79 <div class="grid gridFixedFixed max-content" data-expected-height="10" data-expected-width="80"></div>
  80 <div class="grid gridAutoContent min-content" data-expected-height="10" data-expected-width="40">
  81     <div class="firstRowFirstColumn">XX XX XX</div>
  82     <div class="firstRowSecondColumn">XX XX XX</div>
  83 </div>
  84 <div class="grid gridAutoContent max-content" data-expected-height="10" data-expected-width="160">
  85     <div class="firstRowFirstColumn">XX XX XX</div>
  86     <div class="firstRowSecondColumn">XX XX XX</div>
  87 </div>
  88
  89 <div class="grid gridFixedFraction min-content" data-expected-height="10" data-expected-width="10"></div>
  90 <div class="grid gridFixedFraction max-content" data-expected-height="10" data-expected-width="30"></div>
  91
  92 <!-- Now with margin on one of the grid items. -->
  93 <div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="100">
  94     <div class="firstRowFirstColumn">XX XX XX</div>
  95     <div class="firstRowSecondColumn margins">XX XX XX</div>
  96 </div>
  97 <div class="grid gridMinContentFixed max-content" data-expected-height="10" data-expected-width="120">
  98     <div class="firstRowFirstColumn margins">XX XX XX</div>
  99     <div class="firstRowSecondColumn">XX XX XX</div>
 100 </div>
 101 <div class="grid gridFixedMinContent min-content" data-expected-height="10" data-expected-width="60">
 102     <div class="firstRowFirstColumn">XXXXX XXXXX</div>
 103     <div class="firstRowSecondColumn margins">XXXXX XXXXX</div>
 104 </div>
 105 <div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="160">
 106     <div class="firstRowFirstColumn margins">XXXXX XXXXX</div>
 107     <div class="firstRowSecondColumn">XXXXX XXXXX</div>
 108 </div>
 109 <div class="grid gridFixedMaxContent min-content" data-expected-height="10" data-expected-width="80">
 110     <div class="firstRowFirstColumn">XX XX XX</div>
 111     <div class="firstRowSecondColumn margins">XX XX XX</div>
 112 </div>
 113 <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="220">
 114     <div class="firstRowFirstColumn margins">XX XX XX</div>
 115     <div class="firstRowSecondColumn">XX XX XX</div>
 116 </div>
 117
 118 <!-- Spanning cells -->
 119 <div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="20">
 120     <div class="firstRowBothColumn">XX XX XX</div>
 121 </div>
 122 <div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="80">
 123     <div class="firstRowBothColumn">XXXXX XXXXX</div>
 124     <div class="firstRowSecondColumn">XXXXX XXXXX</div>
 125 </div>
 126 <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="80">
 127     <div class="firstRowBothColumn">XX XX XX</div>
 128     <div class="firstRowBothColumn">XX XX XX</div>
 129 </div>
 130 <div class="grid gridAutoContent min-content" data-expected-height="10" data-expected-width="20">
 131     <div class="firstRowFirstColumn">XX XX XX</div>
 132     <div class="firstRowBothColumn">XX XX XX</div>
 133 </div>
 134 <div class="grid gridAutoContent max-content" data-expected-height="10" data-expected-width="120">
 135     <div class="firstRowBothColumn">XX XX XX</div>
 136     <div class="firstRowSecondColumn">XX XX XX</div>
 137 </div>
 138
 139 </body>
 140 </html>