Changeset 129154 in webkit
- Timestamp:
- Sep 20, 2012 12:29:51 PM (12 years ago)
- Location:
- trunk
- Files:
-
- 2 added
- 7 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r129153 r129154 1 2012-09-20 Tony Chang <tony@chromium.org> 2 3 Implement absolutely positioned flex items 4 https://bugs.webkit.org/show_bug.cgi?id=93798 5 6 Reviewed by Ojan Vafai. 7 8 Fix position of absolute flex items and add some additional tests. 9 10 * css3/flexbox/align-absolute-child-expected.txt: 11 * css3/flexbox/align-absolute-child.html: New test cases and update expectations. 12 * css3/flexbox/position-absolute-child.html: Update expectations. 13 * css3/flexbox/position-absolute-children-expected.txt: Added. 14 * css3/flexbox/position-absolute-children.html: Added. Tests having only absolutely positioned children. 15 1 16 2012-09-20 Ojan Vafai <ojan@chromium.org> 2 17 -
trunk/LayoutTests/css3/flexbox/align-absolute-child-expected.txt
r118818 r129154 12 12 PASS 13 13 PASS 14 PASS 15 PASS -
trunk/LayoutTests/css3/flexbox/align-absolute-child.html
r122623 r129154 67 67 } 68 68 69 .wrap { 70 -webkit-flex-wrap: wrap; 71 } 72 69 73 .wrap-reverse { 70 74 -webkit-flex-wrap: wrap-reverse; … … 105 109 <div class='flexbox relative align-center'> 106 110 <div data-offset-x=0 data-offset-y=40></div> 107 <div class='absolute' data-offset-x=20 data-offset-y= 50></div>111 <div class='absolute' data-offset-x=20 data-offset-y=0></div> 108 112 <div data-offset-x=20 data-offset-y=40></div> 109 113 <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> … … 113 117 <div class='flexbox align-center'> 114 118 <div data-offset-x=10 data-offset-y=40></div> 115 <div class='absolute' data-offset-x=30 data-offset-y= 50></div>119 <div class='absolute' data-offset-x=30 data-offset-y=0></div> 116 120 <div data-offset-x=30 data-offset-y=40></div> 117 121 <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> … … 140 144 <div class='flexbox relative'> 141 145 <div style="margin: auto;" data-offset-x=40 data-offset-y=40></div> 142 <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y= 50></div>143 <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y= 50></div>146 <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=0></div> 147 <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=0></div> 144 148 <div class="absolute" style="margin: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> 145 149 </div> … … 149 153 <div class="absolute" style="height: auto" data-offset-x=20 data-offset-y=0 data-expected-height=0></div> 150 154 <div class="absolute" style="height: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5 data-expected-height=0></div> 155 </div> 156 157 <div class="flexbox wrap relative"> 158 <div style="width: 100px;" data-offset-x=0 data-offset-y=0></div> 159 <div class="absolute" data-offset-x=100 data-offset-y=0></div> 160 <div style="width: 50px;" data-offset-x=0 data-offset-y=50></div> 161 <div class="absolute" data-offset-x=50 data-offset-y=50></div> 162 <div style="width: 50px;" data-offset-x=50 data-offset-y=50></div> 163 <div class="absolute" data-offset-x=100 data-offset-y=50></div> 164 </div> 165 166 <div class="flexbox wrap relative" style="-webkit-align-items: flex-end"> 167 <div style="width: 100px;" data-offset-x=0 data-offset-y=30></div> 168 <div class="absolute" data-offset-x=100 data-offset-y=0></div> 169 <div style="width: 50px;" data-offset-x=0 data-offset-y=80></div> 170 <div class="absolute" data-offset-x=50 data-offset-y=50></div> 171 <div style="width: 50px;" data-offset-x=50 data-offset-y=80></div> 172 <div class="absolute" data-offset-x=100 data-offset-y=50></div> 151 173 </div> 152 174 -
trunk/LayoutTests/css3/flexbox/position-absolute-child.html
r122623 r129154 90 90 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 91 91 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 92 { offsets: [0, 260, 560] },93 { offsets: [0, 300, 560] },94 { offsets: [0, 300, 600] },95 { offsets: [10, 10, 50], crossAxisOffset: 50 },96 { offsets: [10, 50, 50], crossAxisOffset: 50 },97 { offsets: [10, 50, 90], crossAxisOffset: 50 },98 ], 99 rtl: [ 100 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, 101 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 102 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 103 { offsets: [580, 300, 0] },104 { offsets: [560, 2 80, 0] },105 { offsets: [560, 260, -20] },106 { offsets: [50, 50, 10], crossAxisOffset: 50 },107 { offsets: [50, 10, 10], crossAxisOffset: 50 },108 { offsets: [50, 10, -30], crossAxisOffset: 50 },92 { offsets: [0, 0, 560] }, 93 { offsets: [0, 560, 560] }, 94 { offsets: [0, 560, 600] }, 95 { offsets: [10, 10, 50], crossAxisOffset: 0 }, 96 { offsets: [10, 50, 50], crossAxisOffset: 0 }, 97 { offsets: [10, 50, 90], crossAxisOffset: 0 }, 98 ], 99 rtl: [ 100 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, 101 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 102 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 103 { offsets: [580, 560, 0] }, 104 { offsets: [560, 20, 0] }, 105 { offsets: [560, 0, -20] }, 106 { offsets: [50, 50, 10], crossAxisOffset: 0 }, 107 { offsets: [50, 10, 10], crossAxisOffset: 0 }, 108 { offsets: [50, 10, -30], crossAxisOffset: 0 }, 109 109 ], 110 110 }, … … 114 114 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 115 115 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 116 { offsets: [0, 20, 80] },117 { offsets: [0, 60, 80] },118 { offsets: [0, 60, 120] },119 { offsets: [10, 10, 50], crossAxisOffset: 50 },120 { offsets: [10, 50, 50], crossAxisOffset: 50 },121 { offsets: [10, 50, 90], crossAxisOffset: 50 },122 ], 123 rtl: [ 124 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, 125 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 126 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 127 { offsets: [0, 20, 80] },128 { offsets: [0, 60, 80] },129 { offsets: [0, 60, 120] },130 { offsets: [10, 10, 50], crossAxisOffset: 10 },131 { offsets: [10, 50, 50], crossAxisOffset: 10 },132 { offsets: [10, 50, 90], crossAxisOffset: 10 },116 { offsets: [0, 0, 80] }, 117 { offsets: [0, 80, 80] }, 118 { offsets: [0, 80, 120] }, 119 { offsets: [10, 10, 50], crossAxisOffset: 0 }, 120 { offsets: [10, 50, 50], crossAxisOffset: 0 }, 121 { offsets: [10, 50, 90], crossAxisOffset: 0 }, 122 ], 123 rtl: [ 124 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, 125 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 126 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 127 { offsets: [0, 0, 80] }, 128 { offsets: [0, 80, 80] }, 129 { offsets: [0, 80, 120] }, 130 { offsets: [10, 10, 50], crossAxisOffset: 60 }, 131 { offsets: [10, 50, 50], crossAxisOffset: 60 }, 132 { offsets: [10, 50, 90], crossAxisOffset: 60 }, 133 133 ], 134 134 }, … … 138 138 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 139 139 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 140 { offsets: [600, 300, 0] },141 { offsets: [560, 300, 0] },142 { offsets: [560, 260, 0] },143 { offsets: [90, 50, 10], crossAxisOffset: 50 },144 { offsets: [50, 50, 10], crossAxisOffset: 50 },145 { offsets: [50, 10, 10], crossAxisOffset: 50 },146 ], 147 rtl: [ 148 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, 149 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 150 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 151 { offsets: [-20, 260, 560] },152 { offsets: [0, 280, 560] },153 { offsets: [0, 300, 580] },154 { offsets: [-30, 10, 50], crossAxisOffset: 50 },155 { offsets: [10, 10, 50], crossAxisOffset: 50 },156 { offsets: [10, 50, 50], crossAxisOffset: 50 },140 { offsets: [600, 560, 0] }, 141 { offsets: [560, 40, 0] }, 142 { offsets: [560, 0, 0] }, 143 { offsets: [90, 50, 10], crossAxisOffset: 0 }, 144 { offsets: [50, 50, 10], crossAxisOffset: 0 }, 145 { offsets: [50, 10, 10], crossAxisOffset: 0 }, 146 ], 147 rtl: [ 148 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, 149 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 150 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 151 { offsets: [-20, 0, 560] }, 152 { offsets: [0, 540, 560] }, 153 { offsets: [0, 560, 580] }, 154 { offsets: [-30, 10, 50], crossAxisOffset: 0 }, 155 { offsets: [10, 10, 50], crossAxisOffset: 0 }, 156 { offsets: [10, 50, 50], crossAxisOffset: 0 }, 157 157 ], 158 158 }, … … 162 162 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 163 163 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 164 { offsets: [120, 60, 0] },165 { offsets: [80, 60, 0] },166 { offsets: [80, 20, 0] },167 { offsets: [90, 50, 10], crossAxisOffset: 50 },168 { offsets: [50, 50, 10], crossAxisOffset: 50 },169 { offsets: [50, 10, 10], crossAxisOffset: 50 },170 ], 171 rtl: [ 172 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, 173 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 174 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 175 { offsets: [120, 60, 0] },176 { offsets: [80, 60, 0] },177 { offsets: [80, 20, 0] },178 { offsets: [90, 50, 10], crossAxisOffset: 10 },179 { offsets: [50, 50, 10], crossAxisOffset: 10 },180 { offsets: [50, 10, 10], crossAxisOffset: 10 },164 { offsets: [120, 80, 0] }, 165 { offsets: [80, 40, 0] }, 166 { offsets: [80, 0, 0] }, 167 { offsets: [90, 50, 10], crossAxisOffset: 0 }, 168 { offsets: [50, 50, 10], crossAxisOffset: 0 }, 169 { offsets: [50, 10, 10], crossAxisOffset: 0 }, 170 ], 171 rtl: [ 172 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, 173 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 174 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 175 { offsets: [120, 80, 0] }, 176 { offsets: [80, 40, 0] }, 177 { offsets: [80, 0, 0] }, 178 { offsets: [90, 50, 10], crossAxisOffset: 60 }, 179 { offsets: [50, 50, 10], crossAxisOffset: 60 }, 180 { offsets: [50, 10, 10], crossAxisOffset: 60 }, 181 181 ], 182 182 }, … … 189 189 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 190 190 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 191 { offsets: [0, 260, 560] },192 { offsets: [0, 300, 560] },193 { offsets: [0, 300, 600] },194 { offsets: [10, 10, 50], crossAxisOffset: 10 },195 { offsets: [10, 50, 50], crossAxisOffset: 10 },196 { offsets: [10, 50, 90], crossAxisOffset: 10 },197 ], 198 rtl: [ 199 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, 200 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 201 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 202 { offsets: [580, 300, 0] },203 { offsets: [560, 2 80, 0] },204 { offsets: [560, 260, -20] },205 { offsets: [50, 50, 10], crossAxisOffset: 10 },206 { offsets: [50, 10, 10], crossAxisOffset: 10 },207 { offsets: [50, 10, -30], crossAxisOffset: 10 },191 { offsets: [0, 0, 560] }, 192 { offsets: [0, 560, 560] }, 193 { offsets: [0, 560, 600] }, 194 { offsets: [10, 10, 50], crossAxisOffset: 60 }, 195 { offsets: [10, 50, 50], crossAxisOffset: 60 }, 196 { offsets: [10, 50, 90], crossAxisOffset: 60 }, 197 ], 198 rtl: [ 199 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, 200 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 201 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 202 { offsets: [580, 560, 0] }, 203 { offsets: [560, 20, 0] }, 204 { offsets: [560, 0, -20] }, 205 { offsets: [50, 50, 10], crossAxisOffset: 60 }, 206 { offsets: [50, 10, 10], crossAxisOffset: 60 }, 207 { offsets: [50, 10, -30], crossAxisOffset: 60 }, 208 208 ], 209 209 }, … … 214 214 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 215 215 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 216 { offsets: [100, 60, 0] },217 { offsets: [80, 40, 0] },218 { offsets: [80, 20, -20] },219 { offsets: [50, 50, 10], crossAxisOffset: 50 },220 { offsets: [50, 10, 10], crossAxisOffset: 50 },221 { offsets: [50, 10, -30], crossAxisOffset: 50 },222 ], 223 rtl: [ 224 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, 225 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 226 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 227 { offsets: [100, 60, 0] },228 { offsets: [80, 40, 0] },229 { offsets: [80, 20, -20] },230 { offsets: [50, 50, 10], crossAxisOffset: 10 },231 { offsets: [50, 10, 10], crossAxisOffset: 10 },232 { offsets: [50, 10, -30], crossAxisOffset: 10 },216 { offsets: [100, 80, 0] }, 217 { offsets: [80, 20, 0] }, 218 { offsets: [80, 0, -20] }, 219 { offsets: [50, 50, 10], crossAxisOffset: 0 }, 220 { offsets: [50, 10, 10], crossAxisOffset: 0 }, 221 { offsets: [50, 10, -30], crossAxisOffset: 0 }, 222 ], 223 rtl: [ 224 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, 225 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 226 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 227 { offsets: [100, 80, 0] }, 228 { offsets: [80, 20, 0] }, 229 { offsets: [80, 0, -20] }, 230 { offsets: [50, 50, 10], crossAxisOffset: 60 }, 231 { offsets: [50, 10, 10], crossAxisOffset: 60 }, 232 { offsets: [50, 10, -30], crossAxisOffset: 60 }, 233 233 ], 234 234 }, … … 238 238 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 239 239 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 240 { offsets: [600, 300, 0] },241 { offsets: [560, 300, 0] },242 { offsets: [560, 260, 0] },243 { offsets: [90, 50, 10], crossAxisOffset: 10 },244 { offsets: [50, 50, 10], crossAxisOffset: 10 },245 { offsets: [50, 10, 10], crossAxisOffset: 10 },246 ], 247 rtl: [ 248 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, 249 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 250 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 251 { offsets: [-20, 260, 560] },252 { offsets: [0, 280, 560] },253 { offsets: [0, 300, 580] },254 { offsets: [-30, 10, 50], crossAxisOffset: 10 },255 { offsets: [10, 10, 50], crossAxisOffset: 10 },256 { offsets: [10, 50, 50], crossAxisOffset: 10 },240 { offsets: [600, 560, 0] }, 241 { offsets: [560, 40, 0] }, 242 { offsets: [560, 0, 0] }, 243 { offsets: [90, 50, 10], crossAxisOffset: 60 }, 244 { offsets: [50, 50, 10], crossAxisOffset: 60 }, 245 { offsets: [50, 10, 10], crossAxisOffset: 60 }, 246 ], 247 rtl: [ 248 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, 249 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 250 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 251 { offsets: [-20, 0, 560] }, 252 { offsets: [0, 540, 560] }, 253 { offsets: [0, 560, 580] }, 254 { offsets: [-30, 10, 50], crossAxisOffset: 60 }, 255 { offsets: [10, 10, 50], crossAxisOffset: 60 }, 256 { offsets: [10, 50, 50], crossAxisOffset: 60 }, 257 257 ], 258 258 }, … … 262 262 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 263 263 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 264 { offsets: [-20, 20, 80] },265 { offsets: [0, 40, 80] },266 { offsets: [0, 60, 100] },267 { offsets: [-30, 10, 50], crossAxisOffset: 50 },268 { offsets: [10, 10, 50], crossAxisOffset: 50 },269 { offsets: [10, 50, 50], crossAxisOffset: 50 },270 ], 271 rtl: [ 272 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, 273 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 274 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 275 { offsets: [-20, 20, 80] },276 { offsets: [0, 40, 80] },277 { offsets: [0, 60, 100] },278 { offsets: [-30, 10, 50], crossAxisOffset: 10 },279 { offsets: [10, 10, 50], crossAxisOffset: 10 },280 { offsets: [10, 50, 50], crossAxisOffset: 10 },264 { offsets: [-20, 0, 80] }, 265 { offsets: [0, 60, 80] }, 266 { offsets: [0, 80, 100] }, 267 { offsets: [-30, 10, 50], crossAxisOffset: 0 }, 268 { offsets: [10, 10, 50], crossAxisOffset: 0 }, 269 { offsets: [10, 50, 50], crossAxisOffset: 0 }, 270 ], 271 rtl: [ 272 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, 273 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 274 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 275 { offsets: [-20, 0, 80] }, 276 { offsets: [0, 60, 80] }, 277 { offsets: [0, 80, 100] }, 278 { offsets: [-30, 10, 50], crossAxisOffset: 60 }, 279 { offsets: [10, 10, 50], crossAxisOffset: 60 }, 280 { offsets: [10, 50, 50], crossAxisOffset: 60 }, 281 281 ], 282 282 }, … … 289 289 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 290 290 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 291 { offsets: [0, 20, 80] },292 { offsets: [0, 60, 80] },293 { offsets: [0, 60, 120] },294 { offsets: [10, 10, 50], crossAxisOffset: 10 },295 { offsets: [10, 50, 50], crossAxisOffset: 10 },296 { offsets: [10, 50, 90], crossAxisOffset: 10 },297 ], 298 rtl: [ 299 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, 300 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 301 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 302 { offsets: [100, 60, 0] },303 { offsets: [80, 40, 0] },304 { offsets: [80, 20, -20] },305 { offsets: [50, 50, 10], crossAxisOffset: 10 },306 { offsets: [50, 10, 10], crossAxisOffset: 10 },307 { offsets: [50, 10, -30], crossAxisOffset: 10 },291 { offsets: [0, 0, 80] }, 292 { offsets: [0, 80, 80] }, 293 { offsets: [0, 80, 120] }, 294 { offsets: [10, 10, 50], crossAxisOffset: 60 }, 295 { offsets: [10, 50, 50], crossAxisOffset: 60 }, 296 { offsets: [10, 50, 90], crossAxisOffset: 60 }, 297 ], 298 rtl: [ 299 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, 300 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 301 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 302 { offsets: [100, 80, 0] }, 303 { offsets: [80, 20, 0] }, 304 { offsets: [80, 0, -20] }, 305 { offsets: [50, 50, 10], crossAxisOffset: 60 }, 306 { offsets: [50, 10, 10], crossAxisOffset: 60 }, 307 { offsets: [50, 10, -30], crossAxisOffset: 60 }, 308 308 ], 309 309 }, … … 314 314 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 315 315 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 316 { offsets: [580, 300, 0] },317 { offsets: [560, 2 80, 0] },318 { offsets: [560, 260, -20] },319 { offsets: [50, 50, 10], crossAxisOffset: 50 },320 { offsets: [50, 10, 10], crossAxisOffset: 50 },321 { offsets: [50, 10, -30], crossAxisOffset: 50 },322 ], 323 rtl: [ 324 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, 325 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 326 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 327 { offsets: [580, 300, 0] },328 { offsets: [560, 2 80, 0] },329 { offsets: [560, 260, -20] },330 { offsets: [50, 50, 10], crossAxisOffset: 10 },331 { offsets: [50, 10, 10], crossAxisOffset: 10 },332 { offsets: [50, 10, -30], crossAxisOffset: 10 },316 { offsets: [580, 560, 0] }, 317 { offsets: [560, 20, 0] }, 318 { offsets: [560, 0, -20] }, 319 { offsets: [50, 50, 10], crossAxisOffset: 0 }, 320 { offsets: [50, 10, 10], crossAxisOffset: 0 }, 321 { offsets: [50, 10, -30], crossAxisOffset: 0 }, 322 ], 323 rtl: [ 324 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, 325 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 326 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 327 { offsets: [580, 560, 0] }, 328 { offsets: [560, 20, 0] }, 329 { offsets: [560, 0, -20] }, 330 { offsets: [50, 50, 10], crossAxisOffset: 60 }, 331 { offsets: [50, 10, 10], crossAxisOffset: 60 }, 332 { offsets: [50, 10, -30], crossAxisOffset: 60 }, 333 333 ], 334 334 }, … … 338 338 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 339 339 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 340 { offsets: [120, 60, 0] },341 { offsets: [80, 60, 0] },342 { offsets: [80, 20, 0] },343 { offsets: [90, 50, 10], crossAxisOffset: 10 },344 { offsets: [50, 50, 10], crossAxisOffset: 10 },345 { offsets: [50, 10, 10], crossAxisOffset: 10 },346 ], 347 rtl: [ 348 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, 349 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 350 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 351 { offsets: [-20, 20, 80] },352 { offsets: [0, 40, 80] },353 { offsets: [0, 60, 100] },354 { offsets: [-30, 10, 50], crossAxisOffset: 10 },355 { offsets: [10, 10, 50], crossAxisOffset: 10 },356 { offsets: [10, 50, 50], crossAxisOffset: 10 },340 { offsets: [120, 80, 0] }, 341 { offsets: [80, 40, 0] }, 342 { offsets: [80, 0, 0] }, 343 { offsets: [90, 50, 10], crossAxisOffset: 60 }, 344 { offsets: [50, 50, 10], crossAxisOffset: 60 }, 345 { offsets: [50, 10, 10], crossAxisOffset: 60 }, 346 ], 347 rtl: [ 348 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, 349 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 350 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 351 { offsets: [-20, 0, 80] }, 352 { offsets: [0, 60, 80] }, 353 { offsets: [0, 80, 100] }, 354 { offsets: [-30, 10, 50], crossAxisOffset: 60 }, 355 { offsets: [10, 10, 50], crossAxisOffset: 60 }, 356 { offsets: [10, 50, 50], crossAxisOffset: 60 }, 357 357 ], 358 358 }, … … 362 362 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 363 363 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 364 { offsets: [-20, 260, 560] },365 { offsets: [0, 280, 560] },366 { offsets: [0, 300, 580] },367 { offsets: [-30, 10, 50], crossAxisOffset: 50 },368 { offsets: [10, 10, 50], crossAxisOffset: 50 },369 { offsets: [10, 50, 50], crossAxisOffset: 50 },370 ], 371 rtl: [ 372 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, 373 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 374 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 375 { offsets: [-20, 260, 560] },376 { offsets: [0, 280, 560] },377 { offsets: [0, 300, 580] },378 { offsets: [-30, 10, 50], crossAxisOffset: 10 },379 { offsets: [10, 10, 50], crossAxisOffset: 10 },380 { offsets: [10, 50, 50], crossAxisOffset: 10 },364 { offsets: [-20, 0, 560] }, 365 { offsets: [0, 540, 560] }, 366 { offsets: [0, 560, 580] }, 367 { offsets: [-30, 10, 50], crossAxisOffset: 0 }, 368 { offsets: [10, 10, 50], crossAxisOffset: 0 }, 369 { offsets: [10, 50, 50], crossAxisOffset: 0 }, 370 ], 371 rtl: [ 372 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, 373 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 374 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 375 { offsets: [-20, 0, 560] }, 376 { offsets: [0, 540, 560] }, 377 { offsets: [0, 560, 580] }, 378 { offsets: [-30, 10, 50], crossAxisOffset: 60 }, 379 { offsets: [10, 10, 50], crossAxisOffset: 60 }, 380 { offsets: [10, 50, 50], crossAxisOffset: 60 }, 381 381 ], 382 382 } … … 389 389 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 390 390 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 391 { offsets: [0, 20, 80] },392 { offsets: [0, 60, 80] },393 { offsets: [0, 60, 120] },394 { offsets: [10, 10, 50], crossAxisOffset: 50 },395 { offsets: [10, 50, 50], crossAxisOffset: 50 },396 { offsets: [10, 50, 90], crossAxisOffset: 50 },397 ], 398 rtl: [ 399 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, 400 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 401 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 402 { offsets: [100, 60, 0] },403 { offsets: [80, 40, 0] },404 { offsets: [80, 20, -20] },405 { offsets: [50, 50, 10], crossAxisOffset: 50 },406 { offsets: [50, 10, 10], crossAxisOffset: 50 },407 { offsets: [50, 10, -30], crossAxisOffset: 50 },391 { offsets: [0, 0, 80] }, 392 { offsets: [0, 80, 80] }, 393 { offsets: [0, 80, 120] }, 394 { offsets: [10, 10, 50], crossAxisOffset: 0 }, 395 { offsets: [10, 50, 50], crossAxisOffset: 0 }, 396 { offsets: [10, 50, 90], crossAxisOffset: 0 }, 397 ], 398 rtl: [ 399 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, 400 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 401 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 402 { offsets: [100, 80, 0] }, 403 { offsets: [80, 20, 0] }, 404 { offsets: [80, 0, -20] }, 405 { offsets: [50, 50, 10], crossAxisOffset: 0 }, 406 { offsets: [50, 10, 10], crossAxisOffset: 0 }, 407 { offsets: [50, 10, -30], crossAxisOffset: 0 }, 408 408 ], 409 409 }, … … 414 414 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 415 415 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 416 { offsets: [0, 260, 560] },417 { offsets: [0, 300, 560] },418 { offsets: [0, 300, 600] },419 { offsets: [10, 10, 50], crossAxisOffset: 50 },420 { offsets: [10, 50, 50], crossAxisOffset: 50 },421 { offsets: [10, 50, 90], crossAxisOffset: 50 },422 ], 423 rtl: [ 424 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, 425 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 426 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 427 { offsets: [0, 260, 560] },428 { offsets: [0, 300, 560] },429 { offsets: [0, 300, 600] },430 { offsets: [10, 10, 50], crossAxisOffset: 10 },431 { offsets: [10, 50, 50], crossAxisOffset: 10 },432 { offsets: [10, 50, 90], crossAxisOffset: 10 },416 { offsets: [0, 0, 560] }, 417 { offsets: [0, 560, 560] }, 418 { offsets: [0, 560, 600] }, 419 { offsets: [10, 10, 50], crossAxisOffset: 0 }, 420 { offsets: [10, 50, 50], crossAxisOffset: 0 }, 421 { offsets: [10, 50, 90], crossAxisOffset: 0 }, 422 ], 423 rtl: [ 424 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, 425 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 426 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 427 { offsets: [0, 0, 560] }, 428 { offsets: [0, 560, 560] }, 429 { offsets: [0, 560, 600] }, 430 { offsets: [10, 10, 50], crossAxisOffset: 60 }, 431 { offsets: [10, 50, 50], crossAxisOffset: 60 }, 432 { offsets: [10, 50, 90], crossAxisOffset: 60 }, 433 433 ], 434 434 }, … … 438 438 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 439 439 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 440 { offsets: [120, 60, 0] },441 { offsets: [80, 60, 0] },442 { offsets: [80, 20, 0] },443 { offsets: [90, 50, 10], crossAxisOffset: 50 },444 { offsets: [50, 50, 10], crossAxisOffset: 50 },445 { offsets: [50, 10, 10], crossAxisOffset: 50 },446 ], 447 rtl: [ 448 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, 449 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 450 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 451 { offsets: [-20, 20, 80] },452 { offsets: [0, 40, 80] },453 { offsets: [0, 60, 100] },454 { offsets: [-30, 10, 50], crossAxisOffset: 50 },455 { offsets: [10, 10, 50], crossAxisOffset: 50 },456 { offsets: [10, 50, 50], crossAxisOffset: 50 },440 { offsets: [120, 80, 0] }, 441 { offsets: [80, 40, 0] }, 442 { offsets: [80, 0, 0] }, 443 { offsets: [90, 50, 10], crossAxisOffset: 0 }, 444 { offsets: [50, 50, 10], crossAxisOffset: 0 }, 445 { offsets: [50, 10, 10], crossAxisOffset: 0 }, 446 ], 447 rtl: [ 448 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, 449 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 450 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 451 { offsets: [-20, 0, 80] }, 452 { offsets: [0, 60, 80] }, 453 { offsets: [0, 80, 100] }, 454 { offsets: [-30, 10, 50], crossAxisOffset: 0 }, 455 { offsets: [10, 10, 50], crossAxisOffset: 0 }, 456 { offsets: [10, 50, 50], crossAxisOffset: 0 }, 457 457 ], 458 458 }, … … 462 462 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 463 463 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 464 { offsets: [600, 300, 0] },465 { offsets: [560, 300, 0] },466 { offsets: [560, 260, 0] },467 { offsets: [90, 50, 10], crossAxisOffset: 50 },468 { offsets: [50, 50, 10], crossAxisOffset: 50 },469 { offsets: [50, 10, 10], crossAxisOffset: 50 },470 ], 471 rtl: [ 472 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, 473 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 474 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 475 { offsets: [600, 300, 0] },476 { offsets: [560, 300, 0] },477 { offsets: [560, 260, 0] },478 { offsets: [90, 50, 10], crossAxisOffset: 10 },479 { offsets: [50, 50, 10], crossAxisOffset: 10 },480 { offsets: [50, 10, 10], crossAxisOffset: 10 },464 { offsets: [600, 560, 0] }, 465 { offsets: [560, 40, 0] }, 466 { offsets: [560, 0, 0] }, 467 { offsets: [90, 50, 10], crossAxisOffset: 0 }, 468 { offsets: [50, 50, 10], crossAxisOffset: 0 }, 469 { offsets: [50, 10, 10], crossAxisOffset: 0 }, 470 ], 471 rtl: [ 472 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, 473 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 474 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 475 { offsets: [600, 560, 0] }, 476 { offsets: [560, 40, 0] }, 477 { offsets: [560, 0, 0] }, 478 { offsets: [90, 50, 10], crossAxisOffset: 60 }, 479 { offsets: [50, 50, 10], crossAxisOffset: 60 }, 480 { offsets: [50, 10, 10], crossAxisOffset: 60 }, 481 481 ], 482 482 }, -
trunk/Source/WebCore/ChangeLog
r129152 r129154 1 2012-09-20 Tony Chang <tony@chromium.org> 2 3 Implement absolutely positioned flex items 4 https://bugs.webkit.org/show_bug.cgi?id=93798 5 6 Reviewed by Ojan Vafai. 7 8 Previously, we treated absolutely positioned flex items as a 0x0 placeholder element. 9 Now we position the 0x0 placeholder where the next item would go. This causes the 10 following changes: 11 - justify-content: space-{around,between} no longer change due to the existence of absolutely positioned flex items. 12 - alignment doesn't change the placement of absolutely positioned flex items. 13 - auto margins in the alignment direction don't do anything on absolutely positioned flex items. 14 15 Test: css3/flexbox/position-absolute-children.html 16 17 * rendering/RenderFlexibleBox.cpp: 18 (WebCore::RenderFlexibleBox::availableAlignmentSpaceForChild): Absolutely positioned flex items should not use this. 19 (WebCore::RenderFlexibleBox::updateAutoMarginsInCrossAxis): Absolutely positioned flex items should not use this. 20 (WebCore::initialJustifyContentOffset): If there are no flex items, space-around should center an absolutely positioned flex item. 21 (WebCore::RenderFlexibleBox::numberOfInFlowPositionedChildren): Helper method for helping to compute space-between and space-around. 22 (WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Fix spacing when space-between or space-around. 23 (WebCore::RenderFlexibleBox::layoutColumnReverse): Fix spacing when space-between or space-around. 24 (WebCore::RenderFlexibleBox::alignChildren): Treat absolutely positioned children like flex-start. 25 * rendering/RenderFlexibleBox.h: numberOfInFlowPositionedChildren method. 26 1 27 2012-09-20 Sheriff Bot <webkit.review.bot@gmail.com> 2 28 -
trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp
r128786 r129154 690 690 LayoutUnit RenderFlexibleBox::availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox* child) 691 691 { 692 LayoutUnit childCrossExtent = 0; 693 if (!child->isOutOfFlowPositioned()) 694 childCrossExtent = crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child); 692 ASSERT(!child->isOutOfFlowPositioned()); 693 LayoutUnit childCrossExtent = crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child); 695 694 return lineCrossAxisExtent - childCrossExtent; 696 695 } … … 698 697 bool RenderFlexibleBox::updateAutoMarginsInCrossAxis(RenderBox* child, LayoutUnit availableAlignmentSpace) 699 698 { 699 ASSERT(!child->isOutOfFlowPositioned()); 700 700 701 bool isHorizontal = isHorizontalFlow(); 701 702 Length start = isHorizontal ? child->style()->marginTop() : child->style()->marginLeft(); … … 900 901 if (availableFreeSpace > 0 && numberOfChildren) 901 902 return availableFreeSpace / (2 * numberOfChildren); 902 if (availableFreeSpace < 0)903 else 903 904 return availableFreeSpace / 2; 904 905 } … … 959 960 } 960 961 962 size_t RenderFlexibleBox::numberOfInFlowPositionedChildren(const OrderedFlexItemList& children) const 963 { 964 size_t count = 0; 965 for (size_t i = 0; i < children.size(); ++i) { 966 RenderBox* child = children[i]; 967 if (!child->isOutOfFlowPositioned()) 968 ++count; 969 } 970 return count; 971 } 972 961 973 void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList& children, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, WTF::Vector<LineContext>& lineContexts) 962 974 { 963 975 ASSERT(childSizes.size() == children.size()); 964 976 977 size_t numberOfChildrenForJustifyContent = numberOfInFlowPositionedChildren(children); 965 978 LayoutUnit autoMarginOffset = autoMarginOffsetInMainAxis(children, availableFreeSpace); 966 979 LayoutUnit mainAxisOffset = flowAwareBorderStart() + flowAwarePaddingStart(); 967 mainAxisOffset += initialJustifyContentOffset(availableFreeSpace, style()->justifyContent(), childSizes.size());980 mainAxisOffset += initialJustifyContentOffset(availableFreeSpace, style()->justifyContent(), numberOfChildrenForJustifyContent); 968 981 if (style()->flexDirection() == FlowRowReverse) 969 982 mainAxisOffset += isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight(); … … 972 985 LayoutUnit maxAscent = 0, maxDescent = 0; // Used when align-items: baseline. 973 986 LayoutUnit maxChildCrossAxisExtent = 0; 987 size_t seenInFlowPositionedChildren = 0; 974 988 bool shouldFlipMainAxis = !isColumnFlow() && !isLeftToRightFlow(); 975 989 for (size_t i = 0; i < children.size(); ++i) { … … 977 991 if (child->isOutOfFlowPositioned()) { 978 992 prepareChildForPositionedLayout(child, mainAxisOffset, crossAxisOffset, FlipForRowReverse); 979 mainAxisOffset += justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), childSizes.size());980 993 continue; 981 994 } … … 1013 1026 mainAxisOffset += childMainExtent + flowAwareMarginEndForChild(child); 1014 1027 1015 mainAxisOffset += justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), childSizes.size()); 1028 ++seenInFlowPositionedChildren; 1029 if (seenInFlowPositionedChildren < numberOfChildrenForJustifyContent) 1030 mainAxisOffset += justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), numberOfChildrenForJustifyContent); 1016 1031 } 1017 1032 … … 1023 1038 // on the height of the flexbox, which we only know after we've positioned all the flex items. 1024 1039 updateLogicalHeight(); 1025 layoutColumnReverse(children, c hildSizes, crossAxisOffset, availableFreeSpace);1040 layoutColumnReverse(children, crossAxisOffset, availableFreeSpace); 1026 1041 } 1027 1042 … … 1030 1045 } 1031 1046 1032 void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList& children, const WTF::Vector<LayoutUnit>& childSizes,LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace)1047 void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList& children, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace) 1033 1048 { 1034 1049 // This is similar to the logic in layoutAndPlaceChildren, except we place the children 1035 1050 // starting from the end of the flexbox. We also don't need to layout anything since we're 1036 1051 // just moving the children to a new position. 1052 size_t numberOfChildrenForJustifyContent = numberOfInFlowPositionedChildren(children); 1037 1053 LayoutUnit mainAxisOffset = logicalHeight() - flowAwareBorderEnd() - flowAwarePaddingEnd(); 1038 mainAxisOffset -= initialJustifyContentOffset(availableFreeSpace, style()->justifyContent(), childSizes.size());1054 mainAxisOffset -= initialJustifyContentOffset(availableFreeSpace, style()->justifyContent(), numberOfChildrenForJustifyContent); 1039 1055 mainAxisOffset -= isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight(); 1040 1056 1057 size_t seenInFlowPositionedChildren = 0; 1041 1058 for (size_t i = 0; i < children.size(); ++i) { 1042 1059 RenderBox* child = children[i]; 1043 1060 if (child->isOutOfFlowPositioned()) { 1044 1061 child->layer()->setStaticBlockPosition(mainAxisOffset); 1045 mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), childSizes.size());1046 1062 continue; 1047 1063 } … … 1054 1070 1055 1071 mainAxisOffset -= flowAwareMarginStartForChild(child); 1056 mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), childSizes.size()); 1072 1073 ++seenInFlowPositionedChildren; 1074 if (seenInFlowPositionedChildren < numberOfChildrenForJustifyContent) 1075 mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), numberOfChildrenForJustifyContent); 1057 1076 } 1058 1077 } … … 1142 1161 for (size_t childNumber = 0; childNumber < lineContexts[lineNumber].numberOfChildren; ++childNumber, child = iterator.next()) { 1143 1162 ASSERT(child); 1163 if (child->isOutOfFlowPositioned()) { 1164 if (style()->flexWrap() == FlexWrapReverse) 1165 adjustAlignmentForChild(child, lineCrossAxisExtent); 1166 continue; 1167 } 1168 1144 1169 if (updateAutoMarginsInCrossAxis(child, availableAlignmentSpaceForChild(lineCrossAxisExtent, child))) 1145 1170 continue; -
trunk/Source/WebCore/rendering/RenderFlexibleBox.h
r128494 r129154 131 131 void setLogicalOverrideSize(RenderBox* child, LayoutUnit childPreferredSize); 132 132 void prepareChildForPositionedLayout(RenderBox* child, LayoutUnit mainAxisOffset, LayoutUnit crossAxisOffset, PositionedLayoutMode); 133 size_t numberOfInFlowPositionedChildren(const OrderedFlexItemList&) const; 133 134 void layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, WTF::Vector<LineContext>&); 134 void layoutColumnReverse(const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes,LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);135 void layoutColumnReverse(const OrderedFlexItemList&, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace); 135 136 void alignFlexLines(OrderIterator&, WTF::Vector<LineContext>&); 136 137 void alignChildren(OrderIterator&, const WTF::Vector<LineContext>&);
Note: See TracChangeset
for help on using the changeset viewer.