REGRESSION(r176978): Inline-blocks with overflowing contents have ascents that are...
authormmaxfield@apple.com <mmaxfield@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 9 Mar 2015 23:43:34 +0000 (23:43 +0000)
committermmaxfield@apple.com <mmaxfield@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 9 Mar 2015 23:43:34 +0000 (23:43 +0000)
https://bugs.webkit.org/show_bug.cgi?id=141783

Reviewed by David Hyatt.

Source/WebCore:

When we have an inline-block element, and we want to find its baseline (to lay out other
elements on the same line) we loop through the element's children and ask them what their
baselines are. The children use the location of the top of their last line to compute this
value. However, if the child has overflow-y, this might not be the correct calculation.

This behavior is in the spec: "The baseline of an 'inline-block' is the baseline of its last
line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow'
property has a computed value other than 'visible', in which case the baseline is the bottom
margin edge."
    -- http://www.w3.org/TR/CSS21/visudet.html#leading

However, we believe that a better policy is, when overflow is not "visible," to place the
baseline at the bottom of the block if the contents overflowed in the Y direction, and to place
it at the bottom of the last line if the contents did not overflow in the Y direction. This is
partially consistent with previous behavior, and isn't too far from the spec to cause too many
breakages.

Test: fast/css/inline-block-tricky-baselines.html
      fast/text/baseline-inline-block.html

* rendering/RenderBlockFlow.cpp:
(WebCore::RenderBlockFlow::inlineBlockBaseline):

LayoutTests:

Update expected results.

* css3/flexbox/child-overflow-expected.html:
* css3/flexbox/child-overflow.html:
* fast/css/inline-block-tricky-baselines-expected.html: Added.
* fast/css/inline-block-tricky-baselines.html: Added.
* fast/forms/textfield-overflow-by-value-update-expected.txt:
* fast/text/baseline-inline-block-expected.html: Added.
* fast/text/baseline-inline-block.html: Added.
* platform/mac/fast/forms/search-vertical-alignment-expected.txt:

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

12 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/flexbox/child-overflow-expected.html
LayoutTests/css3/flexbox/child-overflow.html
LayoutTests/fast/css/inline-block-tricky-baselines-expected.html [new file with mode: 0644]
LayoutTests/fast/css/inline-block-tricky-baselines.html [new file with mode: 0644]
LayoutTests/fast/forms/textfield-overflow-by-value-update-expected.txt
LayoutTests/fast/text/baseline-inline-block-expected.html [new file with mode: 0644]
LayoutTests/fast/text/baseline-inline-block.html [new file with mode: 0644]
LayoutTests/platform/mac-mavericks/fast/forms/search-vertical-alignment-expected.txt
LayoutTests/platform/mac/fast/forms/search-vertical-alignment-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBlockFlow.cpp

index 38f76b3710954c023309b3cda9167a96e1f93876..b8b9799ffe3490d8cb06c1f3414d6ea2874ca8ea 100644 (file)
@@ -1,3 +1,21 @@
+2015-03-09  Myles C. Maxfield  <mmaxfield@apple.com>
+
+        REGRESSION(r176978): Inline-blocks with overflowing contents have ascents that are too large
+        https://bugs.webkit.org/show_bug.cgi?id=141783
+
+        Reviewed by David Hyatt.
+
+        Update expected results.
+
+        * css3/flexbox/child-overflow-expected.html:
+        * css3/flexbox/child-overflow.html:
+        * fast/css/inline-block-tricky-baselines-expected.html: Added.
+        * fast/css/inline-block-tricky-baselines.html: Added.
+        * fast/forms/textfield-overflow-by-value-update-expected.txt:
+        * fast/text/baseline-inline-block-expected.html: Added.
+        * fast/text/baseline-inline-block.html: Added.
+        * platform/mac/fast/forms/search-vertical-alignment-expected.txt:
+
 2015-03-09  Andy Estes  <aestes@apple.com>
 
         [Content Filtering] Add tests
index c50de8867673c6ac6b219b5573aefc18e56a9bdc..50eab0fb6eef947c4f6c4a3ca2ea8dbddc57c663 100644 (file)
@@ -4,6 +4,7 @@
 <style>
 .container {
     display: inline-block;
+    vertical-align: top;
     margin-right: 30px;
     width: 100px;
     height: 100px;
index 4888d6e437ac999aa60384ffd439124200c4fcdd..a633c150d190d864f96e35b6e1c8f2ea83a820c5 100644 (file)
@@ -5,6 +5,7 @@
 <style>
 .container {
     display: inline-block;
+    vertical-align: top;
     margin-right: 30px;
 }
 
diff --git a/LayoutTests/fast/css/inline-block-tricky-baselines-expected.html b/LayoutTests/fast/css/inline-block-tricky-baselines-expected.html
new file mode 100644 (file)
index 0000000..6f6b26c
--- /dev/null
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<style>
+
+  .inline-block {
+    display: inline-block;
+  }
+
+  .inner {
+    display: block;
+    width: 22px;
+    height: 13px;
+    overflow: hidden;
+  }
+</style>
+<div class="pause inline-block">
+  <div class="inner">
+    Single
+  </div>
+</div>
+<div class="next inline-block">
+  <div class="inner">
+    Multiple
+  </div>
+</div>
diff --git a/LayoutTests/fast/css/inline-block-tricky-baselines.html b/LayoutTests/fast/css/inline-block-tricky-baselines.html
new file mode 100644 (file)
index 0000000..b451948
--- /dev/null
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<style>
+
+  .inline-block {
+    display: inline-block;
+  }
+
+  .inner {
+    display: block;
+    width: 22px;
+    height: 13px;
+    overflow: hidden;
+  }
+</style>
+<div class="pause inline-block">
+  <div class="inner">
+    Single-line
+  </div>
+</div>
+<div class="next inline-block">
+  <div class="inner">
+    Multiple words that get wrapped
+  </div>
+</div>
index 5c19c7589c688cfdce2a7e35f5b02b4f4735815c..bd470236df3ee9e9790a9aeb668ea6c8fc762e77 100644 (file)
@@ -1,8 +1,8 @@
 layer at (0,0) size 800x600
   RenderView at (0,0) size 800x600
-layer at (0,0) size 800x52
-  RenderBlock {HTML} at (0,0) size 800x52
-    RenderBody {BODY} at (8,8) size 784x36
-      RenderTextControl {INPUT} at (0,0) size 102x2 [bgcolor=#FFFFFF]
+layer at (0,0) size 800x34
+  RenderBlock {HTML} at (0,0) size 800x34
+    RenderBody {BODY} at (8,8) size 784x18
+      RenderTextControl {INPUT} at (0,13) size 102x2 [bgcolor=#FFFFFF]
       RenderText {#text} at (0,0) size 0x0
       RenderText {#text} at (0,0) size 0x0
diff --git a/LayoutTests/fast/text/baseline-inline-block-expected.html b/LayoutTests/fast/text/baseline-inline-block-expected.html
new file mode 100644 (file)
index 0000000..15c82a2
--- /dev/null
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="background: cyan; width: 100%; height: 352px;"></div>
+<div style="background: green; position: absolute; left: 13px; top: 95px; width: 50px; height: 150px; overflow: scroll;"><div style="width: 16px; height: 240px; background: black;"></div></div>
+<div style="background: green; position: absolute; left: 84px; top: 90px; width: 60px; height: 160px;"><div style="background: green; position: absolute; left: 5px; top: 5px; width: 50px; height: 150px; overflow: scroll;"><div style="width: 16px; height: 240px; background: black;"></div></div></div>
+<div style="background: green; position: absolute; left: 165px; top: 13px; width: 50px; height: 150px;"><div style="width: 16px; height: 240px; background: black;"></div></div>
+<div style="background: green; position: absolute; left: 236px; top: 8px; width: 60px; height: 160px;"><div style="background: green; position: absolute; left: 5px; top: 5px; width: 50px; height: 150px;"><div style="width: 16px; height: 240px; background: black;"></div></div></div>
+<div style="background: green; position: absolute; left: 312px; top: 184px; width: 60px; height: 160px;"><div style="background: green; position: absolute; left: 5px; top: 5px; width: 50px; height: 150px; overflow: scroll;"><div style="width: 16px; height: 64px; background: black;"></div></div></div>
+<div style="background: green; position: absolute; left: 388px; top: 184px; width: 60px; height: 160px;"><div style="background: green; position: absolute; left: 5px; top: 5px; width: 50px; height: 150px;"><div style="width: 16px; height: 64px; background: black;"></div></div></div>
+<div style="background: green; position: absolute; left: 469px; top: 189px; width: 50px; height: 150px;"><div style="width: 16px; height: 64px; background: black;"></div></div>
+<div style="background: black; position: absolute; left: 540px; top: 237px; width: 16px; height: 16px;"></div>
+<div style="background: black; position: absolute; left: 8px; top: 344px; width: 16px; height: 16px;"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/text/baseline-inline-block.html b/LayoutTests/fast/text/baseline-inline-block.html
new file mode 100644 (file)
index 0000000..543f6d8
--- /dev/null
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="background: cyan; font-family: Ahem; -webkit-font-smoothing: none;">
+<div style="display: inline-block; background: green; height: 150px; width: 50px; overflow: scroll; margin: 5px;">
+    L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>
+</div>
+<div style="display: inline-block; background: green;">
+    <div style="height: 150px; width: 50px; overflow: scroll; margin: 5px;">
+        L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>
+    </div>
+</div>
+<div style="display: inline-block; background: green; height: 150px; width: 50px; margin: 5px;">
+    L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>
+</div>
+<div style="display: inline-block; background: green;">
+    <div style="height: 150px; width: 50px; margin: 5px;">
+        L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>
+    </div>
+</div>
+<div style="display: inline-block; background: green;">
+    <div style="height: 150px; width: 50px; overflow: scroll; margin: 5px;">
+        L<br>L<br>L<br>L<br>
+    </div>
+</div>
+<div style="display: inline-block; background: green;">
+    <div style="height: 150px; width: 50px; margin: 5px;">
+        L<br>L<br>L<br>L<br>
+    </div>
+</div>
+<div style="display: inline-block; background: green; height: 150px; width: 50px; margin: 5px;">
+    L<br>L<br>L<br>L<br>
+</div>
+L<br>L
+</div>
+</body>
+</html>
index 49db41e5ac3817fd604256ef54caac715bae288f..2353da2d4c7408cd6ae9445f4c7621d50d80195d 100644 (file)
@@ -31,14 +31,14 @@ layer at (0,0) size 800x600
         RenderTextControl {INPUT} at (185,2) size 146x16 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
         RenderText {#text} at (0,0) size 0x0
       RenderBlock {P} at (0,147) size 784x18
-        RenderTextControl {INPUT} at (2,0) size 176x12 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+        RenderTextControl {INPUT} at (2,5) size 176x12 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
           RenderFlexibleBox {DIV} at (3,0) size 170x12
             RenderBlock {DIV} at (0,0) size 17x12
             RenderBlock {DIV} at (17,3) size 140x6
             RenderBlock {DIV} at (156,0) size 14x12
         RenderText {#text} at (179,0) size 5x18
           text run at (179,0) width 5: " "
-        RenderTextControl {INPUT} at (185,0) size 146x12 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+        RenderTextControl {INPUT} at (185,5) size 146x12 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
         RenderText {#text} at (0,0) size 0x0
 layer at (30,76) size 139x13
   RenderBlock {DIV} at (0,0) size 140x13
@@ -56,11 +56,11 @@ layer at (196,124) size 139x13
   RenderBlock {DIV} at (3,1) size 140x13
     RenderText {#text} at (0,0) size 23x13
       text run at (0,0) width 23: "Text"
-layer at (30,158) size 139x6 scrollHeight 13
+layer at (30,163) size 139x6 scrollHeight 13
   RenderBlock {DIV} at (0,0) size 140x6
     RenderText {#text} at (0,0) size 23x13
       text run at (0,0) width 23: "Text"
-layer at (196,158) size 139x6 scrollHeight 13
+layer at (196,163) size 139x6 scrollHeight 13
   RenderBlock {DIV} at (3,3) size 140x6
     RenderText {#text} at (0,0) size 23x13
       text run at (0,0) width 23: "Text"
index b322c1d1ec802ac7e86d1c9a50f2a7a21366457c..9537acc4cf412a6d8e42b907852532313fab545d 100644 (file)
@@ -31,14 +31,14 @@ layer at (0,0) size 800x600
         RenderTextControl {INPUT} at (176,2) size 137x16 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
         RenderText {#text} at (0,0) size 0x0
       RenderBlock {P} at (0,147) size 784x18
-        RenderTextControl {INPUT} at (2,0) size 167x12 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+        RenderTextControl {INPUT} at (2,5) size 167x12 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
           RenderFlexibleBox {DIV} at (3,0) size 161x12
             RenderBlock {DIV} at (0,0) size 17x12
             RenderBlock {DIV} at (17,3) size 131x6
             RenderBlock {DIV} at (147,0) size 14x12
         RenderText {#text} at (170,0) size 5x18
           text run at (170,0) width 5: " "
-        RenderTextControl {INPUT} at (176,0) size 137x12 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+        RenderTextControl {INPUT} at (176,5) size 137x12 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
         RenderText {#text} at (0,0) size 0x0
 layer at (30,76) size 130x13
   RenderBlock {DIV} at (0,0) size 131x13
@@ -56,11 +56,11 @@ layer at (187,124) size 130x13
   RenderBlock {DIV} at (3,1) size 131x13
     RenderText {#text} at (0,0) size 22x13
       text run at (0,0) width 22: "Text"
-layer at (30,158) size 130x6 scrollHeight 13
+layer at (30,163) size 130x6 scrollHeight 13
   RenderBlock {DIV} at (0,0) size 131x6
     RenderText {#text} at (0,0) size 22x13
       text run at (0,0) width 22: "Text"
-layer at (187,158) size 130x6 scrollHeight 13
+layer at (187,163) size 130x6 scrollHeight 13
   RenderBlock {DIV} at (3,3) size 131x6
     RenderText {#text} at (0,0) size 22x13
       text run at (0,0) width 22: "Text"
index 43605fa2e8242ed609e2e9a6b23bcf262fd3a699..e9165b320048b3348071dfbf69bd6c620c0dab33 100644 (file)
@@ -1,3 +1,33 @@
+2015-03-09  Myles C. Maxfield  <mmaxfield@apple.com>
+
+        REGRESSION(r176978): Inline-blocks with overflowing contents have ascents that are too large
+        https://bugs.webkit.org/show_bug.cgi?id=141783
+
+        Reviewed by David Hyatt.
+
+        When we have an inline-block element, and we want to find its baseline (to lay out other
+        elements on the same line) we loop through the element's children and ask them what their
+        baselines are. The children use the location of the top of their last line to compute this
+        value. However, if the child has overflow-y, this might not be the correct calculation.
+
+        This behavior is in the spec: "The baseline of an 'inline-block' is the baseline of its last
+        line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow'
+        property has a computed value other than 'visible', in which case the baseline is the bottom
+        margin edge."
+            -- http://www.w3.org/TR/CSS21/visudet.html#leading
+
+        However, we believe that a better policy is, when overflow is not "visible," to place the
+        baseline at the bottom of the block if the contents overflowed in the Y direction, and to place
+        it at the bottom of the last line if the contents did not overflow in the Y direction. This is
+        partially consistent with previous behavior, and isn't too far from the spec to cause too many
+        breakages.
+
+        Test: fast/css/inline-block-tricky-baselines.html
+              fast/text/baseline-inline-block.html
+
+        * rendering/RenderBlockFlow.cpp:
+        (WebCore::RenderBlockFlow::inlineBlockBaseline):
+
 2015-03-09  Andy Estes  <aestes@apple.com>
 
         [Content Filtering] Add tests
index 27943ed3915b12da6972979d197c9bfd3ae10e00..e53243823016c97dcf6129f0a601415e7ae4e105 100644 (file)
@@ -3023,12 +3023,20 @@ int RenderBlockFlow::inlineBlockBaseline(LineDirectionMode lineDirection) const
              + (lineDirection == HorizontalLine ? borderTop() + paddingTop() : borderRight() + paddingRight());
     }
 
+    // Note that here we only take the left and bottom into consideration. Our caller takes the right and top into consideration.
+    float boxHeight = lineDirection == HorizontalLine ? height() + m_marginBox.bottom() : width() + m_marginBox.left();
+    float lastBaseline;
     if (auto simpleLineLayout = this->simpleLineLayout())
-        return SimpleLineLayout::computeFlowLastLineBaseline(*this, *simpleLineLayout);
-
-    bool isFirstLine = lastRootBox() == firstRootBox();
-    const RenderStyle& style = isFirstLine ? firstLineStyle() : this->style();
-    return lastRootBox()->logicalTop() + style.fontMetrics().ascent(lastRootBox()->baselineType());
+        lastBaseline = SimpleLineLayout::computeFlowLastLineBaseline(*this, *simpleLineLayout);
+    else {
+        bool isFirstLine = lastRootBox() == firstRootBox();
+        const RenderStyle& style = isFirstLine ? firstLineStyle() : this->style();
+        lastBaseline = lastRootBox()->logicalTop() + style.fontMetrics().ascent(lastRootBox()->baselineType());
+    }
+    // According to the CSS spec http://www.w3.org/TR/CSS21/visudet.html, we shouldn't be performing this min, but should
+    // instead be returning boxHeight directly. However, we feel that a min here is better behavior (and is consistent
+    // enough with the spec to not cause tons of breakages).
+    return style().overflowY() == OVISIBLE ? lastBaseline : std::min(boxHeight, lastBaseline);
 }
 
 GapRects RenderBlockFlow::inlineSelectionGaps(RenderBlock& rootBlock, const LayoutPoint& rootBlockPhysicalPosition, const LayoutSize& offsetFromRootBlock,