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

Side by Side Diff: third_party/WebKit/LayoutTests/css3/flexbox/flex-flow-orientations.html

Issue 1419813004: Remove the "horizontal-bt" value from -webkit-writing-mode (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Add static_assert to ensure TransformedWritingMode matches to WritingMode Created 5 years, 1 month 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
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <style> 3 <style>
4 .container { 4 .container {
5 position: relative; 5 position: relative;
6 background-color: pink; 6 background-color: pink;
7 outline: 1px solid black; 7 outline: 1px solid black;
8 display: inline-block; 8 display: inline-block;
9 } 9 }
10 .flexbox { 10 .flexbox {
(...skipping 10 matching lines...) Expand all
21 } 21 }
22 .ltr { 22 .ltr {
23 direction: ltr; 23 direction: ltr;
24 } 24 }
25 .rtl { 25 .rtl {
26 direction: rtl; 26 direction: rtl;
27 } 27 }
28 .horizontal-tb { 28 .horizontal-tb {
29 -webkit-writing-mode: horizontal-tb; 29 -webkit-writing-mode: horizontal-tb;
30 } 30 }
31 .horizontal-bt {
32 -webkit-writing-mode: horizontal-bt;
33 }
34 .vertical-rl { 31 .vertical-rl {
35 -webkit-writing-mode: vertical-rl; 32 -webkit-writing-mode: vertical-rl;
36 } 33 }
37 .vertical-lr { 34 .vertical-lr {
38 -webkit-writing-mode: vertical-lr; 35 -webkit-writing-mode: vertical-lr;
39 } 36 }
40 .row { 37 .row {
41 flex-flow: row; 38 flex-flow: row;
42 } 39 }
43 .row-reverse { 40 .row-reverse {
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after
80 }, 77 },
81 row: { 78 row: {
82 rtl: [[80, 0], [60, 0]], 79 rtl: [[80, 0], [60, 0]],
83 ltr: [[0, 0], [20, 0]] 80 ltr: [[0, 0], [20, 0]]
84 }, 81 },
85 'row-reverse': { 82 'row-reverse': {
86 rtl: [[0, 0], [20, 0]], 83 rtl: [[0, 0], [20, 0]],
87 ltr: [[80, 0], [60, 0]] 84 ltr: [[80, 0], [60, 0]]
88 } 85 }
89 }, 86 },
90 'horizontal-bt': {
91 column: {
92 rtl: [[80, 80], [80, 60]],
93 ltr: [[0, 80], [0, 60]]
94 },
95 'column-reverse': {
96 rtl: [[80, 0], [80, 20]],
97 ltr: [[0, 0], [0, 20]]
98 },
99 row: {
100 rtl: [[80, 80], [60, 80]],
101 ltr: [[0, 80], [20, 80]]
102 },
103 'row-reverse': {
104 rtl: [[0, 80], [20, 80]],
105 ltr: [[80, 80], [60, 80]]
106 }
107 },
108 'vertical-lr': { 87 'vertical-lr': {
109 column: { 88 column: {
110 rtl: [[0, 80], [20, 80]], 89 rtl: [[0, 80], [20, 80]],
111 ltr: [[0, 0], [20, 0]] 90 ltr: [[0, 0], [20, 0]]
112 }, 91 },
113 'column-reverse': { 92 'column-reverse': {
114 rtl: [[80, 80], [60, 80]], 93 rtl: [[80, 80], [60, 80]],
115 ltr: [[80, 0], [60, 0]] 94 ltr: [[80, 0], [60, 0]]
116 }, 95 },
117 row: { 96 row: {
(...skipping 18 matching lines...) Expand all
136 rtl: [[80, 80], [80, 60]], 115 rtl: [[80, 80], [80, 60]],
137 ltr: [[80, 0], [80, 20]] 116 ltr: [[80, 0], [80, 20]]
138 }, 117 },
139 'row-reverse': { 118 'row-reverse': {
140 rtl: [[80, 0], [80, 20]], 119 rtl: [[80, 0], [80, 20]],
141 ltr: [[80, 80], [80, 60]] 120 ltr: [[80, 80], [80, 60]]
142 } 121 }
143 } 122 }
144 }; 123 };
145 124
146 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-r l']; 125 var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl'];
147 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; 126 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
148 var directions = ['rtl', 'ltr']; 127 var directions = ['rtl', 'ltr'];
149 128
150 function physicalWritingMode(writingMode, flexFlow, direction)
151 {
152 if (flexFlow.indexOf('column') == -1)
153 return writingMode;
154
155 var isReverse = flexFlow.indexOf('reverse') != -1;
156 switch (writingMode) {
157 case 'horizontal-tb':
158 case 'horizontal-bt':
159 return isReverse ? 'vertical-rl' : 'vertical-lr';
160 case 'vertical-lr':
161 case 'vertical-rl':
162 return isReverse ? 'horizontal-bt' : 'horizontal-tb';
163 }
164 }
165
166 writingModes.forEach(function(writingMode) { 129 writingModes.forEach(function(writingMode) {
167 flexFlows.forEach(function(flexFlow) { 130 flexFlows.forEach(function(flexFlow) {
168 directions.forEach(function(direction) { 131 directions.forEach(function(direction) {
169 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlo w; 132 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlo w;
170 var title = document.createElement('div'); 133 var title = document.createElement('div');
171 title.className = 'title'; 134 title.className = 'title';
172 title.innerHTML = flexboxClassName; 135 title.innerHTML = flexboxClassName;
173 document.body.appendChild(title); 136 document.body.appendChild(title);
174 137
175 138
176 var flexItemExpectations = expectations[writingMode][flexFlow][direc tion]; 139 var flexItemExpectations = expectations[writingMode][flexFlow][direc tion];
177 140
178 var container = document.createElement('div'); 141 var container = document.createElement('div');
179 container.className = 'container'; 142 container.className = 'container';
180 container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" >\n' + 143 container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" >\n' +
181 '<div style="width: 20px; height: 20px;" ' + asString(flexItemEx pectations[0]) + '></div>\n' + 144 '<div style="width: 20px; height: 20px;" ' + asString(flexItemEx pectations[0]) + '></div>\n' +
182 '<div style="width: 20px; height: 20px;" ' + asString(flexItemEx pectations[1]) + '></div>\n' + 145 '<div style="width: 20px; height: 20px;" ' + asString(flexItemEx pectations[1]) + '></div>\n' +
183 '</div>'; 146 '</div>';
184 147
185 document.body.appendChild(container); 148 document.body.appendChild(container);
186 }) 149 })
187 }) 150 })
188 }) 151 })
189 </script> 152 </script>
190 </body> 153 </body>
191 </html> 154 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698