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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html

Issue 1885913002: [css-grid] Use grid-template-areas to determine the explicit grid (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 8 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 | « third_party/WebKit/LayoutTests/fast/css-grid-layout/explicit-grid-size.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child-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 <script src="../../resources/check-layout.js"></script> 4 <script src="../../resources/check-layout.js"></script>
5 <style> 5 <style>
6 .grid { 6 .grid {
7 grid-auto-flow: row dense; 7 grid-auto-flow: row dense;
8 grid-auto-rows: 5px;
9 grid-auto-columns: 5px;
8 } 10 }
9 #firstGridItem { 11 #firstGridItem {
10 grid-row: auto; 12 grid-row: auto;
11 grid-column: 1; 13 grid-column: 1;
12 } 14 }
13 15
14 #secondGridItem { 16 #secondGridItem {
15 grid-row: 1; 17 grid-row: 1;
16 grid-column: auto; 18 grid-column: auto;
17 } 19 }
18 20
19 #thirdGridItem { 21 #thirdGridItem {
20 grid-row: auto; 22 grid-row: auto;
21 grid-column: auto; 23 grid-column: auto;
22 } 24 }
23 </style> 25 </style>
24 <script> 26 <script>
25 function testGridDefinitions(gridTemplateRows, gridTemplateColumns, firstGridIte mData, secondGridItemData, thirdGridItemData) 27 function testGridDefinitions(gridTemplateRows, gridTemplateColumns, gridTemplate Areas, firstGridItemData, secondGridItemData, thirdGridItemData)
26 { 28 {
27 var gridElement = document.getElementsByClassName("grid")[0]; 29 var gridElement = document.getElementsByClassName("grid")[0];
28 gridElement.style.gridTemplateRows = gridTemplateRows; 30 gridElement.style.gridTemplateRows = gridTemplateRows;
29 gridElement.style.gridTemplateColumns = gridTemplateColumns; 31 gridElement.style.gridTemplateColumns = gridTemplateColumns;
32 gridElement.style.gridTemplateAreas = gridTemplateAreas;
30 33
31 var firstGridItem = document.getElementById("firstGridItem"); 34 var firstGridItem = document.getElementById("firstGridItem");
32 firstGridItem.setAttribute("data-expected-width", firstGridItemData.width); 35 firstGridItem.setAttribute("data-expected-width", firstGridItemData.width);
33 firstGridItem.setAttribute("data-expected-height", firstGridItemData.height) ; 36 firstGridItem.setAttribute("data-expected-height", firstGridItemData.height) ;
34 firstGridItem.setAttribute("data-offset-x", firstGridItemData.x); 37 firstGridItem.setAttribute("data-offset-x", firstGridItemData.x);
35 firstGridItem.setAttribute("data-offset-y", firstGridItemData.y); 38 firstGridItem.setAttribute("data-offset-y", firstGridItemData.y);
36 39
37 var secondGridItem = document.getElementById("secondGridItem"); 40 var secondGridItem = document.getElementById("secondGridItem");
38 secondGridItem.setAttribute("data-expected-width", secondGridItemData.width) ; 41 secondGridItem.setAttribute("data-expected-width", secondGridItemData.width) ;
39 secondGridItem.setAttribute("data-expected-height", secondGridItemData.heigh t); 42 secondGridItem.setAttribute("data-expected-height", secondGridItemData.heigh t);
40 secondGridItem.setAttribute("data-offset-x", secondGridItemData.x); 43 secondGridItem.setAttribute("data-offset-x", secondGridItemData.x);
41 secondGridItem.setAttribute("data-offset-y", secondGridItemData.y); 44 secondGridItem.setAttribute("data-offset-y", secondGridItemData.y);
42 45
43 var thirdGridItem = document.getElementById("thirdGridItem"); 46 var thirdGridItem = document.getElementById("thirdGridItem");
44 thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width); 47 thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);
45 thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height) ; 48 thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height) ;
46 thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x); 49 thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);
47 thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y); 50 thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);
48 51
49 checkLayout(".grid"); 52 checkLayout(".grid");
50 } 53 }
51 54
52 function testChangingGridDefinitions() 55 function testChangingGridDefinitions()
53 { 56 {
54 testGridDefinitions('10px 20px', '10px', { 'width': '10', 'height': '20', 'x ': '0', 'y': '10' }, { 'width': '10', 'height': '10', 'x': '0', 'y': '0' }, { 'w idth': '10', 'height': '0', 'x': '0', 'y': '30' }); 57 testGridDefinitions('10px 20px', '10px', '', { 'width': '10', 'height': '20' , 'x': '0', 'y': '10' }, { 'width': '10', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '10', 'height': '5', 'x': '0', 'y': '30' });
55 testGridDefinitions('50px', '30px 40px', { 'width': '30', 'height': '0', 'x' : '0', 'y': '50' }, { 'width': '30', 'height': '50', 'x': '0', 'y': '0' }, { 'wi dth': '40', 'height': '50', 'x': '30', 'y': '0' }); 58 testGridDefinitions('10px', '10px', '"a"', { 'width': '10', 'height': '5', ' x': '0', 'y': '10' }, { 'width': '10', 'height': '10', 'x': '0', 'y': '0' }, { ' width': '10', 'height': '5', 'x': '0', 'y': '15' });
56 testGridDefinitions('50px', '60px', { 'width': '60', 'height': '0', 'x': '0' , 'y': '50' }, { 'width': '60', 'height': '50', 'x': '0', 'y': '0' }, { 'width': '60', 'height': '0', 'x': '0', 'y': '50' }); 59 testGridDefinitions('10px', '10px', '"a ."', { 'width': '10', 'height': '5', 'x': '0', 'y': '10' }, { 'width': '10', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '5', 'height': '10', 'x': '10', 'y': '0' });
57 testGridDefinitions('50px 100px 150px', '60px', { 'width': '60', 'height': ' 100', 'x': '0', 'y': '50' }, { 'width': '60', 'height': '50', 'x': '0', 'y': '0' }, { 'width': '60', 'height': '150', 'x': '0', 'y': '150' }); 60 testGridDefinitions('50px', '30px 40px', '', { 'width': '30', 'height': '5', 'x': '0', 'y': '50' }, { 'width': '30', 'height': '50', 'x': '0', 'y': '0' }, { 'width': '40', 'height': '50', 'x': '30', 'y': '0' });
61 testGridDefinitions('50px', '60px', '', { 'width': '60', 'height': '5', 'x': '0', 'y': '50' }, { 'width': '60', 'height': '50', 'x': '0', 'y': '0' }, { 'wid th': '60', 'height': '5', 'x': '0', 'y': '55' });
62 testGridDefinitions('50px 100px 150px', '60px', '', { 'width': '60', 'height ': '100', 'x': '0', 'y': '50' }, { 'width': '60', 'height': '50', 'x': '0', 'y': '0' }, { 'width': '60', 'height': '150', 'x': '0', 'y': '150' });
58 } 63 }
59 64
60 window.addEventListener("load", testChangingGridDefinitions, false); 65 window.addEventListener("load", testChangingGridDefinitions, false);
61 </script> 66 </script>
62 <body> 67 <body>
63 <div>This test checks that grid-template-{rows|columns} dynamic updates recomput es the positions of automatically placed grid items.</div> 68 <div>This test checks that grid-template-{rows|columns} dynamic updates recomput es the positions of automatically placed grid items.</div>
64 69
65 <div style="position: relative"> 70 <div style="position: relative">
66 <div class="grid"> 71 <div class="grid">
67 <div class="sizedToGridArea" id="firstGridItem"></div> 72 <div class="sizedToGridArea" id="firstGridItem"></div>
68 <div class="sizedToGridArea" id="secondGridItem"></div> 73 <div class="sizedToGridArea" id="secondGridItem"></div>
69 <div class="sizedToGridArea" id="thirdGridItem"></div> 74 <div class="sizedToGridArea" id="thirdGridItem"></div>
70 </div> 75 </div>
71 </div> 76 </div>
72 77
73 </body> 78 </body>
74 </html> 79 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/explicit-grid-size.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698