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

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 826893002: [CSS Grid Layout] Remove stack from grid-auto-flow syntax (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Rebased patch Created 5 years, 11 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 | « LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <link href="resources/grid.css" rel="stylesheet"> 4 <link href="resources/grid.css" rel="stylesheet">
5 <script src="../../resources/check-layout.js"></script> 5 <script src="../../resources/check-layout.js"></script>
6 <script type="text/javascript"> 6 <script type="text/javascript">
7 7
8 function testLayout(gridDefinitions, itemsDefinitions) 8 function testLayout(gridDefinitions, itemsDefinitions)
9 { 9 {
10 var gridContainer = document.getElementById("gridContainer"); 10 var gridContainer = document.getElementById("gridContainer");
11 var gridElement = document.createElement("div"); 11 var gridElement = document.createElement("div");
12 gridElement.className = "grid"; 12 gridElement.className = "grid";
13 gridElement.style.gridAutoFlow = "stack"; 13 gridElement.style.gridAutoFlow = "dense";
14 14
15 for (var key in gridDefinitions) { 15 for (var key in gridDefinitions) {
16 if (key == "rows") 16 if (key == "rows")
17 gridElement.style.gridTemplateRows = gridDefinitions[key]; 17 gridElement.style.gridTemplateRows = gridDefinitions[key];
18 else if (key == "columns") 18 else if (key == "columns")
19 gridElement.style.gridTemplateColumns = gridDefinitions[key]; 19 gridElement.style.gridTemplateColumns = gridDefinitions[key];
20 else 20 else
21 gridElement.style.gridTemplateAreas = gridDefinitions[key]; 21 gridElement.style.gridTemplateAreas = gridDefinitions[key];
22 } 22 }
23 23
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
55 var columnNamedLineBeforeArea = '(a-start c-start) 50px (d-start) 100px 200p x'; 55 var columnNamedLineBeforeArea = '(a-start c-start) 50px (d-start) 100px 200p x';
56 var rowNamedLineBeforeArea = '(c-start) 50px (d-start) 100px 200px'; 56 var rowNamedLineBeforeArea = '(c-start) 50px (d-start) 100px 200px';
57 var columnRepeatedNames = '(d-start) 50px (d-start) 100px (d-start) 200px'; 57 var columnRepeatedNames = '(d-start) 50px (d-start) 100px (d-start) 200px';
58 var rowRepeatedNames = '50px (c-end) 100px (c-end) 200px (c-end)'; 58 var rowRepeatedNames = '50px (c-end) 100px (c-end) 200px (c-end)';
59 var columnNoNames = '50px 100px 200px'; 59 var columnNoNames = '50px 100px 200px';
60 var rowNoNames = '50px 100px 200px'; 60 var rowNoNames = '50px 100px 200px';
61 61
62 // Check grid area resolution. 62 // Check grid area resolution.
63 var gridAreasItems = [ { 'column': 'd', 'x': '150', 'y': '0', 'width': '200' , 'height': '50' }, 63 var gridAreasItems = [ { 'column': 'd', 'x': '150', 'y': '0', 'width': '200' , 'height': '50' },
64 { 'column': 'c', 'x': '0', 'y': '0', 'width': '50', ' height': '50' }, 64 { 'column': 'c', 'x': '0', 'y': '0', 'width': '50', ' height': '50' },
65 » » » { 'column': 'a', 'x': '50', 'y': '0', 'width': '300', 'height': '50' }]; 65 » » » { 'column': 'a', 'x': '50', 'y': '50', 'width': '300' , 'height': '100' }];
66 66
67 testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': template AreaOne }, gridAreasItems); 67 testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': template AreaOne }, gridAreasItems);
68 testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': row NoNames }, gridAreasItems); 68 testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': row NoNames }, gridAreasItems);
69 testLayout({ 'columns': columnNoNames, 'areas': templateAreaOne, 'rows': row NoNames }, gridAreasItems); 69 testLayout({ 'columns': columnNoNames, 'areas': templateAreaOne, 'rows': row NoNames }, gridAreasItems);
70 70
71 var gridAreasItemsTwo = [ { 'column': 'd', 'x': '50', 'y': '0', 'width': '30 0', 'height': '50' }, 71 var gridAreasItemsTwo = [ { 'column': 'd', 'x': '50', 'y': '0', 'width': '30 0', 'height': '50' },
72 » » » { 'column': 'c', 'x': '150', 'y': '0', 'width': '2 00', 'height': '50' }, 72 » » » { 'column': 'c', 'x': '150', 'y': '50', 'width': ' 200', 'height': '100' },
73 { 'column': 'a', 'x': '0', 'y': '0', 'width': '50' , 'height': '50' }]; 73 { 'column': 'a', 'x': '0', 'y': '0', 'width': '50' , 'height': '50' }];
74 74
75 testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames }, gridAreasItems); 75 testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames }, gridAreasItems);
76 testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': rowNoNames }, gridAreasItemsTwo); 76 testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': rowNoNames }, gridAreasItemsTwo);
77 testLayout({ 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': row NoNames, 'areas': templateAreaOne, }, gridAreasItems); 77 testLayout({ 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': row NoNames, 'areas': templateAreaOne, }, gridAreasItems);
78 testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': row NoNames, 'areas': templateAreaTwo, }, gridAreasItemsTwo); 78 testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': row NoNames, 'areas': templateAreaTwo, }, gridAreasItemsTwo);
79 testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': template AreaTwo, 'areas': templateAreaOne }, gridAreasItems); 79 testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': template AreaTwo, 'areas': templateAreaOne }, gridAreasItems);
80 testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': template AreaOne, 'areas': templateAreaTwo }, gridAreasItemsTwo); 80 testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': template AreaOne, 'areas': templateAreaTwo }, gridAreasItemsTwo);
81 81
82 // Check grid implicit named grid lines resolution. 82 // Check grid implicit named grid lines resolution.
(...skipping 10 matching lines...) Expand all
93 { 'column': 'd-start', 'row': 'c-start', 'x': ' 50', 'y': '150', 'width': '100', 'height': '200' }]; 93 { 'column': 'd-start', 'row': 'c-start', 'x': ' 50', 'y': '150', 'width': '100', 'height': '200' }];
94 94
95 testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames }, implicitNamesItems); 95 testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames }, implicitNamesItems);
96 testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': rowNoNames }, implicitNamesItemsTwo); 96 testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': rowNoNames }, implicitNamesItemsTwo);
97 testLayout({ 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': row NoNames, 'areas': templateAreaOne }, implicitNamesItems); 97 testLayout({ 'areas': templateAreaTwo, 'columns': columnNoNames, 'rows': row NoNames, 'areas': templateAreaOne }, implicitNamesItems);
98 testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': row NoNames, 'areas': templateAreaTwo }, implicitNamesItemsTwo); 98 testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': row NoNames, 'areas': templateAreaTwo }, implicitNamesItemsTwo);
99 testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': template AreaTwo, 'areas': templateAreaOne }, implicitNamesItems); 99 testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': template AreaTwo, 'areas': templateAreaOne }, implicitNamesItems);
100 testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': template AreaOne, 'areas': templateAreaTwo }, implicitNamesItemsTwo); 100 testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': template AreaOne, 'areas': templateAreaTwo }, implicitNamesItemsTwo);
101 101
102 // Check resolution when named lines are defined before the grid area. 102 // Check resolution when named lines are defined before the grid area.
103 var itemsBeforeArea = [ { 'column': 'd', 'x': '50', 'y': '0', 'width': '300' , 'height': '50' }, 103 var itemsBeforeArea = [ { 'column': 'd', 'x': '50', 'y': '150', 'width': '30 0', 'height': '200' },
104 » » » { 'row': 'c', 'x': '0', 'y': '0', 'width': '50', 'he ight': '150'}, 104 » » » { 'row': 'c', 'x': '50', 'y': '0', 'width': '100', ' height': '150'},
105 » » » { 'column': 'd-start', 'x': '50', 'y': '0', 'width': '100', 'height': '50' }, 105 » » » { 'column': 'd-start', 'x': '50', 'y': '350', 'width ': '100', 'height': '0' },
106 { 'column': 'a-start', 'row': 'd', 'x': '0', 'y': '5 0', 'width': '50', 'height': '300' } ]; 106 { 'column': 'a-start', 'row': 'd', 'x': '0', 'y': '5 0', 'width': '50', 'height': '300' } ];
107 107
108 testLayout({ 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBefor eArea, 'areas': templateAreaOne }, itemsBeforeArea); 108 testLayout({ 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBefor eArea, 'areas': templateAreaOne }, itemsBeforeArea);
109 testLayout({ 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea); 109 testLayout({ 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea);
110 testLayout({ 'columns': columnNamedLineBeforeArea, 'areas': templateAreaOne, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea); 110 testLayout({ 'columns': columnNamedLineBeforeArea, 'areas': templateAreaOne, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea);
111 111
112 var itemsBeforeAreaTwo = [ { 'column': 'd', 'x': '50', 'y': '0', 'width': '3 00', 'height': '50' }, 112 var itemsBeforeAreaTwo = [ { 'column': 'd', 'x': '50', 'y': '350', 'width': '300', 'height': '0' },
113 » » » { 'row': 'c', 'x': '0', 'y': '0', 'width': '50', 'height': '350'}, 113 » » » { 'row': 'c', 'x': '50', 'y': '0', 'width': '100' , 'height': '350'},
114 » » » { 'column': 'd-start', 'x': '50', 'y': '0', 'widt h': '100', 'height': '50' }, 114 » » » { 'column': 'd-start', 'x': '50', 'y': '350', 'wi dth': '100', 'height': '0' },
115 { 'column': 'a-start', 'row': 'd', 'x': '0', 'y': '0', 'width': '50', 'height': '150' } ]; 115 { 'column': 'a-start', 'row': 'd', 'x': '0', 'y': '0', 'width': '50', 'height': '150' } ];
116 116
117 testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea); 117 testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea);
118 testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeAreaTwo) ; 118 testLayout({ 'areas': templateAreaOne, 'areas': templateAreaTwo, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeAreaTwo) ;
119 testLayout({ 'areas': templateAreaTwo, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaOne }, itemsBeforeArea); 119 testLayout({ 'areas': templateAreaTwo, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaOne }, itemsBeforeArea);
120 testLayout({ 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaTwo }, itemsBeforeAreaTwo) ; 120 testLayout({ 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaTwo }, itemsBeforeAreaTwo) ;
121 testLayout({ 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBefor eArea, 'areas': templateAreaTwo, 'areas': templateAreaOne }, itemsBeforeArea); 121 testLayout({ 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBefor eArea, 'areas': templateAreaTwo, 'areas': templateAreaOne }, itemsBeforeArea);
122 testLayout({ 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBefor eArea, 'areas': templateAreaOne, 'areas': templateAreaTwo }, itemsBeforeAreaTwo) ; 122 testLayout({ 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBefor eArea, 'areas': templateAreaOne, 'areas': templateAreaTwo }, itemsBeforeAreaTwo) ;
123 123
124 // Check resolution when named lines are defined multiple times. 124 // Check resolution when named lines are defined multiple times.
(...skipping 22 matching lines...) Expand all
147 </head> 147 </head>
148 <body> 148 <body>
149 <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 <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>
150 150
151 <div id="gridContainer" style="position: relative"></div> 151 <div id="gridContainer" style="position: relative"></div>
152 152
153 <div id="test-output"></div> 153 <div id="test-output"></div>
154 154
155 </body> 155 </body>
156 </html> 156 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698