Floated flexboxes render as regular RenderBlocks
authorojan@chromium.org <ojan@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 8 Feb 2012 19:58:35 +0000 (19:58 +0000)
committerojan@chromium.org <ojan@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 8 Feb 2012 19:58:35 +0000 (19:58 +0000)
https://bugs.webkit.org/show_bug.cgi?id=77909

Reviewed by Eric Seidel.

Source/WebCore:

Add grid/flexbox cases to adjusting the display of floated/positioned
elements. Also, move this logic into a switch statement. This makes
the code more readable and gives compile warnings when new display types
are added that aren't handled here.

Test: css3/flexbox/floated-flexbox.html

* css/CSSStyleSelector.cpp:
(WebCore::adjustDisplay):
(WebCore):
(WebCore::CSSStyleSelector::adjustRenderStyle):

LayoutTests:

* css3/flexbox/floated-flexbox-expected.txt: Added.
* css3/flexbox/floated-flexbox.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/css3/flexbox/floated-flexbox-expected.txt [new file with mode: 0644]
LayoutTests/css3/flexbox/floated-flexbox.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/css/CSSStyleSelector.cpp

index f214d17..0a76e46 100644 (file)
@@ -1,3 +1,13 @@
+2012-02-07  Ojan Vafai  <ojan@chromium.org>
+
+        Floated flexboxes render as regular RenderBlocks
+        https://bugs.webkit.org/show_bug.cgi?id=77909
+
+        Reviewed by Eric Seidel.
+
+        * css3/flexbox/floated-flexbox-expected.txt: Added.
+        * css3/flexbox/floated-flexbox.html: Added.
+
 2012-02-08  Julien Chaffraix  <jchaffraix@webkit.org>
 
         Unreviewed gardening.
diff --git a/LayoutTests/css3/flexbox/floated-flexbox-expected.txt b/LayoutTests/css3/flexbox/floated-flexbox-expected.txt
new file mode 100644 (file)
index 0000000..dd05afa
--- /dev/null
@@ -0,0 +1,7 @@
+FAIL:
+Expected 130 for width, but got 110. 
+
+<div data-expected-width="130" data-expected-height="30" class="flexbox">
+    <div style="background-color:pink; width: 20px; height: 20px;"></div>
+    <div style="background-color:red; width: 100px; height: 20px;"></div>
+</div>
diff --git a/LayoutTests/css3/flexbox/floated-flexbox.html b/LayoutTests/css3/flexbox/floated-flexbox.html
new file mode 100644 (file)
index 0000000..cc17404
--- /dev/null
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<style>
+.flexbox {
+    display: -webkit-flexbox;
+    background-color: #aaa;
+    border: 5px solid blue;
+    float:left;
+}
+.flexbox :nth-child(1) {
+    background-color: blue;
+}
+.flexbox :nth-child(2) {
+    background-color: green;
+}
+</style>
+<script>
+if (window.layoutTestController)
+    layoutTestController.dumpAsText();
+</script>
+<script src="resources/flexbox.js"></script>
+<body onload="checkFlexBoxen()">
+
+<div data-expected-width=130 data-expected-height=30 class=flexbox>
+    <div style="background-color:pink; width: 20px; height: 20px;"></div>
+    <div style="background-color:red; width: 100px; height: 20px;"></div>
+</div>
+
+</body>
+</html>
index 6bc0c8d..a3d74ab 100644 (file)
@@ -1,3 +1,22 @@
+2012-02-07  Ojan Vafai  <ojan@chromium.org>
+
+        Floated flexboxes render as regular RenderBlocks
+        https://bugs.webkit.org/show_bug.cgi?id=77909
+
+        Reviewed by Eric Seidel.
+
+        Add grid/flexbox cases to adjusting the display of floated/positioned
+        elements. Also, move this logic into a switch statement. This makes
+        the code more readable and gives compile warnings when new display types
+        are added that aren't handled here.
+
+        Test: css3/flexbox/floated-flexbox.html
+
+        * css/CSSStyleSelector.cpp:
+        (WebCore::adjustDisplay):
+        (WebCore):
+        (WebCore::CSSStyleSelector::adjustRenderStyle):
+
 2012-02-08  Dirk Schulze  <krit@webkit.org>
 
         viewBox on nested SVG causes wrong content size for relative values
index 86b0ac3..ffd7c4f 100644 (file)
@@ -1727,6 +1727,55 @@ static void addIntrinsicMargins(RenderStyle* style)
     }
 }
 
+static EDisplay equivalentBlockDisplay(EDisplay display, bool isFloating, bool strictParsing)
+{
+    switch (display) {
+    case BLOCK:
+    case TABLE:
+    case BOX:
+    case FLEXBOX:
+#if ENABLE(CSS_GRID_LAYOUT)
+    case GRID:
+#endif
+        return display;
+
+    case LIST_ITEM:
+        // It is a WinIE bug that floated list items lose their bullets, so we'll emulate the quirk, but only in quirks mode.
+        if (!strictParsing && isFloating)
+            return BLOCK;
+        return display;
+    case INLINE_TABLE:
+        return TABLE;
+    case INLINE_BOX:
+        return BOX;
+    case INLINE_FLEXBOX:
+        return FLEXBOX;
+#if ENABLE(CSS_GRID_LAYOUT)
+    case INLINE_GRID:
+        return GRID;
+#endif
+
+    case INLINE:
+    case RUN_IN:
+    case COMPACT:
+    case INLINE_BLOCK:
+    case TABLE_ROW_GROUP:
+    case TABLE_HEADER_GROUP:
+    case TABLE_FOOTER_GROUP:
+    case TABLE_ROW:
+    case TABLE_COLUMN_GROUP:
+    case TABLE_COLUMN:
+    case TABLE_CELL:
+    case TABLE_CAPTION:
+        return BLOCK;
+    case NONE:
+        ASSERT_NOT_REACHED();
+        return NONE;
+    }
+    ASSERT_NOT_REACHED();
+    return BLOCK;
+}
+
 void CSSStyleSelector::adjustRenderStyle(RenderStyle* style, RenderStyle* parentStyle, Element *e)
 {
     // Cache our original display.
@@ -1776,26 +1825,9 @@ void CSSStyleSelector::adjustRenderStyle(RenderStyle* style, RenderStyle* parent
         if (e && e->hasTagName(legendTag))
             style->setDisplay(BLOCK);
 
-        // Mutate the display to BLOCK or TABLE for certain cases, e.g., if someone attempts to
-        // position or float an inline, compact, or run-in.  Cache the original display, since it
-        // may be needed for positioned elements that have to compute their static normal flow
-        // positions.  We also force inline-level roots to be block-level.
-        if (style->display() != BLOCK && style->display() != TABLE && style->display() != BOX &&
-            (style->position() == AbsolutePosition || style->position() == FixedPosition || style->isFloating() ||
-             (e && e->document()->documentElement() == e))) {
-            if (style->display() == INLINE_TABLE)
-                style->setDisplay(TABLE);
-            else if (style->display() == INLINE_BOX)
-                style->setDisplay(BOX);
-            else if (style->display() == LIST_ITEM) {
-                // It is a WinIE bug that floated list items lose their bullets, so we'll emulate the quirk,
-                // but only in quirks mode.
-                if (!m_checker.strictParsing() && style->isFloating())
-                    style->setDisplay(BLOCK);
-            }
-            else
-                style->setDisplay(BLOCK);
-        }
+        // Absolute/fixed positioned elements, floating elements and the document element need block-like outside display.
+        if (style->position() == AbsolutePosition || style->position() == FixedPosition || style->isFloating() || (e && e->document()->documentElement() == e))
+            style->setDisplay(equivalentBlockDisplay(style->display(), style->isFloating(), m_checker.strictParsing()));
 
         // FIXME: Don't support this mutation for pseudo styles like first-letter or first-line, since it's not completely
         // clear how that should work.