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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks.html

Issue 1920173002: Reland [css-grid] Implement auto-repeat computation (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 7 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/grid-auto-fill-rows.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks-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
(Empty)
1 <!DOCTYPE html>
2 <link href="resources/grid.css" rel="stylesheet">
3 <style>
4 .grid {
5 grid-auto-rows: 25px;
6 grid-auto-columns: 25px;
7 margin-bottom: 10px;
8 }
9
10 .fixedWidth {
11 width: 50px;
12 grid-auto-flow: row;
13 grid-template-columns: repeat(auto-fill, 25px);
14 }
15
16 .fixedHeight {
17 width: 100px;
18 height: 50px;
19 grid-auto-flow: column;
20 grid-template-rows: repeat(auto-fill, 25px);
21 }
22
23 #i1, #i21 {
24 grid-row: auto;
25 grid-column: 1;
26 background-color: orange;
27 }
28
29 #i2, #i22 {
30 grid-row: 1;
31 grid-column: auto;
32 background-color: green;
33 }
34
35 #i3, #i23 {
36 grid-row: auto;
37 grid-column: auto;
38 background-color: blue;
39 }
40 </style>
41 <!-- Explicitly not using layout-th because it does not allow multiple checkLayo ut(). -->
42 <script src="../../resources/check-layout.js"></script>
43 <script>
44 function setGridTemplate(id, gridTemplateRows, gridTemplateColumns)
45 {
46 var gridElement = document.getElementById(id);
47 gridElement.style.gridTemplateRows = gridTemplateRows;
48 gridElement.style.gridTemplateColumns = gridTemplateColumns;
49 }
50
51 function setGridSize(id, width, height)
52 {
53 var gridElement = document.getElementById(id);
54 gridElement.style.width = width;
55 gridElement.style.height = height;
56 }
57
58 function testGridDefinitions(firstGridItemData, secondGridItemData, thirdGridIte mData)
59 {
60 var i1 = document.getElementById(firstGridItemData.id);
61 i1.setAttribute("data-expected-width", firstGridItemData.width);
62 i1.setAttribute("data-expected-height", firstGridItemData.height);
63 i1.setAttribute("data-offset-x", firstGridItemData.x);
64 i1.setAttribute("data-offset-y", firstGridItemData.y);
65
66 var i2 = document.getElementById(secondGridItemData.id);
67 i2.setAttribute("data-expected-width", secondGridItemData.width);
68 i2.setAttribute("data-expected-height", secondGridItemData.height);
69 i2.setAttribute("data-offset-x", secondGridItemData.x);
70 i2.setAttribute("data-offset-y", secondGridItemData.y);
71
72 var i3 = document.getElementById(thirdGridItemData.id);
73 i3.setAttribute("data-expected-width", thirdGridItemData.width);
74 i3.setAttribute("data-expected-height", thirdGridItemData.height);
75 i3.setAttribute("data-offset-x", thirdGridItemData.x);
76 i3.setAttribute("data-offset-y", thirdGridItemData.y);
77
78 checkLayout(".grid");
79 }
80
81 function testChangingGridDefinitions()
82 {
83 // Test changing the number of auto-repeat tracks.
84 setGridTemplate('grid1', 'none', 'repeat(auto-fill, 25px)');
85 testGridDefinitions({ 'id': 'i1', 'width': '25', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '25', 'height': '25', 'x': '25', 'y': '25' });
86 setGridTemplate('grid2', 'repeat(auto-fill, 25px)', 'none');
87 testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '25', 'x': '25', 'y': '0' } , { 'id': 'i23', 'width': '25', 'height': '25', 'x': '25', 'y': '25' });
88
89 setGridTemplate('grid1', 'none', 'none');
90 testGridDefinitions({ 'id': 'i1', 'width': '25', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '25', 'height': '25', 'x': '0', 'y': '50' });
91 setGridTemplate('grid2', 'none', 'none');
92 testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '25', 'x': '25', 'y': '0' } , { 'id': 'i23', 'width': '25', 'height': '25', 'x': '50', 'y': '0' });
93
94 setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 20px)');
95 testGridDefinitions({ 'id': 'i1', 'width': '5', 'height': '25', 'x': '0', ' y': '25' }, { 'id': 'i2', 'width': '5', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '20', 'height': '25', 'x': '5', 'y': '25' });
96 setGridTemplate('grid2', 'repeat(auto-fill, 20px) 3px', 'none');
97 testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '20', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '20', 'x': '25', 'y': '0' } , { 'id': 'i23', 'width': '25', 'height': '20', 'x': '25', 'y': '20' });
98
99 setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 22px)');
100 testGridDefinitions({ 'id': 'i1', 'width': '5', 'height': '25', 'x': '0', ' y': '25' }, { 'id': 'i2', 'width': '5', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '22', 'height': '25', 'x': '5', 'y': '25' });
101 setGridTemplate('grid2', 'repeat(auto-fill, 18px) 3px', 'none');
102 testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '18', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '18', 'x': '25', 'y': '0' } , { 'id': 'i23', 'width': '25', 'height': '18', 'x': '25', 'y': '18' });
103
104 setGridTemplate('grid1', 'none', 'repeat(auto-fill, 45px)');
105 testGridDefinitions({ 'id': 'i1', 'width': '45', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '45', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '45', 'height': '25', 'x': '0', 'y': '50' });
106 setGridTemplate('grid2', 'repeat(auto-fill, 45px)', 'none');
107 testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '45', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '45', 'x': '25', 'y': '0' } , { 'id': 'i23', 'width': '25', 'height': '45', 'x': '50', 'y': '0' });
108
109 // Test changing the size of the grid.
110 setGridSize('grid1', '100px', 'auto');
111 testGridDefinitions({ 'id': 'i1', 'width': '45', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '45', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '45', 'height': '25', 'x': '45', 'y': '25' });
112 setGridSize('grid2', '100px', '100px');
113 testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '45', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '45', 'x': '25', 'y': '0' } , { 'id': 'i23', 'width': '25', 'height': '45', 'x': '25', 'y': '45' });
114 }
115
116 window.addEventListener("load", testChangingGridDefinitions, false);
117 </script>
118
119 <div>This test checks that grid-template-{rows|columns} with auto-repeat tracks recomputes the positions of automatically placed grid items.</div>
120 <div id="log"></div>
121
122 <div style="position: relative">
123 <div id="grid1" class="grid fixedWidth">
124 <div id="i1"></div>
125 <div id="i2"></div>
126 <div id="i3"></div>
127 </div>
128 </div>
129
130 <div style="position: relative">
131 <div id="grid2" class="grid fixedHeight">
132 <div id="i21"></div>
133 <div id="i22"></div>
134 <div id="i23"></div>
135 </div>
136 </div>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fill-rows.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698