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

Issue 720377 link

Starred by 3 users
Status: Fixed
Owner:
█ robhogan@chromium.org
Use other robhogan account instead.
Closed: Jun 2017
Cc:
ligim...@chromium.org
style-bugs@google.com
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 1
Type: Bug-Regression


Show other hotlists

Hotlists containing this issue:
Stylimations-OKR-2017-Q2


Sign in to add a comment

white-space: nowrap / text-overflow: ellipsis / overflow: hidden interacts strangely with child elements

Reported by rootwi...@gmail.com, May 10 2017 
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36

Steps to reproduce the problem:
1. Create parent with text-overflow: ellipsis, white-space: nowrap, and overflow: hidden
2. Create two children element, the first of which is floated and the size of the parent container
3. Text in second element appears as ellipsis

See this code pen with reduced test case: https://codepen.io/mrwweb/pen/BRYzeG?editors=1100#0

What is the expected behavior?
I'm honestly not sure. This layout is a horrible idea but is currently used in WordPress. This does "work" in Firefox.

What went wrong?
visual box containing text appears at width of text, but ellipsis appears i place of text

Did this work before? Yes 57.0.2987.133 (best guess)

Does this work in other browsers? Yes

Chrome version: 58.0.3029.96  Channel: n/a
OS Version: 10.0
Flash Version: 

relevant WordPress ticket: https://core.trac.wordpress.org/ticket/40579

Comment 1 by ligim...@chromium.org, May 10 2017

Cc: ligim...@chromium.org
Labels: Needs-Triage-M58 Needs-Bisect

Comment 2 by kavvaru@chromium.org, May 11 2017

Labels: -Pri-2 -Needs-Bisect has-bisect-per-revision M-58 OS-Linux OS-Mac Pri-1
Owner: robhogan@chromium.org
Status: Assigned (was: Unconfirmed)
Able to reproduce the issue on windows 7, Ubuntu 14.04 and Mac 10.12.4 using chrome version 58.0.3029.96  and canary 60.0.3096.0.This is regression issue broken in M58.Please find the bisect information as below
Narrow Bisect::
Good :: 58.0.3026.0  ---  (build revision 453454)
Bad:: 58.0.3027.0  ---   (build revision 453800)

Change Log::
https://chromium.googlesource.com/chromium/src/+log/31690fb03a1ca682147c4e1f81a7d8479c88a233..eab82c830edc973964782a440d878ed077e6a5be

Possible suspect::
https://chromium.googlesource.com/chromium/src/+/eab82c830edc973964782a440d878ed077e6a5be

robhogan@ Could you please look into this issue if it is related to your change,else please help us in finding the appropriate owner for this issue.

Thanks,

Comment 3 by ericwilligers@chromium.org, May 12 2017

Labels: Update-Fortnightly

Comment 4 by suzyh@chromium.org, May 16 2017

Labels: Regressed-58

Comment 5 by yio...@gmail.com, May 17 2017 

h1 {vertical-align: top} can temporarily fix this problem.
Project Member

Comment 7 by bugdroid1@chromium.org, May 19 2017 

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

commit 8a73c444189475c28fcb01c0d6dad6e8ec370986
Author: robhogan <robhogan@gmail.com>
Date: Fri May 19 01:07:22 2017

Display ellipsis correctly in inline blocks adjacent to floats

If we're ellipsing text in atomic inlines then its the left/right bounds of the
container that we need to test against - not the width available on the line, which
may be reduced by the presence of floats that the atomic inlines in fact ignores.
This fix is covered by passing the correct values to TryPlacingEllipsisOnAtomicInlines().

The rest of the changes are to address a a separate, but related, issue in the third
testcase in LayoutTests/fast/text/place-ellipsis-in-inline-block-adjacent-float-2.html
where we are adjusting the ellipsis too soon to make a correct comparison against
the container edge. That adjustment tells us where the ellipsis is in the line
(as opposed to where it is relative to the container's left edge) so we should defer
it until we're figuring out the offset in the text we want to place the ellipsis on.

This change also reveals an edge case where we currently struggle to decide
correctly which side of a glyph to place the ellipsis on. This shows up in the
rebaselined results and will be worked under 722043 - where we will need to figure
out if the 'partial glyph' technique can be refined to give better results for
cases where the direction of the text and the direction of the flow are different
and/or there are runs of text with different directions.

BUG= 720377 

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

[add] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/fast/text/place-ellipsis-in-inline-block-adjacent-float-2.html
[add] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/fast/text/place-ellipsis-in-inline-block-adjacent-float.html
[add] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/linux/fast/text/place-ellipsis-in-inline-block-adjacent-float-2-expected.png
[add] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/linux/fast/text/place-ellipsis-in-inline-block-adjacent-float-expected.png
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/linux/fast/text/place-mixed-ellipsis-in-inline-blocks-align-center-expected.png
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/linux/fast/text/place-mixed-ellipsis-in-inline-blocks-align-justify-expected.png
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/linux/fast/text/place-mixed-ellipsis-in-inline-blocks-align-left-expected.png
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/linux/fast/text/place-mixed-ellipsis-in-inline-blocks-align-right-expected.png
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/linux/fast/text/place-mixed-ellipsis-in-inline-blocks-expected.png
[add] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/mac-mac10.10/fast/text/place-ellipsis-in-inline-block-adjacent-float-2-expected.png
[add] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/mac-mac10.10/fast/text/place-ellipsis-in-inline-block-adjacent-float-expected.png
[add] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/mac-mac10.9/fast/text/place-ellipsis-in-inline-block-adjacent-float-2-expected.png
[add] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/mac-mac10.9/fast/text/place-ellipsis-in-inline-block-adjacent-float-expected.png
[add] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/mac/fast/text/place-ellipsis-in-inline-block-adjacent-float-2-expected.png
[add] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/mac/fast/text/place-ellipsis-in-inline-block-adjacent-float-expected.png
[add] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/win/fast/text/place-ellipsis-in-inline-block-adjacent-float-2-expected.png
[add] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/win/fast/text/place-ellipsis-in-inline-block-adjacent-float-expected.png
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/win/fast/text/place-rtl-ellipsis-in-inline-blocks-align-center-expected.png
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/win/fast/text/place-rtl-ellipsis-in-inline-blocks-align-justify-expected.png
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/win/fast/text/place-rtl-ellipsis-in-inline-blocks-align-left-expected.png
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/win/fast/text/place-rtl-ellipsis-in-inline-blocks-align-right-expected.png
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/win/fast/text/place-rtl-ellipsis-in-inline-blocks-expected.png
[add] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/win7/fast/text/place-ellipsis-in-inline-block-adjacent-float-2-expected.png
[add] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/win7/fast/text/place-ellipsis-in-inline-block-adjacent-float-expected.png
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/win7/fast/text/place-rtl-ellipsis-in-inline-blocks-align-center-expected.png
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/win7/fast/text/place-rtl-ellipsis-in-inline-blocks-align-justify-expected.png
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/win7/fast/text/place-rtl-ellipsis-in-inline-blocks-align-left-expected.png
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/win7/fast/text/place-rtl-ellipsis-in-inline-blocks-align-right-expected.png
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/LayoutTests/platform/win7/fast/text/place-rtl-ellipsis-in-inline-blocks-expected.png
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/Source/core/layout/LayoutBlockFlowLine.cpp
[modify] https://crrev.com/8a73c444189475c28fcb01c0d6dad6e8ec370986/third_party/WebKit/Source/core/layout/line/InlineTextBox.cpp

Comment 8 by robhogan@chromium.org, Jun 15 2017

Status: Fixed (was: Assigned)
►

Sign in to add a comment