Changeset 97783 in webkit
- Timestamp:
- Oct 18, 2011 12:35:14 PM (12 years ago)
- Location:
- trunk
- Files:
-
- 12 added
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r97775 r97783 1 2011-10-13 Ojan Vafai <ojan@chromium.org> 2 3 implement flex-flow:column 4 https://bugs.webkit.org/show_bug.cgi?id=70082 5 6 Reviewed by David Hyatt. 7 8 * css3/flexbox/flex-flow-border-expected.txt: Added. 9 * css3/flexbox/flex-flow-border.html: Added. 10 Failures are due to not handling orthogonal flows correctly. 11 * css3/flexbox/flex-flow-expected.txt: Added. 12 * css3/flexbox/flex-flow-margins-expected.txt: Added. 13 * css3/flexbox/flex-flow-margins.html: Added. 14 * css3/flexbox/flex-flow-orientations-expected.txt: Added. 15 * css3/flexbox/flex-flow-orientations.html: Added. 16 * css3/flexbox/flex-flow-overflow-expected.txt: Added. 17 * css3/flexbox/flex-flow-overflow.html: Added. 18 * css3/flexbox/flex-flow-padding-expected.txt: Added. 19 * css3/flexbox/flex-flow-padding.html: Added. 20 Failures are due to not handling orthogonal flows correctly. 21 * css3/flexbox/flex-flow.html: Added. 22 * css3/flexbox/resources/flexbox.js: 23 Added the ability to check offsets that include clientLeft/clientTop 24 and for checking clientWidth/clientHeight. This is neede dfor the border tests. 25 1 26 2011-10-18 Cary Clark <caryclark@google.com> 2 27 -
trunk/LayoutTests/css3/flexbox/resources/flexbox.js
r96851 r97783 40 40 failures.push("Expected " + expectedOffset + " for offsetTop, but got " + node.offsetTop + ". "); 41 41 } 42 43 var expectedWidth = node.getAttribute && node.getAttribute("data-expected-client-width"); 44 if (expectedWidth) { 45 if (node.clientWidth != parseInt(expectedWidth)) 46 failures.push("Expected " + expectedWidth + " for clientWidth, but got " + node.clientWidth + ". "); 47 } 48 49 var expectedHeight = node.getAttribute && node.getAttribute("data-expected-client-height"); 50 if (expectedHeight) { 51 if (node.clientHeight != parseInt(expectedHeight)) 52 failures.push("Expected " + expectedHeight + " for clientHeight, but got " + node.clientHeight + ". "); 53 } 54 55 var expectedOffset = node.getAttribute && node.getAttribute("data-total-x"); 56 if (expectedOffset) { 57 var totalLeft = node.clientLeft + node.offsetLeft; 58 if (totalLeft != parseInt(expectedOffset)) 59 failures.push("Expected " + expectedOffset + " for clientLeft+offsetLeft, but got " + totalLeft + ", clientLeft: " + node.clientLeft + ", offsetLeft: " + node.offsetLeft + ". "); 60 } 61 62 var expectedOffset = node.getAttribute && node.getAttribute("data-total-y"); 63 if (expectedOffset) { 64 var totalTop = node.clientTop + node.offsetTop; 65 if (totalTop != parseInt(expectedOffset)) 66 failures.push("Expected " + expectedOffset + " for clientTop+offsetTop, but got " + totalTop + ", clientTop: " + node.clientTop + ", + offsetTop: " + node.offsetTop + ". "); 67 } 42 68 } 43 69 … … 50 76 checkSubtreeExpectedValues(flexbox, failures); 51 77 78 var container = flexbox.parentNode.className == 'container' ? flexbox.parentNode : flexbox; 79 52 80 var pre = document.createElement('pre'); 53 pre.appendChild(document.createTextNode(failures.length ? "FAIL:\n" + failures.join('\n') + '\n\n' + flexbox.outerHTML : "PASS")); 54 insertAfter(pre, flexbox); 81 if (failures.length) 82 pre.className = 'FAIL'; 83 pre.appendChild(document.createTextNode(failures.length ? "FAIL:\n" + failures.join('\n') + '\n\n' + container.outerHTML : "PASS")); 84 insertAfter(pre, container); 55 85 }); 86 var pre = document.querySelector('.FAIL'); 87 if (pre) 88 setTimeout(function() { pre.previousSibling.scrollIntoView(); }, 0); 56 89 } -
trunk/Source/WebCore/ChangeLog
r97780 r97783 1 2011-10-13 Ojan Vafai <ojan@chromium.org> 2 3 implement flex-flow:column 4 https://bugs.webkit.org/show_bug.cgi?id=70082 5 6 Reviewed by David Hyatt. 7 8 There's still a bug with a FIXME where we don't compute the right 9 size for the container of the flexbox in the presence of 10 orthogonal flows. That's the cause of all the failing cases 11 in the tests. 12 13 Tests: css3/flexbox/flex-flow-border.html 14 css3/flexbox/flex-flow-margins.html 15 css3/flexbox/flex-flow-orientations.html 16 css3/flexbox/flex-flow-overflow.html 17 css3/flexbox/flex-flow-padding.html 18 css3/flexbox/flex-flow.html 19 20 * rendering/RenderFlexibleBox.cpp: 21 (WebCore::RenderFlexibleBox::layoutBlock): 22 (WebCore::RenderFlexibleBox::hasOrthogonalFlow): 23 (WebCore::RenderFlexibleBox::isColumnFlow): 24 (WebCore::RenderFlexibleBox::isHorizontalFlow): 25 (WebCore::RenderFlexibleBox::isLeftToRightFlow): 26 Use isHorizontalFlow and isLeftToRightFlow so that methods like 27 flowAwareBorderStart look exactly like borderStart with 28 isHorizontalWritingMode and isLeftToRightDirection replaced. 29 30 (WebCore::RenderFlexibleBox::setFlowAwareLogicalHeight): 31 (WebCore::RenderFlexibleBox::flowAwareLogicalHeightForChild): 32 (WebCore::RenderFlexibleBox::flowAwareLogicalWidthForChild): 33 (WebCore::RenderFlexibleBox::flowAwareLogicalHeight): 34 (WebCore::RenderFlexibleBox::flowAwareLogicalWidth): 35 (WebCore::RenderFlexibleBox::flowAwareContentLogicalHeight): 36 (WebCore::RenderFlexibleBox::flowAwareContentLogicalWidth): 37 (WebCore::RenderFlexibleBox::transformedWritingMode): 38 Transform the writing-mode based of the flex-flow and direction 39 values. That methods like flowAwareBorderBefore look exactly like 40 borderBefore, except it switches over a different value. 41 42 (WebCore::RenderFlexibleBox::flowAwareBorderStart): 43 (WebCore::RenderFlexibleBox::flowAwareBorderBefore): 44 (WebCore::RenderFlexibleBox::flowAwareBorderAfter): 45 (WebCore::RenderFlexibleBox::flowAwarePaddingStart): 46 (WebCore::RenderFlexibleBox::flowAwarePaddingBefore): 47 (WebCore::RenderFlexibleBox::flowAwarePaddingAfter): 48 (WebCore::RenderFlexibleBox::flowAwareMarginStartForChild): 49 (WebCore::RenderFlexibleBox::flowAwareMarginEndForChild): 50 (WebCore::RenderFlexibleBox::flowAwareMarginBeforeForChild): 51 (WebCore::RenderFlexibleBox::flowAwareMarginAfterForChild): 52 (WebCore::RenderFlexibleBox::setFlowAwareMarginStartForChild): 53 (WebCore::RenderFlexibleBox::setFlowAwareMarginEndForChild): 54 (WebCore::RenderFlexibleBox::layoutAndPlaceChildrenInlineDirection): 55 (WebCore::RenderFlexibleBox::alignChildrenBlockDirection): 56 * rendering/RenderFlexibleBox.h: 57 1 58 2011-10-18 Shawn Singh <shawnsingh@chromium.org> 2 59 -
trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp
r97313 r97783 176 176 layoutInlineDirection(relayoutChildren); 177 177 178 // FIXME: We should only need to call one of these for a given flex-flow + writing-mode combination. 179 // Is that true above as well? 180 computeLogicalWidth(); 178 181 computeLogicalHeight(); 179 182 … … 190 193 bool RenderFlexibleBox::hasOrthogonalFlow(RenderBox* child) const 191 194 { 192 // FIXME: Is the child->isHorizontalWritingMode() check correct if the child is a flexbox? 193 // Should it be using child->isHorizontalFlow in that case? 194 // Or do we only care about the parent's writing mode? 195 // FIXME: If the child is a flexbox, then we need to check isHorizontalFlow. 195 196 return isHorizontalFlow() != child->isHorizontalWritingMode(); 196 197 } 197 198 199 bool RenderFlexibleBox::isColumnFlow() const 200 { 201 EFlexFlow flow = style()->flexFlow(); 202 return flow == FlowColumn || flow == FlowColumnReverse; 203 } 204 198 205 bool RenderFlexibleBox::isHorizontalFlow() const 199 206 { 200 // FIXME: Take flex-flow value into account. 201 return isHorizontalWritingMode(); 207 if (isHorizontalWritingMode()) 208 return !isColumnFlow(); 209 return isColumnFlow(); 202 210 } 203 211 204 212 bool RenderFlexibleBox::isLeftToRightFlow() const 205 213 { 206 // FIXME: Take flex-flow value into account. 214 if (isColumnFlow()) 215 return style()->writingMode() == TopToBottomWritingMode || style()->writingMode() == LeftToRightWritingMode; 207 216 return style()->isLeftToRightDirection(); 208 217 } 209 210 // FIXME: Make all these flow aware methods actually be flow aware.211 218 212 219 bool RenderFlexibleBox::isFlowAwareLogicalHeightAuto() const … … 218 225 void RenderFlexibleBox::setFlowAwareLogicalHeight(LayoutUnit size) 219 226 { 220 setLogicalHeight(size); 227 if (isHorizontalFlow()) 228 setHeight(size); 229 else 230 setWidth(size); 221 231 } 222 232 223 233 LayoutUnit RenderFlexibleBox::flowAwareLogicalHeightForChild(RenderBox* child) 224 234 { 225 return logicalHeightForChild(child);235 return isHorizontalFlow() ? child->height() : child->width(); 226 236 } 227 237 228 238 LayoutUnit RenderFlexibleBox::flowAwareLogicalWidthForChild(RenderBox* child) 229 239 { 230 return logicalWidthForChild(child);240 return isHorizontalFlow() ? child->width() : child->height(); 231 241 } 232 242 233 243 LayoutUnit RenderFlexibleBox::flowAwareLogicalHeight() const 234 244 { 235 return logicalHeight();245 return isHorizontalFlow() ? height() : width(); 236 246 } 237 247 238 248 LayoutUnit RenderFlexibleBox::flowAwareLogicalWidth() const 239 249 { 240 return logicalWidth();250 return isHorizontalFlow() ? width() : height(); 241 251 } 242 252 243 253 LayoutUnit RenderFlexibleBox::flowAwareContentLogicalHeight() const 244 254 { 245 return contentLogicalHeight();255 return isHorizontalFlow() ? contentHeight() : contentWidth(); 246 256 } 247 257 248 258 LayoutUnit RenderFlexibleBox::flowAwareContentLogicalWidth() const 249 259 { 250 return contentLogicalWidth(); 260 return isHorizontalFlow() ? contentWidth() : contentHeight(); 261 } 262 263 WritingMode RenderFlexibleBox::transformedWritingMode() const 264 { 265 WritingMode mode = style()->writingMode(); 266 if (!isColumnFlow()) 267 return mode; 268 269 switch (mode) { 270 case TopToBottomWritingMode: 271 case BottomToTopWritingMode: 272 return style()->isLeftToRightDirection() ? LeftToRightWritingMode : RightToLeftWritingMode; 273 case LeftToRightWritingMode: 274 case RightToLeftWritingMode: 275 return style()->isLeftToRightDirection() ? TopToBottomWritingMode : BottomToTopWritingMode; 276 } 277 ASSERT_NOT_REACHED(); 278 return TopToBottomWritingMode; 251 279 } 252 280 253 281 LayoutUnit RenderFlexibleBox::flowAwareBorderStart() const 254 282 { 255 return borderStart(); 283 if (isHorizontalFlow()) 284 return isLeftToRightFlow() ? borderLeft() : borderRight(); 285 return isLeftToRightFlow() ? borderTop() : borderBottom(); 256 286 } 257 287 258 288 LayoutUnit RenderFlexibleBox::flowAwareBorderBefore() const 259 289 { 260 return borderBefore(); 290 switch (transformedWritingMode()) { 291 case TopToBottomWritingMode: 292 return borderTop(); 293 case BottomToTopWritingMode: 294 return borderBottom(); 295 case LeftToRightWritingMode: 296 return borderLeft(); 297 case RightToLeftWritingMode: 298 return borderRight(); 299 } 300 ASSERT_NOT_REACHED(); 301 return borderTop(); 261 302 } 262 303 263 304 LayoutUnit RenderFlexibleBox::flowAwareBorderAfter() const 264 305 { 265 return borderAfter(); 306 switch (transformedWritingMode()) { 307 case TopToBottomWritingMode: 308 return borderBottom(); 309 case BottomToTopWritingMode: 310 return borderTop(); 311 case LeftToRightWritingMode: 312 return borderRight(); 313 case RightToLeftWritingMode: 314 return borderLeft(); 315 } 316 ASSERT_NOT_REACHED(); 317 return borderBottom(); 266 318 } 267 319 … … 274 326 LayoutUnit RenderFlexibleBox::flowAwarePaddingStart() const 275 327 { 276 return paddingStart(); 328 if (isHorizontalFlow()) 329 return isLeftToRightFlow() ? paddingLeft() : paddingRight(); 330 return isLeftToRightFlow() ? paddingTop() : paddingBottom(); 277 331 } 278 332 279 333 LayoutUnit RenderFlexibleBox::flowAwarePaddingBefore() const 280 334 { 281 return paddingBefore(); 335 switch (transformedWritingMode()) { 336 case TopToBottomWritingMode: 337 return paddingTop(); 338 case BottomToTopWritingMode: 339 return paddingBottom(); 340 case LeftToRightWritingMode: 341 return paddingLeft(); 342 case RightToLeftWritingMode: 343 return paddingRight(); 344 } 345 ASSERT_NOT_REACHED(); 346 return paddingTop(); 282 347 } 283 348 284 349 LayoutUnit RenderFlexibleBox::flowAwarePaddingAfter() const 285 350 { 286 return paddingAfter(); 351 switch (transformedWritingMode()) { 352 case TopToBottomWritingMode: 353 return paddingBottom(); 354 case BottomToTopWritingMode: 355 return paddingTop(); 356 case LeftToRightWritingMode: 357 return paddingRight(); 358 case RightToLeftWritingMode: 359 return paddingLeft(); 360 } 361 ASSERT_NOT_REACHED(); 362 return paddingBottom(); 287 363 } 288 364 289 365 LayoutUnit RenderFlexibleBox::flowAwareMarginStartForChild(RenderBox* child) const 290 366 { 291 return marginStartForChild(child); 367 if (isHorizontalFlow()) 368 return isLeftToRightFlow() ? child->marginLeft() : child->marginRight(); 369 return isLeftToRightFlow() ? child->marginTop() : child->marginBottom(); 292 370 } 293 371 294 372 LayoutUnit RenderFlexibleBox::flowAwareMarginEndForChild(RenderBox* child) const 295 373 { 296 return marginStartForChild(child); 374 if (isHorizontalFlow()) 375 return isLeftToRightFlow() ? child->marginRight() : child->marginLeft(); 376 return isLeftToRightFlow() ? child->marginBottom() : child->marginTop(); 297 377 } 298 378 299 379 LayoutUnit RenderFlexibleBox::flowAwareMarginBeforeForChild(RenderBox* child) const 300 380 { 301 return marginBeforeForChild(child); 381 switch (transformedWritingMode()) { 382 case TopToBottomWritingMode: 383 return child->marginTop(); 384 case BottomToTopWritingMode: 385 return child->marginBottom(); 386 case LeftToRightWritingMode: 387 return child->marginLeft(); 388 case RightToLeftWritingMode: 389 return child->marginRight(); 390 } 391 ASSERT_NOT_REACHED(); 392 return marginTop(); 302 393 } 303 394 304 395 LayoutUnit RenderFlexibleBox::flowAwareMarginAfterForChild(RenderBox* child) const 305 396 { 306 return marginAfterForChild(child); 397 switch (transformedWritingMode()) { 398 case TopToBottomWritingMode: 399 return child->marginBottom(); 400 case BottomToTopWritingMode: 401 return child->marginTop(); 402 case LeftToRightWritingMode: 403 return child->marginRight(); 404 case RightToLeftWritingMode: 405 return child->marginLeft(); 406 } 407 ASSERT_NOT_REACHED(); 408 return marginBottom(); 307 409 } 308 410 … … 320 422 void RenderFlexibleBox::setFlowAwareMarginStartForChild(RenderBox* child, LayoutUnit margin) 321 423 { 322 setMarginStartForChild(child, margin); 424 if (isHorizontalFlow()) { 425 if (isLeftToRightFlow()) 426 child->setMarginLeft(margin); 427 else 428 child->setMarginRight(margin); 429 } else { 430 if (isLeftToRightFlow()) 431 child->setMarginTop(margin); 432 else 433 child->setMarginBottom(margin); 434 } 323 435 } 324 436 325 437 void RenderFlexibleBox::setFlowAwareMarginEndForChild(RenderBox* child, LayoutUnit margin) 326 438 { 327 setMarginEndForChild(child, margin); 439 if (isHorizontalFlow()) { 440 if (isLeftToRightFlow()) 441 child->setMarginRight(margin); 442 else 443 child->setMarginLeft(margin); 444 } else { 445 if (isLeftToRightFlow()) 446 child->setMarginBottom(margin); 447 else 448 child->setMarginTop(margin); 449 } 328 450 } 329 451 … … 548 670 549 671 LayoutUnit childLogicalWidth = flowAwareLogicalWidthForChild(child); 550 LayoutUnit logicalLeft = isLeftToRightFlow() ? startEdge : totalLogicalWidth - startEdge - childLogicalWidth; 672 bool shouldFlipInlineDirection = isColumnFlow() ? true : isLeftToRightFlow(); 673 LayoutUnit logicalLeft = shouldFlipInlineDirection ? startEdge : totalLogicalWidth - startEdge - childLogicalWidth; 674 551 675 // FIXME: Do repaintDuringLayoutIfMoved. 552 676 // FIXME: Supporting layout deltas. 553 677 setFlowAwareLogicalLocationForChild(child, IntPoint(logicalLeft, logicalTop + flowAwareMarginBeforeForChild(child))); 554 startEdge += childLogicalWidth + marginEndForChild(child);678 startEdge += childLogicalWidth + flowAwareMarginEndForChild(child); 555 679 556 680 if (hasPackingSpace(availableFreeSpace, totalPositiveFlexibility) && style()->flexPack() == PackJustify && childSizes.size() > 1) … … 568 692 void RenderFlexibleBox::alignChildrenBlockDirection(FlexOrderIterator& iterator, LayoutUnit maxAscent) 569 693 { 694 LayoutUnit logicalHeight = flowAwareLogicalHeight(); 695 570 696 for (RenderBox* child = iterator.first(); child; child = iterator.next()) { 697 // direction:rtl + flex-flow:column means the cross-axis direction is flipped. 698 if (!style()->isLeftToRightDirection() && isColumnFlow()) { 699 LayoutPoint location = flowAwareLogicalLocationForChild(child); 700 location.setY(logicalHeight - flowAwareLogicalHeightForChild(child) - location.y()); 701 setFlowAwareLogicalLocationForChild(child, location); 702 } 703 704 // FIXME: Make sure this does the right thing with column flows. 571 705 switch (child->style()->flexAlign()) { 572 706 case AlignStretch: { -
trunk/Source/WebCore/rendering/RenderFlexibleBox.h
r97313 r97783 54 54 typedef WTF::HashMap<const RenderBox*, LayoutUnit> InflexibleFlexItemSize; 55 55 56 // FIXME: Implement computePreferredLogicalWidths since it needs to be flow-aware. 56 57 bool hasOrthogonalFlow(RenderBox* child) const; 58 bool isColumnFlow() const; 57 59 bool isHorizontalFlow() const; 58 60 bool isLeftToRightFlow() const; … … 65 67 LayoutUnit flowAwareContentLogicalHeight() const; 66 68 LayoutUnit flowAwareContentLogicalWidth() const; 69 WritingMode transformedWritingMode() const; 67 70 LayoutUnit flowAwareBorderStart() const; 68 71 LayoutUnit flowAwareBorderBefore() const;
Note: See TracChangeset
for help on using the changeset viewer.