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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/css3/flexbox/multiline-align-content-horizontal-column.html

Issue 2832503003: [css-flex] Implement the space-evenly content-distribution value (Closed)
Patch Set: Fixed layout tests. Created 3 years, 6 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/css3/flexbox/multiline-align-content.html ('k') | third_party/WebKit/LayoutTests/css3/flexbox/resources/flexbox.css » ('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 <style> 3 <style>
4 .flexbox { 4 .flexbox {
5 position: relative; 5 position: relative;
6 display: flex; 6 display: flex;
7 background-color: grey; 7 background-color: grey;
8 width: 600px; 8 width: 600px;
9 height: 20px; 9 height: 20px;
10 } 10 }
(...skipping 29 matching lines...) Expand all
40 } 40 }
41 .align-content-center { 41 .align-content-center {
42 align-content: center; 42 align-content: center;
43 } 43 }
44 .align-content-space-between { 44 .align-content-space-between {
45 align-content: space-between; 45 align-content: space-between;
46 } 46 }
47 .align-content-space-around { 47 .align-content-space-around {
48 align-content: space-around; 48 align-content: space-around;
49 } 49 }
50 .align-content-space-evenly {
51 align-content: space-evenly;
52 }
50 .align-content-stretch { 53 .align-content-stretch {
51 align-content: stretch; 54 align-content: stretch;
52 } 55 }
53 .flexbox > :nth-child(1) { 56 .flexbox > :nth-child(1) {
54 background-color: blue; 57 background-color: blue;
55 } 58 }
56 .flexbox > :nth-child(2) { 59 .flexbox > :nth-child(2) {
57 background-color: green; 60 background-color: green;
58 } 61 }
59 </style> 62 </style>
60 <script src="../../resources/testharness.js"></script> 63 <script src="../../resources/testharness.js"></script>
61 <script src="../../resources/testharnessreport.js"></script> 64 <script src="../../resources/testharnessreport.js"></script>
62 <script src="../../resources/check-layout-th.js"></script> 65 <script src="../../resources/check-layout-th.js"></script>
63 <body onload="checkLayout('.flexbox')"> 66 <body onload="checkLayout('.flexbox')">
64 <div id=log></div> 67 <div id=log></div>
65 68
66 <script> 69 <script>
67 var expectations = { 70 var expectations = {
68 'horizontal-tb': { 71 'horizontal-tb': {
69 'column': { 72 'column': {
70 'ltr': { 73 'ltr': {
71 'wrap': { 74 'wrap': {
72 'flex-start': [0, 100], 75 'flex-start': [0, 100],
73 'flex-end': [400, 500], 76 'flex-end': [400, 500],
74 'center': [200, 300], 77 'center': [200, 300],
75 'space-between': [0, 500], 78 'space-between': [0, 500],
76 'space-around': [100, 400], 79 'space-around': [100, 400],
80 'space-evenly': [133, 367],
77 'stretch': [0, 300], 81 'stretch': [0, 300],
78 }, 82 },
79 'wrap-reverse': { 83 'wrap-reverse': {
80 'flex-start': [500, 400], 84 'flex-start': [500, 400],
81 'flex-end': [100, 0], 85 'flex-end': [100, 0],
82 'center': [300, 200], 86 'center': [300, 200],
83 'space-between': [500, 0], 87 'space-between': [500, 0],
84 'space-around': [400, 100], 88 'space-around': [400, 100],
89 'space-evenly': [367, 133],
85 'stretch': [300, 0], 90 'stretch': [300, 0],
86 }, 91 },
87 }, 92 },
88 'rtl': { 93 'rtl': {
89 'wrap': { 94 'wrap': {
90 'flex-start': [500, 400], 95 'flex-start': [500, 400],
91 'flex-end': [100, 0], 96 'flex-end': [100, 0],
92 'center': [300, 200], 97 'center': [300, 200],
93 'space-between': [500, 0], 98 'space-between': [500, 0],
94 'space-around': [400, 100], 99 'space-around': [400, 100],
100 'space-evenly': [367, 133],
95 'stretch': [300, 0], 101 'stretch': [300, 0],
96 }, 102 },
97 'wrap-reverse': { 103 'wrap-reverse': {
98 'flex-start': [0, 100], 104 'flex-start': [0, 100],
99 'flex-end': [400, 500], 105 'flex-end': [400, 500],
100 'center': [200, 300], 106 'center': [200, 300],
101 'space-between': [0, 500], 107 'space-between': [0, 500],
102 'space-around': [100, 400], 108 'space-around': [100, 400],
109 'space-evenly': [133, 367],
103 'stretch': [0, 300], 110 'stretch': [0, 300],
104 }, 111 },
105 }, 112 },
106 }, 113 },
107 // Same as column. 114 // Same as column.
108 'column-reverse': { 115 'column-reverse': {
109 'ltr': { 116 'ltr': {
110 'wrap': { 117 'wrap': {
111 'flex-start': [0, 100], 118 'flex-start': [0, 100],
112 'flex-end': [400, 500], 119 'flex-end': [400, 500],
113 'center': [200, 300], 120 'center': [200, 300],
114 'space-between': [0, 500], 121 'space-between': [0, 500],
115 'space-around': [100, 400], 122 'space-around': [100, 400],
123 'space-evenly': [133, 367],
116 'stretch': [0, 300], 124 'stretch': [0, 300],
117 }, 125 },
118 'wrap-reverse': { 126 'wrap-reverse': {
119 'flex-start': [500, 400], 127 'flex-start': [500, 400],
120 'flex-end': [100, 0], 128 'flex-end': [100, 0],
121 'center': [300, 200], 129 'center': [300, 200],
122 'space-between': [500, 0], 130 'space-between': [500, 0],
123 'space-around': [400, 100], 131 'space-around': [400, 100],
132 'space-evenly': [367, 133],
124 'stretch': [300, 0], 133 'stretch': [300, 0],
125 }, 134 },
126 }, 135 },
127 'rtl': { 136 'rtl': {
128 'wrap': { 137 'wrap': {
129 'flex-start': [500, 400], 138 'flex-start': [500, 400],
130 'flex-end': [100, 0], 139 'flex-end': [100, 0],
131 'center': [300, 200], 140 'center': [300, 200],
132 'space-between': [500, 0], 141 'space-between': [500, 0],
133 'space-around': [400, 100], 142 'space-around': [400, 100],
143 'space-evenly': [367, 133],
134 'stretch': [300, 0], 144 'stretch': [300, 0],
135 }, 145 },
136 'wrap-reverse': { 146 'wrap-reverse': {
137 'flex-start': [0, 100], 147 'flex-start': [0, 100],
138 'flex-end': [400, 500], 148 'flex-end': [400, 500],
139 'center': [200, 300], 149 'center': [200, 300],
140 'space-between': [0, 500], 150 'space-between': [0, 500],
141 'space-around': [100, 400], 151 'space-around': [100, 400],
152 'space-evenly': [133, 367],
142 'stretch': [0, 300], 153 'stretch': [0, 300],
143 }, 154 },
144 }, 155 },
145 }, 156 },
146 }, 157 },
147 }; 158 };
148 159
149 function mainAxisDirection(writingMode, flexDirection) 160 function mainAxisDirection(writingMode, flexDirection)
150 { 161 {
151 if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1) 162 if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1)
(...skipping 13 matching lines...) Expand all
165 child.setAttribute("data-offset-y", "0"); 176 child.setAttribute("data-offset-y", "0");
166 child.setAttribute("data-offset-x", expected_x_offset); 177 child.setAttribute("data-offset-x", expected_x_offset);
167 178
168 flexbox.appendChild(child); 179 flexbox.appendChild(child);
169 } 180 }
170 181
171 var writingModes = ['horizontal-tb']; 182 var writingModes = ['horizontal-tb'];
172 var flexDirections = ['column', 'column-reverse']; 183 var flexDirections = ['column', 'column-reverse'];
173 var directions = ['ltr', 'rtl']; 184 var directions = ['ltr', 'rtl'];
174 var wraps = ['wrap', 'wrap-reverse']; 185 var wraps = ['wrap', 'wrap-reverse'];
175 var alignContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space -around', 'stretch']; 186 var alignContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space -around', 'space-evenly', 'stretch'];
176 187
177 writingModes.forEach(function(writingMode) { 188 writingModes.forEach(function(writingMode) {
178 flexDirections.forEach(function(flexDirection) { 189 flexDirections.forEach(function(flexDirection) {
179 directions.forEach(function(direction) { 190 directions.forEach(function(direction) {
180 wraps.forEach(function(wrap) { 191 wraps.forEach(function(wrap) {
181 alignContents.forEach(function(alignContent) { 192 alignContents.forEach(function(alignContent) {
182 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' ' + wrap + ' align-content-' + alignContent; 193 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' ' + wrap + ' align-content-' + alignContent;
183 var title = document.createElement('div'); 194 var title = document.createElement('div');
184 title.className = 'title'; 195 title.className = 'title';
185 title.innerHTML = flexboxClassName; 196 title.innerHTML = flexboxClassName;
(...skipping 13 matching lines...) Expand all
199 210
200 document.body.appendChild(flexbox); 211 document.body.appendChild(flexbox);
201 }) 212 })
202 }) 213 })
203 }) 214 })
204 }) 215 })
205 }) 216 })
206 </script> 217 </script>
207 </body> 218 </body>
208 </html> 219 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/css3/flexbox/multiline-align-content.html ('k') | third_party/WebKit/LayoutTests/css3/flexbox/resources/flexbox.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698