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

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 401473003: [CSS Grid Layout] Rename gridAutoFlow[Row|Column] to gridAutoFlow[Row|Column]Sparse (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Keep separation between sparse and dense in the tests Created 6 years, 5 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-auto-flow-sparse.html ('k') | LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.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 <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>
(...skipping 10 matching lines...) Expand all
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, document.getElementById("test-output")) ; 24 checkLayout("#" + autoFlowElementID, document.getElementById("test-output")) ;
25 } 25 }
26 26
27 function testAdditions() 27 function testAdditions()
28 { 28 {
29 var testOutput = document.getElementById("test-output"); 29 var testOutput = document.getElementById("test-output");
30 checkLayout("#autoFlowColumnElement", testOutput); 30 checkLayout("#autoFlowColumnElement", testOutput);
31 testAddition("gridAutoFlowColumn", { 'row': '1', 'column': '1' }, "autoFlowC olumnElement", { 'width': '50', 'height': '100' }); 31 testAddition("gridAutoFlowColumnDense", { 'row': '1', 'column': '1' }, "auto FlowColumnElement", { 'width': '50', 'height': '100' });
32 testAddition("gridAutoFlowColumn", { 'row': '1', 'column': '2' }, "autoFlowC olumnElement", { 'width': '50', 'height': '100' }); 32 testAddition("gridAutoFlowColumnDense", { 'row': '1', 'column': '2' }, "auto FlowColumnElement", { 'width': '50', 'height': '100' });
33 testAddition("gridAutoFlowColumn", { 'row': '2', 'column': '2' }, "autoFlowC olumnElement", { 'width': '50', 'height': '100' }); 33 testAddition("gridAutoFlowColumnDense", { 'row': '2', 'column': '2' }, "auto FlowColumnElement", { 'width': '50', 'height': '100' });
34 testAddition("gridAutoFlowColumn", { 'row': '2', 'column': '1' }, "autoFlowC olumnElement", { 'width': '170', 'height': '50' }); 34 testAddition("gridAutoFlowColumnDense", { 'row': '2', 'column': '1' }, "auto FlowColumnElement", { 'width': '170', 'height': '50' });
35 35
36 checkLayout("#autoFlowRowElement", testOutput); 36 checkLayout("#autoFlowRowElement", testOutput);
37 testAddition("gridAutoFlowRow", { 'row': '1', 'column': '1' }, "autoFlowRowE lement", { 'width': '100', 'height': '50' }); 37 testAddition("gridAutoFlowRowDense", { 'row': '1', 'column': '1' }, "autoFlo wRowElement", { 'width': '100', 'height': '50' });
38 testAddition("gridAutoFlowRow", { 'row': '2', 'column': '1' }, "autoFlowRowE lement", { 'width': '100', 'height': '50' }); 38 testAddition("gridAutoFlowRowDense", { 'row': '2', 'column': '1' }, "autoFlo wRowElement", { 'width': '100', 'height': '50' });
39 testAddition("gridAutoFlowRow", { 'row': '2', 'column': '2' }, "autoFlowRowE lement", { 'width': '100', 'height': '50' }); 39 testAddition("gridAutoFlowRowDense", { 'row': '2', 'column': '2' }, "autoFlo wRowElement", { 'width': '100', 'height': '50' });
40 testAddition("gridAutoFlowRow", { 'row': '1', 'column': '2' }, "autoFlowRowE lement", { 'width': '50', 'height': '30' }); 40 testAddition("gridAutoFlowRowDense", { 'row': '1', 'column': '2' }, "autoFlo wRowElement", { 'width': '50', 'height': '30' });
41 41
42 checkLayout("#gridAutoFlowColumnWithAuto", testOutput); 42 checkLayout("#gridAutoFlowColumnWithAuto", testOutput);
43 testAddition("gridAutoFlowColumnWithAuto", { 'row': 'auto', 'column': '1' }, "autoFlowColumnElementWithAuto", { 'width': '50', 'height': '100' }); 43 testAddition("gridAutoFlowColumnWithAuto", { 'row': 'auto', 'column': '1' }, "autoFlowColumnElementWithAuto", { 'width': '50', 'height': '100' });
44 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' });
45 testAddition("gridAutoFlowColumnWithAuto", { 'row': 'auto', 'column': '2' }, "autoFlowColumnElementWithAuto", { 'width': '100', 'height': '100' }); 45 testAddition("gridAutoFlowColumnWithAuto", { 'row': 'auto', 'column': '2' }, "autoFlowColumnElementWithAuto", { 'width': '100', 'height': '100' });
46 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' });
47 47
48 checkLayout("#gridAutoFlowRowWithAuto", testOutput); 48 checkLayout("#gridAutoFlowRowWithAuto", testOutput);
49 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' });
50 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' });
51 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' });
52 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' });
53 } 53 }
54 window.addEventListener("load", testAdditions, false); 54 window.addEventListener("load", testAdditions, false);
55 </script> 55 </script>
56 <body> 56 <body>
57 57
58 <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>
59 59
60 <div class="unconstrainedContainer"> 60 <div class="unconstrainedContainer">
61 <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn"> 61 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense">
62 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement " data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div> 62 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement " data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
63 </div> 63 </div>
64 </div> 64 </div>
65 65
66 <div class="unconstrainedContainer"> 66 <div class="unconstrainedContainer">
67 <div class="grid gridAutoFlowRow" id="gridAutoFlowRow"> 67 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense">
68 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElement" d ata-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div> 68 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElement" d ata-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
69 </div> 69 </div>
70 </div> 70 </div>
71 71
72 <div class="unconstrainedContainer"> 72 <div class="unconstrainedContainer">
73 <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumnWithAuto"> 73 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnWithAuto">
74 <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>
75 </div> 75 </div>
76 </div> 76 </div>
77 77
78 <div class="unconstrainedContainer"> 78 <div class="unconstrainedContainer">
79 <div class="grid gridAutoFlowRow" id="gridAutoFlowRowWithAuto"> 79 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowWithAuto">
80 <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 >
81 </div> 81 </div>
82 </div> 82 </div>
83 83
84 <div id="test-output"></div> 84 <div id="test-output"></div>
85 85
86 </body> 86 </body>
87 </html> 87 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html ('k') | LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698