Skip to content

Commit

Permalink
Merge r176978 - Inline elements whose parents have small line-height …
Browse files Browse the repository at this point in the history 
…are laid out too low

https://bugs.webkit.org/show_bug.cgi?id=139375

Reviewed by Dave Hyatt.

Source/WebCore:

This is a port of the Blink patch at
https://src.chromium.org/viewvc/blink?revision=155253&view=revision.

When laying out inline elements, we try to align leaf children's parents'
baselines across the entire line. However, if you set line-height: 0px on a
span, the entire InlineBox which represents that span will have a height of
0, and therefore be laid out entirely on the baseline. In addition, we will
try to vertically center the leaf text in the span's InlineBox, which means
the leaf text will be vertically centered on the baseline. All the other
major browsers do not have this behavior; instead, they line up the boxes
as you would expect.

This bug led to a rendering problem on the front page of the New York Times.

Here is the ChangeLog from the Blink patch:

Fix baseline position when it is outside the element's box

Specifically, we shouldn't force the baseline to be inside the element. IE
and FF don't do this, and it's incompatible with the CSS 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

It doesn't have a special case for "baseline is outside of the element's
margin box".

Test: fast/text/small-line-height.html

* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::baselinePosition):

LayoutTests:

Add fast/text/small-line-height.html for a simple example. In addition, update
existing tests.

* fast/forms/textfield-overflow-by-value-update-expected.txt:
* fast/regions/cssom/client-rects-inline-complex.html:
* fast/regions/overflow/overflow-region-inline-expected.html:
* fast/text/small-line-height-expected.html: Added.
* fast/text/small-line-height.html: Added.
* platform/mac/fast/box-sizing/box-sizing-expected.png:
* platform/mac/fast/box-sizing/box-sizing-expected.txt:
* platform/mac/fast/forms/search-vertical-alignment-expected.png:
* platform/mac/fast/forms/search-vertical-alignment-expected.txt:
* platform/mac/fast/forms/textfield-overflow-by-value-update-expected.png: Removed.
* platform/mac/fast/multicol/client-rects-expected.png:
* platform/mac/fast/multicol/client-rects-expected.txt:
* platform/mac/fast/multicol/client-rects-spanners-complex-expected.png:
* platform/mac/fast/multicol/client-rects-spanners-complex-expected.txt:
* platform/mac/fast/multicol/client-rects-spanners-expected.png:
* platform/mac/fast/multicol/client-rects-spanners-expected.txt:
* platform/mac/fast/multicol/layers-split-across-columns-expected.png:
* platform/mac/fast/multicol/layers-split-across-columns-expected.txt:
* platform/mac/fast/multicol/newmulticol/client-rects-expected.png:
* platform/mac/fast/multicol/newmulticol/client-rects-expected.txt:

Canonical link: https://commits.webkit.org/154760.266@webkitgtk/2.6
git-svn-id: https://svn.webkit.org/repository/webkit/releases/WebKitGTK/webkit-2.6@178335 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
@litherum @carlosgcampos
litherum authored and carlosgcampos committed Jan 13, 2015
1 parent ee513bf commit ef84d8c
Show file tree
Hide file tree
Showing 24 changed files with 788 additions and 689 deletions.
31 changes: 31 additions & 0 deletions LayoutTests/ChangeLog
View file
@@ -1,3 +1,34 @@
2014-12-08 Myles C. Maxfield <mmaxfield@apple.com>

Inline elements whose parents have small line-height are laid out too low
https://bugs.webkit.org/show_bug.cgi?id=139375

Reviewed by Dave Hyatt.

Add fast/text/small-line-height.html for a simple example. In addition, update
existing tests.

* fast/forms/textfield-overflow-by-value-update-expected.txt:
* fast/regions/cssom/client-rects-inline-complex.html:
* fast/regions/overflow/overflow-region-inline-expected.html:
* fast/text/small-line-height-expected.html: Added.
* fast/text/small-line-height.html: Added.
* platform/mac/fast/box-sizing/box-sizing-expected.png:
* platform/mac/fast/box-sizing/box-sizing-expected.txt:
* platform/mac/fast/forms/search-vertical-alignment-expected.png:
* platform/mac/fast/forms/search-vertical-alignment-expected.txt:
* platform/mac/fast/forms/textfield-overflow-by-value-update-expected.png: Removed.
* platform/mac/fast/multicol/client-rects-expected.png:
* platform/mac/fast/multicol/client-rects-expected.txt:
* platform/mac/fast/multicol/client-rects-spanners-complex-expected.png:
* platform/mac/fast/multicol/client-rects-spanners-complex-expected.txt:
* platform/mac/fast/multicol/client-rects-spanners-expected.png:
* platform/mac/fast/multicol/client-rects-spanners-expected.txt:
* platform/mac/fast/multicol/layers-split-across-columns-expected.png:
* platform/mac/fast/multicol/layers-split-across-columns-expected.txt:
* platform/mac/fast/multicol/newmulticol/client-rects-expected.png:
* platform/mac/fast/multicol/newmulticol/client-rects-expected.txt:

2014-12-08 Mark Lam <mark.lam@apple.com>

CFA wrongly assumes that a speculation for SlowPutArrayStorageShape disallows ArrayStorageShape arrays.
Expand Down
2 changes: 1 addition & 1 deletion LayoutTests/fast/box-sizing/box-sizing.html
View file
Expand Up @@ -12,7 +12,7 @@
</style>
</head>
<body>
All of the boxes below should be 20x20 and look identical.
All of the boxes below should be 20x20 and look identical, except for the rightmost box in the Inline Blocks section, which should look the same but be raised above the other three in that section.

<h1>Normal Blocks</h1>

Expand Down
8 changes: 4 additions & 4 deletions LayoutTests/fast/forms/textfield-overflow-by-value-update-expected.txt
View file
@@ -1,8 +1,8 @@
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x34
RenderBlock {HTML} at (0,0) size 800x34
RenderBody {BODY} at (8,8) size 784x18
RenderTextControl {INPUT} at (0,12) size 102x2 [bgcolor=#FFFFFF]
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]
RenderText {#text} at (0,0) size 0x0
RenderText {#text} at (0,0) size 0x0
2 changes: 1 addition & 1 deletion LayoutTests/fast/regions/cssom/client-rects-inline-complex.html
View file
Expand Up @@ -71,7 +71,7 @@
if (window.testRunner)
testRunner.dumpAsText();

var contentClientRects = [[11, 11, 221, 211, 200, 210], [31, 221, 51, 471, 250, 20]];
var contentClientRects = [[11, 11, 221, 211, 200, 210], [31, 221, 91, 471, 250, 60]];
var inlineBlockClientRects = [[51, 91, 143, 183, 92, 92]];
var insideInlineBlockClientRects = [[57, 97, 485, 177, 80, 428]];
var imageClientRects = [[68, 108, 470, 410, 302, 402]];
Expand Down
5 changes: 3 additions & 2 deletions LayoutTests/fast/regions/overflow/overflow-region-inline-expected.html
View file
Expand Up @@ -35,6 +35,7 @@
top: 160px;
padding: 10px;
width: 700px;
height: 135px;
}
.keyword {
color: red;
Expand All @@ -51,14 +52,14 @@
</ul>
<div id="regionContainer">
<span class="opacity">
<b>y<i>x <div id="region"></i></b>
<b style="position: relative; left: 0px; top: -101px;">y<i>x </i></b><div id="region">
<div id="content">
<div>This region has<br/><span class="keyword">display: inline-block</span> and is sitting inside an <span class="keyword">i</span>, inside a <span class="keyword">b</span> with 0.5 opacity and inside a <span class="keyword">span</span>,</div>
<br/><br/>
<div class="overflow">causing it to be part of a complex tree of line elements.</div>
<div class="overflow">Overflow2_1_Overflow2_1_Overflow2_1</div>
</div>
</div> <b><i>x</i>y</b>
</div> <b style="position: relative; left: 0px; top: -101px;"><i>x</i>y</b>
</span>
<div id="regionInSpan">
<div id="content2">
Expand Down
8 changes: 8 additions & 0 deletions LayoutTests/fast/text/small-line-height-expected.html
View file
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
WordAnother word
</body>
</html>
8 changes: 8 additions & 0 deletions LayoutTests/fast/text/small-line-height.html
View file
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span style="display: inline-block; line-height: 0px;">Word</span>Another word
</body>
</html>
Binary file added ...sts/platform/mac-mountainlion/fast/forms/search-vertical-alignment-expected.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions LayoutTests/platform/mac-mountainlion/fast/forms/search-vertical-alignment-expected.txt
View file
Expand Up @@ -31,14 +31,14 @@ layer at (0,0) size 800x600
RenderTextControl {INPUT} at (163,2) size 123x16 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
RenderText {#text} at (0,0) size 0x0
RenderBlock {P} at (0,147) size 784x18
RenderTextControl {INPUT} at (2,2) size 153x12 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
RenderTextControl {INPUT} at (2,0) size 153x12 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
RenderFlexibleBox {DIV} at (3,0) size 147x12
RenderBlock {DIV} at (0,0) size 17x12
RenderBlock {DIV} at (17,3) size 117x6
RenderBlock {DIV} at (134,0) size 13x12
RenderText {#text} at (157,0) size 4x18
text run at (157,0) width 4: " "
RenderTextControl {INPUT} at (163,2) size 123x12 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
RenderTextControl {INPUT} at (163,0) size 123x12 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
RenderText {#text} at (0,0) size 0x0
layer at (30,76) size 117x13
RenderBlock {DIV} at (0,0) size 117x13
Expand All @@ -56,11 +56,11 @@ layer at (174,124) size 117x13
RenderBlock {DIV} at (3,1) size 117x13
RenderText {#text} at (0,0) size 24x13
text run at (0,0) width 24: "Text"
layer at (30,160) size 117x6 scrollHeight 13
layer at (30,158) size 117x6 scrollHeight 13
RenderBlock {DIV} at (0,0) size 117x6
RenderText {#text} at (0,0) size 24x13
text run at (0,0) width 24: "Text"
layer at (174,160) size 117x6 scrollHeight 13
layer at (174,158) size 117x6 scrollHeight 13
RenderBlock {DIV} at (3,3) size 117x6
RenderText {#text} at (0,0) size 24x13
text run at (0,0) width 24: "Text"
Binary file modified LayoutTests/platform/mac/fast/box-sizing/box-sizing-expected.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
105 changes: 53 additions & 52 deletions LayoutTests/platform/mac/fast/box-sizing/box-sizing-expected.txt
View file
@@ -1,90 +1,91 @@
layer at (0,0) size 785x909
layer at (0,0) size 785x953
RenderView at (0,0) size 785x600
layer at (0,0) size 785x909
RenderBlock {HTML} at (0,0) size 785x910
RenderBody {BODY} at (8,8) size 769x894
RenderBlock (anonymous) at (0,0) size 769x18
RenderText {#text} at (0,0) size 373x18
text run at (0,0) width 373: "All of the boxes below should be 20x20 and look identical."
RenderBlock {H1} at (0,39) size 769x38
layer at (0,0) size 785x953
RenderBlock {HTML} at (0,0) size 785x954
RenderBody {BODY} at (8,8) size 769x938
RenderBlock (anonymous) at (0,0) size 769x36
RenderText {#text} at (0,0) size 733x36
text run at (0,0) width 733: "All of the boxes below should be 20x20 and look identical, except for the rightmost box in the Inline Blocks section,"
text run at (0,18) width 491: "which should look the same but be raised above the other three in that section."
RenderBlock {H1} at (0,57) size 769x38
RenderText {#text} at (0,0) size 203x37
text run at (0,0) width 203: "Normal Blocks"
RenderBlock {DIV} at (5,97) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock {DIV} at (5,127) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock {DIV} at (5,157) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock {DIV} at (5,187) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock {DIV} at (5,115) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock {DIV} at (5,145) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock {DIV} at (5,175) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock {DIV} at (5,205) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBR {BR} at (6,6) size 0x18
RenderBR {BR} at (6,24) size 0x18
RenderBR {BR} at (6,42) size 0x18
RenderBlock {H1} at (0,229) size 769x38
RenderBlock {H1} at (0,247) size 769x38
RenderText {#text} at (0,0) size 178x37
text run at (0,0) width 178: "Inline Blocks"
RenderBlock (anonymous) at (0,287) size 769x41
RenderBlock {DIV} at (5,10) size 20x20 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock {DIV} at (35,10) size 20x20 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock {DIV} at (65,10) size 20x20 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock (anonymous) at (0,305) size 769x67
RenderBlock {DIV} at (5,36) size 20x20 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock {DIV} at (35,36) size 20x20 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock {DIV} at (65,36) size 20x20 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock {DIV} at (95,10) size 20x20 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBR {BR} at (6,6) size 0x18
RenderBR {BR} at (6,24) size 0x18
RenderBR {BR} at (6,42) size 0x18
RenderText {#text} at (0,0) size 0x0
RenderBlock {H1} at (0,349) size 769x38
RenderBlock {H1} at (0,393) size 769x38
RenderText {#text} at (0,0) size 241x37
text run at (0,0) width 241: "Positioned Blocks"
RenderBlock (anonymous) at (0,407) size 769x19
RenderBlock (anonymous) at (0,451) size 769x19
RenderBR {BR} at (0,0) size 0x18
RenderBlock {H1} at (0,447) size 769x38
RenderBlock {H1} at (0,491) size 769x38
RenderText {#text} at (0,0) size 210x37
text run at (0,0) width 210: "Floating blocks"
RenderBlock (floating) {DIV} at (5,515) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock (floating) {DIV} at (35,515) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock (floating) {DIV} at (65,515) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock (floating) {DIV} at (95,515) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock (floating) {DIV} at (5,559) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock (floating) {DIV} at (35,559) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock (floating) {DIV} at (65,559) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock (floating) {DIV} at (95,559) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBR {BR} at (6,6) size 0x18
RenderBR {BR} at (6,24) size 0x18
RenderBR {BR} at (6,42) size 0x18
RenderBlock (anonymous) at (0,505) size 769x41
RenderBlock (anonymous) at (0,549) size 769x41
RenderBR {BR} at (120,0) size 0x18
RenderBlock {H1} at (0,566) size 769x38
RenderBlock {H1} at (0,610) size 769x38
RenderText {#text} at (0,0) size 210x37
text run at (0,0) width 210: "Normal Images"
RenderBlock (anonymous) at (0,625) size 769x41
RenderBlock (anonymous) at (0,669) size 769x41
RenderImage {IMG} at (5,10) size 20x20 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderImage {IMG} at (35,10) size 20x20 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderImage {IMG} at (65,10) size 20x20 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderImage {IMG} at (95,10) size 20x20 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderText {#text} at (0,0) size 0x0
RenderBlock {H1} at (0,686) size 769x38
RenderBlock {H1} at (0,730) size 769x38
RenderText {#text} at (0,0) size 248x37
text run at (0,0) width 248: "Positioned Images"
RenderBlock (anonymous) at (0,745) size 769x19
RenderBlock (anonymous) at (0,789) size 769x19
RenderBR {BR} at (0,0) size 0x18
RenderBlock {H1} at (0,784) size 769x38
RenderBlock {H1} at (0,828) size 769x38
RenderText {#text} at (0,0) size 220x37
text run at (0,0) width 220: "Floating Images"
RenderImage {IMG} at (5,853) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderImage {IMG} at (35,853) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderImage {IMG} at (65,853) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderImage {IMG} at (95,853) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock (anonymous) at (0,843) size 769x41
RenderImage {IMG} at (5,897) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderImage {IMG} at (35,897) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderImage {IMG} at (65,897) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderImage {IMG} at (95,897) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock (anonymous) at (0,887) size 769x41
RenderBR {BR} at (120,0) size 0x18
RenderBlock {HR} at (0,891) size 769x3 [border: (1px inset #000000)]
layer at (13,426) size 20x20
RenderBlock (positioned) {DIV} at (13,425) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
layer at (43,426) size 20x20
RenderBlock (positioned) {DIV} at (43,425) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
layer at (73,426) size 20x20
RenderBlock (positioned) {DIV} at (73,425) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
layer at (103,426) size 20x20
RenderBlock (positioned) {DIV} at (103,425) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBlock {HR} at (0,935) size 769x3 [border: (1px inset #000000)]
layer at (13,470) size 20x20
RenderBlock (positioned) {DIV} at (13,469) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
layer at (43,470) size 20x20
RenderBlock (positioned) {DIV} at (43,469) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
layer at (73,470) size 20x20
RenderBlock (positioned) {DIV} at (73,469) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
layer at (103,470) size 20x20
RenderBlock (positioned) {DIV} at (103,469) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
RenderBR {BR} at (6,6) size 0x18
RenderBR {BR} at (6,24) size 0x18
RenderBR {BR} at (6,42) size 0x18
layer at (13,763) size 20x20
RenderImage {IMG} at (13,763) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
layer at (43,763) size 20x20
RenderImage {IMG} at (43,763) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
layer at (73,763) size 20x20
RenderImage {IMG} at (73,763) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
layer at (103,763) size 20x20
RenderImage {IMG} at (103,763) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
layer at (13,807) size 20x20
RenderImage {IMG} at (13,807) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
layer at (43,807) size 20x20
RenderImage {IMG} at (43,807) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
layer at (73,807) size 20x20
RenderImage {IMG} at (73,807) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
layer at (103,807) size 20x20
RenderImage {IMG} at (103,807) size 20x21 [color=#FFFFFF] [bgcolor=#FFA500] [border: (2px solid #000000)]
Binary file removed ...utTests/platform/mac/fast/forms/textfield-overflow-by-value-update-expected.png
View file
Binary file not shown.
Binary file modified LayoutTests/platform/mac/fast/multicol/client-rects-expected.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ef84d8c

Please sign in to comment.