New issue
Advanced search Search tips

Issue 651510 link

Starred by 2 users

Issue metadata

Status: Verified
Owner:
Closed: Oct 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows , Chrome
Pri: 2
Type: Bug



Sign in to add a comment

Focus rings are scaled incorrectly when zoom for dsf is enabled

Project Member Reported by malaykeshav@chromium.org, Sep 29 2016

Issue description

Version: 54.0.2799.0
OS: Chrome, Win (Soon Linux as well when Zoom for DSF is enabled by default)

What steps will reproduce the problem?
(1)Open any website with a div element that has border.
(2)Focus on the div
(3)

What is the expected output?
The div block should get a focus ring of the correct size.

What do you see instead?
The focus ring size decrease with increase in dsf while increases with decrease in dsf.



 
Screenshot from 2016-09-29 10:48:44.png
48.7 KB View Download

Comment 1 by bsep@chromium.org, Sep 29 2016

I tested this on Windows and the two look very similar at 1.5x dsf (see attached screenshots). The only difference I can see is that in the use-zoom-for-dsf case the border is a little bit lighter, not sure why. But it's the same size.

Maybe this is just affecting Linux much more dramatically.
border-div-dsfzoomdisabled.PNG
1.6 KB View Download
border-div-dsfzoomenabled.PNG
1.7 KB View Download

Comment 2 by bsep@chromium.org, Sep 29 2016

Labels: -Pri-3 Pri-2
Wait never mind, I increased my dsf to 3x and it's much more noticeable. This is probably an accessibility issue, we should fix it soon.

Comment 3 by bsep@chromium.org, Sep 29 2016

Cc: malaykeshav@chromium.org
Owner: bsep@chromium.org
Project Member

Comment 4 by bugdroid1@chromium.org, Oct 11 2016

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

commit 87ad798087aebf914351caab62a8cf072fe9d388
Author: bsep <bsep@chromium.org>
Date: Tue Oct 11 23:35:46 2016

Scale focus outline thickness with zoom level.

Focus rings were only being scaled by the dsf, which after the launch of
use-zoom-for-dsf meant that they weren't being scaled at all. It seems
like we should keep the ring in proportion with the rest of the page, so
I changed it to scale with the total zoom level. In order to keep the
ring from vanishing when zoomed out, I floored its thickness at 1px.

Focus rings draw the same at 1x device scale. A subtle effect of this
patch is that elements will have their focus rings scaled by the css
zoom property.

BUG= 651510 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2

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

[modify] https://crrev.com/87ad798087aebf914351caab62a8cf072fe9d388/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/87ad798087aebf914351caab62a8cf072fe9d388/third_party/WebKit/Source/core/paint/ImagePainter.cpp
[modify] https://crrev.com/87ad798087aebf914351caab62a8cf072fe9d388/third_party/WebKit/Source/core/paint/ObjectPainter.cpp
[modify] https://crrev.com/87ad798087aebf914351caab62a8cf072fe9d388/third_party/WebKit/Source/core/style/ComputedStyle.cpp
[modify] https://crrev.com/87ad798087aebf914351caab62a8cf072fe9d388/third_party/WebKit/Source/core/style/ComputedStyle.h
[modify] https://crrev.com/87ad798087aebf914351caab62a8cf072fe9d388/third_party/WebKit/Source/platform/graphics/GraphicsContext.cpp
[modify] https://crrev.com/87ad798087aebf914351caab62a8cf072fe9d388/third_party/WebKit/Source/platform/graphics/GraphicsContext.h
[modify] https://crrev.com/87ad798087aebf914351caab62a8cf072fe9d388/third_party/WebKit/Source/platform/graphics/skia/SkiaUtils.cpp
[modify] https://crrev.com/87ad798087aebf914351caab62a8cf072fe9d388/third_party/WebKit/Source/platform/graphics/skia/SkiaUtils.h

Comment 5 by bsep@chromium.org, Oct 11 2016

Status: Fixed (was: Assigned)
Project Member

Comment 6 by bugdroid1@chromium.org, Oct 12 2016

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

commit 77097e70751d4ecfb59e321fe4da63401060833a
Author: Rebaseline Bot <blink-rebaseline-bot@chromium.org>
Date: Wed Oct 12 01:52:26 2016

Auto-rebaseline for r424596

https://chromium.googlesource.com/chromium/src/+/87ad79808

BUG= 651510 
TBR=bsep@chromium.org

Review URL: https://codereview.chromium.org/2405343003 .

Cr-Commit-Position: refs/heads/master@{#424644}

[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/TestExpectations
[add] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/android/fast/forms/checkbox/checkbox-appearance-basic-expected.png
[add] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/android/fast/forms/radio/radio-appearance-basic-expected.png
[add] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/android/fast/forms/textarea/textarea-placeholder-paint-order-expected.png
[delete] https://crrev.com/edf893fee347ad915af17f4abbf19e19e3131898/third_party/WebKit/LayoutTests/platform/android/fast/hidpi/focus-rings-expected.png
[add] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/android/fast/images/imagemap-focus-ring-zoom-expected.png
[add] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux-precise/fast/forms/color/color-suggestion-picker-appearance-zoom200-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/editing/spelling/grammar-markers-hidpi-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/fast/forms/calendar-picker/calendar-picker-appearance-zoom125-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/fast/forms/calendar-picker/calendar-picker-appearance-zoom200-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/fast/forms/checkbox/checkbox-appearance-basic-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/fast/forms/color/color-suggestion-picker-appearance-zoom125-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/fast/forms/color/color-suggestion-picker-appearance-zoom200-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/fast/forms/radio/radio-appearance-basic-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/fast/forms/select-popup/popup-menu-appearance-zoom-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/fast/forms/suggestion-picker/date-suggestion-picker-appearance-zoom125-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/fast/forms/suggestion-picker/date-suggestion-picker-appearance-zoom200-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/fast/forms/text/input-placeholder-paint-order-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/fast/forms/textarea/textarea-placeholder-paint-order-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/fast/images/imagemap-focus-ring-zoom-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/virtual/gpu-rasterization/fast/images/imagemap-focus-ring-zoom-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/virtual/scalefactor150/fast/hidpi/static/calendar-picker-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/virtual/scalefactor150/fast/hidpi/static/data-suggestion-picker-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/virtual/scalefactor150/fast/hidpi/static/popup-menu-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/virtual/scalefactor200/fast/hidpi/static/calendar-picker-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/virtual/scalefactor200/fast/hidpi/static/data-suggestion-picker-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/virtual/scalefactor200/fast/hidpi/static/popup-menu-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/virtual/scalefactor200withzoom/fast/hidpi/static/calendar-picker-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/virtual/scalefactor200withzoom/fast/hidpi/static/data-suggestion-picker-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/linux/virtual/scalefactor200withzoom/fast/hidpi/static/popup-menu-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/editing/spelling/grammar-markers-hidpi-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/fast/forms/calendar-picker/calendar-picker-appearance-zoom125-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/fast/forms/calendar-picker/calendar-picker-appearance-zoom200-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/fast/forms/checkbox/checkbox-appearance-basic-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/fast/forms/color/color-suggestion-picker-appearance-zoom125-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/fast/forms/color/color-suggestion-picker-appearance-zoom200-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/fast/forms/radio/radio-appearance-basic-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/fast/forms/select-popup/popup-menu-appearance-zoom-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/fast/forms/suggestion-picker/date-suggestion-picker-appearance-zoom125-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/fast/forms/suggestion-picker/date-suggestion-picker-appearance-zoom200-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/fast/forms/text/input-placeholder-paint-order-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/fast/forms/textarea/textarea-placeholder-paint-order-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/fast/hidpi/focus-rings-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/fast/images/imagemap-focus-ring-zoom-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/virtual/gpu-rasterization/fast/images/imagemap-focus-ring-zoom-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/virtual/scalefactor150/fast/hidpi/static/calendar-picker-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/virtual/scalefactor150/fast/hidpi/static/data-suggestion-picker-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/virtual/scalefactor150/fast/hidpi/static/popup-menu-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/virtual/scalefactor200/fast/hidpi/static/calendar-picker-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/virtual/scalefactor200/fast/hidpi/static/data-suggestion-picker-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/virtual/scalefactor200/fast/hidpi/static/popup-menu-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/virtual/scalefactor200withzoom/fast/hidpi/static/calendar-picker-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/virtual/scalefactor200withzoom/fast/hidpi/static/data-suggestion-picker-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win/virtual/scalefactor200withzoom/fast/hidpi/static/popup-menu-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win7/fast/forms/calendar-picker/calendar-picker-appearance-zoom125-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win7/fast/forms/calendar-picker/calendar-picker-appearance-zoom200-expected.png
[add] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win7/fast/forms/color/color-suggestion-picker-appearance-zoom200-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win7/virtual/scalefactor150/fast/hidpi/static/calendar-picker-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win7/virtual/scalefactor200/fast/hidpi/static/calendar-picker-appearance-expected.png
[modify] https://crrev.com/77097e70751d4ecfb59e321fe4da63401060833a/third_party/WebKit/LayoutTests/platform/win7/virtual/scalefactor200withzoom/fast/hidpi/static/calendar-picker-appearance-expected.png

malaykeshav@ Could you please provide repro steps to verify this bug? I am not clear with the steps in comment #0.
Status: Verified (was: Fixed)

Sign in to add a comment