third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items.html

   1 <!DOCTYPE html>
   2 <head>
   3 <link href="resources/grid.css" rel="stylesheet"/>
   4 <style>
   5  .grid {
   6      font: 10px/1 Ahem;
   7  }
   8  .gridAutoAndAuto {
   9      grid-template-columns: auto auto;
  10  }
  11  .gridFixedMinContentFixedMaxContent {
  12     grid-template-columns: minmax(50px, min-content) minmax(40px, max-content);
  13  }
  14  .gridMaxContentAndAuto {
  15      grid-template-columns: max-content auto;
  16  }
  17  .gridMinContentAndAuto {
  18      grid-template-columns: min-content auto;
  19  }
  20 </style>
  21 <script src="../../resources/js-test.js"></script>
  22 </head>
  23 <body>
  24 <div class="grid gridAutoAndAuto" id="gridAutoAndAuto">
  25     <div class="firstRowFirstColumn">X</div>
  26     <div class="firstRowBothColumn">XXX XX XXX</div>
  27 </div>
  28
  29 <div class="grid gridAutoAndAuto" id="gridAutoAndAutoReversed">
  30     <div class="firstRowSecondColumn">X</div>
  31     <div class="firstRowBothColumn">XXX XX XXX</div>
  32 </div>
  33
  34 <div class="grid gridFixedMinContentFixedMaxContent" id="gridFixedMinContentFixedMaxContent">
  35     <div class="sizedToGridArea firstRowFirstColumn"></div>
  36     <div class="firstRowBothColumn">XXX XX XXX</div>
  37 </div>
  38
  39 <div class="grid gridFixedMinContentFixedMaxContent" id="gridFixedMinContentFixedMaxContentTwoEmptyChildren">
  40     <div class="sizedToGridArea firstRowFirstColumn"></div>
  41     <div class="sizedToGridArea firstRowSecondColumn"></div>
  42     <div class="firstRowBothColumn">XXX XX XXX</div>
  43 </div>
  44
  45 <div class="grid gridFixedMinContentFixedMaxContent" id="gridFixedMinContentFixedMaxContentFixedSizeChild">
  46     <div class="firstRowFirstColumn">XXXXXX</div>
  47     <div class="firstRowBothColumn">XXX XX XXX</div>
  48 </div>
  49
  50 <div class="grid gridMaxContentAndAuto" id="gridMaxContentAndAuto">
  51     <div class="firstRowFirstColumn">X</div>
  52     <div class="firstRowBothColumn">XXX XX XXX</div>
  53 </div>
  54
  55 <div class="grid gridMaxContentAndAuto" id="gridMaxContentAndAutoReversed">
  56     <div class="firstRowSecondColumn">X</div>
  57     <div class="firstRowBothColumn">XXX XX XXX</div>
  58 </div>
  59
  60 <div class="grid gridMinContentAndAuto" id="gridMinContentAndAuto">
  61     <div class="firstRowFirstColumn">X</div>
  62     <div class="firstRowBothColumn">XXX XX XXX</div>
  63 </div>
  64
  65 <div class="grid gridMinContentAndAuto" id="gridMinContentAndAutoReversed">
  66     <div class="firstRowSecondColumn">X</div>
  67     <div class="firstRowBothColumn">XXX XX XXX</div>
  68 </div>
  69
  70 <script>
  71 function testGridColumnsValues(id, computedColumnValue)
  72 {
  73     shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-columns')", computedColumnValue);
  74 }
  75
  76 description('This test checks that content sized tracks are initialized using non-spanning grid items.');
  77
  78 testGridColumnsValues("gridAutoAndAuto", "10px 90px");
  79 testGridColumnsValues("gridAutoAndAutoReversed", "90px 10px");
  80 testGridColumnsValues("gridFixedMinContentFixedMaxContent", "50px 50px");
  81 testGridColumnsValues("gridFixedMinContentFixedMaxContentTwoEmptyChildren", "50px 50px");
  82 testGridColumnsValues("gridFixedMinContentFixedMaxContentFixedSizeChild", "60px 40px");
  83 testGridColumnsValues("gridMaxContentAndAuto", "80px 20px");
  84 testGridColumnsValues("gridMaxContentAndAutoReversed", "90px 10px");
  85 testGridColumnsValues("gridMinContentAndAuto", "10px 90px");
  86 testGridColumnsValues("gridMinContentAndAutoReversed", "20px 80px");
  87 </script>
  88 </body>