flexitems can overflow the flexbox due to rounding
authortony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 26 Jul 2012 02:24:47 +0000 (02:24 +0000)
committertony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 26 Jul 2012 02:24:47 +0000 (02:24 +0000)
https://bugs.webkit.org/show_bug.cgi?id=92163

Reviewed by Levi Weintraub.

Source/WebCore:

Don't round flex item sizes and use LayoutPoint for the location of flex items.

Test: css3/flexbox/flex-rounding.html

* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::resolveFlexibleLengths):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
(WebCore::RenderFlexibleBox::layoutColumnReverse):

LayoutTests:

Tests for dividing space in non-integral amounts.

* css3/flexbox/flex-rounding-expected.txt: Added.
* css3/flexbox/flex-rounding.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@123696 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/css3/flexbox/flex-rounding-expected.txt [new file with mode: 0644]
LayoutTests/css3/flexbox/flex-rounding.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderFlexibleBox.cpp

index 0f661cf..2632641 100644 (file)
@@ -1,3 +1,15 @@
+2012-07-25  Tony Chang  <tony@chromium.org>
+
+        flexitems can overflow the flexbox due to rounding
+        https://bugs.webkit.org/show_bug.cgi?id=92163
+
+        Reviewed by Levi Weintraub.
+
+        Tests for dividing space in non-integral amounts.
+
+        * css3/flexbox/flex-rounding-expected.txt: Added.
+        * css3/flexbox/flex-rounding.html: Added.
+
 2012-07-25  Yoshifumi Inoue  <yosin@chromium.org>
 
         [Tests] Re-factor fast/forms/number/number-spinbutton-change-and-input-events.html
diff --git a/LayoutTests/css3/flexbox/flex-rounding-expected.txt b/LayoutTests/css3/flexbox/flex-rounding-expected.txt
new file mode 100644 (file)
index 0000000..f61966d
--- /dev/null
@@ -0,0 +1,8 @@
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/css3/flexbox/flex-rounding.html b/LayoutTests/css3/flexbox/flex-rounding.html
new file mode 100644 (file)
index 0000000..864520f
--- /dev/null
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<style>
+.flexbox {
+    display: -webkit-flex;
+    background-color: #aaa;
+    position: relative;
+}
+.flexbox :nth-child(1) {
+    background-color: blue;
+}
+.flexbox :nth-child(2) {
+    background-color: green;
+}
+.flexbox :nth-child(3) {
+    background-color: red;
+}
+.flexbox :nth-child(4) {
+    background-color: yellow;
+}
+.flexbox :nth-child(5) {
+    background-color: purple;
+}
+.flexbox :nth-child(6) {
+    background-color: orange;
+}
+.flexbox :nth-child(7) {
+    background-color: lime;
+}
+
+.flexbox > div {
+    -webkit-flex: 1;
+}
+.column {
+    -webkit-flex-direction: column;
+    width: 200px;
+    height: 200px;
+}
+</style>
+<script>
+if (window.testRunner)
+    testRunner.dumpAsText();
+</script>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.flexbox')">
+
+<div class="flexbox" style="width: 101px; height: 10px">
+    <div data-expected-width="51" data-offset-x="0"></div>
+    <div data-expected-width="50" data-offset-x="51"></div>
+</div>
+
+<div class="flexbox" style="width: 100px; height: 10px">
+    <div data-expected-width="33" data-offset-x="0"></div>
+    <div data-expected-width="34" data-offset-x="33"></div>
+    <div data-expected-width="33" data-offset-x="67"></div>
+</div>
+
+<div class="flexbox" style="-webkit-flex-direction: row-reverse; width: 101px; height: 10px">
+    <div data-expected-width="50" data-offset-x="51"></div>
+    <div data-expected-width="51" data-offset-x="0"></div>
+</div>
+
+<div class="flexbox" style="-webkit-flex-direction: row-reverse; width: 100px; height: 10px">
+    <div data-expected-width="33" data-offset-x="67"></div>
+    <div data-expected-width="34" data-offset-x="33"></div>
+    <div data-expected-width="33" data-offset-x="0"></div>
+</div>
+
+<div class="flexbox" style="-webkit-flex-direction: column; height: 101px; width: 100px">
+    <div data-expected-height="51" data-offset-y="0"></div>
+    <div data-expected-height="50" data-offset-y="51"></div>
+</div>
+
+<div class="flexbox" style="-webkit-flex-direction: column; height: 100px; width: 100px">
+    <div data-expected-height="33" data-offset-y="0"></div>
+    <div data-expected-height="34" data-offset-y="33"></div>
+    <div data-expected-height="33" data-offset-y="67"></div>
+</div>
+
+<div class="flexbox" style="-webkit-flex-direction: column-reverse; height: 101px; width: 100px">
+    <div data-expected-height="50" data-offset-y="51"></div>
+    <div data-expected-height="51" data-offset-y="0"></div>
+</div>
+
+<div class="flexbox" style="-webkit-flex-direction: column-reverse; height: 100px; width: 100px">
+    <div data-expected-height="33" data-offset-y="67"></div>
+    <div data-expected-height="34" data-offset-y="33"></div>
+    <div data-expected-height="33" data-offset-y="0"></div>
+</div>
+
+</body>
+</html>
index 3402923..2ec127a 100644 (file)
@@ -1,3 +1,19 @@
+2012-07-25  Tony Chang  <tony@chromium.org>
+
+        flexitems can overflow the flexbox due to rounding
+        https://bugs.webkit.org/show_bug.cgi?id=92163
+
+        Reviewed by Levi Weintraub.
+
+        Don't round flex item sizes and use LayoutPoint for the location of flex items.
+
+        Test: css3/flexbox/flex-rounding.html
+
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::RenderFlexibleBox::resolveFlexibleLengths):
+        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
+        (WebCore::RenderFlexibleBox::layoutColumnReverse):
+
 2012-07-25  Jonathan Dong  <jonathan.dong@torchmobile.com.cn>
 
         [BlackBerry] Integrate certmgr with CredentialBackingStore
index e7c0563..58c1454 100644 (file)
@@ -878,9 +878,9 @@ bool RenderFlexibleBox::resolveFlexibleLengths(FlexSign flexSign, const OrderedF
             LayoutUnit preferredChildSize = preferredMainAxisContentExtentForChild(child);
             LayoutUnit childSize = preferredChildSize;
             if (availableFreeSpace > 0 && totalFlexGrow > 0 && flexSign == PositiveFlexibility && isfinite(totalFlexGrow))
-                childSize += static_cast<int>(lroundf(availableFreeSpace * child->style()->flexGrow() / totalFlexGrow));
+                childSize += availableFreeSpace * child->style()->flexGrow() / totalFlexGrow;
             else if (availableFreeSpace < 0 && totalWeightedFlexShrink > 0 && flexSign == NegativeFlexibility && isfinite(totalWeightedFlexShrink))
-                childSize += static_cast<int>(lroundf(availableFreeSpace * child->style()->flexShrink() * preferredChildSize / totalWeightedFlexShrink));
+                childSize += availableFreeSpace * child->style()->flexShrink() * preferredChildSize / totalWeightedFlexShrink;
 
             LayoutUnit adjustedChildSize = adjustChildSizeForMinAndMax(child, childSize, flexboxAvailableContentExtent);
             childSizes.append(adjustedChildSize);
@@ -1018,7 +1018,7 @@ void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, cons
         mainAxisOffset += flowAwareMarginStartForChild(child);
 
         LayoutUnit childMainExtent = mainAxisExtentForChild(child);
-        IntPoint childLocation(shouldFlipMainAxis ? totalMainExtent - mainAxisOffset - childMainExtent : mainAxisOffset,
+        LayoutPoint childLocation(shouldFlipMainAxis ? totalMainExtent - mainAxisOffset - childMainExtent : mainAxisOffset,
             crossAxisOffset + flowAwareMarginBeforeForChild(child));
 
         // FIXME: Supporting layout deltas.
@@ -1061,7 +1061,7 @@ void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList& children,
         mainAxisOffset -= mainAxisExtentForChild(child) + flowAwareMarginEndForChild(child);
 
         LayoutRect oldRect = child->frameRect();
-        setFlowAwareLocationForChild(child, IntPoint(mainAxisOffset, crossAxisOffset + flowAwareMarginBeforeForChild(child)));
+        setFlowAwareLocationForChild(child, LayoutPoint(mainAxisOffset, crossAxisOffset + flowAwareMarginBeforeForChild(child)));
         if (!selfNeedsLayout() && child->checkForRepaintDuringLayout())
             child->repaintDuringLayoutIfMoved(oldRect);