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

Issue 714675 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
NOT IN USE
Closed: Jun 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 3
Type: Bug



Sign in to add a comment

Outline shape is incorrect with CSS3 columns and outline-style: auto

Reported by da...@coffeymachine.com, Apr 24 2017

Issue description

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

Steps to reproduce the problem:
1. Create a container that is focusable using tabindex="0"
2. Apply CSS3 columns to that container so it's elements appear in columns.
3. Use the tab key to focus on the container.
4. Alternatively, apply outline-style:auto; to the container.

What is the expected behavior?
The outline should be a simple rectangle shape.

What went wrong?
The outline shape is a more complex polygon. Almost as if it is outlining the container plus the container's children rendered as a single column overflowing the container.

Did this work before? No 

Does this work in other browsers? Yes

Chrome version: 57.0.2987.133  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 25.0 r0
 
css-columns-outline-bug.html
1.1 KB View Download
css-columns-outline-bug.png
36.4 KB View Download
Labels: Needs-Triage-M58
Cc: kavvaru@chromium.org
Labels: Needs-Feedback
Unable to reproduce the issue on windows 7,10 using chrome version 58.0.3029.81.Not observed any outline for the attached html file.
Please find the attached screen shot for the same.

Request you once try the issue by upgrading chrome to latest stable and update the thread if the issue still persists.

Thanks,
714675.png
56.9 KB View Download
This is still reproducible in chrome version 58.0.3029.81.

Be sure to follow steps 3 or 4 under "Steps to reproduce the problem:".

I have attached an modified html file that does not require you to focus on the div. This will make it easier to see the issue.
css-columns-outline-bug-nofocus.html
1.1 KB View Download
Project Member

Comment 4 by sheriffbot@chromium.org, Apr 25 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "kavvaru@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Components: -Blink>CSS Blink>Layout
Labels: -Needs-Triage-M58 M-60 OS-Linux OS-Mac
Status: Untriaged (was: Unconfirmed)
Thanks for the update.
Able to reproduce the issue on windows 7, Ubuntu 14.04 and Mac 10.12.4 using chrome version 58.0.3029.81 and canary 60.0.3080.0.
This is non regression issue as the issue seen from M30 old builds.
Marking it as Untriaged to get more inputs from dev team.

Thanks,

Labels: Needs-triage-Mobile

Comment 8 by e...@chromium.org, May 1 2017

Cc: msten...@opera.com
Components: -Blink>Layout Blink>Layout>MultiCol
Labels: -Pri-2 Pri-3
Status: Available (was: Untriaged)

Comment 9 by msten...@opera.com, May 4 2017

Owner: msten...@opera.com
Status: Assigned (was: Available)

Comment 10 by ajha@chromium.org, May 18 2017

Labels: -Needs-triage-Mobile
Project Member

Comment 11 by bugdroid1@chromium.org, Jun 14 2017

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

commit 10b7639ad904a2969a39781bb782118020e1fe9d
Author: Morten Stenshorne <mstensho@opera.com>
Date: Wed Jun 14 16:11:12 2017

Made focus hightlight region calculation (outline-style:auto) multicol-aware.

Went for a very simplistic solution, at least for now. Just use the bounding
box of everything inside the multicol container.

BUG= 714675 

Change-Id: Ie5ca0f747edc4ac3b384ecb784443592edee7379
Reviewed-on: https://chromium-review.googlesource.com/534473
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#479406}
[add] https://crrev.com/10b7639ad904a2969a39781bb782118020e1fe9d/third_party/WebKit/LayoutTests/fast/multicol/focus-outline-expected.html
[add] https://crrev.com/10b7639ad904a2969a39781bb782118020e1fe9d/third_party/WebKit/LayoutTests/fast/multicol/focus-outline.html
[modify] https://crrev.com/10b7639ad904a2969a39781bb782118020e1fe9d/third_party/WebKit/Source/core/layout/LayoutFlowThread.cpp
[modify] https://crrev.com/10b7639ad904a2969a39781bb782118020e1fe9d/third_party/WebKit/Source/core/layout/LayoutFlowThread.h

Comment 12 by msten...@opera.com, Jun 14 2017

Status: Fixed (was: Assigned)
Summary: Outline shape is incorrect with CSS3 columns and outline-style: auto (was: Ouline shape is incorrect with CSS3 columns and outline-style: auto)

Sign in to add a comment