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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/flexbox/writing-modes.html

Issue 1088633002: Unprefix flexbox tests. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: whoops, a > went missing Created 5 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 | Annotate | Revision Log
« no previous file with comments | « LayoutTests/css3/flexbox/true-centering.html ('k') | LayoutTests/css3/flexbox/z-index.html » ('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 body { 4 body {
5 margin: 0; 5 margin: 0;
6 } 6 }
7 .flexbox { 7 .flexbox {
8 width: 600px; 8 width: 600px;
9 display: -webkit-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 }
(...skipping 25 matching lines...) Expand all
45 background-color: green; 45 background-color: green;
46 } 46 }
47 .flexbox > :nth-child(3) { 47 .flexbox > :nth-child(3) {
48 background-color: red; 48 background-color: red;
49 } 49 }
50 </style> 50 </style>
51 <script src="../../resources/check-layout.js"></script> 51 <script src="../../resources/check-layout.js"></script>
52 <body onload="checkLayout('.flexbox')"> 52 <body onload="checkLayout('.flexbox')">
53 53
54 <div class="flexbox rtl"> 54 <div class="flexbox rtl">
55 <div data-expected-width="75" data-offset-x="525" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div> 55 <div data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div>
56 <div data-expected-width="350" data-offset-x="175" style="-webkit-flex: 2 0 0; padding: 0 100px;"></div> 56 <div data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; padding : 0 100px;"></div>
57 <div data-expected-width="75" data-offset-x="100" style="-webkit-flex: 1 0 0; margin-left: 100px;"></div> 57 <div data-expected-width="75" data-offset-x="100" style="flex: 1 0 0; margin-l eft: 100px;"></div>
58 </div> 58 </div>
59 59
60 <div class="flexbox rtl"> 60 <div class="flexbox rtl">
61 <div data-expected-width="75" data-offset-x="525" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div> 61 <div data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div>
62 <div data-expected-width="350" data-offset-x="175" style="-webkit-flex: 2 0 0; padding: 0 100px;"></div> 62 <div data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; padding : 0 100px;"></div>
63 <div data-expected-width="75" data-offset-x="0" style="-webkit-flex: 1 0 0; -w ebkit-margin-start: 100px;"></div> 63 <div data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; -webkit-ma rgin-start: 100px;"></div>
64 </div> 64 </div>
65 65
66 <div class="flexbox rtl" style="-webkit-margin-start: 20px;-webkit-margin-end: 5 0px;"> 66 <div class="flexbox rtl" style="-webkit-margin-start: 20px;-webkit-margin-end: 5 0px;">
67 <div data-expected-width="75" data-offset-x="575" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div> 67 <div data-expected-width="75" data-offset-x="575" style="flex: 1 0 0; margin: 0 auto;"></div>
68 <div data-expected-width="350" data-offset-x="225" style="-webkit-flex: 2 0 0; padding: 0 100px;"></div> 68 <div data-expected-width="350" data-offset-x="225" style="flex: 2 0 0; padding : 0 100px;"></div>
69 <div data-expected-width="75" data-offset-x="50" style="-webkit-flex: 1 0 0; - webkit-margin-start: 100px;"></div> 69 <div data-expected-width="75" data-offset-x="50" style="flex: 1 0 0; -webkit-m argin-start: 100px;"></div>
70 </div> 70 </div>
71 71
72 <div style="position:relative"> 72 <div style="position:relative">
73 <div class="flexbox vertical-lr"> 73 <div class="flexbox vertical-lr">
74 <div data-expected-height="150" data-offset-y="0" style="-webkit-flex: 1 0 0;" ></div> 74 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;"></div>
75 <div data-expected-height="300" data-offset-y="150" style="-webkit-flex: 2 0 0 ;"></div> 75 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div >
76 <div data-expected-height="150" data-offset-y="450" style="-webkit-flex: 1 0 0 ;"></div> 76 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div >
77 </div> 77 </div>
78 </div> 78 </div>
79 79
80 <div style="position:relative"> 80 <div style="position:relative">
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="-w ebkit-flex: 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="-webkit-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="-webkit-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="-webkit-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="-webkit- flex: 2 0 0;"></div> 91 <div data-expected-height="300" data-offset-y="150" class="bt" style="flex: 2 0 0;"></div>
92 <div data-expected-height="150" data-offset-y="450" style="-webkit-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="-webkit-flex: 1 0 0;- webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100p x;-webkit-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="-webkit-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="-webkit-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="-webkit-fl ex: 1 0 0;-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding- before:100px;-webkit-padding-after:100px;"></div> 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>
107 <div data-expected-height="200" data-offset-y="300" style="-webkit-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="-webkit-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="-webkit-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="-webkit-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="-webkit-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="-webkit-flex: 1 0 0;ma rgin: auto 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="-webkit-flex: 2 0 au to; height: auto;"><div data-offset-y="75" style="width:200px;height:300px;backg round-color: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="-webkit-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="-webkit-flex: 1 0 0;ma rgin: auto 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="-webkit-f lex: 2 0 auto; height: auto;"><div style="width:200px;height:300px;background-co lor:orange;"></div></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>
133 <div data-expected-height="75" data-offset-y="525" style="-webkit-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="-webkit-flex: 1 0 0;- webkit-margin-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="-webkit-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="-webkit-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="-webkit-fl ex: 1 0 0;-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-befor e:0;-webkit-margin-after:0;;"></div> 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>
148 <div data-expected-height="300" data-offset-y="150" style="-webkit-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="-webkit-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="-webkit-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="-webkit- flex: 2 0 0; padding: 100px 0;"></div> 156 <div data-expected-height="350" data-offset-y="175" class="bt" style="flex: 2 0 0; padding: 100px 0;"></div>
157 <div data-expected-height="75" data-offset-y="0" style="-webkit-flex: 1 0 0; - webkit-margin-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="-webkit-flex: 1 1 400px; min-height: 35 0px;"></div> 162 <div data-expected-height="350" style="flex: 1 1 400px; min-height: 350px;"></ div>
163 <div data-expected-height="250" style="-webkit-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="- webkit-flex: 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= "-webkit-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= "-webkit-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="- webkit-flex: 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= "-webkit-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= "-webkit-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"> 182 <div style="position:relative">
183 <div class="flexbox bt" style="height:200px"> 183 <div class="flexbox bt" style="height:200px">
184 <div data-expected-width="150" data-offset-y="180" data-offset-x="0" style="-w ebkit-flex: 1 0 0;"></div> 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=" -webkit-flex: 2 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=" -webkit-flex: 1 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> 187 </div>
188 </div> 188 </div>
189 189
190 <div style="position:relative"> 190 <div style="position:relative">
191 <div class="flexbox bt" style="height:200px"> 191 <div class="flexbox bt" style="height:200px">
192 <div data-expected-width="150" data-offset-y="130" data-offset-x="0" style="-w ebkit-flex: 1 0 0; margin: 100px 0 50px 0;"></div> 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=" -webkit-flex: 2 0 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=" -webkit-flex: 1 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> 195 </div>
196 </div> 196 </div>
197 197
198 <div style="position: relative;"> 198 <div style="position: relative;">
199 <div data-expected-width="600" style="direction: rtl; display: -webkit-flex; margin-left: 10px; margin-right:20px;" class="flexbox"> 199 <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="-webkit-flex: 1 0 0; margin: 0 auto;"></div> 200 <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="-webkit-flex: 2 0 0; padding: 0 100px;"></div> 201 <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="-webkit-flex: 1 0 0;margin-right: 100px;"></div> 202 <div data-expected-width="75" data-offset-x="10" style="flex: 1 0 0;margin -right: 100px;"></div>
203 </div> 203 </div>
204 </div> 204 </div>
205 205
206 <div style="position: relative;"> 206 <div style="position: relative;">
207 <div data-expected-width="700" style="direction: rtl; display: -webkit-flex; padding-left: 10px; padding-right: 20px; border-style: solid; border-left: 30px solid; border-right: 40px solid;" class="flexbox "> 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 ">
208 <div data-expected-width="75" data-offset-x="565" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div> 208 <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="-webkit-flex: 2 0 0; padding: 0 100px;"></div> 209 <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="-webkit-flex: 1 0 0;margin-right: 100px;"></div> 210 <div data-expected-width="75" data-offset-x="40" style="flex: 1 0 0;margin -right: 100px;"></div>
211 </div> 211 </div>
212 </div> 212 </div>
213 213
214 </body> 214 </body>
215 </html> 215 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/flexbox/true-centering.html ('k') | LayoutTests/css3/flexbox/z-index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698