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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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: Patch for landing v3. Fix for Debug bot 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 unified diff | 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') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
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
14 for (var key in gridDefinitions) {
15 if (key == "rows")
16 gridElement.style.gridTemplateRows = gridDefinitions[key];
17 else if (key == "columns")
18 gridElement.style.gridTemplateColumns = gridDefinitions[key];
19 else
20 gridElement.style.gridTemplateAreas = gridDefinitions[key];
21 }
22
23 for (var i in itemsDefinitions) {
24 var itemDefinition = itemsDefinitions[i];
25 var gridItem = document.createElement("div");
26 gridItem.className = "sizedToGridArea";
27
28 if (itemDefinition.row)
29 gridItem.style.gridRow = itemDefinition.row;
30 if (itemDefinition.column)
31 gridItem.style.gridColumn = itemDefinition.column;
32
33 gridItem.setAttribute("data-offset-x", itemDefinition.x);
34 gridItem.setAttribute("data-offset-y", itemDefinition.y);
35 gridItem.setAttribute("data-expected-width", itemDefinition.width);
36 gridItem.setAttribute("data-expected-height", itemDefinition.height);
37
38 gridElement.appendChild(gridItem);
39 }
40
41 gridContainer.appendChild(gridElement);
42
43 checkLayout(".grid", document.getElementById("test-output"));
44 gridContainer.removeChild(gridElement);
45 }
46
47 function updateRowsColumns()
48 {
49 var templateAreaOne = '". a a" "c a a" ". . d"';
50 var templateAreaTwo = '". d d" "a d d" ". . c"';
51
52 var columnUniqueNames = '(a) 50px (b b-start) 100px (c -start) 200px (d)';
53 var rowUniqueNames = '(e) 50px (f -end) 100px (g g-start) 200px (h)';
54 var columnNamedLineBeforeArea = '(a-start c-start) 50px (d-start) 100px 200p x';
55 var rowNamedLineBeforeArea = '(c-start) 50px (d-start) 100px 200px';
56 var columnRepeatedNames = '(d-start) 50px (d-start) 100px (d-start) 200px';
57 var rowRepeatedNames = '50px (c-end) 100px (c-end) 200px (c-end)';
58 var columnNoNames = '50px 100px 200px';
59 var rowNoNames = '50px 100px 200px';
60
61 // Check grid area resolution.
62 var gridAreasItems = [ { 'column': 'd', 'x': '150', 'y': '0', 'width': '200' , 'height': '50' },
63 { 'column': 'c', 'x': '0', 'y': '0', 'width': '50', ' height': '50' },
64 { 'column': 'a', 'x': '50', 'y': '0', 'width': '300', 'height': '50' }];
65
66 testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': template AreaOne }, gridAreasItems);
67 testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': row NoNames }, gridAreasItems);
68 testLayout({ 'columns': columnNoNames, 'areas': templateAreaOne, 'rows': row NoNames }, gridAreasItems);
69
70 var gridAreasItemsTwo = [ { 'column': 'd', 'x': '50', 'y': '0', 'width': '30 0', 'height': '50' },
71 { 'column': 'c', 'x': '150', 'y': '0', 'width': '2 00', 'height': '50' },
72 { 'column': 'a', 'x': '0', 'y': '0', 'width': '50' , 'height': '50' }];
73
74 testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames }, gridAreasItems);
75 testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': rowNoNames }, gridAreasItemsTwo);
76 testLayout({ 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': row NoNames, 'areas': templateAreaOne, }, gridAreasItems);
77 testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': row NoNames, 'areas': templateAreaTwo, }, gridAreasItemsTwo);
78 testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': template AreaTwo, 'areas': templateAreaOne }, gridAreasItems);
79 testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': template AreaOne, 'areas': templateAreaTwo }, gridAreasItemsTwo);
80
81 // Check grid implicit named grid lines resolution.
82 var implicitNamesItems = [{ 'column': '"a-start"', 'row': '"d-start"', 'x': '50', 'y': '150', 'width': '100', 'height': '200' },
83 { 'column': '"a-start"', 'row': 'd', 'x': '50', 'y ': '150', 'width': '100', 'height': '200' },
84 { 'column': '"d-start"', 'row': '"c-start"', 'x': '150', 'y': '50', 'width': '200', 'height': '100' }];
85
86 testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': template AreaOne }, implicitNamesItems);
87 testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': row NoNames }, implicitNamesItems);
88 testLayout({ 'columns': columnNoNames, 'areas': templateAreaOne, 'rows': row NoNames }, implicitNamesItems);
89
90 var implicitNamesItemsTwo = [{ 'column': '"a-start"', 'row': '"d-start"', 'x ': '0', 'y': '0', 'width': '50', 'height': '50' },
91 { 'column': '"a-start"', 'row': 'd', 'x': '0', 'y': '0', 'width': '50', 'height': '150' },
92 { 'column': '"d-start"', 'row': '"c-start"', 'x ': '50', 'y': '150', 'width': '100', 'height': '200' }];
93
94 testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames }, implicitNamesItems);
95 testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': rowNoNames }, implicitNamesItemsTwo);
96 testLayout({ 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': row NoNames, 'areas': templateAreaOne }, implicitNamesItems);
97 testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': row NoNames, 'areas': templateAreaTwo }, implicitNamesItemsTwo);
98 testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': template AreaTwo, 'areas': templateAreaOne }, implicitNamesItems);
99 testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': template AreaOne, 'areas': templateAreaTwo }, implicitNamesItemsTwo);
100
101 // Check resolution when named lines are defined before the grid area.
102 var itemsBeforeArea = [ { 'column': 'd', 'x': '50', 'y': '0', 'width': '300' , 'height': '50' },
103 { 'row': 'c', 'x': '0', 'y': '0', 'width': '50', 'he ight': '150'},
104 { 'column': '"d-start"', 'x': '50', 'y': '0', 'width ': '100', 'height': '50' },
105 { 'column': '"a-start"', 'row': 'd', 'x': '0', 'y': '50', 'width': '50', 'height': '300' } ];
106
107 testLayout({ 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBefor eArea, 'areas': templateAreaOne }, itemsBeforeArea);
108 testLayout({ 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea);
109 testLayout({ 'columns': columnNamedLineBeforeArea, 'areas': templateAreaOne, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea);
110
111 var itemsBeforeAreaTwo = [ { 'column': 'd', 'x': '50', 'y': '0', 'width': '3 00', 'height': '50' },
112 { 'row': 'c', 'x': '0', 'y': '0', 'width': '50', 'height': '350'},
113 { 'column': '"d-start"', 'x': '50', 'y': '0', 'wi dth': '100', 'height': '50' },
114 { 'column': '"a-start"', 'row': 'd', 'x': '0', 'y ': '0', 'width': '50', 'height': '150' } ];
115
116 testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea);
117 testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeAreaTwo) ;
118 testLayout({ 'areas': templateAreaTwo, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaOne }, itemsBeforeArea);
119 testLayout({ 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaTwo }, itemsBeforeAreaTwo) ;
120 testLayout({ 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBefor eArea, 'areas': templateAreaTwo, 'areas': templateAreaOne }, itemsBeforeArea);
121 testLayout({ 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBefor eArea, 'areas': templateAreaOne, 'areas': templateAreaTwo }, itemsBeforeAreaTwo) ;
122
123 // Check resolution when named lines are defined multiple times.
124 var itemsRepeat = [ { 'column': 'd', 'row': 'c', 'x': '0', 'y': '50', 'width ': '350', 'height': '100' },
125 { 'column': '"d-start" / "d-end"', 'row': '"c-start" / " c-end"', 'x': '0', 'y': '50', 'width': '350', 'height': '100'},
126 { 'column': 'c', 'row': 'd', 'x': '0', 'y': '150', 'widt h': '50', 'height': '200' } ];
127
128 testLayout({ 'columns': columnRepeatedNames, 'rows': rowRepeatedNames, 'area s': templateAreaOne }, itemsRepeat);
129 testLayout({ 'areas': templateAreaOne, 'columns': columnRepeatedNames, 'rows ': rowRepeatedNames }, itemsRepeat);
130 testLayout({ 'columns': columnRepeatedNames, 'areas': templateAreaOne, 'rows ': rowRepeatedNames }, itemsRepeat);
131
132 var itemsRepeatTwo = [ { 'column': 'd', 'row': 'c', 'x': '0', 'y': '150', 'w idth': '350', 'height': '200' },
133 { 'column': '"d-start" / "d-end"', 'row': '"c-start" / "c-end"', 'x': '0', 'y': '150', 'width': '350', 'height': '200'},
134 { 'column': 'c', 'row': 'd', 'x': '150', 'y': '0', 'w idth': '200', 'height': '150' } ];
135
136 testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnRepeatedNames, 'rows': rowRepeatedNames }, itemsRepeat);
137 testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnRepeatedNames, 'rows': rowRepeatedNames }, itemsRepeatTwo);
138 testLayout({ 'areas': templateAreaTwo, 'columns': columnRepeatedNames, 'rows ': rowRepeatedNames, 'areas': templateAreaOne }, itemsRepeat);
139 testLayout({ 'areas': templateAreaOne, 'columns': columnRepeatedNames, 'rows ': rowRepeatedNames, 'areas': templateAreaTwo }, itemsRepeatTwo);
140 testLayout({ 'columns': columnRepeatedNames, 'rows': rowRepeatedNames, 'area s': templateAreaTwo, 'areas': templateAreaOne }, itemsRepeat);
141 testLayout({ 'columns': columnRepeatedNames, 'rows': rowRepeatedNames, 'area s': templateAreaOne, 'areas': templateAreaTwo }, itemsRepeatTwo);
142 }
143
144 window.addEventListener("load", updateRowsColumns, false);
145 </script>
146 </head>
147 <body>
148 <div>This test checks we properly recompute the resolution of named grid lines a nd named grid areas when we change the grid positioning properties.</div>
149
150 <div id="gridContainer" style="position: relative"></div>
151
152 <div id="test-output"></div>
153
154 </body>
155 </html>
OLDNEW
« 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') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698