New issue
Advanced search Search tips

Issue 906663 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Nov 20
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Percentage text-indent affects min/max intrinsic size

Reported by kobe.mik...@gmail.com, Nov 19

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36

Example URL:

Steps to reproduce the problem:
1. have a column that has a flex-basis and has flex-grow:0;
2. have a text inside this box (for naming sections for blind people)
3. use text-indent:100%; and overflow:hidden; on this text to hide this for regular users

What is the expected behavior?
The box with flex-basis should stay the same width as specified.

What went wrong?
The box becomes larger than specified by the flex-basis, because it tries to render the indented text

Does it occur on multiple sites: N/A

Is it a problem with a plugin? N/A 

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 70.0.3538.102  Channel: stable
OS Version: 10.0
Flash Version: 

When enabling/re-enabling the text-indent property the box becomes larger everytime you re-enable it

I recommend using a transition on everything to show how the text and width behaves when you disable/re-enable the text-indent in the inspector.
 
Bisected to r356667 = 8b2c57bf0ac6c22f5a4d593d326f5f239b7d5808 = https://crrev.com/1421423005 by cbiesinger@chromium.org
"[css-flexbox] Fix min-size: auto for a non-auto flex basis"
Landed in 48.0.2549.0

Simplified repro attached.
Expected: two colored rectangles have the same width and "GOOD" is shown
Observed: two colored rectangles have different widths and "BAD" is shown
test.html
860 bytes View Download
Labels: Needs-Triage-M70
Components: Blink>Layout>Flexbox
Labels: -Type-Compat Triaged-ET Target-72 M-72 FoundIn-71 FoundIn-70 FoundIn-72 OS-Linux OS-Mac Type-Bug
Status: Untriaged (was: Unconfirmed)
Able to reproduce the issue on Mac 10.13.6, Win-10 and Ubuntu 17.10 using chrome reported version #70.0.3538.102 and latest canary #72.0.3614.0.
This is a non-regression issue as it is observed from M60 old builds. 
Hence, marking it as untriaged to get more inputs from dev team.

Thanks...!!
Components: -Blink>Layout>Flexbox Blink>Layout
Owner: mstensho@chromium.org
Status: Assigned (was: Untriaged)
Summary: Percentage text-indent affects min/max intrinsic size (was: flexbox and text-indent)
Thank you for the reduced test case, woxxom!
I reduced it further, and got rid of the flexbox parts. This seems to be a more generic intrinsic size calculation issue, and how percentages are not ignored for text-indent.

LayoutNG doesn't fail test.html, but seems to be having issues on its own nevertheless. Attaching a test case. Fails in both LayoutNG and with the legacy layout engine.
tc.html
325 bytes View Download
Project Member

Comment 7 by bugdroid1@chromium.org, Nov 20

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

commit 2fa7d005593711746afda291d6eb4252ce423cb6
Author: Morten Stenshorne <mstensho@chromium.org>
Date: Tue Nov 20 17:16:21 2018

Resolve text-indent percentages to 0 for intrinsic sizing.

Percentages must be ignored when calculating min/max intrinsic /
preferred inline sizes, since the inline size is by definition unknown
at that point.

This fixes the problem both in the legacy engine and in LayoutNG.

Bug:  906663 
Change-Id: Ib29a66ee3d6146e72e6f9ec3283293af48e633a0
Reviewed-on: https://chromium-review.googlesource.com/c/1344090
Reviewed-by: Koji Ishii <kojii@chromium.org>
Reviewed-by: Christian Biesinger <cbiesinger@chromium.org>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#609734}
[add] https://crrev.com/2fa7d005593711746afda291d6eb4252ce423cb6/third_party/WebKit/LayoutTests/external/wpt/css/css-text/text-indent/percentage-value-intrinsic-size.html
[modify] https://crrev.com/2fa7d005593711746afda291d6eb4252ce423cb6/third_party/blink/renderer/core/layout/layout_block_flow_line.cc
[modify] https://crrev.com/2fa7d005593711746afda291d6eb4252ce423cb6/third_party/blink/renderer/core/layout/ng/inline/ng_inline_item_result.cc
[modify] https://crrev.com/2fa7d005593711746afda291d6eb4252ce423cb6/third_party/blink/renderer/core/layout/ng/inline/ng_inline_item_result.h
[modify] https://crrev.com/2fa7d005593711746afda291d6eb4252ce423cb6/third_party/blink/renderer/core/layout/ng/inline/ng_line_breaker.cc

Status: Fixed (was: Assigned)

Sign in to add a comment