src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html

   1 <!DOCTYPE html>
   2 <html>
   3 <script>
   4 if (window.testRunner)
   5     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
   6 </script>
   7 <link href="resources/grid.css" rel="stylesheet">
   8 <style>
   9 .grid {
  10     grid-template-columns: (col) 50px (col) 100px (col) 200px (col);
  11     grid-template-rows: (row) 70px (row) 140px (row) 280px (row);
  12 }
  13 .differentNamedGridLines {
  14     grid-template-columns: (col1) 50px (col2) 100px (col3) 200px (col4);
  15     grid-template-rows: (row1) 70px (row2) 140px (row3) 280px (row4);
  16 }
  17 </style>
  18 <script src="../../resources/check-layout.js"></script>
  19 <script>
  20 function testPosition(position, size)
  21 {
  22     gridItem = document.getElementsByClassName("grid")[0].firstChild;
  23     gridItem.style.gridColumn = position.column;
  24     gridItem.style.gridRow = position.row;
  25     gridItem.setAttribute("data-expected-width", size.width);
  26     gridItem.setAttribute("data-expected-height", size.height);
  27     checkLayout(".grid");
  28 }
  29
  30 function updateGridItemPosition()
  31 {
  32     // Test with the same type of positions.
  33     // 1. Explicit grid lines.
  34     testPosition({ 'column': '1 / 2', 'row': '1 / 2' }, { 'width': '50', 'height': '70' });
  35     testPosition({ 'column': '1 / 3', 'row': '1 / 2' }, { 'width': '150', 'height': '70' });
  36
  37     testPosition({ 'column': '1 / 2', 'row': '1 / 3' }, { 'width': '50', 'height': '210' });
  38     testPosition({ 'column': '1 / 2', 'row': '1 / 2' }, { 'width': '50', 'height': '70' });
  39
  40     testPosition({ 'column': '2 / 3', 'row': '1 / 3' }, { 'width': '100', 'height': '210' });
  41     testPosition({ 'column': '1 / 3', 'row': '1 / 3' }, { 'width': '150', 'height': '210' });
  42
  43     testPosition({ 'column': '1 / 3', 'row': '1 / 3' }, { 'width': '150', 'height': '210' });
  44     testPosition({ 'column': '1 / 3', 'row': '2 / 3' }, { 'width': '150', 'height': '140' });
  45
  46     // 2. spans.
  47     testPosition({ 'column': '1 / span 2', 'row': '1 / span 1' }, { 'width': '150', 'height': '70' });
  48     testPosition({ 'column': '1 / span 1', 'row': '1 / span 1' }, { 'width': '50', 'height': '70' });
  49
  50     testPosition({ 'column': '2 / span 1', 'row': '1 / span 1' }, { 'width': '100', 'height': '70' });
  51     testPosition({ 'column': '2 / span 1', 'row': '1 / span 2' }, { 'width': '100', 'height': '210' });
  52
  53     testPosition({ 'column': 'span 2 / 3', 'row': 'span 2 / 3' }, { 'width': '150', 'height': '210' });
  54     testPosition({ 'column': 'span 1 / 3', 'row': 'span 2 / 3' }, { 'width': '100', 'height': '210' });
  55
  56     testPosition({ 'column': 'span 2 / 3', 'row': 'span 1 / 3' }, { 'width': '150', 'height': '140' });
  57     testPosition({ 'column': 'span 2 / 3', 'row': 'span 2 / 3' }, { 'width': '150', 'height': '210' });
  58
  59     // 3. Named grid lines, changing the explicit position.
  60     testPosition({ 'column': '1 / 2 "col"', 'row': '1 / 2 "row"' }, { 'width': '50', 'height': '70' });
  61     testPosition({ 'column': '1 / 3 "col"', 'row': '1 / 2 "row"' }, { 'width': '150', 'height': '70' });
  62
  63     testPosition({ 'column': '1 / 2 "col"', 'row': '1 / 3 "row"' }, { 'width': '50', 'height': '210' });
  64     testPosition({ 'column': '1 / 2 "col"', 'row': '1 / 2 "row"' }, { 'width': '50', 'height': '70' });
  65
  66     testPosition({ 'column': '1 "col" / 4', 'row': '1 "row" / 4' }, { 'width': '350', 'height': '490' });
  67     testPosition({ 'column': '2 "col" / 4', 'row': '1 "row" / 4' }, { 'width': '300', 'height': '490' });
  68
  69     testPosition({ 'column': '2 "col" / 4', 'row': '2 "row" / 4' }, { 'width': '300', 'height': '420' });
  70     testPosition({ 'column': '2 "col" / 4', 'row': '1 "row" / 4' }, { 'width': '300', 'height': '490' });
  71
  72     // 4. Named grid lines, changing the name of the grid lines.
  73     testPosition({ 'column': '1 / 3 "col"', 'row': '1 / 2 "row"' }, { 'width': '150', 'height': '70' });
  74     testPosition({ 'column': '1 / 3 "invalid"', 'row': '1 / 2 "row"' }, { 'width': '50', 'height': '70' });
  75
  76     testPosition({ 'column': '1 / 4 "col"', 'row': '1 / 4 "invalid"' }, { 'width': '350', 'height': '70' });
  77     testPosition({ 'column': '1 / 4 "col"', 'row': '1 / 4 "row"' }, { 'width': '350', 'height': '490' });
  78
  79     testPosition({ 'column': '2 "invalid" / 4', 'row': '1 "row" / 4' }, { 'width': '350', 'height': '490' });
  80     testPosition({ 'column': '2 "col" / 4', 'row': '1 "row" / 4' }, { 'width': '300', 'height': '490' });
  81
  82     testPosition({ 'column': '2 "col" / 4', 'row': '2 "row" / 4' }, { 'width': '300', 'height': '420' });
  83     testPosition({ 'column': '2 "col" / 4', 'row': '2 "invalid" / 4' }, { 'width': '300', 'height': '490' });
  84
  85     // 5. Span named grid lines, changing the grid line number.
  86     testPosition({ 'column': '1 / span 3 "col"', 'row': '1 / span 2 "row"' }, { 'width': '350', 'height': '210' });
  87     testPosition({ 'column': '1 / span 2 "col"', 'row': '1 / span 2 "row"' }, { 'width': '150', 'height': '210' });
  88
  89     testPosition({ 'column': '2 / span 3 "col"', 'row': '1 / span 2 "row"' }, { 'width': '300', 'height': '210' });
  90     testPosition({ 'column': '2 / span 3 "col"', 'row': '1 / span 1 "row"' }, { 'width': '300', 'height': '70' });
  91
  92     testPosition({ 'column': 'span 2 "col" / 3', 'row': 'span 2 "row" / 4' }, { 'width': '150', 'height': '420' });
  93     testPosition({ 'column': 'span 1 "col" / 3', 'row': 'span 2 "row" / 4' }, { 'width': '100', 'height': '420' });
  94
  95     testPosition({ 'column': 'span 2 "col" / 3', 'row': 'span 2 "row" / 4' }, { 'width': '150', 'height': '420' });
  96     testPosition({ 'column': 'span 2 "col" / 3', 'row': 'span 3 "row" / 4' }, { 'width': '150', 'height': '490' });
  97
  98     // Test transition across grid lines types.
  99     // 1. Explicit <-> spans.
 100     testPosition({ 'column': '1 / 3', 'row': '1 / 2' }, { 'width': '150', 'height': '70' });
 101     testPosition({ 'column': '1 / span 3', 'row': '1 / 2' }, { 'width': '350', 'height': '70' });
 102
 103     testPosition({ 'column': '1 / 3', 'row': '1 / span 2' }, { 'width': '150', 'height': '210' });
 104     testPosition({ 'column': '1 / 3', 'row': '1 / 2' }, { 'width': '150', 'height': '70' });
 105
 106     testPosition({ 'column': 'span 1 / 3', 'row': '1 / 2' }, { 'width': '100', 'height': '70' });
 107     testPosition({ 'column': '1 / 3', 'row': '1 / 2' }, { 'width': '150', 'height': '70' });
 108
 109     testPosition({ 'column': '1 / 3', 'row': '1 / 4' }, { 'width': '150', 'height': '490' });
 110     testPosition({ 'column': '1 / 3', 'row': 'span 2 / 4' }, { 'width': '150', 'height': '420' });
 111
 112     // 2. Span <-> named grid lines.
 113     testPosition({ 'column': '1 / "col" 3', 'row': '1 / span 4' }, { 'width': '150', 'height': '490' });
 114     testPosition({ 'column': '1 / span 3', 'row': '1 / span 4' }, { 'width': '350', 'height': '490' });
 115
 116     testPosition({ 'column': '1 / "col" 3', 'row': '1 / span 3' }, { 'width': '150', 'height': '490' });
 117     testPosition({ 'column': '1 / "col" 3', 'row': '1 / "row" 3' }, { 'width': '150', 'height': '210' });
 118
 119     testPosition({ 'column': 'span 1 / 3', 'row': 'span 2 / 4' }, { 'width': '100', 'height': '420' });
 120     testPosition({ 'column': '1 "col" / 3', 'row': 'span 2 / 4' }, { 'width': '150', 'height': '420' });
 121
 122     testPosition({ 'column': 'span 1 / 3', 'row': '"col" 1 / 4' }, { 'width': '100', 'height': '490' });
 123     testPosition({ 'column': 'span 1 / 3', 'row': 'span 1 / 4' }, { 'width': '100', 'height': '280' });
 124
 125     // 3. Named grid lines to span named grid line.
 126     testPosition({ 'column': '1 / "col" 3', 'row': '1 / span 4' }, { 'width': '150', 'height': '490' });
 127     testPosition({ 'column': '1 / span "col" 3', 'row': '1 / span 4' }, { 'width': '350', 'height': '490' });
 128
 129     testPosition({ 'column': '1 / "col" 3', 'row': '1 / span "row" 3' }, { 'width': '150', 'height': '490' });
 130     testPosition({ 'column': '1 / "col" 3', 'row': '1 / "row" 3' }, { 'width': '150', 'height': '210' });
 131
 132     testPosition({ 'column': 'span "col" 1 / 3', 'row': 'span 2 / 4' }, { 'width': '100', 'height': '420' });
 133     testPosition({ 'column': '1 "col" / 3', 'row': 'span 2 / 4' }, { 'width': '150', 'height': '420' });
 134
 135     testPosition({ 'column': 'span "col" 1 / 3', 'row': '"col" 1 / 4' }, { 'width': '100', 'height': '490' });
 136     testPosition({ 'column': 'span "col" 1 / 3', 'row': 'span "col" 1 / 4' }, { 'width': '100', 'height': '280' });
 137
 138     // 4. Explicit <-> named grid lines.
 139     // We need to modify the grid's definitions so that we have explicit and named grid lines not match anymore.
 140     var gridElement = document.getElementsByClassName("grid")[0];
 141     gridElement.classList.add("differentNamedGridLines");
 142
 143     testPosition({ 'column': '1 / "col4" 3', 'row': '1 / 4' }, { 'width': '350', 'height': '490' });
 144     testPosition({ 'column': '1 / 3', 'row': '1 / 4' }, { 'width': '150', 'height': '490' });
 145
 146     testPosition({ 'column': '1 / "col4" 3', 'row': '1 / 4' }, { 'width': '350', 'height': '490' });
 147     testPosition({ 'column': '1 / "col4" 3', 'row': '1 / "row3" 4' }, { 'width': '350', 'height': '210' });
 148
 149     testPosition({ 'column': '"col2" 1 / 4', 'row': '1 "row2" / 4' }, { 'width': '300', 'height': '420' });
 150     testPosition({ 'column': '1 / 4', 'row': '1 "row2" / 4' }, { 'width': '350', 'height': '420' });
 151
 152     testPosition({ 'column': '"col2" 1 / 4', 'row': '1 / 4' }, { 'width': '300', 'height': '490' });
 153     testPosition({ 'column': '"col2" 1 / 4', 'row': '1 "row2" / 4' }, { 'width': '300', 'height': '420' });
 154
 155     // 5. Span <-> span named grid lines.
 156     testPosition({ 'column': '1 / span "col4" 2', 'row': '3 / span 1' }, { 'width': '350', 'height': '280' });
 157     testPosition({ 'column': '1 / span 2', 'row': '3 / span 1' }, { 'width': '150', 'height': '280' });
 158
 159     testPosition({ 'column': '1 / span "col4" 3', 'row': '1 / span 4' }, { 'width': '350', 'height': '490' });
 160     testPosition({ 'column': '1 / span "col4" 3', 'row': '1 / span "row3" 4' }, { 'width': '350', 'height': '210' });
 161
 162     testPosition({ 'column': 'span 2 / 4', 'row': 'span 1 / 4' }, { 'width': '300', 'height': '280' });
 163     testPosition({ 'column': 'span "col1" 2 / 4', 'row': 'span 1 / 4' }, { 'width': '350', 'height': '280' });
 164
 165     testPosition({ 'column': 'span 2 / 4', 'row': 'span 1 / 4' }, { 'width': '300', 'height': '280' });
 166     testPosition({ 'column': 'span 2 / 4', 'row': 'span "row2" 1 / 4' }, { 'width': '300', 'height': '420' });
 167
 168     // 6. Explicit to span named grid line.
 169     testPosition({ 'column': '1 / 2', 'row': '2 / span "row3" 1' }, { 'width': '50', 'height': '140' });
 170     testPosition({ 'column': '1 / span "col3" 2', 'row': '2 / span "row3" 1' }, { 'width': '150', 'height': '140' });
 171
 172     testPosition({ 'column': '1 / 2', 'row': '2 / span "row3" 4' }, { 'width': '50', 'height': '140' });
 173     testPosition({ 'column': '1 / 2', 'row': '2 / 4' }, { 'width': '50', 'height': '420' });
 174
 175     testPosition({ 'column': 'span "col2" 1 / 4', 'row': 'span "row1" 3 / 4' }, { 'width': '300', 'height': '490' });
 176     testPosition({ 'column': '1 / 4', 'row': 'span "row1" 3 / 4' }, { 'width': '350', 'height': '490' });
 177
 178     testPosition({ 'column': 'span "col2" 1 / 4', 'row': 'span "row1" 3 / 4' }, { 'width': '300', 'height': '490' });
 179     testPosition({ 'column': 'span "col2" 1 / 4', 'row': '3 / 4' }, { 'width': '300', 'height': '280' });
 180 }
 181 window.addEventListener("load", updateGridItemPosition, false);
 182 </script>
 183 <body>
 184
 185 <p>This test checks that we properly recompute our internal grid when a grid item is moved.</p>
 186
 187 <div class="grid"><div class="sizedToGridArea"></div></div>
 188
 189 </body>
 190 </html>