OLD | NEW |
---|---|
(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 that.</div> | |
Julien - ping for review
2014/05/12 11:42:12
I think you're missing some words here.
| |
149 | |
150 <div id="gridContainer" style="position: relative"></div> | |
151 | |
152 <div id="test-output"></div> | |
153 | |
154 </body> | |
155 </html> | |
OLD | NEW |