REGRESSION (r143643): Buttons containing floats render differently
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 5 Mar 2013 02:46:44 +0000 (02:46 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 5 Mar 2013 02:46:44 +0000 (02:46 +0000)
https://bugs.webkit.org/show_bug.cgi?id=110933

Patch by Christian Biesinger <cbiesinger@chromium.org> on 2013-03-04
Reviewed by Ojan Vafai.

Source/WebCore:

Test: fast/forms/button-with-float.html

* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::expandsToEncloseOverhangingFloats):
Also include new flexbox as a renderer that needs to enclose
overhanging floats. Flex boxes establish a block formatting context,
so they need to contain floats:
http://dev.w3.org/csswg/css3-flexbox/#flex-items

LayoutTests:

* css3/flexbox/float-inside-flexitem-expected.html: Added.
* css3/flexbox/float-inside-flexitem.html: Added.
* fast/forms/button-with-float-expected.html: Added.
* fast/forms/button-with-float.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/css3/flexbox/float-inside-flexitem-expected.html [new file with mode: 0644]
LayoutTests/css3/flexbox/float-inside-flexitem.html [new file with mode: 0644]
LayoutTests/fast/forms/button-with-float-expected.html [new file with mode: 0644]
LayoutTests/fast/forms/button-with-float.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBlock.cpp

index e9cf7ed..0ad8656 100644 (file)
@@ -1,3 +1,15 @@
+2013-03-04  Christian Biesinger  <cbiesinger@chromium.org>
+
+        REGRESSION (r143643): Buttons containing floats render differently
+        https://bugs.webkit.org/show_bug.cgi?id=110933
+
+        Reviewed by Ojan Vafai.
+
+        * css3/flexbox/float-inside-flexitem-expected.html: Added.
+        * css3/flexbox/float-inside-flexitem.html: Added.
+        * fast/forms/button-with-float-expected.html: Added.
+        * fast/forms/button-with-float.html: Added.
+
 2013-03-04  Rafael Weinstein  <rafaelw@chromium.org>
 
         Unreviewed, rolling out r144595.
diff --git a/LayoutTests/css3/flexbox/float-inside-flexitem-expected.html b/LayoutTests/css3/flexbox/float-inside-flexitem-expected.html
new file mode 100644 (file)
index 0000000..6a1acf5
--- /dev/null
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<head>
+<style>
+    .container {
+        position: relative;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        border: 1px solid black;
+        padding: 0;
+        background-color: buttonface;
+        float: left;
+        margin: 2px;
+    }
+
+    .margin {
+        margin: 5px 10px 5px 5px;
+    }
+    .sized {
+        width: 50px;
+        height: 50px;
+    }
+    .pink {
+        background-color: pink;
+    }
+    .float {
+        float: left;
+    }
+    .line {
+        height: 2px;
+        border-top: solid 1px #fff;
+        background: #00f;
+
+        position: absolute;
+        width: 50px;
+        bottom: 5px;
+        left: 5px;
+    }
+</style>
+</head>
+<body>
+    You should see an almost-square grey rectangle containing a pink square with a blue line below it.
+    There should be no pink below the blue line.
+<hr>
+<div class="container">
+    <div class="margin sized float">
+        <div class="sized">
+            <div class="sized pink">
+            <div class="line"></div>
+        </div>
+    </div>
+</div>
diff --git a/LayoutTests/css3/flexbox/float-inside-flexitem.html b/LayoutTests/css3/flexbox/float-inside-flexitem.html
new file mode 100644 (file)
index 0000000..a102d12
--- /dev/null
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<head>
+<link href="resources/flexbox.css" rel="stylesheet">
+<style>
+    .container {
+        position: relative;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        border: 1px solid black;
+        padding: 0;
+        background-color: buttonface;
+        float: left;
+        margin: 2px;
+    }
+
+    .margin {
+        margin: 5px 10px 5px 5px;
+    }
+    .sized {
+        width: 50px;
+        height: 50px;
+    }
+    .pink {
+        background-color: pink;
+    }
+    .float {
+        float: left;
+    }
+    .line {
+        height: 2px;
+        border-top: solid 1px #fff;
+        background: #00f;
+
+        position: absolute;
+        width: 50px;
+        bottom: 5px;
+        left: 5px;
+    }
+</style>
+</head>
+<body>
+    You should see an almost-square grey rectangle containing a pink square with a blue line below it.
+    There should be no pink below the blue line.
+<hr>
+<div class="container flexbox">
+    <div>
+    <div class="margin sized float">
+        <div class="sized">
+            <div class="sized pink">
+            <div class="line"></div>
+        </div>
+    </div>
+    </div>
+</div>
diff --git a/LayoutTests/fast/forms/button-with-float-expected.html b/LayoutTests/fast/forms/button-with-float-expected.html
new file mode 100644 (file)
index 0000000..a6297b1
--- /dev/null
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<head>
+<style>
+    .container {
+        position: relative;
+        -webkit-appearance: none;
+        border: 1px solid black;
+        padding: 0;
+        background-color: buttonface;
+        float: left;
+        margin: 2px;
+    }
+
+    .margin {
+        margin: 5px 10px 5px 5px;
+    }
+    .sized {
+        width: 50px;
+        height: 50px;
+    }
+    .pink {
+        background-color: pink;
+    }
+    .float {
+        float: left;
+    }
+    .line {
+        height: 2px;
+        border-top: solid 1px #fff;
+        background: #00f;
+
+        position: absolute;
+        width: 50px;
+        bottom: 5px;
+        left: 5px;
+    }
+</style>
+</head>
+<body>
+    You should see an almost-square grey rectangle containing a pink square with a blue line below it.
+    There should be no pink below the blue line.
+<hr>
+<div class="container">
+    <div class="margin sized float">
+        <div class="sized">
+            <div class="sized pink">
+            <div class="line"></div>
+        </div>
+    </div>
+</div>
diff --git a/LayoutTests/fast/forms/button-with-float.html b/LayoutTests/fast/forms/button-with-float.html
new file mode 100644 (file)
index 0000000..d42d84f
--- /dev/null
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<head>
+<style>
+    button {
+        position: relative;
+        -webkit-appearance: none;
+        border: 1px solid black;
+        padding: 0;
+    }
+
+    .margin {
+        margin: 5px 10px 5px 5px;
+    }
+    .sized {
+        width: 50px;
+        height: 50px;
+    }
+    .pink {
+        background-color: pink;
+    }
+    .float {
+        float: left;
+    }
+    .line {
+        height: 2px;
+        border-top: solid 1px #fff;
+        background: #00f;
+
+        position: absolute;
+        width: 50px;
+        bottom: 5px;
+        left: 5px;
+    }
+</style>
+</head>
+<body>
+    You should see an almost-square grey rectangle containing a pink square with a blue line below it.
+    There should be no pink below the blue line.
+<hr>
+<button>
+    <div class="margin sized float">
+        <div class="sized">
+            <div class="sized pink">
+            <div class="line"></div>
+        </div>
+    </div>
+</button>
index 9bbedf6..9748105 100644 (file)
@@ -1,3 +1,19 @@
+2013-03-04  Christian Biesinger  <cbiesinger@chromium.org>
+
+        REGRESSION (r143643): Buttons containing floats render differently
+        https://bugs.webkit.org/show_bug.cgi?id=110933
+
+        Reviewed by Ojan Vafai.
+
+        Test: fast/forms/button-with-float.html
+
+        * rendering/RenderBlock.cpp:
+        (WebCore::RenderBlock::expandsToEncloseOverhangingFloats):
+        Also include new flexbox as a renderer that needs to enclose
+        overhanging floats. Flex boxes establish a block formatting context,
+        so they need to contain floats:
+        http://dev.w3.org/csswg/css3-flexbox/#flex-items
+
 2013-03-04  Chris Fleizach  <cfleizach@apple.com>
 
         Support WebSpeech - Speech Synthesis
index 13a97e3..bf9e185 100644 (file)
@@ -1797,7 +1797,7 @@ void RenderBlock::addVisualOverflowFromTheme()
 
 bool RenderBlock::expandsToEncloseOverhangingFloats() const
 {
-    return isInlineBlockOrInlineTable() || isFloatingOrOutOfFlowPositioned() || hasOverflowClip() || (parent() && parent()->isDeprecatedFlexibleBox())
+    return isInlineBlockOrInlineTable() || isFloatingOrOutOfFlowPositioned() || hasOverflowClip() || (parent() && parent()->isFlexibleBoxIncludingDeprecated())
            || hasColumns() || isTableCell() || isTableCaption() || isFieldset() || isWritingModeRoot() || isRoot();
 }