157 lines
10 KiB
HTML
157 lines
10 KiB
HTML
<!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>
|