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

Side by Side Diff: third_party/WebKit/LayoutTests/css3/flexbox/writing-modes.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 body { 4 body {
5 margin: 0; 5 margin: 0;
6 } 6 }
7 .flexbox { 7 .flexbox {
8 width: 600px; 8 width: 600px;
9 display: flex; 9 display: flex;
10 background-color: grey; 10 background-color: grey;
11 } 11 }
12 .flexbox div { 12 .flexbox div {
13 height: 20px; 13 height: 20px;
14 border: 0; 14 border: 0;
15 } 15 }
16 16
17 .rtl { 17 .rtl {
18 direction: rtl; 18 direction: rtl;
19 } 19 }
20 20
21 .bt { 21 .horizontal-tb {
22 -webkit-writing-mode: horizontal-bt; 22 writing-mode:horizontal-tb;
23 } 23 }
24 24
25
25 .vertical-rl, .vertical-lr { 26 .vertical-rl, .vertical-lr {
26 height: 600px; 27 height: 600px;
27 } 28 }
28 29
29 :-webkit-any(.vertical-rl, .vertical-lr) div { 30 :-webkit-any(.vertical-rl, .vertical-lr) div {
30 width: 20px; 31 width: 20px;
31 } 32 }
32
33 .vertical-rl { 33 .vertical-rl {
34 -webkit-writing-mode: vertical-rl; 34 -webkit-writing-mode: vertical-rl;
35 } 35 }
36 36
37 .vertical-lr { 37 .vertical-lr {
38 -webkit-writing-mode: vertical-lr; 38 -webkit-writing-mode: vertical-lr;
39 } 39 }
40 40
41 .flexbox > :nth-child(1) { 41 .flexbox > :nth-child(1) {
42 background-color: blue; 42 background-color: blue;
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
81 <div class="flexbox vertical-lr"> 81 <div class="flexbox vertical-lr">
82 <div data-expected-height="150" data-offset-y="0" data-offset-x="50" style="fl ex: 1 0 0; margin: 0 100px 0 50px;"></div> 82 <div data-expected-height="150" data-offset-y="0" data-offset-x="50" style="fl ex: 1 0 0; margin: 0 100px 0 50px;"></div>
83 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div > 83 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div >
84 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div > 84 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div >
85 </div> 85 </div>
86 </div> 86 </div>
87 87
88 <div style="position:relative"> 88 <div style="position:relative">
89 <div class="flexbox vertical-lr"> 89 <div class="flexbox vertical-lr">
90 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;"></div> 90 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;"></div>
91 <div data-expected-height="300" data-offset-y="150" class="bt" style="flex: 2 0 0;"></div> 91 <div data-expected-height="300" data-offset-y="150" class="horizontal-tb" styl e="flex: 2 0 0;"></div>
92 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div > 92 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div >
93 </div> 93 </div>
94 </div> 94 </div>
95 95
96 <div style="position:relative"> 96 <div style="position:relative">
97 <div class="flexbox vertical-lr"> 97 <div class="flexbox vertical-lr">
98 <div data-expected-height="450" data-offset-y="0" style="flex: 1 0 0;-webkit-p adding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webki t-padding-after:100px;"></div> 98 <div data-expected-height="450" data-offset-y="0" style="flex: 1 0 0;-webkit-p adding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webki t-padding-after:100px;"></div>
99 <div data-expected-height="100" data-offset-y="450" style="flex: 2 0 0;"></div > 99 <div data-expected-height="100" data-offset-y="450" style="flex: 2 0 0;"></div >
100 <div data-expected-height="50" data-offset-y="550" style="flex: 1 0 0;"></div> 100 <div data-expected-height="50" data-offset-y="550" style="flex: 1 0 0;"></div>
101 </div> 101 </div>
102 </div> 102 </div>
103 103
104 <div style="position:relative"> 104 <div style="position:relative">
105 <div class="flexbox vertical-lr"> 105 <div class="flexbox vertical-lr">
106 <div data-expected-height="300" data-offset-y="0" class="bt" style="flex: 1 0 0;-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:1 00px;-webkit-padding-after:100px;"></div> 106 <div data-expected-height="300" data-offset-y="0" class="horizontal-tb" style= "flex: 1 0 0;-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-paddi ng-before:100px;-webkit-padding-after:100px;"></div>
107 <div data-expected-height="200" data-offset-y="300" style="flex: 2 0 0;"></div > 107 <div data-expected-height="200" data-offset-y="300" style="flex: 2 0 0;"></div >
108 <div data-expected-height="100" data-offset-y="500" style="flex: 1 0 0;"></div > 108 <div data-expected-height="100" data-offset-y="500" style="flex: 1 0 0;"></div >
109 </div> 109 </div>
110 </div> 110 </div>
111 111
112 112
113 <div style="position:relative"> 113 <div style="position:relative">
114 <div class="flexbox vertical-lr"> 114 <div class="flexbox vertical-lr">
115 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; margin: auto 0;"></div> 115 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; margin: auto 0;"></div>
116 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div > 116 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div >
117 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div > 117 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div >
118 </div> 118 </div>
119 </div> 119 </div>
120 120
121 <div style="position:relative"> 121 <div style="position:relative">
122 <div class="flexbox vertical-lr"> 122 <div class="flexbox vertical-lr">
123 <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0;margin: au to 0;"></div> 123 <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0;margin: au to 0;"></div>
124 <div data-expected-height="450" data-offset-y="75" style="flex: 2 0 auto; heig ht: auto;"><div data-offset-y="75" style="width:200px;height:300px;background-co lor:orange;"></div></div> 124 <div data-expected-height="450" data-offset-y="75" style="flex: 2 0 auto; heig ht: auto;"><div data-offset-y="75" style="width:200px;height:300px;background-co lor:orange;"></div></div>
125 <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0;"></div> 125 <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0;"></div>
126 </div> 126 </div>
127 </div> 127 </div>
128 128
129 <div style="position:relative"> 129 <div style="position:relative">
130 <div class="flexbox vertical-lr"> 130 <div class="flexbox vertical-lr">
131 <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0;margin: au to 0;"></div> 131 <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0;margin: au to 0;"></div>
132 <div data-expected-height="450" data-offset-y="75" class="bt" style="flex: 2 0 auto; height: auto;"><div style="width:200px;height:300px;background-color:oran ge;"></div></div> 132 <div data-expected-height="450" data-offset-y="75" class="horizontal-tb" style ="flex: 2 0 auto; height: auto;"><div style="width:200px;height:300px;background -color:orange;"></div></div>
133 <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0;"></div> 133 <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0;"></div>
134 </div> 134 </div>
135 </div> 135 </div>
136 136
137 <div style="position:relative"> 137 <div style="position:relative">
138 <div class="flexbox vertical-lr"> 138 <div class="flexbox vertical-lr">
139 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;-webkit-m argin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin- after:0;;"></div> 139 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;-webkit-m argin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin- after:0;;"></div>
140 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div > 140 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div >
141 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div > 141 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div >
142 </div> 142 </div>
143 </div> 143 </div>
144 144
145 <div style="position:relative"> 145 <div style="position:relative">
146 <div class="flexbox vertical-lr"> 146 <div class="flexbox vertical-lr">
147 <div data-expected-height="150" data-offset-y="0" class="bt" style="flex: 1 0 0;-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-web kit-margin-after:0;;"></div> 147 <div data-expected-height="150" data-offset-y="0" class="horizontal-tb" style= "flex: 1 0 0;-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-be fore:0;-webkit-margin-after:0;;"></div>
148 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div > 148 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div >
149 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div > 149 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div >
150 </div> 150 </div>
151 </div> 151 </div>
152 152
153 <div style="position:relative"> 153 <div style="position:relative">
154 <div class="flexbox vertical-lr rtl"> 154 <div class="flexbox vertical-lr rtl">
155 <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0; margin: auto 0;"></div> 155 <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0; margin: auto 0;"></div>
156 <div data-expected-height="350" data-offset-y="175" class="bt" style="flex: 2 0 0; padding: 100px 0;"></div> 156 <div data-expected-height="350" data-offset-y="175" class="horizontal-tb" styl e="flex: 2 0 0; padding: 100px 0;"></div>
157 <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0; -webkit-m argin-start: 100px;"></div> 157 <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0; -webkit-m argin-start: 100px;"></div>
158 </div> 158 </div>
159 </div> 159 </div>
160 160
161 <div class="flexbox vertical-lr"> 161 <div class="flexbox vertical-lr">
162 <div data-expected-height="350" style="flex: 1 1 400px; min-height: 350px;"></ div> 162 <div data-expected-height="350" style="flex: 1 1 400px; min-height: 350px;"></ div>
163 <div data-expected-height="250" style="flex: 1 1 400px;"></div> 163 <div data-expected-height="250" style="flex: 1 1 400px;"></div>
164 </div> 164 </div>
165 165
166 <div style="position:relative"> 166 <div style="position:relative">
167 <div class="flexbox vertical-rl"> 167 <div class="flexbox vertical-rl">
168 <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="f lex: 1 0 0;"></div> 168 <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="f lex: 1 0 0;"></div>
169 <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style= "flex: 2 0 0;"></div> 169 <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style= "flex: 2 0 0;"></div>
170 <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style= "flex: 1 0 0;"></div> 170 <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style= "flex: 1 0 0;"></div>
171 </div> 171 </div>
172 </div> 172 </div>
173 173
174 <div style="position:relative"> 174 <div style="position:relative">
175 <div class="flexbox vertical-rl"> 175 <div class="flexbox vertical-rl">
176 <div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="f lex: 1 0 0; margin: 0 100px 0 50px;"></div> 176 <div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="f lex: 1 0 0; margin: 0 100px 0 50px;"></div>
177 <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style= "flex: 2 0 0;"></div> 177 <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style= "flex: 2 0 0;"></div>
178 <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style= "flex: 1 0 0;"></div> 178 <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style= "flex: 1 0 0;"></div>
179 </div> 179 </div>
180 </div> 180 </div>
181 181
182 <div style="position:relative">
183 <div class="flexbox bt" style="height:200px">
184 <div data-expected-width="150" data-offset-y="180" data-offset-x="0" style="fl ex: 1 0 0;"></div>
185 <div data-expected-width="300" data-offset-y="180" data-offset-x="150" style=" flex: 2 0 0;"></div>
186 <div data-expected-width="150" data-offset-y="180" data-offset-x="450" style=" flex: 1 0 0;"></div>
187 </div>
188 </div>
189
190 <div style="position:relative">
191 <div class="flexbox bt" style="height:200px">
192 <div data-expected-width="150" data-offset-y="130" data-offset-x="0" style="fl ex: 1 0 0; margin: 100px 0 50px 0;"></div>
193 <div data-expected-width="300" data-offset-y="180" data-offset-x="150" style=" flex: 2 0 0;"></div>
194 <div data-expected-width="150" data-offset-y="180" data-offset-x="450" style=" flex: 1 0 0;"></div>
195 </div>
196 </div>
197
198 <div style="position: relative;"> 182 <div style="position: relative;">
199 <div data-expected-width="600" style="direction: rtl; display: flex; margin- left: 10px; margin-right:20px;" class="flexbox"> 183 <div data-expected-width="600" style="direction: rtl; display: flex; margin- left: 10px; margin-right:20px;" class="flexbox">
200 <div data-expected-width="75" data-offset-x="535" style="flex: 1 0 0; marg in: 0 auto;"></div> 184 <div data-expected-width="75" data-offset-x="535" style="flex: 1 0 0; marg in: 0 auto;"></div>
201 <div data-expected-width="350" data-offset-x="185" style="flex: 2 0 0; pad ding: 0 100px;"></div> 185 <div data-expected-width="350" data-offset-x="185" style="flex: 2 0 0; pad ding: 0 100px;"></div>
202 <div data-expected-width="75" data-offset-x="10" style="flex: 1 0 0;margin -right: 100px;"></div> 186 <div data-expected-width="75" data-offset-x="10" style="flex: 1 0 0;margin -right: 100px;"></div>
203 </div> 187 </div>
204 </div> 188 </div>
205 189
206 <div style="position: relative;"> 190 <div style="position: relative;">
207 <div data-expected-width="700" style="direction: rtl; display: flex; padding -left: 10px; padding-right: 20px; border-style: solid; border-left: 30px solid; border-right: 40px solid;" class="flexbox "> 191 <div data-expected-width="700" style="direction: rtl; display: flex; padding -left: 10px; padding-right: 20px; border-style: solid; border-left: 30px solid; border-right: 40px solid;" class="flexbox ">
208 <div data-expected-width="75" data-offset-x="565" style="flex: 1 0 0; marg in: 0 auto;"></div> 192 <div data-expected-width="75" data-offset-x="565" style="flex: 1 0 0; marg in: 0 auto;"></div>
209 <div data-expected-width="350" data-offset-x="215" style="flex: 2 0 0; pad ding: 0 100px;"></div> 193 <div data-expected-width="350" data-offset-x="215" style="flex: 2 0 0; pad ding: 0 100px;"></div>
210 <div data-expected-width="75" data-offset-x="40" style="flex: 1 0 0;margin -right: 100px;"></div> 194 <div data-expected-width="75" data-offset-x="40" style="flex: 1 0 0;margin -right: 100px;"></div>
211 </div> 195 </div>
212 </div> 196 </div>
213 197
214 </body> 198 </body>
215 </html> 199 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698