image not displayed in flexbox
authortony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 Oct 2012 01:52:21 +0000 (01:52 +0000)
committertony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 Oct 2012 01:52:21 +0000 (01:52 +0000)
https://bugs.webkit.org/show_bug.cgi?id=98611

Reviewed by Ojan Vafai.

Source/WebCore:

Flexbox will override the width of a child and when stretching, will override the height of the child.
When this happens, when an image loads, it checks to see if it's width/height has
changed, and if so, does a relayout.  The overridden width/height was preventing this
relayout from happening.

To fix, we clear all the override sizes when we're done laying out the flex children.

Test: css3/flexbox/relayout-image-load.html

* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::layoutBlock): Clear child override sizes.
(WebCore::RenderFlexibleBox::clearChildOverrideSizes):
(WebCore::RenderFlexibleBox::computeMainAxisPreferredSizes): No longer need to clear the override size
here since it should have already been cleared.
* rendering/RenderFlexibleBox.h:

LayoutTests:

Load an image after flexbox layout has happened.

* css3/flexbox/relayout-image-load-expected.txt: Added.
* css3/flexbox/relayout-image-load.html: Added.
* platform/chromium/TestExpectations: Remove css3/flexbox/flexitem-stretch-image.html
since it should no longer be flaky.

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

LayoutTests/ChangeLog
LayoutTests/css3/flexbox/relayout-image-load-expected.txt [new file with mode: 0644]
LayoutTests/css3/flexbox/relayout-image-load.html [new file with mode: 0644]
LayoutTests/platform/chromium/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderFlexibleBox.cpp
Source/WebCore/rendering/RenderFlexibleBox.h

index 1cc8835..d80bbe3 100644 (file)
@@ -1,3 +1,17 @@
+2012-10-08  Tony Chang  <tony@chromium.org>
+
+        image not displayed in flexbox
+        https://bugs.webkit.org/show_bug.cgi?id=98611
+
+        Reviewed by Ojan Vafai.
+
+        Load an image after flexbox layout has happened.
+
+        * css3/flexbox/relayout-image-load-expected.txt: Added.
+        * css3/flexbox/relayout-image-load.html: Added.
+        * platform/chromium/TestExpectations: Remove css3/flexbox/flexitem-stretch-image.html
+        since it should no longer be flaky.
+
 2012-10-08  Dirk Pranke  <dpranke@chromium.org>
 
         results.html and garden-o-matic are ignoring IMAGE failures when expected to FAIL
diff --git a/LayoutTests/css3/flexbox/relayout-image-load-expected.txt b/LayoutTests/css3/flexbox/relayout-image-load-expected.txt
new file mode 100644 (file)
index 0000000..a64397b
--- /dev/null
@@ -0,0 +1,5 @@
+Test to make sure that we properly relayout when an image loads. You should see a green 100x100 image.
+
+
+PASS
diff --git a/LayoutTests/css3/flexbox/relayout-image-load.html b/LayoutTests/css3/flexbox/relayout-image-load.html
new file mode 100644 (file)
index 0000000..b9ae077
--- /dev/null
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/flexbox.css" rel="stylesheet">
+<style>
+</style>
+<script src="../../resources/check-layout.js"></script>
+</head>
+<body>
+<p>Test to make sure that we properly relayout when an image loads. You
+should see a green 100x100 image.</p>
+<div id="test" class="flexbox">
+    &nbsp;
+    <div class="flexbox">
+        <img data-expected-width=100 data-expected-height=100 id="image" onload="imageLoaded()">
+    </div>
+</div>
+<script>
+if (window.testRunner) {
+    testRunner.dumpAsText();
+    testRunner.waitUntilDone();
+}
+
+function changeImage()
+{
+    document.getElementById("image").src = "../images/resources/green-100.png";
+}
+setTimeout(changeImage, 0);
+
+function imageLoaded()
+{
+    checkLayout('#test')
+    if (window.testRunner)
+        testRunner.notifyDone();
+}
+</script>
+</body>
+</html>
index 093a224..583b653 100644 (file)
@@ -3412,7 +3412,6 @@ webkit.org/b/94528 [ Mac ] fast/text-autosizing/nested-em-line-height.html [ Ima
 webkit.org/b/94532 [ Linux ] fast/forms/formmethod-attribute-button-html.html [ Missing Pass ]
 
 webkit.org/b/94660 fast/js/create-lots-of-workers.html [ Crash Pass Timeout ]
-webkit.org/b/95366 [ Debug ] css3/flexbox/flexitem-stretch-image.html [ Failure Pass ]
 
 crbug.com/67540 webkit.org/b/94735 [ Linux ] fast/text/emphasis-overlap.html [ Failure ImageOnlyFailure ]
 
index 3f83bf0..f668bfb 100644 (file)
@@ -1,3 +1,26 @@
+2012-10-08  Tony Chang  <tony@chromium.org>
+
+        image not displayed in flexbox
+        https://bugs.webkit.org/show_bug.cgi?id=98611
+
+        Reviewed by Ojan Vafai.
+
+        Flexbox will override the width of a child and when stretching, will override the height of the child.
+        When this happens, when an image loads, it checks to see if it's width/height has
+        changed, and if so, does a relayout.  The overridden width/height was preventing this
+        relayout from happening.
+
+        To fix, we clear all the override sizes when we're done laying out the flex children.
+
+        Test: css3/flexbox/relayout-image-load.html
+
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::RenderFlexibleBox::layoutBlock): Clear child override sizes.
+        (WebCore::RenderFlexibleBox::clearChildOverrideSizes):
+        (WebCore::RenderFlexibleBox::computeMainAxisPreferredSizes): No longer need to clear the override size
+        here since it should have already been cleared.
+        * rendering/RenderFlexibleBox.h:
+
 2012-10-08  Andreas Kling  <kling@webkit.org>
 
         REGRESSION(r130643): editing/pasteboard/data-transfer-item is failing on chromium.
index 58cb546..279c298 100644 (file)
@@ -324,6 +324,7 @@ void RenderFlexibleBox::layoutBlock(bool relayoutChildren, LayoutUnit)
     layoutPositionedObjects(relayoutChildren || isRoot());
 
     computeRegionRangeForBlock();
+    clearChildOverrideSizes();
 
     // FIXME: css3/flexbox/repaint-rtl-column.html seems to repaint more overflow than it needs to.
     computeOverflow(oldClientAfterEdge);
@@ -373,6 +374,12 @@ void RenderFlexibleBox::repositionLogicalHeightDependentFlexItems(OrderIterator&
     flipForRightToLeftColumn(iterator);
 }
 
+void RenderFlexibleBox::clearChildOverrideSizes()
+{
+    for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox())
+        child->clearOverrideSize();
+}
+
 bool RenderFlexibleBox::hasOrthogonalFlow(RenderBox* child) const
 {
     // FIXME: If the child is a flexbox, then we need to check isHorizontalFlow.
@@ -806,7 +813,6 @@ void RenderFlexibleBox::computeMainAxisPreferredSizes(bool relayoutChildren, Ord
         if (child->isOutOfFlowPositioned())
             continue;
 
-        child->clearOverrideSize();
         // Only need to layout here if we will need to get the logicalHeight of the child in computeNextFlexLine.
         Length childMainAxisMin = isHorizontalFlow() ? child->style()->minWidth() : child->style()->minHeight();
         if (hasOrthogonalFlow(child) && (flexBasisForChild(child).isAuto() || childMainAxisMin.isAuto())) {
index 7c69175..4951796 100644 (file)
@@ -120,6 +120,7 @@ private:
     bool hasAutoMarginsInCrossAxis(RenderBox* child) const;
     bool updateAutoMarginsInCrossAxis(RenderBox* child, LayoutUnit availableAlignmentSpace);
     void repositionLogicalHeightDependentFlexItems(OrderIterator&, WTF::Vector<LineContext>&, LayoutUnit& oldClientAfterEdge);
+    void clearChildOverrideSizes();
 
     LayoutUnit availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox*);
     LayoutUnit marginBoxAscentForChild(RenderBox*);