src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .grid {
   7     /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
   8     width: 800px;
   9     height: 600px;
  10 }
  11
  12 .gridItem {
  13     grid-column: 1;
  14     grid-row: 1;
  15     width: 33px;
  16     height: 44px;
  17 }
  18
  19 .gridItem2 {
  20     grid-column: 2;
  21     grid-row: 2;
  22     width: 66px;
  23     height: 77px;
  24 }
  25
  26 .singleSingleTrackRepeat {
  27     grid-template-rows: repeat(1, 18px);
  28     grid-template-columns: repeat(1, 15%);
  29 }
  30
  31 .twoSingleTrackRepeat {
  32     grid-template-rows: repeat(2, auto);
  33     grid-template-columns: repeat(2, minmax(15px, 50%));
  34 }
  35
  36 .twoDoubleTrackRepeat {
  37     grid-template-rows: repeat(2, minmax(5px, 10px)  auto);
  38     grid-template-columns: repeat(2, auto minmax(100px, 120px));
  39 }
  40
  41 .twoDoubleTrackWithNamedGridLineRepeat {
  42     grid-template-rows: repeat(2, 10px (start) auto (end));
  43     grid-template-columns: repeat(2, auto (middle) 250px (end));
  44 }
  45
  46 .twoDoubleTrackWithTrailingNamedGridLineRepeat {
  47     grid-template-rows: repeat(2, (before) 10px);
  48     grid-template-columns: repeat(2, (before) auto);
  49 }
  50
  51 .trailingNamedGridLineRepeat {
  52     grid-template-rows: repeat(1, 10px) (end);
  53     grid-template-columns: repeat(1, 250px) (end);
  54 }
  55
  56 .leadingNamedGridLineRepeat {
  57     grid-template-rows: (start) repeat(2, 10px);
  58     grid-template-columns: (start) repeat(2, 250px);
  59 }
  60
  61 .mixRepeatAfterNonRepeat {
  62     grid-template-rows: auto repeat(2, 10px);
  63     grid-template-columns: (start) 140px repeat(2, 250px);
  64 }
  65
  66 .mixNonRepeatAfterRepeat {
  67     grid-template-rows: repeat(2, 10px) (end) auto;
  68     grid-template-columns: repeat(2, 250px) 15% (last);
  69 }
  70 </style>
  71 <script src="../../resources/js-test.js"></script>
  72 </head>
  73 <body>
  74 <div class="grid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize"></div>
  75 <div class="indefiniteSizeGrid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithoutSize"></div>
  76 <div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>
  77 <div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeatWithChildren">
  78     <div class="gridItem"></div>
  79     <div class="gridItem2"></div>
  80 </div>
  81 <div class="grid twoDoubleTrackRepeat" id="twoDoubleTrackRepeat">
  82     <div class="gridItem"></div>
  83     <div class="gridItem2"></div>
  84 </div>
  85 <div class="grid twoDoubleTrackWithNamedGridLineRepeat" id="twoDoubleTrackWithNamedGridLineRepeat">
  86     <div class="gridItem"></div>
  87     <div class="gridItem2"></div>
  88 </div>
  89 <div class="grid twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
  90 <div class="grid trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div>
  91 <div class="grid leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div>
  92 <div class="grid mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat">
  93     <div class="gridItem"></div>
  94 </div>
  95 <div class="grid mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></div>
  96
  97 <script src="resources/grid-definitions-parsing-utils.js"></script>
  98 <script>
  99     description('Test that setting and getting grid-template-columns and grid-template-rows with repeat() works as expected');
 100
 101     debug("Test getting grid-template-columns and grid-template-rows set through CSS");
 102     testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWithSize"), "120px", "18px");
 103     testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWithoutSize"), "0px", "18px");
 104     testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), "400px 400px", "0px 0px");
 105     testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeatWithChildren"), "400px 400px", "44px 77px");
 106     testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), "33px 120px 0px 120px", "10px 77px 10px 0px");
 107     testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGridLineRepeat"), "33px (middle) 250px (end) 0px (middle) 250px (end)", "10px (start) 77px (end) 10px (start) 0px (end)");
 108     testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailingNamedGridLineRepeat"), "(before) 0px (before) 0px", "(before) 10px (before) 10px");
 109     testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepeat"), "250px (end)", "10px (end)");
 110     testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepeat"), "(start) 250px 250px", "(start) 10px 10px");
 111     testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat"), "(start) 140px 250px 250px", "44px 10px 10px");
 112     testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat"), "250px 250px 120px (last)", "10px 10px (end) 0px");
 113
 114     debug("");
 115     debug("Test invalid repeat syntax.");
 116     function testInvalidSyntax(gridColumn) {
 117         element = document.createElement("div");
 118         document.body.appendChild(element);
 119         element.style.gridTemplateColumns = gridColumn;
 120         shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
 121         document.body.removeChild(element);
 122     }
 123     testInvalidSyntax("repeat(");
 124     testInvalidSyntax("repeat()");
 125     testInvalidSyntax("repeat(3 / auto)");
 126     testInvalidSyntax("repeat(3 , ,)");
 127     testInvalidSyntax("repeat(0, 15px)");
 128     testInvalidSyntax("repeat(-1, auto)");
 129     testInvalidSyntax("repeat(1, (foo))");
 130     testInvalidSyntax("repeat(1, )");
 131     testInvalidSyntax("repeat(1)");
 132     // Nesting is no allowed.
 133     testInvalidSyntax("repeat(2, repeat(1, auto))");
 134 </script>
 135 </body>
 136 </html>