text-overflow: ellipsis should take effect after relative positioning, but does not
Reported by
friv...@gmail.com,
Jun 29 2017
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:54.0) Gecko/20100101 Firefox/54.0 Steps to reproduce the problem: 1. Make sure the AHEM test font is installed 2. Open the attached test file What is the expected behavior? You should see a green box What went wrong? There's a red square in the green box. Did this work before? No Does this work in other browsers? Yes Chrome version: 61 Channel: canary OS Version: OS X 10.11 Flash Version: Based on https://drafts.csswg.org/css-ui-3/#text-overflow, > Ellipsing occurs after relative positioning and other graphical transformations. Webkit does not respect this requirement, and that causes the attached test case to fail. The red square that can be seen when the test fails is part of the background, but is supposed to be covered by a green ellipsis character, which in the AHEM font looks like a square, making the red part invisible. However, Chrome applies position:relative after ellipsis, instead of before as required by the spec, so there's not green square to cover the red one. This works in Firefox.
,
Jun 29 2017
Triaging as layout issue.
,
Jun 29 2017
Tested on Chrome Stable #59.0.3071.115, Canary #61.0.3144.0 on Mac 10.12.5 and able to reproduce the issue. Please refer the screenshot for reference. This is a non-regression issue and able to reproduce from M-30 #30.0.1549.0.Marking it as untriaged so that issue gets addressed. Observations: 1. Able to reproduce this issue on Windows 10 and Ubuntu 16.04, whereas only 40% of the page is seen in the Print Preview. 2. Similar behavior is noticed on Safari. However in FireFox it seems to be good. Thanks.
,
Jun 30 2017
,
Jul 5 2017
Oh, silly me I don't have Ahem installed. :/
,
Jul 13 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/74bd1c084916b057eb7936bf9871721eb0e61fa3 commit 74bd1c084916b057eb7936bf9871721eb0e61fa3 Author: Robert Hogan <robhogan@gmail.com> Date: Thu Jul 13 22:50:25 2017 Place ellipsis correctly when inline has relative offset When an inline has relative position we need to apply that to the ellipsis as well. We also need to be able to detect cases where relative position moves the inline so that it requires ellipsis in the first place. This means that we need to look at the layout overflow rather than the linebox edge when deciding if ellipsis is required - this is because the dimensions of the root inline box won't tell us if relative positioning makes it exceed the horizontal bounds. When flexbox applies line clamp it depends on the ellipsis logic to apply an ellipsis even when there's adequate space for the line box. We now make it force that rather than apply it in all cases, because where we're looking at a normal ellipsis we want to ensure we account for relative positioning on the line boxes before deciding to apply an ellipsis on a line box that would otherwise already fit on the line. The final complication to deal with here is cases where relative positioning changes a line box from having an overflow (e.g. text overflowing the left hand side of the box in an rtl flow) to not having an overflow. InlineFlowBox::ComputeOverflow needs to notice when this is happening, so we change it so that the dimensions of the root inline box are not used to initialize its layout overflow because shifting the box subsequently for relative positioning doesn't subtract the overflow they initially create. Bug: 737837 Change-Id: I66c848299a93b2b796f2f831d9237f41aa50e962 Reviewed-on: https://chromium-review.googlesource.com/563625 Reviewed-by: Emil A Eklund <eae@chromium.org> Commit-Queue: Emil A Eklund <eae@chromium.org> Cr-Commit-Position: refs/heads/master@{#486504} [add] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/LayoutTests/fast/text/ellipsis-in-relative-inline-right.html [add] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/LayoutTests/fast/text/ellipsis-in-relative-inline.html [add] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/LayoutTests/platform/linux/fast/text/ellipsis-in-relative-inline-expected.png [add] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/LayoutTests/platform/linux/fast/text/ellipsis-in-relative-inline-right-expected.png [add] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/LayoutTests/platform/mac-mac10.10/fast/text/ellipsis-in-relative-inline-expected.png [add] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/LayoutTests/platform/mac-mac10.10/fast/text/ellipsis-in-relative-inline-right-expected.png [add] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/LayoutTests/platform/mac-mac10.9/fast/text/ellipsis-in-relative-inline-expected.png [add] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/LayoutTests/platform/mac-mac10.9/fast/text/ellipsis-in-relative-inline-right-expected.png [add] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/LayoutTests/platform/mac/fast/text/ellipsis-in-relative-inline-expected.png [add] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/LayoutTests/platform/mac/fast/text/ellipsis-in-relative-inline-right-expected.png [add] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/LayoutTests/platform/win/fast/text/ellipsis-in-relative-inline-expected.png [add] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/LayoutTests/platform/win/fast/text/ellipsis-in-relative-inline-right-expected.png [add] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/LayoutTests/platform/win7/fast/text/ellipsis-in-relative-inline-expected.png [add] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/LayoutTests/platform/win7/fast/text/ellipsis-in-relative-inline-right-expected.png [modify] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/Source/core/layout/LayoutBlockFlowLine.cpp [modify] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/Source/core/layout/LayoutDeprecatedFlexibleBox.cpp [modify] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/Source/core/layout/line/InlineFlowBox.cpp [modify] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/Source/core/layout/line/InlineFlowBox.h [modify] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/Source/core/layout/line/RootInlineBox.cpp [modify] https://crrev.com/74bd1c084916b057eb7936bf9871721eb0e61fa3/third_party/WebKit/Source/core/layout/line/RootInlineBox.h
,
Jul 14 2017
,
Jul 14 2017
Issue 404213 has been merged into this issue. |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by nyerramilli@chromium.org
, Jun 29 2017