src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-sized-columns-resolution.html

   1 <html>
   2 <head>
   3 <link href="resources/grid.css" rel="stylesheet"/>
   4 <style>
   5  .grid {
   6      font: 10px/1 Ahem;
   7  }
   8  .gridMinContentFixedAndAuto {
   9      grid-template-columns: minmax(min-content, 15px) auto;
  10  }
  11  .gridMaxContentFixedAndAuto {
  12      grid-template-columns: minmax(max-content, 15px) auto;
  13  }
  14  .gridAutoAndAuto {
  15      grid-template-columns: auto auto;
  16  }
  17  .gridMinContentAndMinContentFixed {
  18      grid-template-columns: min-content minmax(min-content, 30px);
  19  }
  20  .gridMinContentAndMaxContentFixed {
  21      grid-template-columns: min-content minmax(max-content, 30px);
  22  }
  23  .gridMaxContentAndMinContent {
  24      grid-template-columns: max-content min-content;
  25  }
  26  .gridFixedMinContentAndMaxContent {
  27      grid-template-columns: minmax(10px, min-content) max-content;
  28  }
  29  .gridFixedMaxContentAndMinContent {
  30      grid-template-columns: minmax(10px, max-content) min-content;
  31  }
  32  .gridAutoMinContent {
  33      grid-template-columns: auto min-content;
  34  }
  35  .gridAutoMaxContent {
  36      grid-template-columns: auto max-content;
  37  }
  38  .gridMaxContentAndMinContentFixed {
  39      grid-template-columns: max-content minmax(min-content, 35px);
  40  }
  41  .gridMaxContentAndMaxContentFixed {
  42      grid-template-columns: max-content minmax(max-content, 35px);
  43  }
  44
  45 </style>
  46 <script src="../../resources/js-test.js"></script>
  47 </head>
  48 <body>
  49 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAuto">
  50   <div class="firstRowBothColumn">XXXX XXXX</div>
  51 </div>
  52
  53 <div class="grid gridAutoAndAuto" id="gridAutoAndAuto">
  54   <div class="firstRowBothColumn">XXXX XXXX</div>
  55 </div>
  56
  57 <div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinContentFixed">
  58     <div class="firstRowBothColumn">XXXX XXXX</div>
  59 </div>
  60
  61 <div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContent">
  62     <div class="firstRowBothColumn">XXXX XXXX</div>
  63 </div>
  64
  65 <div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMaxContent">
  66     <div class="firstRowBothColumn">XXXX XXXX</div>
  67 </div>
  68
  69 <div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMinContent">
  70     <div class="firstRowBothColumn">XXXX XXXX</div>
  71 </div>
  72
  73 <div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxContentFixed">
  74     <div class="firstRowBothColumn">XXXX XXXX</div>
  75 </div>
  76
  77 <div class="constrainedContainer">
  78     <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAuto">
  79         <div class="firstRowBothColumn">XXXX XXXX</div>
  80     </div>
  81 </div>
  82
  83 <div class="grid gridAutoMinContent" id="gridAutoMinContent">
  84     <div class="firstRowBothColumn">XXXX XXXX</div>
  85 </div>
  86
  87 <div class="grid gridAutoMaxContent" id="gridAutoMaxContent">
  88     <div class="firstRowBothColumn">XXXX XXXX</div>
  89 </div>
  90
  91 <div class="constrainedContainer">
  92 <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixed">
  93     <div class="firstRowBothColumn">XXXX XXXX</div>
  94 </div>
  95 </div>
  96
  97 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixed">
  98     <div class="firstRowBothColumn">XXXX XXXX</div>
  99 </div>
 100
 101 <script>
 102    function testGridColumnsValues(id, computedColumnValue)
 103    {
 104        shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-columns')", computedColumnValue);
 105    }
 106
 107    testGridColumnsValues("gridMinContentFixedAndAuto", "15px 75px");
 108    testGridColumnsValues("gridAutoAndAuto", "45px 45px");
 109    testGridColumnsValues("gridMinContentAndMinContentFixed", "20px 30px");
 110    testGridColumnsValues("gridMaxContentAndMinContent", "70px 20px");
 111    testGridColumnsValues("gridFixedMinContentAndMaxContent", "10px 80px");
 112    testGridColumnsValues("gridFixedMaxContentAndMinContent", "60px 30px");
 113    testGridColumnsValues("gridMinContentAndMaxContentFixed", "20px 70px");
 114    testGridColumnsValues("gridMaxContentFixedAndAuto", "65px 25px");
 115    testGridColumnsValues("gridAutoMinContent", "70px 20px");
 116    testGridColumnsValues("gridAutoMaxContent", "20px 70px");
 117    testGridColumnsValues("gridMaxContentAndMinContentFixed", "70px 20px");
 118    testGridColumnsValues("gridMaxContentAndMaxContentFixed", "55px 35px");
 119 </script>
 120 </body>
 121 </html>