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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/flexbox/flex-align.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/flex-algorithm-with-margins.html ('k') | LayoutTests/css3/flexbox/flex-align-baseline.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 background-color: #aaa; 10 background-color: #aaa;
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after
46 } 46 }
47 .flexbox :nth-child(11) { 47 .flexbox :nth-child(11) {
48 background-color: salmon; 48 background-color: salmon;
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 <!-- stretch is the default align-items so these flexitems should all have the s ame height. --> 54 <!-- stretch is the default align-items so these flexitems should all have the s ame height. -->
55 <div class="flexbox"> 55 <div class="flexbox">
56 <div data-expected-height="100" style="-webkit-flex: 1 0 0;"></div> 56 <div data-expected-height="100" style="flex: 1 0 0;"></div>
57 <div data-expected-height="100" style="-webkit-flex: 1 0 0; height: 100px"></d iv> 57 <div data-expected-height="100" style="flex: 1 0 0; height: 100px"></div>
58 <div data-expected-height="100" style="-webkit-flex: 1 0 0;"></div> 58 <div data-expected-height="100" style="flex: 1 0 0;"></div>
59 </div> 59 </div>
60 60
61 <div class="flexbox"> 61 <div class="flexbox">
62 <div data-expected-height="60" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 60px;"></div> 62 <div data-expected-height="60" data-offset-y="0" style="flex: 1 0 0; height: 60px;"></div>
63 <div data-expected-height="120" data-offset-y="0" style="-webkit-flex: 1 0 0;" ></div> 63 <div data-expected-height="120" data-offset-y="0" style="flex: 1 0 0;"></div>
64 <div data-expected-height="60" data-offset-y="30" style="-webkit-flex: 1 0 0; height: 60px; margin: auto 0;"></div> 64 <div data-expected-height="60" data-offset-y="30" style="flex: 1 0 0; height: 60px; margin: auto 0;"></div>
65 <div data-expected-height="0" data-offset-y="120" style="-webkit-flex: 1 0 0; margin: auto 0 0;"></div> 65 <div data-expected-height="0" data-offset-y="120" style="flex: 1 0 0; margin: auto 0 0;"></div>
66 <div data-expected-height="0" data-offset-y="60" style="-webkit-flex: 1 0 0; m argin: auto 0;"></div> 66 <div data-expected-height="0" data-offset-y="60" style="flex: 1 0 0; margin: a uto 0;"></div>
67 <div data-expected-height="100" data-offset-y="10" style="-webkit-flex: 1 0 0; height: 100px; margin: 10px 0;"></div> 67 <div data-expected-height="100" data-offset-y="10" style="flex: 1 0 0; height: 100px; margin: 10px 0;"></div>
68 <div data-expected-height="50" data-offset-y="20" style="-webkit-flex: 1 0 0; height: 50px; margin: 20px 0 10px;"></div> 68 <div data-expected-height="50" data-offset-y="20" style="flex: 1 0 0; height: 50px; margin: 20px 0 10px;"></div>
69 <div data-expected-height="90" data-offset-y="20" style="-webkit-flex: 1 0 0; margin: 20px 0 10px;"></div> 69 <div data-expected-height="90" data-offset-y="20" style="flex: 1 0 0; margin: 20px 0 10px;"></div>
70 <div data-expected-height="120" data-offset-y="0" style="-webkit-flex: 1 0 0;" > 70 <div data-expected-height="120" data-offset-y="0" style="flex: 1 0 0;">
71 <!-- Since no parent has a fixed height, this div shrink-wraps. --> 71 <!-- Since no parent has a fixed height, this div shrink-wraps. -->
72 <div data-expected-height="0" style="height: 100%; background-color:black">< /div> 72 <div data-expected-height="0" style="height: 100%; background-color:black">< /div>
73 </div> 73 </div>
74 </div> 74 </div>
75 75
76 <div class="flexbox" style="-webkit-align-items: flex-start"> 76 <div class="flexbox" style="align-items: flex-start">
77 <div data-expected-height="0" data-offset-y="0" style="-webkit-flex: 1 0 0;" ></div> 77 <div data-expected-height="0" data-offset-y="0" style="flex: 1 0 0;"></div>
78 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0 ; height: 100px;"></div> 78 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height : 100px;"></div>
79 </div> 79 </div>
80 80
81 <div class="flexbox" style="-webkit-align-items: flex-end"> 81 <div class="flexbox" style="align-items: flex-end">
82 <div data-expected-height="0" data-offset-y="100" style="-webkit-flex: 1 0 0 ;"></div> 82 <div data-expected-height="0" data-offset-y="100" style="flex: 1 0 0;"></div >
83 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0 ; height: 100px;"></div> 83 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height : 100px;"></div>
84 </div> 84 </div>
85 85
86 <div class="flexbox" style="-webkit-align-items: center"> 86 <div class="flexbox" style="align-items: center">
87 <div data-expected-height="0" data-offset-y="50" style="-webkit-flex: 1 0 0; "></div> 87 <div data-expected-height="0" data-offset-y="50" style="flex: 1 0 0;"></div>
88 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0 ; height: 100px;"></div> 88 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height : 100px;"></div>
89 </div> 89 </div>
90 90
91 <div class="flexbox" style="-webkit-align-items: baseline"> 91 <div class="flexbox" style="align-items: baseline">
92 <div style="-webkit-flex: 1 0 0;"><div style="display:inline-block;"></div>< /div> 92 <div style="flex: 1 0 0;"><div style="display:inline-block;"></div></div>
93 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0 ; height: 100px;"></div> 93 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height : 100px;"></div>
94 </div> 94 </div>
95 95
96 <div class="flexbox" style="-webkit-align-items: stretch"> 96 <div class="flexbox" style="align-items: stretch">
97 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0 ;"></div> 97 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0;"></div >
98 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0 ; height: 100px;"></div> 98 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height : 100px;"></div>
99 </div> 99 </div>
100 100
101 <div class="flexbox" style="-webkit-align-items: flex-start"> 101 <div class="flexbox" style="align-items: flex-start">
102 <div data-expected-height="100" data-offset-y="0" style="-webkit-align-self: auto; -webkit-flex: 1 0 0; height: 100px;"></div> 102 <div data-expected-height="100" data-offset-y="0" style="align-self: auto; f lex: 1 0 0; height: 100px;"></div>
103 <div data-expected-height="0" data-offset-y="0" style="-webkit-align-self: a uto; -webkit-flex: 1 0 0;"></div> 103 <div data-expected-height="0" data-offset-y="0" style="align-self: auto; fle x: 1 0 0;"></div>
104 <div data-expected-height="0" data-offset-y="0" style="-webkit-align-self: f lex-start; -webkit-flex: 1 0 0;"></div> 104 <div data-expected-height="0" data-offset-y="0" style="align-self: flex-star t; flex: 1 0 0;"></div>
105 <div data-expected-height="0" data-offset-y="100" style="-webkit-align-self: flex-end; -webkit-flex: 1 0 0;"></div> 105 <div data-expected-height="0" data-offset-y="100" style="align-self: flex-en d; flex: 1 0 0;"></div>
106 <div data-expected-height="0" data-offset-y="50" style="-webkit-align-self: center; -webkit-flex: 1 0 0;"></div> 106 <div data-expected-height="0" data-offset-y="50" style="align-self: center; flex: 1 0 0;"></div>
107 <div data-offset-y="20" style="-webkit-align-self: baseline; -webkit-flex: 1 0 0;"><div style="display:inline-block;"></div></div> 107 <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0;"><div styl e="display:inline-block;"></div></div>
108 <div data-offset-y="20" style="-webkit-align-self: baseline; -webkit-flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div> 108 <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0; margin: 20 px;"><div style="display:inline-block;"></div></div>
109 <div data-offset-y="50" style="-webkit-align-self: baseline; -webkit-flex: 1 0 0; margin: auto 0;"></div> 109 <div data-offset-y="50" style="align-self: baseline; flex: 1 0 0; margin: au to 0;"></div>
110 <div data-offset-y="30" style="-webkit-align-self: baseline; -webkit-flex: 1 0 0; margin: 30px 0 auto;"><div style="display:inline-block;"></div></div> 110 <div data-offset-y="30" style="align-self: baseline; flex: 1 0 0; margin: 30 px 0 auto;"><div style="display:inline-block;"></div></div>
111 <div data-offset-y="80" style="-webkit-align-self: baseline; -webkit-flex: 1 0 0; margin: auto 0 20px;"></div> 111 <div data-offset-y="80" style="align-self: baseline; flex: 1 0 0; margin: au to 0 20px;"></div>
112 <div data-expected-height="100" data-offset-y="0" style="-webkit-align-self: stretch; -webkit-flex: 1 0 0;"></div> 112 <div data-expected-height="100" data-offset-y="0" style="align-self: stretch ; flex: 1 0 0;"></div>
113 </div> 113 </div>
114 114
115 <div class="flexbox" style="-webkit-align-items: flex-end"> 115 <div class="flexbox" style="align-items: flex-end">
116 <div data-expected-height="100" data-offset-y="0" style="-webkit-align-self: auto; -webkit-flex: 1 0 0; height: 100px;"></div> 116 <div data-expected-height="100" data-offset-y="0" style="align-self: auto; f lex: 1 0 0; height: 100px;"></div>
117 <div data-expected-height="0" data-offset-y="100" style="-webkit-align-self: auto; -webkit-flex: 1 0 0;"></div> 117 <div data-expected-height="0" data-offset-y="100" style="align-self: auto; f lex: 1 0 0;"></div>
118 <div data-expected-height="0" data-offset-y="0" style="-webkit-align-self: f lex-start; -webkit-flex: 1 0 0;"></div> 118 <div data-expected-height="0" data-offset-y="0" style="align-self: flex-star t; flex: 1 0 0;"></div>
119 <div data-expected-height="0" data-offset-y="100" style="-webkit-align-self: flex-end; -webkit-flex: 1 0 0;"></div> 119 <div data-expected-height="0" data-offset-y="100" style="align-self: flex-en d; flex: 1 0 0;"></div>
120 <div data-expected-height="0" data-offset-y="50" style="-webkit-align-self: center; -webkit-flex: 1 0 0;"></div> 120 <div data-expected-height="0" data-offset-y="50" style="align-self: center; flex: 1 0 0;"></div>
121 <div data-offset-y="20" style="-webkit-align-self: baseline; -webkit-flex: 1 0 0;"><div style="display:inline-block;"></div></div> 121 <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0;"><div styl e="display:inline-block;"></div></div>
122 <div data-offset-y="20" style="-webkit-align-self: baseline; -webkit-flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div> 122 <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0; margin: 20 px;"><div style="display:inline-block;"></div></div>
123 <div data-expected-height="100" data-offset-y="0" style="-webkit-align-self: stretch; -webkit-flex: 1 0 0;"></div> 123 <div data-expected-height="100" data-offset-y="0" style="align-self: stretch ; flex: 1 0 0;"></div>
124 </div> 124 </div>
125 125
126 <div class="flexbox" style="-webkit-align-items: center"> 126 <div class="flexbox" style="align-items: center">
127 <div data-expected-height="100" data-offset-y="0" style="-webkit-align-self: auto; -webkit-flex: 1 0 0; height: 100px;"></div> 127 <div data-expected-height="100" data-offset-y="0" style="align-self: auto; f lex: 1 0 0; height: 100px;"></div>
128 <div data-expected-height="0" data-offset-y="50" style="-webkit-align-self: auto; -webkit-flex: 1 0 0;"></div> 128 <div data-expected-height="0" data-offset-y="50" style="align-self: auto; fl ex: 1 0 0;"></div>
129 <div data-expected-height="0" data-offset-y="0" style="-webkit-align-self: f lex-start; -webkit-flex: 1 0 0;"></div> 129 <div data-expected-height="0" data-offset-y="0" style="align-self: flex-star t; flex: 1 0 0;"></div>
130 <div data-expected-height="0" data-offset-y="100" style="-webkit-align-self: flex-end; -webkit-flex: 1 0 0;"></div> 130 <div data-expected-height="0" data-offset-y="100" style="align-self: flex-en d; flex: 1 0 0;"></div>
131 <div data-expected-height="0" data-offset-y="50" style="-webkit-align-self: center; -webkit-flex: 1 0 0;"></div> 131 <div data-expected-height="0" data-offset-y="50" style="align-self: center; flex: 1 0 0;"></div>
132 <div data-offset-y="20" style="-webkit-align-self: baseline; -webkit-flex: 1 0 0;"><div style="display:inline-block;"></div></div> 132 <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0;"><div styl e="display:inline-block;"></div></div>
133 <div data-offset-y="20" style="-webkit-align-self: baseline; -webkit-flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div> 133 <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0; margin: 20 px;"><div style="display:inline-block;"></div></div>
134 <div data-expected-height="100" data-offset-y="0" style="-webkit-align-self: stretch; -webkit-flex: 1 0 0;"></div> 134 <div data-expected-height="100" data-offset-y="0" style="align-self: stretch ; flex: 1 0 0;"></div>
135 </div> 135 </div>
136 136
137 <div class="flexbox" style="-webkit-align-items: baseline"> 137 <div class="flexbox" style="align-items: baseline">
138 <div data-expected-height="100" data-offset-y="0" style="-webkit-align-self: flex-start; -webkit-flex: 1 0 0; height: 100px;"></div> 138 <div data-expected-height="100" data-offset-y="0" style="align-self: flex-st art; flex: 1 0 0; height: 100px;"></div>
139 <div data-offset-y="20" style="-webkit-align-self: auto; -webkit-flex: 1 0 0 ;"><div style="display:inline-block;"></div></div> 139 <div data-offset-y="20" style="align-self: auto; flex: 1 0 0;"><div style="d isplay:inline-block;"></div></div>
140 <div data-expected-height="0" data-offset-y="0" style="-webkit-align-self: f lex-start; -webkit-flex: 1 0 0;"></div> 140 <div data-expected-height="0" data-offset-y="0" style="align-self: flex-star t; flex: 1 0 0;"></div>
141 <div data-expected-height="0" data-offset-y="100" style="-webkit-align-self: flex-end; -webkit-flex: 1 0 0;"></div> 141 <div data-expected-height="0" data-offset-y="100" style="align-self: flex-en d; flex: 1 0 0;"></div>
142 <div data-expected-height="0" data-offset-y="50" style="-webkit-align-self: center; -webkit-flex: 1 0 0;"></div> 142 <div data-expected-height="0" data-offset-y="50" style="align-self: center; flex: 1 0 0;"></div>
143 <div data-offset-y="20" style="-webkit-align-self: baseline; -webkit-flex: 1 0 0;"><div style="display:inline-block;"></div></div> 143 <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0;"><div styl e="display:inline-block;"></div></div>
144 <div data-offset-y="20" style="-webkit-align-self: baseline; -webkit-flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div> 144 <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0; margin: 20 px;"><div style="display:inline-block;"></div></div>
145 <div data-expected-height="100" data-offset-y="0" style="-webkit-align-self: stretch; -webkit-flex: 1 0 0;"></div> 145 <div data-expected-height="100" data-offset-y="0" style="align-self: stretch ; flex: 1 0 0;"></div>
146 </div> 146 </div>
147 147
148 <div class="flexbox" style="-webkit-align-items: stretch"> 148 <div class="flexbox" style="align-items: stretch">
149 <div data-expected-height="100" data-offset-y="0" style="-webkit-align-self: auto; -webkit-flex: 1 0 0; height: 100px;"></div> 149 <div data-expected-height="100" data-offset-y="0" style="align-self: auto; f lex: 1 0 0; height: 100px;"></div>
150 <div data-expected-height="100" data-offset-y="0" style="-webkit-align-self: auto; -webkit-flex: 1 0 0;"></div> 150 <div data-expected-height="100" data-offset-y="0" style="align-self: auto; f lex: 1 0 0;"></div>
151 <div data-expected-height="0" data-offset-y="0" style="-webkit-align-self: f lex-start; -webkit-flex: 1 0 0;"></div> 151 <div data-expected-height="0" data-offset-y="0" style="align-self: flex-star t; flex: 1 0 0;"></div>
152 <div data-expected-height="0" data-offset-y="100" style="-webkit-align-self: flex-end; -webkit-flex: 1 0 0;"></div> 152 <div data-expected-height="0" data-offset-y="100" style="align-self: flex-en d; flex: 1 0 0;"></div>
153 <div data-expected-height="0" data-offset-y="50" style="-webkit-align-self: center; -webkit-flex: 1 0 0;"></div> 153 <div data-expected-height="0" data-offset-y="50" style="align-self: center; flex: 1 0 0;"></div>
154 <div data-offset-y="20" style="-webkit-align-self: baseline; -webkit-flex: 1 0 0;"><div style="display:inline-block;"></div></div> 154 <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0;"><div styl e="display:inline-block;"></div></div>
155 <div data-offset-y="20" style="-webkit-align-self: baseline; -webkit-flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div> 155 <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0; margin: 20 px;"><div style="display:inline-block;"></div></div>
156 <div data-expected-height="100" data-offset-y="0" style="-webkit-align-self: stretch; -webkit-flex: 1 0 0;"></div> 156 <div data-expected-height="100" data-offset-y="0" style="align-self: stretch ; flex: 1 0 0;"></div>
157 </div> 157 </div>
158 158
159 <div class="flexbox" style="height: 100px;"> 159 <div class="flexbox" style="height: 100px;">
160 <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px;"></div> 160 <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; height: 50px;"></div>
161 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0;" ></div> 161 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0;"></div>
162 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100%;"> 162 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100%;">
163 <div data-expected-height="100" style="height: 100%; background-color:black" ></div> 163 <div data-expected-height="100" style="height: 100%; background-color:black" ></div>
164 </div> 164 </div>
165 </div> 165 </div>
166 166
167 <div class="flexbox" style="height: 100px;"> 167 <div class="flexbox" style="height: 100px;">
168 <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px;"></div> 168 <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; height: 50px;"></div>
169 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0;" ></div> 169 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0;"></div>
170 </div> 170 </div>
171 171
172 <div class="flexbox"> 172 <div class="flexbox">
173 <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; h eight: 50px;"></div> 173 <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; height: 5 0px;"></div>
174 <div data-expected-height="70" data-offset-y="0" style="-webkit-flex: 1 0 0; h eight: 70px;"></div> 174 <div data-expected-height="70" data-offset-y="0" style="flex: 1 0 0; height: 7 0px;"></div>
175 <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0 0;"></div> 175 <div data-expected-height="50" data-offset-y="50" style="flex: 1 0 0; height: 50px; margin: auto 0 0;"></div>
176 <div data-expected-height="70" data-offset-y="0" style="-webkit-flex: 1 0 0; h eight: 70px; margin: 0 0 auto"></div> 176 <div data-expected-height="70" data-offset-y="0" style="flex: 1 0 0; height: 7 0px; margin: 0 0 auto"></div>
177 <div data-expected-height="70" data-offset-y="0" style="-webkit-flex: 1 0 0; h eight: 70px;"></div> 177 <div data-expected-height="70" data-offset-y="0" style="flex: 1 0 0; height: 7 0px;"></div>
178 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div> 178 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
179 </div> 179 </div>
180 180
181 <div class="flexbox"> 181 <div class="flexbox">
182 <div data-expected-height="0" data-offset-y="0" style="-webkit-flex: 1 0 0; -w ebkit-align-self: flex-start;"></div> 182 <div data-expected-height="0" data-offset-y="0" style="flex: 1 0 0; align-self : flex-start;"></div>
183 <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; - webkit-align-self: flex-start; height: 50px;"></div> 183 <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; align-sel f: flex-start; height: 50px;"></div>
184 <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-start; height: 50px; margin: auto 0"></div> 184 <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-se lf: flex-start; height: 50px; margin: auto 0"></div>
185 <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-start; height: 50px; margin: auto 0 0"></div> 185 <div data-expected-height="50" data-offset-y="50" style="flex: 1 0 0; align-se lf: flex-start; height: 50px; margin: auto 0 0"></div>
186 <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; - webkit-align-self: flex-start; height: 50px; margin: 0 0 auto"></div> 186 <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; align-sel f: flex-start; height: 50px; margin: 0 0 auto"></div>
187 <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-start; height: 50px; margin: 25px 0"></div> 187 <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-se lf: flex-start; height: 50px; margin: 25px 0"></div>
188 <div data-expected-height="50" data-offset-y="20" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-start; height: 50px; margin: 20px 0 10px;"></div> 188 <div data-expected-height="50" data-offset-y="20" style="flex: 1 0 0; align-se lf: flex-start; height: 50px; margin: 20px 0 10px;"></div>
189 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div> 189 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
190 </div> 190 </div>
191 191
192 <div class="flexbox"> 192 <div class="flexbox">
193 <div data-expected-height="0" data-offset-y="100" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end;"></div> 193 <div data-expected-height="0" data-offset-y="100" style="flex: 1 0 0; align-se lf: flex-end;"></div>
194 <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 50px;"></div> 194 <div data-expected-height="50" data-offset-y="50" style="flex: 1 0 0; align-se lf: flex-end; height: 50px;"></div>
195 <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 50px; margin: auto 0"></div> 195 <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-se lf: flex-end; height: 50px; margin: auto 0"></div>
196 <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 50px; margin: auto 0 0"></div> 196 <div data-expected-height="50" data-offset-y="50" style="flex: 1 0 0; align-se lf: flex-end; height: 50px; margin: auto 0 0"></div>
197 <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; - webkit-align-self: flex-end; height: 50px; margin: 0 0 auto"></div> 197 <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; align-sel f: flex-end; height: 50px; margin: 0 0 auto"></div>
198 <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 50px; margin: 25px 0"></div> 198 <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-se lf: flex-end; height: 50px; margin: 25px 0"></div>
199 <div data-expected-height="50" data-offset-y="40" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 50px; margin: 20px 0 10px;"></div> 199 <div data-expected-height="50" data-offset-y="40" style="flex: 1 0 0; align-se lf: flex-end; height: 50px; margin: 20px 0 10px;"></div>
200 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div> 200 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
201 </div> 201 </div>
202 202
203 <div class="flexbox"> 203 <div class="flexbox">
204 <div data-expected-height="0" data-offset-y="50" style="-webkit-flex: 1 0 0; - webkit-align-self: center;"></div> 204 <div data-expected-height="0" data-offset-y="50" style="flex: 1 0 0; align-sel f: center;"></div>
205 <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center; height: 50px;"></div> 205 <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-se lf: center; height: 50px;"></div>
206 <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center; height: 50px; margin: auto 0"></div> 206 <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-se lf: center; height: 50px; margin: auto 0"></div>
207 <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-align-self: center; height: 50px; margin: auto 0 0"></div> 207 <div data-expected-height="50" data-offset-y="50" style="flex: 1 0 0; align-se lf: center; height: 50px; margin: auto 0 0"></div>
208 <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; - webkit-align-self: center; height: 50px; margin: 0 0 auto"></div> 208 <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; align-sel f: center; height: 50px; margin: 0 0 auto"></div>
209 <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; - webkit-align-self: center; height: 50px; margin: 0 0 auto"></div> 209 <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; align-sel f: center; height: 50px; margin: 0 0 auto"></div>
210 <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center; height: 50px; margin: 25px 0"></div> 210 <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-se lf: center; height: 50px; margin: 25px 0"></div>
211 <div data-expected-height="50" data-offset-y="30" style="-webkit-flex: 1 0 0; -webkit-align-self: center; height: 50px; margin: 20px 0 10px;"></div> 211 <div data-expected-height="50" data-offset-y="30" style="flex: 1 0 0; align-se lf: center; height: 50px; margin: 20px 0 10px;"></div>
212 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div> 212 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
213 </div> 213 </div>
214 214
215 <div class="flexbox"> 215 <div class="flexbox">
216 <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; - webkit-align-self: flex-start; height: 50px; -webkit-writing-mode: vertical-rl;" ></div> 216 <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; align-sel f: flex-start; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
217 <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center; height: 50px; -webkit-writing-mode: vertical-rl;"></ div> 217 <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-se lf: center; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
218 <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 50px; -webkit-writing-mode: vertical-rl;"> </div> 218 <div data-expected-height="50" data-offset-y="50" style="flex: 1 0 0; align-se lf: flex-end; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
219 <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; h eight: 50px; -webkit-writing-mode: vertical-rl;"></div> 219 <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; height: 5 0px; -webkit-writing-mode: vertical-rl;"></div>
220 <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0; -webkit-writing-mode: vertical-rl;"></div> 220 <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; height: 50px; margin: auto 0; -webkit-writing-mode: vertical-rl;"></div>
221 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px; -webkit-writing-mode: vertical-rl;"></div> 221 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px; -webkit-writing-mode: vertical-rl;"></div>
222 </div> 222 </div>
223 223
224 <div class="flexbox"> 224 <div class="flexbox">
225 <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; - webkit-align-self: flex-start; height: 50px;"></div> 225 <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; align-sel f: flex-start; height: 50px;"></div>
226 <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center; height: 50px;"></div> 226 <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-se lf: center; height: 50px;"></div>
227 <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 50px;"></div> 227 <div data-expected-height="50" data-offset-y="50" style="flex: 1 0 0; align-se lf: flex-end; height: 50px;"></div>
228 <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; h eight: 50px;"></div> 228 <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; height: 5 0px;"></div>
229 <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0"></div> 229 <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; height: 50px; margin: auto 0"></div>
230 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0;" ></div> 230 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0;"></div>
231 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div> 231 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
232 </div> 232 </div>
233 233
234 <div class="flexbox"> 234 <div class="flexbox">
235 <div data-expected-height="20" data-offset-y="20" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline; height: 20px;"></div> 235 <div data-expected-height="20" data-offset-y="20" style="flex: 1 0 0; align-se lf: baseline; height: 20px;"></div>
236 <div data-expected-height="10" data-offset-y="30" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline; height: 10px; margin: 30px 0 10px;"></div> 236 <div data-expected-height="10" data-offset-y="30" style="flex: 1 0 0; align-se lf: baseline; height: 10px; margin: 30px 0 10px;"></div>
237 <div data-expected-height="10" data-offset-y="30" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline; height: 10px; margin: 20px 0 0;"></div> 237 <div data-expected-height="10" data-offset-y="30" style="flex: 1 0 0; align-se lf: baseline; height: 10px; margin: 20px 0 0;"></div>
238 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div> 238 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
239 </div> 239 </div>
240 240
241 <div class="flexbox" style="max-height: 20px"> 241 <div class="flexbox" style="max-height: 20px">
242 <div data-expected-height="40" data-offset-y="-10" style="-webkit-flex: 1 0 0; -webkit-align-self: center; height: 40px;"></div> 242 <div data-expected-height="40" data-offset-y="-10" style="flex: 1 0 0; align-s elf: center; height: 40px;"></div>
243 <div data-expected-height="40" data-offset-y="-20" style="-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 40px;"></div> 243 <div data-expected-height="40" data-offset-y="-20" style="flex: 1 0 0; align-s elf: flex-end; height: 40px;"></div>
244 <div data-expected-height="40" data-offset-y="0" style="-webkit-flex: 1 0 0; h eight: 40px;"></div> 244 <div data-expected-height="40" data-offset-y="0" style="flex: 1 0 0; height: 4 0px;"></div>
245 <div data-expected-height="20" data-offset-y="0" style="-webkit-flex: 1 0 0;"> </div> 245 <div data-expected-height="20" data-offset-y="0" style="flex: 1 0 0;"></div>
246 </div> 246 </div>
247 247
248 <div class="flexbox"> 248 <div class="flexbox">
249 <div id="baseline1" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;" >ahem</div> 249 <div id="baseline1" style="flex: 1 0 0; align-self: baseline;">ahem</div>
250 <div id="baseline2" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-alig n-self: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style=" height: 50px;"></div> 250 <div id="baseline2" data-offset-y="0" style="flex: 1 0 0; align-self: baseline ;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px;">< /div>
251 <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-align-self: center;"><img src="../../fast/replaced/resources/1x1-blue.pn g" style="height: 50px; vertical-align: middle"></div> 251 <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-se lf: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height : 50px; vertical-align: middle"></div>
252 <div id="baseline3" data-expected-height="50" style="-webkit-flex: 1 0 0; -web kit-align-self: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div> 252 <div id="baseline3" data-expected-height="50" style="flex: 1 0 0; align-self: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
253 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div> 253 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
254 </div> 254 </div>
255 255
256 <div class="flexbox"> 256 <div class="flexbox">
257 <div id="baseline4" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;" >ahem</div> 257 <div id="baseline4" style="flex: 1 0 0; align-self: baseline;">ahem</div>
258 <div id="baseline5" style="-webkit-flex: 1 0 0; -webkit-align-self: baseline;" ><br><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px;" ></div> 258 <div id="baseline5" style="flex: 1 0 0; align-self: baseline;"><br><img src=". ./../fast/replaced/resources/1x1-blue.png" style="height: 50px;"></div>
259 <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; - webkit-align-self: baseline;"><img src="../../fast/replaced/resources/1x1-blue.p ng" style="height: 50px; vertical-align: middle"></div> 259 <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; align-sel f: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="heigh t: 50px; vertical-align: middle"></div>
260 <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div> 260 <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
261 </div> 261 </div>
262 262
263 <div id="results"></div> 263 <div id="results"></div>
264 264
265 <script> 265 <script>
266 function additionalBaselineChecks() 266 function additionalBaselineChecks()
267 { 267 {
268 var baseline1 = document.getElementById("baseline1"); 268 var baseline1 = document.getElementById("baseline1");
269 var baseline2 = document.getElementById("baseline2"); 269 var baseline2 = document.getElementById("baseline2");
270 var baseline3 = document.getElementById("baseline3"); 270 var baseline3 = document.getElementById("baseline3");
(...skipping 14 matching lines...) Expand all
285 { 285 {
286 if (!condition) 286 if (!condition)
287 document.getElementById("results").innerText += msg; 287 document.getElementById("results").innerText += msg;
288 } 288 }
289 289
290 additionalBaselineChecks(); 290 additionalBaselineChecks();
291 </script> 291 </script>
292 292
293 </body> 293 </body>
294 </html> 294 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/flexbox/flex-algorithm-with-margins.html ('k') | LayoutTests/css3/flexbox/flex-align-baseline.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698