Project: chromium Issues People Development process History Sign in
New issue
Advanced search Search tips
Issue 720377 white-space: nowrap / text-overflow: ellipsis / overflow: hidden interacts strangely with child elements
Starred by 3 users Reported by rootwi...@gmail.com, May 10 Back to list
Status: Fixed
Owner:
Closed: Jun 15
Cc:
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
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
 
Cc: ligim...@chromium.org
Labels: Needs-Triage-M58 Needs-Bisect
Labels: -Pri-2 -Needs-Bisect has-bisect-per-revision M-58 OS-Linux OS-Mac Pri-1
Owner: robhogan@chromium.org
Status: Assigned
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,
Labels: Update-Fortnightly
Labels: Regressed-58
h1 {vertical-align: top} can temporarily fix this problem.
Project Member Comment 7 by bugdroid1@chromium.org, May 19
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

Status: Fixed
Sign in to add a comment