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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/flexbox/flex-algorithm.html

Issue 1088633002: Unprefix flexbox tests. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: 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
« LayoutTests/css3/flexbox/anonymous-block-merge-crash.html ('K') | « LayoutTests/css3/flexbox/css-properties-expected.txt ('k') | LayoutTests/css3/flexbox/flex-algorithm-min-max.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 <link href="resources/flexbox.css" rel="stylesheet"> 3 <link href="resources/flexbox.css" rel="stylesheet">
4 <style> 4 <style>
5 body { 5 body {
6 margin: 0; 6 margin: 0;
7 } 7 }
8 .flexbox { 8 .flexbox {
9 width: 600px; 9 width: 600px;
10 } 10 }
11 .flexbox div { 11 .flexbox div {
12 height: 20px; 12 height: 20px;
13 border: 0; 13 border: 0;
14 } 14 }
15 15
16 .flexbox :nth-child(1) { 16 .flexbox :nth-child(1) {
17 background-color: blue; 17 background-color: blue;
18 } 18 }
19 .flexbox :nth-child(2) { 19 .flexbox :nth-child(2) {
20 background-color: green; 20 background-color: green;
21 } 21 }
22 .flexbox :nth-child(3) { 22 .flexbox :nth-child(3) {
23 background-color: red; 23 background-color: red;
24 } 24 }
25 25
26 .flex1 { 26 .flex1 {
27 -webkit-flex: 1; 27 flex: 1;
28 -moz-flex: 1; 28 -moz-flex: 1;
29 } 29 }
30 .flex2 { 30 .flex2 {
31 -webkit-flex: 2; 31 flex: 2;
32 -moz-flex: 2; 32 -moz-flex: 2;
33 } 33 }
34 .flex3 { 34 .flex3 {
35 -webkit-flex: 3; 35 flex: 3;
36 -moz-flex: 3; 36 -moz-flex: 3;
37 } 37 }
38 .flex1-0-0 { 38 .flex1-0-0 {
39 -webkit-flex: 1 0 0px; 39 flex: 1 0 0px;
40 -moz-flex: 1 0 0px; 40 -moz-flex: 1 0 0px;
41 } 41 }
42 </style> 42 </style>
43 <script src="../../resources/check-layout.js"></script> 43 <script src="../../resources/check-layout.js"></script>
44 <body onload="checkLayout('.flexbox')"> 44 <body onload="checkLayout('.flexbox')">
45 45
46 <div class="flexbox"> 46 <div class="flexbox">
47 <div data-expected-width="200" class="flex1"></div> 47 <div data-expected-width="200" class="flex1"></div>
48 <div data-expected-width="200" class="flex1"></div> 48 <div data-expected-width="200" class="flex1"></div>
49 <div data-expected-width="200" class="flex1"></div> 49 <div data-expected-width="200" class="flex1"></div>
50 </div> 50 </div>
51 51
52 <div class="flexbox"> 52 <div class="flexbox">
53 <div data-expected-width="200" style="-webkit-flex: .5; -moz-flex: .5"></div> 53 <div data-expected-width="200" style="flex: .5; -moz-flex: .5"></div>
54 <div data-expected-width="200" style="-webkit-flex: .5; -moz-flex: .5"></div> 54 <div data-expected-width="200" style="flex: .5; -moz-flex: .5"></div>
55 <div data-expected-width="200" style="-webkit-flex: .5; -moz-flex: .5"></div> 55 <div data-expected-width="200" style="flex: .5; -moz-flex: .5"></div>
56 </div> 56 </div>
57 57
58 <div class="flexbox"> 58 <div class="flexbox">
59 <div data-expected-width="300" class="flex3"></div> 59 <div data-expected-width="300" class="flex3"></div>
60 <div data-expected-width="200" class="flex2"></div> 60 <div data-expected-width="200" class="flex2"></div>
61 <div data-expected-width="100" class="flex1"></div> 61 <div data-expected-width="100" class="flex1"></div>
62 </div> 62 </div>
63 63
64 <div class="flexbox"> 64 <div class="flexbox">
65 <div data-expected-width="250" class="flex1"></div> 65 <div data-expected-width="250" class="flex1"></div>
66 <div data-expected-width="250" class="flex1"></div> 66 <div data-expected-width="250" class="flex1"></div>
67 <div data-expected-width="100" class="flex-none" style="width: 100px"></div> 67 <div data-expected-width="100" class="flex-none" style="width: 100px"></div>
68 </div> 68 </div>
69 69
70 <div class="flexbox"> 70 <div class="flexbox">
71 <div data-expected-width="150" class="flex1"></div> 71 <div data-expected-width="150" class="flex1"></div>
72 <div data-expected-width="150" class="flex1"></div> 72 <div data-expected-width="150" class="flex1"></div>
73 <div data-expected-width="300" class="flex-none" style="width: 50%"></div> 73 <div data-expected-width="300" class="flex-none" style="width: 50%"></div>
74 </div> 74 </div>
75 75
76 <!-- The first two boxes should fill the extra 300px evenly (each gets 150px ext ra). --> 76 <!-- The first two boxes should fill the extra 300px evenly (each gets 150px ext ra). -->
77 <div class="flexbox"> 77 <div class="flexbox">
78 <div data-expected-width="150" class="flex1"></div> 78 <div data-expected-width="150" class="flex1"></div>
79 <div data-expected-width="350" style="-webkit-flex: 1 200px; -moz-flex: 1 200p x"></div> 79 <div data-expected-width="350" style="flex: 1 200px; -moz-flex: 1 200px"></div >
80 <div data-expected-width="100" class="flex-none" style="width: 100px"></div> 80 <div data-expected-width="100" class="flex-none" style="width: 100px"></div>
81 </div> 81 </div>
82 82
83 <!-- Like the last test, except the middle box gets more space than the first bo x. --> 83 <!-- Like the last test, except the middle box gets more space than the first bo x. -->
84 <div class="flexbox"> 84 <div class="flexbox">
85 <div data-expected-width="100" class="flex1"></div> 85 <div data-expected-width="100" class="flex1"></div>
86 <div data-expected-width="400" style="-webkit-flex: 2 33.333333%; -moz-flex: 2 33.333333%"></div> 86 <div data-expected-width="400" style="flex: 2 33.333333%; -moz-flex: 2 33.3333 33%"></div>
87 <div data-expected-width="100" class="flex-none" style="width: 100px"></div> 87 <div data-expected-width="100" class="flex-none" style="width: 100px"></div>
88 </div> 88 </div>
89 89
90 <!-- Test some negative flexing. --> 90 <!-- Test some negative flexing. -->
91 <div class="flexbox"> 91 <div class="flexbox">
92 <div data-expected-width="200" style="-webkit-flex: 1 1 300px; -moz-flex: 1 1 300px"></div> 92 <div data-expected-width="200" style="flex: 1 1 300px; -moz-flex: 1 1 300px">< /div>
93 <div data-expected-width="200" style="-webkit-flex: 2 1 300px; -moz-flex: 2 1 300px"></div> 93 <div data-expected-width="200" style="flex: 2 1 300px; -moz-flex: 2 1 300px">< /div>
94 <div data-expected-width="200" style="-webkit-flex: 3 1 300px; -moz-flex: 3 1 300px"></div> 94 <div data-expected-width="200" style="flex: 3 1 300px; -moz-flex: 3 1 300px">< /div>
95 </div> 95 </div>
96 96
97 <div class="flexbox"> 97 <div class="flexbox">
98 <div data-expected-width="250" style="-webkit-flex: 1 1 300px; -moz-flex: 1 1 300px"></div> 98 <div data-expected-width="250" style="flex: 1 1 300px; -moz-flex: 1 1 300px">< /div>
99 <div data-expected-width="150" style="-webkit-flex: 2 3 300px; -moz-flex: 2 3 300px"></div> 99 <div data-expected-width="150" style="flex: 2 3 300px; -moz-flex: 2 3 300px">< /div>
100 <div data-expected-width="200" class="flex-none" style="width: 200px"></div> 100 <div data-expected-width="200" class="flex-none" style="width: 200px"></div>
101 </div> 101 </div>
102 102
103 <div class="flexbox"> 103 <div class="flexbox">
104 <div data-expected-width="50" style="-webkit-flex: 1 1 100px; -moz-flex: 1 1 1 00px"></div> 104 <div data-expected-width="50" style="flex: 1 1 100px; -moz-flex: 1 1 100px"></ div>
105 <div data-expected-width="250" style="-webkit-flex: 1 1 500px; -moz-flex: 1 1 500px"></div> 105 <div data-expected-width="250" style="flex: 1 1 500px; -moz-flex: 1 1 500px">< /div>
106 <div data-expected-width="300" class="flex-none" style="width: 300px"></div> 106 <div data-expected-width="300" class="flex-none" style="width: 300px"></div>
107 </div> 107 </div>
108 108
109 <div class="flexbox"> 109 <div class="flexbox">
110 <div data-expected-width="50" style="-webkit-flex: 1 1 100px; -moz-flex: 1 1 1 00px"></div> 110 <div data-expected-width="50" style="flex: 1 1 100px; -moz-flex: 1 1 100px"></ div>
111 <div data-expected-width="250" style="-webkit-flex: 1 1 500px; -moz-flex: 1 1 500px; margin-right: 300px;"></div> 111 <div data-expected-width="250" style="flex: 1 1 500px; -moz-flex: 1 1 500px; m argin-right: 300px;"></div>
112 </div> 112 </div>
113 113
114 <div class="flexbox"> 114 <div class="flexbox">
115 <div data-expected-width="50" style="-webkit-flex: 1 1 100px; -moz-flex: 1 1 1 00px"></div> 115 <div data-expected-width="50" style="flex: 1 1 100px; -moz-flex: 1 1 100px"></ div>
116 <div data-expected-width="550" style="-webkit-flex: 1 1 500px; -moz-flex: 1 1 500px; padding-left: 300px;"></div> 116 <div data-expected-width="550" style="flex: 1 1 500px; -moz-flex: 1 1 500px; p adding-left: 300px;"></div>
117 </div> 117 </div>
118 118
119 <div class="flexbox"> 119 <div class="flexbox">
120 <div data-expected-width="50" style="-webkit-flex: 1 1 100px; -moz-flex: 1 1 1 00px"></div> 120 <div data-expected-width="50" style="flex: 1 1 100px; -moz-flex: 1 1 100px"></ div>
121 <div data-expected-width="550" style="-webkit-flex: 1 1 500px; -moz-flex: 1 1 500px; border-left: 200px dashed orange; border-right: 100px dashed orange;"></d iv> 121 <div data-expected-width="550" style="flex: 1 1 500px; -moz-flex: 1 1 500px; b order-left: 200px dashed orange; border-right: 100px dashed orange;"></div>
122 </div> 122 </div>
123 123
124 <!-- Test some overflow cases. --> 124 <!-- Test some overflow cases. -->
125 <div class="flexbox"> 125 <div class="flexbox">
126 <div data-expected-width="600" style="-webkit-flex: 0 100000000000000000000000 000000000000000 600px; -moz-flex: 0 100000000000000000000000000000000000000 600p x"></div> 126 <div data-expected-width="600" style="flex: 0 10000000000000000000000000000000 0000000 600px; -moz-flex: 0 100000000000000000000000000000000000000 600px"></div >
127 <div data-expected-width="600" style="-webkit-flex: 0 100000000000000000000000 000000000000000 600px; -moz-flex: 0 100000000000000000000000000000000000000 600p x"></div> 127 <div data-expected-width="600" style="flex: 0 10000000000000000000000000000000 0000000 600px; -moz-flex: 0 100000000000000000000000000000000000000 600px"></div >
128 </div> 128 </div>
129 129
130 <div class="flexbox"> 130 <div class="flexbox">
131 <div data-expected-width="600" style="-webkit-flex: 10000000000000000000000000 0000000000000 0 600px; -moz-flex: 100000000000000000000000000000000000000 0 600p x"></div> 131 <div data-expected-width="600" style="flex: 1000000000000000000000000000000000 00000 0 600px; -moz-flex: 100000000000000000000000000000000000000 0 600px"></div >
132 <div data-expected-width="600" style="-webkit-flex: 0 100000000000000000000000 000000000000000 600px; -moz-flex: 0 100000000000000000000000000000000000000 600p x"></div> 132 <div data-expected-width="600" style="flex: 0 10000000000000000000000000000000 0000000 600px; -moz-flex: 0 100000000000000000000000000000000000000 600px"></div >
133 <div data-expected-width="33554428" style="-webkit-flex: 1 1 10000000000000000 0000000000000000000000px; -moz-flex: 1 1 100000000000000000000000000000000000000 px"></div> 133 <div data-expected-width="33554428" style="flex: 1 1 1000000000000000000000000 00000000000000px; -moz-flex: 1 1 100000000000000000000000000000000000000px"></di v>
134 </div> 134 </div>
135 135
136 <!-- Test flexitem borders. --> 136 <!-- Test flexitem borders. -->
137 <div class="flexbox"> 137 <div class="flexbox">
138 <div data-expected-width="250" class="flex1" style="border-left: 150px solid b lack"></div> 138 <div data-expected-width="250" class="flex1" style="border-left: 150px solid b lack"></div>
139 <div data-expected-width="250" class="flex1-0-0" style="border-right: 150px so lid orange"></div> 139 <div data-expected-width="250" class="flex1-0-0" style="border-right: 150px so lid orange"></div>
140 <div data-expected-width="100" class="flex1-0-0"></div> 140 <div data-expected-width="100" class="flex1-0-0"></div>
141 </div> 141 </div>
142 142
143 <div class="flexbox"> 143 <div class="flexbox">
144 <div data-expected-width="300" style="width: 100px; border: 100px solid black; -webkit-flex: none;"></div> 144 <div data-expected-width="300" style="width: 100px; border: 100px solid black; flex: none;"></div>
145 <div data-expected-width="200" class="flex2"></div> 145 <div data-expected-width="200" class="flex2"></div>
146 <div data-expected-width="100" class="flex1"></div> 146 <div data-expected-width="100" class="flex1"></div>
147 </div> 147 </div>
148 148
149 <!-- Test flexitem padding. --> 149 <!-- Test flexitem padding. -->
150 <div class="flexbox"> 150 <div class="flexbox">
151 <div data-expected-width="250" class="flex1" style="padding-left: 150px"></div > 151 <div data-expected-width="250" class="flex1" style="padding-left: 150px"></div >
152 <div data-expected-width="250" class="flex1-0-0" style="padding-right: 150px"> </div> 152 <div data-expected-width="250" class="flex1-0-0" style="padding-right: 150px"> </div>
153 <div data-expected-width="100" class="flex1-0-0"></div> 153 <div data-expected-width="100" class="flex1-0-0"></div>
154 </div> 154 </div>
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after
191 <div class="flexbox"> 191 <div class="flexbox">
192 <div data-expected-width="200" class="flex-auto"> 192 <div data-expected-width="200" class="flex-auto">
193 <div style="width: 100px;"></div> 193 <div style="width: 100px;"></div>
194 </div> 194 </div>
195 <div data-expected-width="100" class="flex-auto"></div> 195 <div data-expected-width="100" class="flex-auto"></div>
196 <div data-expected-width="300" class="flex-auto"> 196 <div data-expected-width="300" class="flex-auto">
197 <div style="width: 200px;"></div> 197 <div style="width: 200px;"></div>
198 </div> 198 </div>
199 </div> 199 </div>
200 200
201 <div class="flexbox" style="height: 60px; -webkit-flex-flow: row wrap; position: relative;"> 201 <div class="flexbox" style="height: 60px; flex-flow: row wrap; position: relativ e;">
202 <div data-offset-x="0" data-offset-y="0" style="position: absolute;"></div> 202 <div data-offset-x="0" data-offset-y="0" style="position: absolute;"></div>
203 <div data-offset-x="0" data-offset-y="0" style="width: 700px;"></div> 203 <div data-offset-x="0" data-offset-y="0" style="width: 700px;"></div>
204 </div> 204 </div>
205 205
206 <!-- Test border/padding/margin on the flexbox itself. --> 206 <!-- Test border/padding/margin on the flexbox itself. -->
207 <div data-expected-width="830" style="border: 10px solid; display: inline-block; "> 207 <div data-expected-width="830" style="border: 10px solid; display: inline-block; ">
208 <div data-expected-width="700" style="padding-left: 10px; padding-right: 20p x; border-left: 30px solid; border-right: 40px solid; margin-left: 50px; margin- right:60px;" class="flexbox"> 208 <div data-expected-width="700" style="padding-left: 10px; padding-right: 20p x; border-left: 30px solid; border-right: 40px solid; margin-left: 50px; margin- right:60px;" class="flexbox">
209 <div data-offset-x="100" data-expected-width="200" class="flex1"></div> 209 <div data-offset-x="100" data-expected-width="200" class="flex1"></div>
210 <div data-offset-x="300" data-expected-width="200" class="flex1"></div> 210 <div data-offset-x="300" data-expected-width="200" class="flex1"></div>
211 <div data-offset-x="500" data-expected-width="200" class="flex1"></div> 211 <div data-offset-x="500" data-expected-width="200" class="flex1"></div>
212 </div> 212 </div>
213 </div> 213 </div>
214 214
215 </body> 215 </body>
216 </html> 216 </html>
OLDNEW
« LayoutTests/css3/flexbox/anonymous-block-merge-crash.html ('K') | « LayoutTests/css3/flexbox/css-properties-expected.txt ('k') | LayoutTests/css3/flexbox/flex-algorithm-min-max.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698