third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <script src="../../resources/check-layout.js"></script>
   6 <script type="text/javascript">
   7
   8 function testLayout(gridDefinitions, itemsDefinitions)
   9 {
  10     var gridContainer = document.getElementById("gridContainer");
  11     var gridElement = document.createElement("div");
  12     gridElement.className = "grid";
  13     gridElement.style.gridAutoFlow = "dense";
  14
  15     for (var key in gridDefinitions) {
  16         if (key == "rows")
  17             gridElement.style.gridTemplateRows = gridDefinitions[key];
  18         else if (key == "columns")
  19             gridElement.style.gridTemplateColumns = gridDefinitions[key];
  20         else
  21             gridElement.style.gridTemplateAreas = gridDefinitions[key];
  22     }
  23
  24     for (var i in itemsDefinitions) {
  25         var itemDefinition = itemsDefinitions[i];
  26         var gridItem = document.createElement("div");
  27         gridItem.className = "sizedToGridArea";
  28
  29         if (itemDefinition.row)
  30             gridItem.style.gridRow = itemDefinition.row;
  31         if (itemDefinition.column)
  32             gridItem.style.gridColumn = itemDefinition.column;
  33
  34         gridItem.setAttribute("data-offset-x", itemDefinition.x);
  35         gridItem.setAttribute("data-offset-y", itemDefinition.y);
  36         gridItem.setAttribute("data-expected-width", itemDefinition.width);
  37         gridItem.setAttribute("data-expected-height", itemDefinition.height);
  38
  39         gridElement.appendChild(gridItem);
  40     }
  41
  42     gridContainer.appendChild(gridElement);
  43
  44     checkLayout(".grid", document.getElementById("test-output"));
  45     gridContainer.removeChild(gridElement);
  46 }
  47
  48 function updateRowsColumns()
  49 {
  50     var templateAreaOne = '". a a" "c a a" ". . d"';
  51     var templateAreaTwo = '". d d" "a d d" ". . c"';
  52
  53     var columnUniqueNames = '[a] 50px [b b-start] 100px [c -start] 200px [d]';
  54     var rowUniqueNames = '[e] 50px [f -end] 100px [g g-start] 200px [h]';
  55     var columnNamedLineBeforeArea = '[a-start c-start] 50px [d-start] 100px 200px';
  56     var rowNamedLineBeforeArea = '[c-start] 50px [d-start] 100px 200px';
  57     var columnRepeatedNames = '[d-start] 50px [d-start] 100px [d-start] 200px';
  58     var rowRepeatedNames = '50px [c-end] 100px [c-end] 200px [c-end]';
  59     var columnNoNames = '50px 100px 200px';
  60     var rowNoNames = '50px 100px 200px';
  61
  62     // Check grid area resolution.
  63     var gridAreasItems = [ { 'column': 'd', 'x': '150', 'y': '0', 'width': '200', 'height': '50' },
  64                            { 'column': 'c', 'x': '0', 'y': '0', 'width': '50', 'height': '50' },
  65                            { 'column': 'a', 'x': '50', 'y': '50', 'width': '300', 'height': '100' }];
  66
  67     testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaOne }, gridAreasItems);
  68     testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames }, gridAreasItems);
  69     testLayout({ 'columns': columnNoNames, 'areas': templateAreaOne, 'rows': rowNoNames }, gridAreasItems);
  70
  71     var gridAreasItemsTwo = [ { 'column': 'd', 'x': '50', 'y': '0', 'width': '300', 'height': '50' },
  72                               { 'column': 'c', 'x': '150', 'y': '50', 'width': '200', 'height': '100' },
  73                               { 'column': 'a', 'x': '0', 'y': '0', 'width': '50', 'height': '50' }];
  74
  75     testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames }, gridAreasItems);
  76     testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': rowNoNames }, gridAreasItemsTwo);
  77     testLayout({ 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaOne,  }, gridAreasItems);
  78     testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaTwo,  }, gridAreasItemsTwo);
  79     testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaTwo, 'areas': templateAreaOne }, gridAreasItems);
  80     testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaOne, 'areas': templateAreaTwo }, gridAreasItemsTwo);
  81
  82     // Check grid implicit named grid lines resolution.
  83     var implicitNamesItems = [{ 'column': 'a-start', 'row': 'd-start', 'x': '50', 'y': '150', 'width': '100', 'height': '200' },
  84                               { 'column': 'a-start', 'row': 'd', 'x': '50', 'y': '150', 'width': '100', 'height': '200' },
  85                               { 'column': 'd-start', 'row': 'c-start', 'x': '150', 'y': '50', 'width': '200', 'height': '100' }];
  86
  87     testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaOne }, implicitNamesItems);
  88     testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames }, implicitNamesItems);
  89     testLayout({ 'columns': columnNoNames, 'areas': templateAreaOne, 'rows': rowNoNames }, implicitNamesItems);
  90
  91     var implicitNamesItemsTwo = [{ 'column': 'a-start', 'row': 'd-start', 'x': '0', 'y': '0', 'width': '50', 'height': '50' },
  92                                  { 'column': 'a-start', 'row': 'd', 'x': '0', 'y': '0', 'width': '50', 'height': '150' },
  93                                  { 'column': 'd-start', 'row': 'c-start', 'x': '50', 'y': '150', 'width': '100', 'height': '200' }];
  94
  95     testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames }, implicitNamesItems);
  96     testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': rowNoNames }, implicitNamesItemsTwo);
  97     testLayout({ 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaOne }, implicitNamesItems);
  98     testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaTwo }, implicitNamesItemsTwo);
  99     testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaTwo, 'areas': templateAreaOne }, implicitNamesItems);
 100     testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaOne, 'areas': templateAreaTwo }, implicitNamesItemsTwo);
 101
 102     // Check resolution when named lines are defined before the grid area.
 103     var itemsBeforeArea = [ { 'column': 'd', 'x': '50', 'y': '150', 'width': '300', 'height': '200' },
 104                             { 'row': 'c', 'x': '50', 'y': '0', 'width': '100', 'height': '150'},
 105                             { 'column': 'd-start', 'x': '50', 'y': '350', 'width': '100', 'height': '0' },
 106                             { 'column': 'a-start', 'row': 'd', 'x': '0', 'y': '50', 'width': '50', 'height': '300' } ];
 107
 108     testLayout({ 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaOne }, itemsBeforeArea);
 109     testLayout({ 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea);
 110     testLayout({ 'columns': columnNamedLineBeforeArea, 'areas': templateAreaOne, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea);
 111
 112     var itemsBeforeAreaTwo = [ { 'column': 'd', 'x': '50', 'y': '350', 'width': '300', 'height': '0' },
 113                                { 'row': 'c', 'x': '50', 'y': '0', 'width': '100', 'height': '350'},
 114                                { 'column': 'd-start', 'x': '50', 'y': '350', 'width': '100', 'height': '0' },
 115                                { 'column': 'a-start', 'row': 'd', 'x': '0', 'y': '0', 'width': '50', 'height': '150' } ];
 116
 117     testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea);
 118     testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeAreaTwo);
 119     testLayout({ 'areas': templateAreaTwo, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaOne }, itemsBeforeArea);
 120     testLayout({ 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaTwo }, itemsBeforeAreaTwo);
 121     testLayout({ 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaTwo, 'areas': templateAreaOne }, itemsBeforeArea);
 122     testLayout({ 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaOne, 'areas': templateAreaTwo }, itemsBeforeAreaTwo);
 123
 124     // Check resolution when named lines are defined multiple times.
 125     var itemsRepeat = [ { 'column': 'd', 'row': 'c', 'x': '0', 'y': '50', 'width': '350', 'height': '100' },
 126                         { 'column': 'd-start / d-end', 'row': 'c-start / c-end', 'x': '0', 'y': '50', 'width': '350', 'height': '100'},
 127                         { 'column': 'c', 'row': 'd', 'x': '0', 'y': '150', 'width': '50', 'height': '200' } ];
 128
 129     testLayout({ 'columns': columnRepeatedNames, 'rows': rowRepeatedNames, 'areas': templateAreaOne }, itemsRepeat);
 130     testLayout({ 'areas': templateAreaOne, 'columns': columnRepeatedNames, 'rows': rowRepeatedNames }, itemsRepeat);
 131     testLayout({ 'columns': columnRepeatedNames, 'areas': templateAreaOne, 'rows': rowRepeatedNames }, itemsRepeat);
 132
 133     var itemsRepeatTwo = [ { 'column': 'd', 'row': 'c', 'x': '0', 'y': '150', 'width': '350', 'height': '200' },
 134                            { 'column': 'd-start / d-end', 'row': 'c-start / c-end', 'x': '0', 'y': '150', 'width': '350', 'height': '200'},
 135                            { 'column': 'c', 'row': 'd', 'x': '150', 'y': '0', 'width': '200', 'height': '150' } ];
 136
 137     testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnRepeatedNames, 'rows': rowRepeatedNames }, itemsRepeat);
 138     testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnRepeatedNames, 'rows': rowRepeatedNames }, itemsRepeatTwo);
 139     testLayout({ 'areas': templateAreaTwo, 'columns': columnRepeatedNames, 'rows': rowRepeatedNames, 'areas': templateAreaOne }, itemsRepeat);
 140     testLayout({ 'areas': templateAreaOne, 'columns': columnRepeatedNames, 'rows': rowRepeatedNames, 'areas': templateAreaTwo }, itemsRepeatTwo);
 141     testLayout({ 'columns': columnRepeatedNames, 'rows': rowRepeatedNames, 'areas': templateAreaTwo, 'areas': templateAreaOne }, itemsRepeat);
 142     testLayout({ 'columns': columnRepeatedNames, 'rows': rowRepeatedNames, 'areas': templateAreaOne, 'areas': templateAreaTwo }, itemsRepeatTwo);
 143 }
 144
 145 window.addEventListener("load", updateRowsColumns, false);
 146 </script>
 147 </head>
 148 <body>
 149 <div>This test checks we properly recompute the resolution of named grid lines and named grid areas when we change the grid positioning properties.</div>
 150
 151 <div id="gridContainer" style="position: relative"></div>
 152
 153 <div id="test-output"></div>
 154
 155 </body>
 156 </html>