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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 208133003: [CSS Grid Layout] Prevent issues with checkLayout() in grid items (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: 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 | « LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-item-removal-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 testRemoval(gridElementID, autoFlowElementID, size) 12 function testRemoval(gridElementID, autoFlowElementID, size)
13 { 13 {
14 var gridElement = document.getElementById(gridElementID); 14 var gridElement = document.getElementById(gridElementID);
15 var autoFlowElement = document.getElementById(autoFlowElementID); 15 var autoFlowElement = document.getElementById(autoFlowElementID);
16 16
17 // Remove the white space and the first grid item. 17 // Remove the white space and the first grid item.
18 gridElement.removeChild(gridElement.firstChild); 18 gridElement.removeChild(gridElement.firstChild);
19 gridElement.removeChild(gridElement.firstChild); 19 gridElement.removeChild(gridElement.firstChild);
20 20
21 autoFlowElement.setAttribute("data-expected-width", size.width); 21 autoFlowElement.setAttribute("data-expected-width", size.width);
22 autoFlowElement.setAttribute("data-expected-height", size.height); 22 autoFlowElement.setAttribute("data-expected-height", size.height);
23 checkLayout("#" + gridElementID); 23 checkLayout("#" + gridElementID, document.getElementById("test-output"));
24 } 24 }
25 25
26 function testRemovals() 26 function testRemovals()
27 { 27 {
28 checkLayout("#autoFlowColumnElement"); 28 var testOutput = document.getElementById("test-output");
29 checkLayout("#autoFlowColumnElement", testOutput);
29 testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '100', 'height': '100' }); 30 testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '100', 'height': '100' });
30 testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '100', 'height': '50' }); 31 testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '100', 'height': '50' });
31 testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '50', 'height': '100' }); 32 testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '50', 'height': '100' });
32 testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '50', 'height': '50' }); 33 testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '50', 'height': '50' });
33 34
34 checkLayout("#autoFlowRowElement"); 35 checkLayout("#autoFlowRowElement", testOutput);
35 testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '100', 'heig ht': '100' }); 36 testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '100', 'heig ht': '100' });
36 testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '100', 'heig ht': '50' }); 37 testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '100', 'heig ht': '50' });
37 testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '50', 'heigh t': '50' }); 38 testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '50', 'heigh t': '50' });
38 testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '50', 'heigh t': '50' }); 39 testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '50', 'heigh t': '50' });
39 40
40 checkLayout("#gridAutoFlowColumnWithAutoItems"); 41 checkLayout("#gridAutoFlowColumnWithAutoItems", testOutput);
41 testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoIt ems", { 'width': '100', 'height': '100' }); 42 testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoIt ems", { 'width': '100', 'height': '100' });
42 testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoIt ems", { 'width': '100', 'height': '50' }); 43 testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoIt ems", { 'width': '100', 'height': '50' });
43 testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoIt ems", { 'width': '50', 'height': '100' }); 44 testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoIt ems", { 'width': '50', 'height': '100' });
44 testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoIt ems", { 'width': '50', 'height': '50' }); 45 testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoIt ems", { 'width': '50', 'height': '50' });
45 46
46 checkLayout("#gridAutoFlowRowWithAutoAndFixedItems"); 47 checkLayout("#gridAutoFlowRowWithAutoAndFixedItems", testOutput);
47 testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithA utoAndFixedItems", { 'width': '100', 'height': '100' }); 48 testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithA utoAndFixedItems", { 'width': '100', 'height': '100' });
48 testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithA utoAndFixedItems", { 'width': '100', 'height': '50' }); 49 testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithA utoAndFixedItems", { 'width': '100', 'height': '50' });
49 testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithA utoAndFixedItems", { 'width': '100', 'height': '50' }); 50 testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithA utoAndFixedItems", { 'width': '100', 'height': '50' });
50 testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithA utoAndFixedItems", { 'width': '50', 'height': '50' }); 51 testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithA utoAndFixedItems", { 'width': '50', 'height': '50' });
51 } 52 }
52 window.addEventListener("load", testRemovals, false); 53 window.addEventListener("load", testRemovals, false);
53 </script> 54 </script>
54 <body> 55 <body>
55 56
56 <p>This test checks that the tracks' auto positions are recomputed after removin g a grid item.</p> 57 <p>This test checks that the tracks' auto positions are recomputed after removin g a grid item.</p>
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
88 <div class="unconstrainedContainer"> 89 <div class="unconstrainedContainer">
89 <div class="grid gridAutoFlowRow" id="gridAutoFlowRowWithAutoAndFixedItems"> 90 <div class="grid gridAutoFlowRow" id="gridAutoFlowRowWithAutoAndFixedItems">
90 <div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div> 91 <div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
91 <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div > 92 <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div >
92 <div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div> 93 <div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
93 <div class="sizedToGridArea firstRowAutoColumn">XXXXX XXXXX XXXXX</div> 94 <div class="sizedToGridArea firstRowAutoColumn">XXXXX XXXXX XXXXX</div>
94 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWit hAutoAndFixedItems" data-expected-width="100" data-expected-height="100">XXXXX X XXXX XXXXX</div> 95 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWit hAutoAndFixedItems" data-expected-width="100" data-expected-height="100">XXXXX X XXXX XXXXX</div>
95 </div> 96 </div>
96 </div> 97 </div>
97 98
99 <div id="test-output"></div>
100
98 </body> 101 </body>
99 </html> 102 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698