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