| <!DOCTYPE html> |
| <html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <script src="../../resources/check-layout.js"></script> |
| <script type="text/javascript"> |
| |
| function testLayout(gridDefinitions, itemsDefinitions) |
| { |
| var gridContainer = document.getElementById("gridContainer"); |
| var gridElement = document.createElement("div"); |
| gridElement.className = "grid"; |
| gridElement.style.gridAutoFlow = "dense"; |
| |
| for (var key in gridDefinitions) { |
| if (key == "rows") |
| gridElement.style.gridTemplateRows = gridDefinitions[key]; |
| else if (key == "columns") |
| gridElement.style.gridTemplateColumns = gridDefinitions[key]; |
| else |
| gridElement.style.gridTemplateAreas = gridDefinitions[key]; |
| } |
| |
| for (var i in itemsDefinitions) { |
| var itemDefinition = itemsDefinitions[i]; |
| var gridItem = document.createElement("div"); |
| gridItem.className = "sizedToGridArea"; |
| |
| if (itemDefinition.row) |
| gridItem.style.gridRow = itemDefinition.row; |
| if (itemDefinition.column) |
| gridItem.style.gridColumn = itemDefinition.column; |
| |
| gridItem.setAttribute("data-offset-x", itemDefinition.x); |
| gridItem.setAttribute("data-offset-y", itemDefinition.y); |
| gridItem.setAttribute("data-expected-width", itemDefinition.width); |
| gridItem.setAttribute("data-expected-height", itemDefinition.height); |
| |
| gridElement.appendChild(gridItem); |
| } |
| |
| gridContainer.appendChild(gridElement); |
| |
| checkLayout(".grid", document.getElementById("test-output")); |
| gridContainer.removeChild(gridElement); |
| } |
| |
| function updateRowsColumns() |
| { |
| var templateAreaOne = '". a a" "c a a" ". . d"'; |
| var templateAreaTwo = '". d d" "a d d" ". . c"'; |
| |
| var columnUniqueNames = '[a] 50px [b b-start] 100px [c -start] 200px [d]'; |
| var rowUniqueNames = '[e] 50px [f -end] 100px [g g-start] 200px [h]'; |
| var columnNamedLineBeforeArea = '[a-start c-start] 50px [d-start] 100px 200px'; |
| var rowNamedLineBeforeArea = '[c-start] 50px [d-start] 100px 200px'; |
| var columnRepeatedNames = '[d-start] 50px [d-start] 100px [d-start] 200px'; |
| var rowRepeatedNames = '50px [c-end] 100px [c-end] 200px [c-end]'; |
| var columnNoNames = '50px 100px 200px'; |
| var rowNoNames = '50px 100px 200px'; |
| |
| // Check grid area resolution. |
| var gridAreasItems = [ { 'column': 'd', 'x': '150', 'y': '0', 'width': '200', 'height': '50' }, |
| { 'column': 'c', 'x': '0', 'y': '0', 'width': '50', 'height': '50' }, |
| { 'column': 'a', 'x': '50', 'y': '50', 'width': '300', 'height': '100' }]; |
| |
| testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaOne }, gridAreasItems); |
| testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames }, gridAreasItems); |
| testLayout({ 'columns': columnNoNames, 'areas': templateAreaOne, 'rows': rowNoNames }, gridAreasItems); |
| |
| var gridAreasItemsTwo = [ { 'column': 'd', 'x': '50', 'y': '0', 'width': '300', 'height': '50' }, |
| { 'column': 'c', 'x': '150', 'y': '50', 'width': '200', 'height': '100' }, |
| { 'column': 'a', 'x': '0', 'y': '0', 'width': '50', 'height': '50' }]; |
| |
| testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames }, gridAreasItems); |
| testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': rowNoNames }, gridAreasItemsTwo); |
| testLayout({ 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaOne, }, gridAreasItems); |
| testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaTwo, }, gridAreasItemsTwo); |
| testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaTwo, 'areas': templateAreaOne }, gridAreasItems); |
| testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaOne, 'areas': templateAreaTwo }, gridAreasItemsTwo); |
| |
| // Check grid implicit named grid lines resolution. |
| var implicitNamesItems = [{ 'column': 'a-start', 'row': 'd-start', 'x': '50', 'y': '150', 'width': '100', 'height': '200' }, |
| { 'column': 'a-start', 'row': 'd', 'x': '50', 'y': '150', 'width': '100', 'height': '200' }, |
| { 'column': 'd-start', 'row': 'c-start', 'x': '150', 'y': '50', 'width': '200', 'height': '100' }]; |
| |
| testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaOne }, implicitNamesItems); |
| testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames }, implicitNamesItems); |
| testLayout({ 'columns': columnNoNames, 'areas': templateAreaOne, 'rows': rowNoNames }, implicitNamesItems); |
| |
| var implicitNamesItemsTwo = [{ 'column': 'a-start', 'row': 'd-start', 'x': '0', 'y': '0', 'width': '50', 'height': '50' }, |
| { 'column': 'a-start', 'row': 'd', 'x': '0', 'y': '0', 'width': '50', 'height': '150' }, |
| { 'column': 'd-start', 'row': 'c-start', 'x': '50', 'y': '150', 'width': '100', 'height': '200' }]; |
| |
| testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames }, implicitNamesItems); |
| testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': rowNoNames }, implicitNamesItemsTwo); |
| testLayout({ 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaOne }, implicitNamesItems); |
| testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaTwo }, implicitNamesItemsTwo); |
| testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaTwo, 'areas': templateAreaOne }, implicitNamesItems); |
| testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaOne, 'areas': templateAreaTwo }, implicitNamesItemsTwo); |
| |
| // Check resolution when named lines are defined before the grid area. |
| var itemsBeforeArea = [ { 'column': 'd', 'x': '50', 'y': '150', 'width': '300', 'height': '200' }, |
| { 'row': 'c', 'x': '50', 'y': '0', 'width': '100', 'height': '150'}, |
| { 'column': 'd-start', 'x': '50', 'y': '350', 'width': '100', 'height': '0' }, |
| { 'column': 'a-start', 'row': 'd', 'x': '0', 'y': '50', 'width': '50', 'height': '300' } ]; |
| |
| testLayout({ 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaOne }, itemsBeforeArea); |
| testLayout({ 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea); |
| testLayout({ 'columns': columnNamedLineBeforeArea, 'areas': templateAreaOne, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea); |
| |
| var itemsBeforeAreaTwo = [ { 'column': 'd', 'x': '50', 'y': '350', 'width': '300', 'height': '0' }, |
| { 'row': 'c', 'x': '50', 'y': '0', 'width': '100', 'height': '350'}, |
| { 'column': 'd-start', 'x': '50', 'y': '350', 'width': '100', 'height': '0' }, |
| { 'column': 'a-start', 'row': 'd', 'x': '0', 'y': '0', 'width': '50', 'height': '150' } ]; |
| |
| testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea); |
| testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeAreaTwo); |
| testLayout({ 'areas': templateAreaTwo, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaOne }, itemsBeforeArea); |
| testLayout({ 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaTwo }, itemsBeforeAreaTwo); |
| testLayout({ 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaTwo, 'areas': templateAreaOne }, itemsBeforeArea); |
| testLayout({ 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaOne, 'areas': templateAreaTwo }, itemsBeforeAreaTwo); |
| |
| // Check resolution when named lines are defined multiple times. |
| var itemsRepeat = [ { 'column': 'd', 'row': 'c', 'x': '0', 'y': '50', 'width': '350', 'height': '100' }, |
| { 'column': 'd-start / d-end', 'row': 'c-start / c-end', 'x': '0', 'y': '50', 'width': '350', 'height': '100'}, |
| { 'column': 'c', 'row': 'd', 'x': '0', 'y': '150', 'width': '50', 'height': '200' } ]; |
| |
| testLayout({ 'columns': columnRepeatedNames, 'rows': rowRepeatedNames, 'areas': templateAreaOne }, itemsRepeat); |
| testLayout({ 'areas': templateAreaOne, 'columns': columnRepeatedNames, 'rows': rowRepeatedNames }, itemsRepeat); |
| testLayout({ 'columns': columnRepeatedNames, 'areas': templateAreaOne, 'rows': rowRepeatedNames }, itemsRepeat); |
| |
| var itemsRepeatTwo = [ { 'column': 'd', 'row': 'c', 'x': '0', 'y': '50', 'width': '350', 'height': '100' }, |
| { 'column': 'd-start / d-end', 'row': 'c-start / c-end', 'x': '0', 'y': '50', 'width': '350', 'height': '100'}, |
| { 'column': 'c', 'row': 'd', 'x': '150', 'y': '0', 'width': '200', 'height': '150' } ]; |
| |
| testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnRepeatedNames, 'rows': rowRepeatedNames }, itemsRepeat); |
| testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnRepeatedNames, 'rows': rowRepeatedNames }, itemsRepeatTwo); |
| testLayout({ 'areas': templateAreaTwo, 'columns': columnRepeatedNames, 'rows': rowRepeatedNames, 'areas': templateAreaOne }, itemsRepeat); |
| testLayout({ 'areas': templateAreaOne, 'columns': columnRepeatedNames, 'rows': rowRepeatedNames, 'areas': templateAreaTwo }, itemsRepeatTwo); |
| testLayout({ 'columns': columnRepeatedNames, 'rows': rowRepeatedNames, 'areas': templateAreaTwo, 'areas': templateAreaOne }, itemsRepeat); |
| testLayout({ 'columns': columnRepeatedNames, 'rows': rowRepeatedNames, 'areas': templateAreaOne, 'areas': templateAreaTwo }, itemsRepeatTwo); |
| } |
| |
| window.addEventListener("load", updateRowsColumns, false); |
| </script> |
| </head> |
| <body> |
| <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> |
| |
| <div id="gridContainer" style="position: relative"></div> |
| |
| <div id="test-output"></div> |
| |
| </body> |
| </html> |
