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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-item-addition-auto-placement-update.html

Issue 198703004: [CSS Grid Layout] Fix issues adding new items to grid (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@enable-css-grid-layout
Patch Set: Keep else, improve comment and change param in growGrid() Created 6 years, 9 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/grid-item-addition-auto-placement-update-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
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <link href="resources/grid.css" rel="stylesheet"> 3 <link href="resources/grid.css" rel="stylesheet">
4 <style> 4 <style>
5 .grid { 5 .grid {
6 grid-template-columns: 50px 100px; 6 grid-template-columns: 50px 100px;
7 grid-template-rows: 50px 100px; 7 grid-template-rows: 50px 100px;
8 } 8 }
9 </style> 9 </style>
10 <script src="../../resources/check-layout.js"></script> 10 <script src="../../resources/check-layout.js"></script>
11 <script> 11 <script>
12 function testAddition(gridElementID, position, autoFlowElementID, size) 12 function testAddition(gridElementID, position, autoFlowElementID, size)
13 { 13 {
14 var gridElement = document.getElementById(gridElementID); 14 var gridElement = document.getElementById(gridElementID);
15 15
16 var gridItem = document.createElement("div"); 16 var gridItem = document.createElement("div");
17 gridItem.style.gridRow = position.row; 17 gridItem.style.gridRow = position.row;
18 gridItem.style.gridColumn = position.column; 18 gridItem.style.gridColumn = position.column;
19 gridElement.appendChild(gridItem); 19 gridElement.appendChild(gridItem);
20 20
21 var autoFlowElement = document.getElementById(autoFlowElementID); 21 var autoFlowElement = document.getElementById(autoFlowElementID);
22 autoFlowElement.setAttribute("data-expected-width", size.width); 22 autoFlowElement.setAttribute("data-expected-width", size.width);
23 autoFlowElement.setAttribute("data-expected-height", size.height); 23 autoFlowElement.setAttribute("data-expected-height", size.height);
24 checkLayout("#" + autoFlowElementID); 24 checkLayout("#" + autoFlowElementID, document.getElementById("test-output")) ;
25 } 25 }
26 26
27 function testAdditions() 27 function testAdditions()
28 { 28 {
29 checkLayout("#autoFlowColumnElement"); 29 var testOutput = document.getElementById("test-output");
30 checkLayout("#autoFlowColumnElement", testOutput);
30 testAddition("gridAutoFlowColumn", { 'row': '1', 'column': '1' }, "autoFlowC olumnElement", { 'width': '50', 'height': '100' }); 31 testAddition("gridAutoFlowColumn", { 'row': '1', 'column': '1' }, "autoFlowC olumnElement", { 'width': '50', 'height': '100' });
31 testAddition("gridAutoFlowColumn", { 'row': '1', 'column': '2' }, "autoFlowC olumnElement", { 'width': '50', 'height': '100' }); 32 testAddition("gridAutoFlowColumn", { 'row': '1', 'column': '2' }, "autoFlowC olumnElement", { 'width': '50', 'height': '100' });
32 testAddition("gridAutoFlowColumn", { 'row': '2', 'column': '2' }, "autoFlowC olumnElement", { 'width': '50', 'height': '100' }); 33 testAddition("gridAutoFlowColumn", { 'row': '2', 'column': '2' }, "autoFlowC olumnElement", { 'width': '50', 'height': '100' });
33 testAddition("gridAutoFlowColumn", { 'row': '2', 'column': '1' }, "autoFlowC olumnElement", { 'width': '170', 'height': '50' }); 34 testAddition("gridAutoFlowColumn", { 'row': '2', 'column': '1' }, "autoFlowC olumnElement", { 'width': '170', 'height': '50' });
34 35
35 checkLayout("#autoFlowRowElement"); 36 checkLayout("#autoFlowRowElement", testOutput);
36 testAddition("gridAutoFlowRow", { 'row': '1', 'column': '1' }, "autoFlowRowE lement", { 'width': '100', 'height': '50' }); 37 testAddition("gridAutoFlowRow", { 'row': '1', 'column': '1' }, "autoFlowRowE lement", { 'width': '100', 'height': '50' });
37 testAddition("gridAutoFlowRow", { 'row': '2', 'column': '1' }, "autoFlowRowE lement", { 'width': '100', 'height': '50' }); 38 testAddition("gridAutoFlowRow", { 'row': '2', 'column': '1' }, "autoFlowRowE lement", { 'width': '100', 'height': '50' });
38 testAddition("gridAutoFlowRow", { 'row': '2', 'column': '2' }, "autoFlowRowE lement", { 'width': '100', 'height': '50' }); 39 testAddition("gridAutoFlowRow", { 'row': '2', 'column': '2' }, "autoFlowRowE lement", { 'width': '100', 'height': '50' });
39 testAddition("gridAutoFlowRow", { 'row': '1', 'column': '2' }, "autoFlowRowE lement", { 'width': '50', 'height': '30' }); 40 testAddition("gridAutoFlowRow", { 'row': '1', 'column': '2' }, "autoFlowRowE lement", { 'width': '50', 'height': '30' });
40 41
41 checkLayout("#gridAutoFlowColumnWithAuto"); 42 checkLayout("#gridAutoFlowColumnWithAuto", testOutput);
42 testAddition("gridAutoFlowColumnWithAuto", { 'row': 'auto', 'column': '1' }, "autoFlowColumnElementWithAuto", { 'width': '50', 'height': '100' }); 43 testAddition("gridAutoFlowColumnWithAuto", { 'row': 'auto', 'column': '1' }, "autoFlowColumnElementWithAuto", { 'width': '50', 'height': '100' });
43 testAddition("gridAutoFlowColumnWithAuto", { 'row': '1', 'column': '1' }, "a utoFlowColumnElementWithAuto", { 'width': '100', 'height': '50' }); 44 testAddition("gridAutoFlowColumnWithAuto", { 'row': '1', 'column': '1' }, "a utoFlowColumnElementWithAuto", { 'width': '100', 'height': '50' });
44 testAddition("gridAutoFlowColumnWithAuto", { 'row': 'auto', 'column': '2' }, "autoFlowColumnElementWithAuto", { 'width': '100', 'height': '100' }); 45 testAddition("gridAutoFlowColumnWithAuto", { 'row': 'auto', 'column': '2' }, "autoFlowColumnElementWithAuto", { 'width': '100', 'height': '100' });
45 testAddition("gridAutoFlowColumnWithAuto", { 'row': '2', 'column': '2' }, "a utoFlowColumnElementWithAuto", { 'width': '170', 'height': '50' }); 46 testAddition("gridAutoFlowColumnWithAuto", { 'row': '2', 'column': '2' }, "a utoFlowColumnElementWithAuto", { 'width': '170', 'height': '50' });
46 47
47 checkLayout("#gridAutoFlowRowWithAuto"); 48 checkLayout("#gridAutoFlowRowWithAuto", testOutput);
48 testAddition("gridAutoFlowRowWithAuto", { 'row': '1', 'column': 'auto' }, "a utoFlowRowElementWithAuto", { 'width': '100', 'height': '50' }); 49 testAddition("gridAutoFlowRowWithAuto", { 'row': '1', 'column': 'auto' }, "a utoFlowRowElementWithAuto", { 'width': '100', 'height': '50' });
49 testAddition("gridAutoFlowRowWithAuto", { 'row': 'auto', 'column': '1' }, "a utoFlowRowElementWithAuto", { 'width': '100', 'height': '50' }); 50 testAddition("gridAutoFlowRowWithAuto", { 'row': 'auto', 'column': '1' }, "a utoFlowRowElementWithAuto", { 'width': '100', 'height': '50' });
50 testAddition("gridAutoFlowRowWithAuto", { 'row': '1', 'column': '2' }, "auto FlowRowElementWithAuto", { 'width': '50', 'height': '100' }); 51 testAddition("gridAutoFlowRowWithAuto", { 'row': '1', 'column': '2' }, "auto FlowRowElementWithAuto", { 'width': '50', 'height': '100' });
51 testAddition("gridAutoFlowRowWithAuto", { 'row': '1', 'column': '1' }, "auto FlowRowElementWithAuto", { 'width': '50', 'height': '100' }); 52 testAddition("gridAutoFlowRowWithAuto", { 'row': '1', 'column': '1' }, "auto FlowRowElementWithAuto", { 'width': '50', 'height': '100' });
52 } 53 }
53 window.addEventListener("load", testAdditions, false); 54 window.addEventListener("load", testAdditions, false);
54 </script> 55 </script>
55 <body> 56 <body>
56 57
57 <p>This test checks that the tracks' auto positions are recomputed after adding a grid item.</p> 58 <p>This test checks that the tracks' auto positions are recomputed after adding a grid item.</p>
(...skipping 15 matching lines...) Expand all
73 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement WithAuto" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</ div> 74 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement WithAuto" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</ div>
74 </div> 75 </div>
75 </div> 76 </div>
76 77
77 <div class="unconstrainedContainer"> 78 <div class="unconstrainedContainer">
78 <div class="grid gridAutoFlowRow" id="gridAutoFlowRowWithAuto"> 79 <div class="grid gridAutoFlowRow" id="gridAutoFlowRowWithAuto">
79 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWit hAuto" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div > 80 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWit hAuto" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div >
80 </div> 81 </div>
81 </div> 82 </div>
82 83
84 <div id="test-output"></div>
85
83 </body> 86 </body>
84 </html> 87 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-item-addition-auto-placement-update-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698