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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-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 | « no previous file | LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-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 <head> 3 <head>
4 <link href="resources/grid.css" rel="stylesheet"> 4 <link href="resources/grid.css" rel="stylesheet">
5 <style> 5 <style>
6 .grid { 6 .grid {
7 grid-template-rows: 20px; 7 grid-template-rows: 20px;
8 grid-template-columns: 10px; 8 grid-template-columns: 10px;
9 grid-auto-rows: 30px; 9 grid-auto-rows: 30px;
10 grid-auto-columns: 50px; 10 grid-auto-columns: 50px;
11 font: 10px/1 Ahem; 11 font: 10px/1 Ahem;
12 } 12 }
13 </style> 13 </style>
14 </head> 14 </head>
15 <script src="../../resources/check-layout.js"></script> 15 <script src="../../resources/check-layout.js"></script>
16 <script> 16 <script>
17 function updateAndCheck(gridElementID, defaultSizing, gridItemSize) 17 function updateAndCheck(gridElementID, defaultSizing, gridItemSize)
18 { 18 {
19 var gridElement = document.getElementById(gridElementID); 19 var gridElement = document.getElementById(gridElementID);
20 gridElement.style.gridAutoRows = defaultSizing.rows; 20 gridElement.style.gridAutoRows = defaultSizing.rows;
21 gridElement.style.gridAutoColumns = defaultSizing.columns; 21 gridElement.style.gridAutoColumns = defaultSizing.columns;
22 22
23 var gridItem = gridElement.firstChild.nextSibling; 23 var gridItem = gridElement.firstChild.nextSibling;
24 gridItem.setAttribute("data-expected-width", gridItemSize.width); 24 gridItem.setAttribute("data-expected-width", gridItemSize.width);
25 gridItem.setAttribute("data-expected-height", gridItemSize.height); 25 gridItem.setAttribute("data-expected-height", gridItemSize.height);
26 26
27 checkLayout("#" + gridElementID); 27 checkLayout("#" + gridElementID, document.getElementById("test-output"));
28 } 28 }
29 29
30 function updateGridAutoRowsColumns() 30 function updateGridAutoRowsColumns()
31 { 31 {
32 checkLayout('.grid'); 32 checkLayout('.grid', document.getElementById("test-output"));
33 33
34 // The constrained example is always sized to the min width so we don't test max width. 34 // The constrained example is always sized to the min width so we don't test max width.
35 updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' }); 35 updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' });
36 updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '200px' }); 36 updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '200px' });
37 updateAndCheck("constrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'co lumns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '20px' }); 37 updateAndCheck("constrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'co lumns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '20px' });
38 updateAndCheck("constrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'co lumns': 'minmax(max-content, 100px)' }, { 'width': '120px', 'height': '10px' }); 38 updateAndCheck("constrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'co lumns': 'minmax(max-content, 100px)' }, { 'width': '120px', 'height': '10px' });
39 updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(max-content, 100px)' }, { 'width': '120px', 'height': '400px' }); 39 updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(max-content, 100px)' }, { 'width': '120px', 'height': '400px' });
40 updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '400px' }); 40 updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '400px' });
41 updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'auto' }, { 'width': '60px', 'height': '400px' }); 41 updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'auto' }, { 'width': '60px', 'height': '400px' });
42 updateAndCheck("constrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { ' width': '60px', 'height': '20px' }); 42 updateAndCheck("constrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { ' width': '60px', 'height': '20px' });
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after
77 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da ta-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX </div> 77 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da ta-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX </div>
78 </div> 78 </div>
79 </div> 79 </div>
80 80
81 <div class="constrainedContainer" style="position: relative;"> 81 <div class="constrainedContainer" style="position: relative;">
82 <div class="grid" id="constrainedGridUndefinedHeight"> 82 <div class="grid" id="constrainedGridUndefinedHeight">
83 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da ta-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX </div> 83 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da ta-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX </div>
84 </div> 84 </div>
85 </div> 85 </div>
86 86
87 <div id="test-output"></div>
88
87 </body> 89 </body>
88 </html> 90 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698