OLD | NEW |
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"); |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
43 | 43 |
44 checkLayout(".grid", document.getElementById("test-output")); | 44 checkLayout(".grid", document.getElementById("test-output")); |
45 gridContainer.removeChild(gridElement); | 45 gridContainer.removeChild(gridElement); |
46 } | 46 } |
47 | 47 |
48 function updateRowsColumns() | 48 function updateRowsColumns() |
49 { | 49 { |
50 var templateAreaOne = '". a a" "c a a" ". . d"'; | 50 var templateAreaOne = '". a a" "c a a" ". . d"'; |
51 var templateAreaTwo = '". d d" "a d d" ". . c"'; | 51 var templateAreaTwo = '". d d" "a d d" ". . c"'; |
52 | 52 |
53 var columnUniqueNames = '(a) 50px (b b-start) 100px (c -start) 200px (d)'; | 53 var columnUniqueNames = '[a] 50px [b b-start] 100px [c -start] 200px [d]'; |
54 var rowUniqueNames = '(e) 50px (f -end) 100px (g g-start) 200px (h)'; | 54 var rowUniqueNames = '[e] 50px [f -end] 100px [g g-start] 200px [h]'; |
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': '50', 'width': '300'
, 'height': '100' }]; | 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); |
(...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
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> |
OLD | NEW |