Changeset 271284 in webkit


Ignore:
Timestamp:
Jan 7, 2021 8:38:05 PM (19 months ago)
Author:
Alan Bujtas
Message:

paypal.com: text at the bottom of the page is not aligned properly
​https://bugs.webkit.org/show_bug.cgi?id=220444
<rdar://problem/60356338>

Reviewed by Simon Fraser.

Source/WebCore:

This patch addresses the case when we try to align text content inside an inline level box with display type of inline-block.

While ideally only the inline level boxes would participate in the vertical alignment process, in legacy line layout we align the text content as well.
The verticalAlignApplies() function filters out the cases when the text content should default to baseline. It was checking against "inline" to
ensure
"<div style="vertical-align: top">foobar</div>" works and it missed the following case "<div style="display: inline-block; vertical-align:top">foobar</div>" <- inline level box but "foobar" should be baseline aligned.

Tests: fast/inline/incorrect-vertical-alignment-inside-inline-block.html

  • rendering/InlineFlowBox.cpp:

(WebCore::verticalAlignApplies):

LayoutTests:

  • fast/css/vertical-align-block-elements-expected.html:
  • fast/css/vertical-align-block-elements.html:
  • fast/inline/incorrect-vertical-alignment-inside-inline-block-expected.html: Added.
  • fast/inline/incorrect-vertical-alignment-inside-inline-block.html: Added.
Location:
trunk
Files:
2 added
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r271259 r271284  
     12021-01-07  Zalan Bujtas  <zalan@apple.com>
     2
     3        paypal.com: text at the bottom of the page is not aligned properly
     4        https://bugs.webkit.org/show_bug.cgi?id=220444
     5        <rdar://problem/60356338>
     6
     7        Reviewed by Simon Fraser.
     8
     9        * fast/css/vertical-align-block-elements-expected.html:
     10        * fast/css/vertical-align-block-elements.html:
     11        * fast/inline/incorrect-vertical-alignment-inside-inline-block-expected.html: Added.
     12        * fast/inline/incorrect-vertical-alignment-inside-inline-block.html: Added.
     13
    1142021-01-07  Ryan Haddad  <ryanhaddad@apple.com>
    215

  • trunk/LayoutTests/fast/css/vertical-align-block-elements-expected.html

    r149929 r271284  
    1414</head>
    1515<body>
    16     <p>Bug: webkit.org/b/111974 - vertical-align only applies to inline-level elements and table-cells. The text below should be aligned horiontally.
     16    <p>Bug: webkit.org/b/111974 - vertical-align only applies to inline-level elements and table-cells. The text below should be aligned horizontally.
    1717    <div>
    1818        <button>All </button> This <span>text</span> is <a href="#">aligned</a>.

  • trunk/LayoutTests/fast/css/vertical-align-block-elements.html

    r149929 r271284  
    1616</head>
    1717<body>
    18     <p>Bug: webkit.org/b/111974 - vertical-align only applies to inline-level elements and table-cells. The text below should be aligned horiontally.
     18    <p>Bug: webkit.org/b/111974 - vertical-align only applies to inline-level elements and table-cells. The text below should be aligned horizontally.
    1919    <div>
    2020        <button>All </button> This <span>text</span> is <a href="#">aligned</a>.

  • trunk/Source/WebCore/ChangeLog

    r271270 r271284  
     12021-01-07  Zalan Bujtas  <zalan@apple.com>
     2
     3        paypal.com: text at the bottom of the page is not aligned properly
     4        https://bugs.webkit.org/show_bug.cgi?id=220444
     5        <rdar://problem/60356338>
     6
     7        Reviewed by Simon Fraser.
     8
     9        This patch addresses the case when we try to align text content inside an inline level box with display type of inline-block.
     10
     11        While ideally only the inline level boxes would participate in the vertical alignment process, in legacy line layout we align the text content as well.
     12        The verticalAlignApplies() function filters out the cases when the text content should default to baseline. It was checking against "inline" to
     13        ensure
     14        "<div style="vertical-align: top">foobar</div>" works and it missed the following case "<div style="display: inline-block; vertical-align:top">foobar</div>" <- inline level box but "foobar" should be baseline aligned.
     15
     16        Tests: fast/inline/incorrect-vertical-alignment-inside-inline-block.html
     17
     18        * rendering/InlineFlowBox.cpp:
     19        (WebCore::verticalAlignApplies):
     20
    1212021-01-07  Eric Carlson  <eric.carlson@apple.com>
    222

  • trunk/Source/WebCore/rendering/InlineFlowBox.cpp

    r271110 r271284  
    490490static bool verticalAlignApplies(const RenderObject& renderer)
    491491{
    492     // http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align - vertical-align
    493     // only applies to inline level and table-cell elements
    494     return !renderer.isText() || renderer.parent()->isInline() || renderer.parent()->isTableCell();
     492    // http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align - vertical-align only applies to inline level and table-cell elements.
     493    // FIXME: Ideally we would only align inline level boxes which means that text inside an inline box would just sit on the box itself.
     494    if (!renderer.isText())
     495        return true;
     496    auto& parentRenderer = *renderer.parent();
     497    return (parentRenderer.isInline() && parentRenderer.style().display() != DisplayType::InlineBlock) || parentRenderer.isTableCell();
    495498}
    496499
Note: See TracChangeset for help on using the changeset viewer.