Changeset 111214 in webkit
- Timestamp:
- Mar 19, 2012 12:11:14 PM (12 years ago)
- Location:
- trunk
- Files:
-
- 9 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r111212 r111214 1 2012-03-19 Tony Chang <tony@chromium.org> 2 3 flex-item-align: stretch should only grow, never shrink 4 https://bugs.webkit.org/show_bug.cgi?id=80882 5 6 Reviewed by Ojan Vafai. 7 8 * css3/flexbox/child-overflow-expected.html: 9 * css3/flexbox/child-overflow.html: For cases that overflow the height, we now just overflow rather than reducing the height. 10 * css3/flexbox/flex-align-stretch-expected.txt: 11 * css3/flexbox/flex-align-stretch.html: New test cases. 12 * platform/chromium/test_expectations.txt: Mark as failing on Windows 13 because of mock scrollbar rendering bug. 14 1 15 2012-03-19 Vsevolod Vlasov <vsevik@chromium.org> 2 16 -
trunk/LayoutTests/css3/flexbox/child-overflow-expected.html
r111103 r111214 5 5 .container { 6 6 display: inline-block; 7 margin-right: 5px; 7 margin-right: 30px; 8 width: 100px; 9 height: 100px; 10 border: 5px solid pink; 11 position: relative; 8 12 } 9 13 10 14 .container > div { 11 border: 5px solid pink;12 15 overflow: auto; 16 width: 100px; 13 17 height: 100px; 14 width: 100px;15 18 } 16 19 … … 20 23 background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%); 21 24 } 25 26 p { 27 margin-bottom: 30px; 28 } 22 29 </style> 23 30 </head> 24 31 <body> 25 <p>Scrollbars should work in all the flexboxes and each row should show four identical boxes.</p> 26 </body> 32 <p>Scrollbars should work in all the flexboxes. The first and third 33 columns should overflow the logical height. Each row should be aligned 34 to the same corner.</p> 35 36 <div class="container bottomLeft"><div style="height: auto; position: absolute; bottom: 0"><div></div></div></div> 37 <div class="container bottomLeft"><div><div></div></div></div> 38 <div class="container bottomLeft"><div style="height: auto; position: absolute; bottom: 0"><div></div></div></div> 39 <div class="container bottomLeft"><div><div></div></div></div> 40 <br> 41 <div class="container topRight"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute; right: 0"><div></div></div></div> 42 <div class="container topRight"><div><div></div></div></div> 43 <div class="container topRight"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute; right: 0"><div></div></div></div> 44 <div class="container topRight"><div><div></div></div></div> 45 <br> 46 <div class="container"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute;"><div></div></div></div> 47 <div class="container"><div><div></div></div></div> 48 <div class="container"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute;"><div></div></div></div> 49 <div class="container"><div><div></div></div></div> 50 <br> 51 <div class="container"><div style="height: auto"><div></div></div></div> 52 <div class="container"><div><div></div></div></div> 53 <div class="container"><div style="height: auto"><div></div></div></div> 54 <div class="container"><div><div></div></div></div> 55 27 56 <script> 28 var origins = ['', 'bottomLeft', 'topRight', ''];29 30 origins.forEach(function(origin) {31 for (var i = 0; i < 4; ++i) {32 var containerClass = 'container ' + origin;33 document.body.innerHTML +=34 "<div class='" + containerClass + "'>" +35 "<div><div></div></div>" +36 "</div>";37 }38 document.body.innerHTML += "<br>";39 });40 57 41 58 Array.prototype.forEach.call(document.querySelectorAll('.bottomLeft'), function(element) { -
trunk/LayoutTests/css3/flexbox/child-overflow.html
r111103 r111214 5 5 .container { 6 6 display: inline-block; 7 margin-right: 5px;7 margin-right: 30px; 8 8 } 9 9 … … 56 56 background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%); 57 57 } 58 59 p { 60 margin-bottom: 30px; 61 } 58 62 </style> 59 63 </head> 60 64 <body> 61 <p>Scrollbars should work in all the flexboxes and each row should show four identical boxes.</p> 65 <p>Scrollbars should work in all the flexboxes. The first and third 66 columns should overflow the logical height. Each row should be aligned 67 to the same corner.</p> 62 68 </body> 63 69 <script> 64 var writingModes = ['horizontal- tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];70 var writingModes = ['horizontal-bt', 'vertical-rl', 'vertical-lr', 'horizontal-tb']; 65 71 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; 66 72 writingModes.forEach(function(writingMode) { … … 73 79 "<div style='width: -webkit-flex(0 1 auto); height: -webkit-flex(0 1 auto)'><div></div></div>" + 74 80 "</div>" + 75 "</div> ";81 "</div> "; 76 82 }); 77 83 document.body.innerHTML += "<br>"; -
trunk/LayoutTests/css3/flexbox/flex-align-stretch-expected.txt
r111103 r111214 3 3 PASS 4 4 PASS 5 PASS 6 PASS -
trunk/LayoutTests/css3/flexbox/flex-align-stretch.html
r111103 r111214 83 83 </div> 84 84 85 <!-- When overflowing the height, flex-align: stretch doesn't cause the flex item to get smaller. --> 86 <div class="flexbox" style="height: 50px; width: 600px;"> 87 <div data-expected-height="60" style="background-color: yellow; width: 300px"> 88 <div data-expected-height="60" style="height: 60px; width: 10px; background-color: orange"></div> 89 </div> 90 </div> 91 92 <!-- In the column case, the width of the flex item is constrained by the width of the flexbox, so flex-align: stretch doesn't change the width. --> 93 <div class="flexbox" style="-webkit-flex-direction: column; width: 100px;"> 94 <div data-expected-width="100" data-expected-height="50" style="background-color: yellow;"> 95 <div data-expected-width="200" style="height: 50px; width: 200px; background-color: orange"></div> 96 </div> 97 </div> 98 85 99 </html> -
trunk/LayoutTests/platform/chromium/test_expectations.txt
r111185 r111214 3938 3938 // flaky tests 3939 3939 BUGWK81493 LINUX : svg/custom/js-late-gradient-creation.svg = PASS IMAGE 3940 3941 BUGWK77368 WIN : css3/flexbox/child-overflow.html = IMAGE -
trunk/Source/WebCore/ChangeLog
r111212 r111214 1 2012-03-19 Tony Chang <tony@chromium.org> 2 3 flex-item-align: stretch should only grow, never shrink 4 https://bugs.webkit.org/show_bug.cgi?id=80882 5 6 Reviewed by Ojan Vafai. 7 8 New test cases in css3/flexbox/flex-align-stretch.html. 9 10 * rendering/RenderFlexibleBox.cpp: 11 (WebCore::RenderFlexibleBox::alignChildren): Move stretch code into a separate function. 12 (WebCore::RenderFlexibleBox::alignChildStretch): Add an early return if our height is shrinking. 13 (WebCore): 14 * rendering/RenderFlexibleBox.h: 15 (RenderFlexibleBox): 16 1 17 2012-03-19 Vsevolod Vlasov <vsevik@chromium.org> 2 18 -
trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp
r111126 r111214 975 975 break; 976 976 case AlignStretch: { 977 if (!isColumnFlow() && child->style()->logicalHeight().isAuto()) { 978 LayoutUnit logicalHeightBefore = child->logicalHeight(); 979 LayoutUnit stretchedLogicalHeight = child->logicalHeight() + availableAlignmentSpaceForChild(lineCrossAxisExtent, child); 980 child->setLogicalHeight(stretchedLogicalHeight); 981 child->computeLogicalHeight(); 982 983 if (child->logicalHeight() != logicalHeightBefore) { 984 child->setOverrideHeight(child->logicalHeight()); 985 child->setLogicalHeight(0); 986 child->setChildNeedsLayout(true); 987 child->layoutIfNeeded(); 988 } 989 } else if (isColumnFlow() && child->style()->logicalWidth().isAuto() && isMultiline()) { 990 // FIXME: Handle min-width and max-width. 991 LayoutUnit childWidth = lineCrossAxisExtent - crossAxisMarginExtentForChild(child); 992 child->setOverrideWidth(std::max(0, childWidth)); 993 child->setChildNeedsLayout(true); 994 child->layoutIfNeeded(); 995 } 977 applyStretchAlignmentToChild(child, lineCrossAxisExtent); 996 978 // Since wrap-reverse flips cross start and cross end, strech children should be aligned with the cross end. 997 979 if (style()->flexWrap() == FlexWrapReverse) … … 1030 1012 } 1031 1013 1014 void RenderFlexibleBox::applyStretchAlignmentToChild(RenderBox* child, LayoutUnit lineCrossAxisExtent) 1015 { 1016 if (!isColumnFlow() && child->style()->logicalHeight().isAuto()) { 1017 LayoutUnit logicalHeightBefore = child->logicalHeight(); 1018 LayoutUnit stretchedLogicalHeight = child->logicalHeight() + availableAlignmentSpaceForChild(lineCrossAxisExtent, child); 1019 if (stretchedLogicalHeight < logicalHeightBefore) 1020 return; 1021 1022 child->setLogicalHeight(stretchedLogicalHeight); 1023 child->computeLogicalHeight(); 1024 1025 if (child->logicalHeight() != logicalHeightBefore) { 1026 child->setOverrideHeight(child->logicalHeight()); 1027 child->setLogicalHeight(0); 1028 child->setChildNeedsLayout(true); 1029 child->layoutIfNeeded(); 1030 } 1031 } else if (isColumnFlow() && child->style()->logicalWidth().isAuto() && isMultiline()) { 1032 // FIXME: Handle min-width and max-width. 1033 LayoutUnit childWidth = lineCrossAxisExtent - crossAxisMarginExtentForChild(child); 1034 child->setOverrideWidth(std::max(0, childWidth)); 1035 child->setChildNeedsLayout(true); 1036 child->layoutIfNeeded(); 1037 } 1038 } 1039 1032 1040 void RenderFlexibleBox::flipForRightToLeftColumn(FlexOrderIterator& iterator) 1033 1041 { -
trunk/Source/WebCore/rendering/RenderFlexibleBox.h
r111103 r111214 113 113 void layoutColumnReverse(const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace); 114 114 void alignChildren(const OrderedFlexItemList&, LayoutUnit lineCrossAxisExtent, LayoutUnit maxAscent); 115 void applyStretchAlignmentToChild(RenderBox*, LayoutUnit lineCrossAxisExtent); 115 116 void flipForRightToLeftColumn(FlexOrderIterator&); 116 117 void flipForWrapReverse(FlexOrderIterator&, const WrapReverseContext&);
Note: See TracChangeset
for help on using the changeset viewer.