src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-shorthand-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 #gridTemplateWithNone {
   7     grid-template: none;
   8 }
   9 #gridTemplateSimpleForm {
  10     grid-template: 10px / 15px;
  11 }
  12 #gridTemplateSimpleFormWithNoneColumns {
  13     grid-template: none / 15px;
  14 }
  15 #gridTemplateSimpleFormWithNoneRows {
  16     grid-template: 10px / none;
  17 }
  18 #gridTemplateSimpleFormWithNone {
  19     grid-template: none / none;
  20 }
  21 #gridTemplateComplexForm {
  22     grid-template: 10px / "a" 15px;
  23 }
  24 #gridTemplateComplexFormWithLineNames {
  25     grid-template: 10px / (head) "a" 15px (tail);
  26 }
  27 #gridTemplateComplexFormWithLineNamesMultipleColumns {
  28     grid-template: 10px / (head) "a b" 15px (tail)
  29 }
  30 #gridTemplateComplexFormWithLineNamesMultipleRows {
  31     grid-template: 10px / (head1) "a" 15px (tail1)
  32                           (head2) "b" 20px (tail2);
  33 }
  34 #gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns {
  35     grid-template: (first) 10px repeat(2, (nav nav2) 15px) /       "a b c" 100px (nav)
  36                                                             (nav2) "d e f" 25px  (nav)
  37                                                             (nav2) "g h i" 25px  (last);
  38 }
  39 #gridTemplateComplexFormWithAuto {
  40     grid-template: 10px / "a";
  41 }
  42 #gridTemplateComplexFormOnlyAreas {
  43     grid-template: "a";
  44 }
  45 #gridTemplateNoColumnsRowWithEmptyTrailingLineNames {
  46     grid-template: (first) "a" auto ();
  47 }
  48
  49 /* Bad values. */
  50
  51 #gridTemplateMultipleSlash {
  52     grid-template: 10px / 20px / 30px;
  53 }
  54 #gridTemplateSimpleFormJustColumns {
  55     grid-template: 10px;
  56 }
  57 #gridTemplateSimpleFormNoRows {
  58     grid-template: 10px /;
  59 }
  60 #gridTemplateSimpleFormNoColumns {
  61     grid-template: / 10px;
  62 }
  63 #gridTemplateSimpleFormNoColumnSize {
  64     grid-template: (line) / 10px;
  65 }
  66 #gridTemplateSimpleFormWithFitContent {
  67     grid-template: -webkit-fit-content / 10px;
  68 }
  69 #gridTemplateSimpleFormWithWrongRepeat {
  70     grid-template: repeat(2, 50% (title) a) / 10px;
  71 }
  72 #gridTemplateSimpleFormWithMisplacedNone1 {
  73     grid-template: 10px / none 20px;
  74 }
  75 #gridTemplateSimpleFormWithMisplacedNone2 {
  76     grid-template: 10px / 20px none;
  77 }
  78 #gridTemplateSimpleFormWithMisplacedNone3 {
  79     grid-template: none 10px / 20px;
  80 }
  81 #gridTemplateSimpleFormWithMisplacedNone4 {
  82     grid-template: 10px none / 20px;
  83 }
  84 #gridTemplateComplexFormWithRepeat {
  85     grid-template: 10px / "a" repeat(2, 50% (title));
  86 }
  87 #gridTemplateComplexFormWithWrongRepeat {
  88     grid-template: repeat(2, 50% (title) a) / "a";
  89 }
  90 #griTemplateComplexFormdWithFitAvailable {
  91     grid-template: -webkit-fit-available / "a";
  92 }
  93 #gridTemplateComplexFormNoColumnSize {
  94     grid-template: (line) / "a";
  95 }
  96 #gridTemplateComplexFormMisplacedRowsSize1 {
  97     grid-template: 25px / 10px "a";
  98 }
  99 #gridTemplateComplexFormMisplacedRowsSize2 {
 100     grid-template: 25px / "a" (name) 10px;
 101 }
 102 #gridTemplateComplexFormColumnsNotParsing1 {
 103     grid-template: a / "a" (name) 10px;
 104 }
 105 #gridTemplateComplexFormColumnsNotParsing2 {
 106     grid-template: "B" / "a" (name) 10px;
 107 }
 108 #gridTemplateComplexFormWithNoneColumns {
 109     grid-template: none / "a" (name) 10px;
 110 }
 111 #gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames {
 112     grid-template: (first) "a" auto () ();
 113 }
 114 #gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames {
 115     grid-template: (first) "a" auto () (tail);
 116 }
 117
 118 </style>
 119 <script src="../../resources/js-test.js"></script>
 120 </head>
 121 <body>
 122 <div class="grid" id="gridTemplateWithNone"></div>
 123 <div class="grid" id="gridTemplateSimpleForm"></div>
 124 <div class="grid" id="gridTemplateSimpleFormWithNoneColumns"></div>
 125 <div class="grid" id="gridTemplateSimpleFormWithNoneRows"></div>
 126 <div class="grid" id="gridTemplateSimpleFormWithNone"></div>
 127 <div class="grid" id="gridTemplateComplexForm"></div>
 128 <div class="grid" id="gridTemplateComplexFormWithLineNames"></div>
 129 <div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleColumns"></div>
 130 <div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRows"></div>
 131 <div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns"></div>
 132 <div class="grid" id="gridTemplateComplexFormWithAuto"></div>
 133 <div class="grid" id="gridTemplateComplexFormOnlyAreas"></div>
 134 <div class="grid" id="gridTemplateNoColumnsRowWithEmptyTrailingLineNames"></div>
 135 <div class="grid" id="gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames"></div>
 136 <div class="grid" id="gridTemplateNoColumnsRowWithNonEmptyLeadingLineNamesAndEmptyTrailingLineNames"></div>
 137 <div class="grid" id="gridTemplateMultipleSlash"></div>
 138 <div class="grid" id="gridTemplateSimpleFormJustColumns"></div>
 139 <div class="grid" id="gridTemplateSimpleFormNoRows"></div>
 140 <div class="grid" id="gridTemplateSimpleFormNoColumns"></div>
 141 <div class="grid" id="gridTemplateSimpleFormNoColumnSize"></div>
 142 <div class="grid" id="gridTemplateSimpleFormWithFitContent"></div>
 143 <div class="grid" id="gridTemplateSimpleFormWithWrongRepeat"></div>
 144 <div class="grid" id="gridTemplateSimpleFormWithMisplacedNone1"></div>
 145 <div class="grid" id="gridTemplateSimpleFormWithMisplacedNone2"></div>
 146 <div class="grid" id="gridTemplateSimpleFormWithMisplacedNone3"></div>
 147 <div class="grid" id="gridTemplateSimpleFormWithMisplacedNone4"></div>
 148 <div class="grid" id="gridTemplateComplexFormWithRepeat"></div>
 149 <div class="grid" id="gridTemplateComplexFormWithWrongRepeat"></div>
 150 <div class="grid" id="griTemplateComplexFormdWithFitAvailable"></div>
 151 <div class="grid" id="gridTemplateComplexFormNoColumnSize"></div>
 152 <div class="grid" id="gridTemplateComplexFormMisplacedRowsSize1"></div>
 153 <div class="grid" id="gridTemplateComplexFormMisplacedRowsSize2"></div>
 154 <div class="grid" id="gridTemplateComplexFormColumnsNotParsing1"></div>
 155 <div class="grid" id="gridTemplateComplexFormColumnsNotParsing2"></div>
 156 <div class="grid" id="gridTemplateComplexFormWithNoneColumns"></div>
 157 <div class="grid" id="gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames"></div>
 158 <script src="resources/grid-template-shorthand-parsing-utils.js"></script>
 159 <script>
 160     description("This test checks that the 'grid-template' shorthand is properly parsed and the longhand properties correctly assigned.");
 161
 162     debug("Test getting grid-template-areas set through CSS.");
 163     testGridDefinitionsValues(document.getElementById("gridTemplateWithNone"), "none", "none", "none");
 164     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleForm"), "10px", "15px", "none");
 165     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithNoneColumns"), "none", "15px", "none");
 166     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithNoneRows"), "10px", "none", "none");
 167     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithNone"), "none", "none", "none");
 168     testGridDefinitionsValues(document.getElementById("gridTemplateComplexForm"), "10px", "15px", '"a"');
 169     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNames"), "10px", "(head) 15px (tail)", '"a"');
 170     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleColumns"), "10px", "(head) 15px (tail)", '"a b"');
 171     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRows"), "10px", "(head1) 15px (tail1 head2) 20px (tail2)", '"a" "b"');
 172     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns"), "(first) 10px (nav nav2) 15px (nav nav2) 15px", "100px (nav nav2) 25px (nav nav2) 25px (last)", '"a b c" "d e f" "g h i"');
 173     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithAuto"), "10px", "0px", '"a"');
 174     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormOnlyAreas"), "none", "0px", '"a"');
 175     testGridDefinitionsValues(document.getElementById("gridTemplateNoColumnsRowWithEmptyTrailingLineNames"), "none", "(first) 0px", '"a"');
 176
 177     debug("");
 178     debug("Test getting wrong values for grid-template shorthand through CSS (they should resolve to the default: 'none')");
 179     testGridDefinitionsValues(document.getElementById("gridTemplateMultipleSlash"), "none", "none", "none");
 180     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormJustColumns"), "none", "none", "none");
 181     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoRows"), "none", "none", "none");
 182     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoColumns"), "none", "none", "none");
 183     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoColumnSize"), "none", "none", "none");
 184     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithFitContent"), "none", "none", "none");
 185     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithWrongRepeat"), "none", "none", "none");
 186     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithMisplacedNone1"), "none", "none", "none");
 187     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithMisplacedNone2"), "none", "none", "none");
 188     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithMisplacedNone3"), "none", "none", "none");
 189     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithMisplacedNone4"), "none", "none", "none");
 190     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithRepeat"), "none", "none", "none");
 191     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithWrongRepeat"), "none", "none", "none");
 192     testGridDefinitionsValues(document.getElementById("griTemplateComplexFormdWithFitAvailable"), "none", "none", "none");
 193     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormNoColumnSize"), "none", "none", "none");
 194     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMisplacedRowsSize1"), "none", "none", "none");
 195     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMisplacedRowsSize2"), "none", "none", "none");
 196     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormColumnsNotParsing1"), "none", "none", "none");
 197     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormColumnsNotParsing2"), "none", "none", "none");
 198     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithNoneColumns"), "none", "none", "none");
 199     testGridDefinitionsValues(document.getElementById("gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames"), "none", "none", "none");
 200     testGridDefinitionsValues(document.getElementById("gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames"), "none", "none", "none");
 201
 202     debug("");
 203     debug("Test the initial value");
 204     var element = document.createElement("div");
 205     document.body.appendChild(element);
 206     testGridDefinitionsValues(element, "none", "none", "none");
 207     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
 208     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
 209     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-areas')", "'none'");
 210
 211     debug("");
 212     debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
 213     testGridDefinitionsSetJSValues("10px / (line) 'a' 20px", "10px", "(line) 20px", "\"a\"");
 214     testGridDefinitionsSetJSValues("none", "none", "none", "none");
 215
 216     debug("");
 217     debug("Test getting and setting grid-template shorthand through JS");
 218     testGridDefinitionsSetJSValues("18px / 66px", "18px", "66px", "none");
 219     testGridDefinitionsSetJSValues("10px / (head) 'a' 15px (tail)", "10px", "(head) 15px (tail)", "\"a\"");
 220     testGridDefinitionsSetJSValues("'a'", "none", "0px", "\"a\"", "none", "auto");
 221
 222     debug("");
 223     debug("Test setting grid-template shorthand to bad values through JS");
 224     testGridDefinitionsSetBadJSValues("none / 'a'");
 225     testGridDefinitionsSetBadJSValues("25px / 'a' (name) 10px");
 226     testGridDefinitionsSetBadJSValues("'a' / 'b'");
 227     testGridDefinitionsSetBadJSValues("15px");
 228     testGridDefinitionsSetBadJSValues("15px / 20px none");
 229     testGridDefinitionsSetBadJSValues("25px / 10px 'a'");
 230
 231 </script>
 232 </body>
 233 </html>