Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(74)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html

Issue 148293008: [CSS Grid Layout] Add support to place items using named grid lines (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Rebased patch Created 6 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set-expected.txt » ('j') | Source/core/css/resolver/StyleBuilderCustom.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html
diff --git a/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html b/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html
new file mode 100644
index 0000000000000000000000000000000000000000..7c4ab093cc0be5e9f07b6f85dca87b211e1c4e70
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html
@@ -0,0 +1,155 @@
+<!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";
+
+ 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': '0', 'width': '300', 'height': '50' }];
+
+ 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': '0', 'width': '200', 'height': '50' },
+ { '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': '0', 'width': '300', 'height': '50' },
+ { 'row': 'c', 'x': '0', 'y': '0', 'width': '50', 'height': '150'},
+ { 'column': '"d-start"', 'x': '50', 'y': '0', 'width': '100', 'height': '50' },
+ { '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': '0', 'width': '300', 'height': '50' },
+ { 'row': 'c', 'x': '0', 'y': '0', 'width': '50', 'height': '350'},
+ { 'column': '"d-start"', 'x': '50', 'y': '0', 'width': '100', 'height': '50' },
+ { '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': '150', 'width': '350', 'height': '200' },
+ { 'column': '"d-start" / "d-end"', 'row': '"c-start" / "c-end"', 'x': '0', 'y': '150', 'width': '350', 'height': '200'},
+ { '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 that.</div>
+
+<div id="gridContainer" style="position: relative"></div>
+
+<div id="test-output"></div>
+
+</body>
+</html>
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set-expected.txt » ('j') | Source/core/css/resolver/StyleBuilderCustom.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698