New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 604144 link

Starred by 2 users
Status: Fixed
Owner:
█ robhogan@chromium.org
Use other robhogan account instead.
Closed: Apr 2016
Cc:
szager@chromium.org
█ robhogan@chromium.org
█ kojih@chromium.org
e...@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux
Pri: 2
Type: Bug



Sign in to add a comment

vertical-align is not intuitively/properly rendering content

Reported by nschub...@eretailing.com, Apr 16 2016 
UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

Example URL:
http://codepen.io/nschubach/pen/QNrdZg?editors=0100

Steps to reproduce the problem:
1. http://codepen.io/nschubach/pen/QNrdZg?editors=0100
2. http://codepen.io/nschubach/pen/oxdBaR?editors=1100
3. Load both in Firefox

What is the expected behavior?
The middle aligned container should line up with the text line then the top/bottom containers should line up to that.

What went wrong?
The current implementation seems to pick random alignment rules.  I can't tell intuitively what is going on with the webkit/chromium implementation.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: 49.0.2623.87  Channel: n/a
OS Version: Debian Testing
Flash Version:

Comment 1 by nschub...@eretailing.com, Apr 16 2016 

With the second example, I'd expect the text to be baseline aligned with the parent (as it does in Gecko).  In fact, I think Gecko nails vertical-alignment across the board.

Comment 2 by nschub...@eretailing.com, Apr 16 2016 

Figuring this was a webkit issue, I went ahead and filed a report here: https://bugs.webkit.org/show_bug.cgi?id=156662

I don't know what the proper protocol for this is...

Comment 3 by dtapu...@chromium.org, Apr 18 2016

Components: -Blink Blink>Layout

Comment 4 by e...@chromium.org, Apr 18 2016

Cc: kojih@chromium.org e...@chromium.org szager@chromium.org robhogan@chromium.org
Status: Available (was: Unconfirmed)

Comment 5 by robhogan@chromium.org, Apr 21 2016

Owner: robhogan@chromium.org
Status: Started (was: Available)
Project Member

Comment 6 by bugdroid1@chromium.org, Apr 26 2016 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/020751ff9d9524fe83cc858edf4d1aea78e305ae

commit 020751ff9d9524fe83cc858edf4d1aea78e305ae
Author: robhogan <robhogan@gmail.com>
Date: Tue Apr 26 02:20:50 2016

Get the right ascent/descent for the tallest vertically aligned container

When we're figuring out the right adjustment to make to the ascent/descent in
a line to fill the full height of the line with vertical align top/bottom we
shouldn't carry forward the results of previous speculative adjustments from
one box on the line to the next.

Also ascent/descent are round()'ed so do the same to the lineHeight we're fitting
to.

BUG= 604144 

Review URL: https://codereview.chromium.org/1910053003

Cr-Commit-Position: refs/heads/master@{#389668}

[modify] https://crrev.com/020751ff9d9524fe83cc858edf4d1aea78e305ae/third_party/WebKit/LayoutTests/TestExpectations
[add] https://crrev.com/020751ff9d9524fe83cc858edf4d1aea78e305ae/third_party/WebKit/LayoutTests/fast/inline-block/vertical-align-top-and-bottom-2-expected.txt
[add] https://crrev.com/020751ff9d9524fe83cc858edf4d1aea78e305ae/third_party/WebKit/LayoutTests/fast/inline-block/vertical-align-top-and-bottom-2.html
[add] https://crrev.com/020751ff9d9524fe83cc858edf4d1aea78e305ae/third_party/WebKit/LayoutTests/fast/inline-block/vertical-align-top-and-bottom-expected.txt
[add] https://crrev.com/020751ff9d9524fe83cc858edf4d1aea78e305ae/third_party/WebKit/LayoutTests/fast/inline-block/vertical-align-top-and-bottom.html
[modify] https://crrev.com/020751ff9d9524fe83cc858edf4d1aea78e305ae/third_party/WebKit/LayoutTests/platform/linux/svg/transforms/svg-css-transforms-clip-path-expected.png
[modify] https://crrev.com/020751ff9d9524fe83cc858edf4d1aea78e305ae/third_party/WebKit/LayoutTests/platform/linux/svg/transforms/svg-css-transforms-clip-path-expected.txt
[modify] https://crrev.com/020751ff9d9524fe83cc858edf4d1aea78e305ae/third_party/WebKit/LayoutTests/platform/linux/svg/transforms/svg-css-transforms-expected.png
[modify] https://crrev.com/020751ff9d9524fe83cc858edf4d1aea78e305ae/third_party/WebKit/LayoutTests/platform/linux/svg/transforms/svg-css-transforms-expected.txt
[modify] https://crrev.com/020751ff9d9524fe83cc858edf4d1aea78e305ae/third_party/WebKit/LayoutTests/platform/linux/transforms/svg-vs-css-expected.png
[modify] https://crrev.com/020751ff9d9524fe83cc858edf4d1aea78e305ae/third_party/WebKit/LayoutTests/platform/linux/transforms/svg-vs-css-expected.txt
[modify] https://crrev.com/020751ff9d9524fe83cc858edf4d1aea78e305ae/third_party/WebKit/Source/core/layout/line/InlineFlowBox.cpp

Comment 7 by e...@chromium.org, Apr 26 2016

Status: Fixed (was: Started)
Project Member

Comment 8 by bugdroid1@chromium.org, Jun 1 2016 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/50e642f1865e4d09195bcee228f56478ea3e8364

commit 50e642f1865e4d09195bcee228f56478ea3e8364
Author: wangxianzhu <wangxianzhu@chromium.org>
Date: Wed Jun 01 20:06:43 2016

Rebaseline forced ManualNeedsRebaselines during auto-rebaseline problem

BUG= 604144 , 396825 , 607185 , 587094 , 155836 , 602933 
TBR=wkorman@chromium.org

Review-Url: https://codereview.chromium.org/2025243002
Cr-Commit-Position: refs/heads/master@{#397217}

[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/TestExpectations
[rename] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/css3/masking/clip-path-polygon-evenodd-expected.png
[rename] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/css3/masking/clip-path-polygon-expected.png
[rename] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/css3/masking/clip-path-polygon-nonzero-expected.png
[rename] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/fast/backgrounds/transformed-body-html-background-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/fast/repaint/outline-change-invalidation-expected.txt
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/fast/repaint/outline-clip-change-expected.txt
[rename] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/android/css3/masking/clip-path-polygon-evenodd-expected.png
[rename] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/android/css3/masking/clip-path-polygon-expected.png
[rename] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/android/css3/masking/clip-path-polygon-nonzero-expected.png
[rename] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/android/fast/backgrounds/transformed-body-background-expected.png
[rename] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/android/fast/backgrounds/transformed-body-html-background-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/android/fast/text/complex-text-opacity-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/android/transforms/2d/hindi-rotated-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/linux-precise/fast/text/complex-text-opacity-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/linux-precise/transforms/2d/hindi-rotated-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/linux/fast/repaint/outline-change-invalidation-expected.txt
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/linux/fast/repaint/outline-clip-change-expected.txt
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/linux/fast/text/complex-text-opacity-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/linux/svg/hixie/perf/005-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/linux/transforms/2d/hindi-rotated-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.10/fast/text/complex-text-opacity-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.10/fast/text/ellipsis-ltr-text-in-ltr-flow-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.10/fast/text/ellipsis-ltr-text-in-rtl-flow-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.10/fast/text/ellipsis-rtl-text-in-ltr-flow-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.10/fast/text/ellipsis-rtl-text-in-rtl-flow-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.10/fast/text/fallback-traits-fixup-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.10/transforms/2d/hindi-rotated-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.9/fast/text/complex-text-opacity-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.9/fast/text/complex-text-opacity-expected.txt
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.9/fast/text/ellipsis-ltr-text-in-ltr-flow-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.9/fast/text/ellipsis-ltr-text-in-rtl-flow-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.9/fast/text/ellipsis-rtl-text-in-ltr-flow-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.9/fast/text/ellipsis-rtl-text-in-rtl-flow-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.9/fast/text/fallback-traits-fixup-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.9/fast/text/font-features/caps-native-synthesis-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.9/transforms/2d/hindi-rotated-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac-mac10.9/transforms/2d/hindi-rotated-expected.txt
[delete] https://crrev.com/c6de0f49ae06fd3a2f2459e7161f26c4673c10d0/third_party/WebKit/LayoutTests/platform/mac/css3/masking/clip-path-polygon-evenodd-expected.png
[delete] https://crrev.com/c6de0f49ae06fd3a2f2459e7161f26c4673c10d0/third_party/WebKit/LayoutTests/platform/mac/css3/masking/clip-path-polygon-expected.png
[delete] https://crrev.com/c6de0f49ae06fd3a2f2459e7161f26c4673c10d0/third_party/WebKit/LayoutTests/platform/mac/css3/masking/clip-path-polygon-nonzero-expected.png
[delete] https://crrev.com/c6de0f49ae06fd3a2f2459e7161f26c4673c10d0/third_party/WebKit/LayoutTests/platform/mac/fast/backgrounds/transformed-body-background-expected.png
[delete] https://crrev.com/c6de0f49ae06fd3a2f2459e7161f26c4673c10d0/third_party/WebKit/LayoutTests/platform/mac/fast/backgrounds/transformed-body-html-background-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/fast/css/text-overflow-ellipsis-bidi-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/fast/css/text-overflow-ellipsis-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/fast/css/text-overflow-ellipsis-strict-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/fast/text/complex-text-opacity-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/fast/text/complex-text-opacity-expected.txt
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/fast/text/ellipsis-ltr-text-in-ltr-flow-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/fast/text/ellipsis-ltr-text-in-ltr-flow-expected.txt
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/fast/text/ellipsis-ltr-text-in-rtl-flow-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/fast/text/ellipsis-ltr-text-in-rtl-flow-expected.txt
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/fast/text/ellipsis-rtl-text-in-ltr-flow-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/fast/text/ellipsis-rtl-text-in-ltr-flow-expected.txt
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/fast/text/ellipsis-rtl-text-in-rtl-flow-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/fast/text/ellipsis-rtl-text-in-rtl-flow-expected.txt
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/fast/text/fallback-traits-fixup-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/svg/hixie/perf/005-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/svg/transforms/svg-css-transforms-clip-path-expected.txt
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/svg/transforms/svg-css-transforms-expected.txt
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/transforms/2d/hindi-rotated-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/transforms/2d/hindi-rotated-expected.txt
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/mac/transforms/svg-vs-css-expected.txt
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/fast/css/text-overflow-ellipsis-bidi-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/fast/css/text-overflow-ellipsis-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/fast/css/text-overflow-ellipsis-strict-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/fast/text/complex-text-opacity-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/fast/text/complex-text-opacity-expected.txt
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/fast/text/ellipsis-ltr-text-in-ltr-flow-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/fast/text/ellipsis-ltr-text-in-ltr-flow-expected.txt
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/fast/text/ellipsis-ltr-text-in-rtl-flow-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/fast/text/ellipsis-ltr-text-in-rtl-flow-expected.txt
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/fast/text/ellipsis-rtl-text-in-ltr-flow-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/fast/text/ellipsis-rtl-text-in-ltr-flow-expected.txt
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/fast/text/ellipsis-rtl-text-in-rtl-flow-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/fast/text/ellipsis-rtl-text-in-rtl-flow-expected.txt
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/svg/transforms/svg-css-transforms-clip-path-expected.txt
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/svg/transforms/svg-css-transforms-expected.txt
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/transforms/2d/hindi-rotated-expected.png
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/transforms/2d/hindi-rotated-expected.txt
[modify] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win/transforms/svg-vs-css-expected.txt
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win7/fast/text/complex-text-opacity-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win7/fast/text/complex-text-opacity-expected.txt
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win7/transforms/2d/hindi-rotated-expected.png
[add] https://crrev.com/50e642f1865e4d09195bcee228f56478ea3e8364/third_party/WebKit/LayoutTests/platform/win7/transforms/2d/hindi-rotated-expected.txt
►

Sign in to add a comment