Use outline-offset for default focus ring.

Prior to this CL, the outline-offset was *ignored when drawing the
default focus ring (see AdjustedFocusRingOffset):
- for FormControlsRefresh, GetDefaultOffsetForFocusRing was used instead
- on Windows the value was completely ignored
- on Mac the value was used

This CL updated the behavior so that the default focus ring respects the
value of outline-offset.
Because of this, GetDefaultOffsetForFocusRing is not needed anymore
since now we can directly update the outline-offset to correctly
reflect what we are painting.
Another difference in behavior is that the offset is not going to be
zoom independent anymore.

This fix is just for FormControlsRefresh (the feature is enabled
on all platforms except Android) to minimize regression risks.

The fix is validated by: focus-ring-outline-offset.html

Bug: 945181
Change-Id: I2cff82556571d9f541b95f8cece9b7c3be1191c1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2138156
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#756951}

third_party/blink/renderer/core/html/resources/controls_refresh.css

@@ -16,6 +16,19 @@ textarea {
   border-color: -internal-light-dark-color(#767676, #C3C3C3);
 }
 
+a:-webkit-any-link:focus {
+  outline-offset: 1px;
+}
+
+input:focus, textarea:focus, select:focus {
+  outline-offset: 0;
+}
+
+input[type="checkbox" i]:focus,
+input[type="radio" i]:focus {
+  outline-offset: 2px;
+}
+
 input,
 input[type="email" i],
 input[type="number" i],

third_party/blink/renderer/core/paint/object_painter_base.cc

@@ -550,8 +550,7 @@ void ObjectPainterBase::PaintOutlineRects(
     float border_radius = GetFocusRingBorderRadius(style);
     paint_info.context.DrawFocusRing(
         pixel_snapped_outline_rects, style.GetOutlineStrokeWidthForFocusRing(),
-        style.OutlineOffset(), style.GetDefaultOffsetForFocusRing(),
-        border_radius, min_border_width, color);
+        style.OutlineOffset(), border_radius, min_border_width, color);
     return;
   }
 

third_party/blink/renderer/core/style/computed_style.cc

@@ -2234,8 +2234,7 @@ int ComputedStyle::OutlineOutsetExtent() const {
     return 0;
   if (OutlineStyleIsAuto()) {
     return GraphicsContext::FocusRingOutsetExtent(
-        OutlineOffset(), GetDefaultOffsetForFocusRing(),
-        std::ceil(GetOutlineStrokeWidthForFocusRing()));
+        OutlineOffset(), std::ceil(GetOutlineStrokeWidthForFocusRing()));
   }
   return base::ClampAdd(OutlineWidth(), OutlineOffset()).Max(0);
 }
@@ -2254,20 +2253,6 @@ float ComputedStyle::GetOutlineStrokeWidthForFocusRing() const {
 #endif
 }
 
-int ComputedStyle::GetDefaultOffsetForFocusRing() const {
-  if (!::features::IsFormControlsRefreshEnabled())
-    return 0;
-
-  if (EffectiveAppearance() == kCheckboxPart ||
-      EffectiveAppearance() == kRadioPart) {
-    return 2;
-  } else if (IsLink()) {
-    return 1;
-  }
-
-  return 0;
-}
-
 bool ComputedStyle::ColumnRuleEquivalent(
     const ComputedStyle& other_style) const {
   return ColumnRuleStyle() == other_style.ColumnRuleStyle() &&

third_party/blink/renderer/core/style/computed_style.h

@@ -2006,7 +2006,6 @@ class ComputedStyle : public ComputedStyleBase,
   }
   CORE_EXPORT int OutlineOutsetExtent() const;
   CORE_EXPORT float GetOutlineStrokeWidthForFocusRing() const;
-  CORE_EXPORT int GetDefaultOffsetForFocusRing() const;
   bool HasOutlineWithCurrentColor() const {
     return HasOutline() && OutlineColor().IsCurrentColor();
   }

third_party/blink/renderer/core/style/computed_style_test.cc

@@ -105,8 +105,6 @@ TEST(ComputedStyleTest, FocusRingOutset) {
   style->SetEffectiveZoom(4.75);
   if (::features::IsFormControlsRefreshEnabled()) {
     EXPECT_EQ(4, style->OutlineOutsetExtent());
-    style->SetEffectiveAppearance(kRadioPart);
-    EXPECT_EQ(6, style->OutlineOutsetExtent());
   } else {
 #if defined(OS_MACOSX)
     EXPECT_EQ(4, style->OutlineOutsetExtent());

third_party/blink/renderer/platform/graphics/graphics_context.cc

@@ -322,11 +322,10 @@ void GraphicsContext::CompositeRecord(sk_sp<PaintRecord> record,
 
 namespace {
 
-int AdjustedFocusRingOffset(int offset, int default_offset, int width) {
+int AdjustedFocusRingOffset(int offset, int width) {
   if (::features::IsFormControlsRefreshEnabled()) {
-    // For FormControlsRefresh the focus ring has a default offset that
-    // depends on the element type.
-    return default_offset;
+    // For FormControlsRefresh just use the value of outline-offset.
+    return offset;
   }
 
 #if defined(OS_MACOSX)
@@ -339,19 +338,16 @@ int AdjustedFocusRingOffset(int offset, int default_offset, int width) {
 }  // namespace
 
 int GraphicsContext::FocusRingOutsetExtent(int offset,
-                                           int default_offset,
                                            int width) {
   // Unlike normal outlines (whole width is outside of the offset), focus
   // rings can be drawn with the center of the path aligned with the offset, so
   // only half of the width is outside of the offset.
   if (::features::IsFormControlsRefreshEnabled()) {
     // For FormControlsRefresh 2/3 of the width is outside of the offset.
-    return AdjustedFocusRingOffset(offset, default_offset, width) +
-           std::ceil(width / 3.f) * 2;
+    return AdjustedFocusRingOffset(offset, width) + std::ceil(width / 3.f) * 2;
   }
 
-  return AdjustedFocusRingOffset(offset, /*default_offset=*/0, width) +
-         (width + 1) / 2;
+  return AdjustedFocusRingOffset(offset, width) + (width + 1) / 2;
 }
 
 void GraphicsContext::DrawFocusRingPath(const SkPath& path,
@@ -400,8 +396,7 @@ void GraphicsContext::DrawFocusRingInternal(const Vector<IntRect>& rects,
   if (!::features::IsFormControlsRefreshEnabled()) {
     // For FormControlsRefresh the offset is already adjusted by
     // GraphicsContext::DrawFocusRing.
-    offset =
-        AdjustedFocusRingOffset(offset, /*default_offset=*/0, std::ceil(width));
+    offset = AdjustedFocusRingOffset(offset, std::ceil(width));
   }
   for (unsigned i = 0; i < rect_count; i++) {
     SkIRect r = rects[i];
@@ -427,7 +422,6 @@ void GraphicsContext::DrawFocusRingInternal(const Vector<IntRect>& rects,
 void GraphicsContext::DrawFocusRing(const Vector<IntRect>& rects,
                                     float width,
                                     int offset,
-                                    int default_offset,
                                     float border_radius,
                                     float min_border_width,
                                     const Color& color) {
@@ -436,7 +430,7 @@ void GraphicsContext::DrawFocusRing(const Vector<IntRect>& rects,
     const float first_border_width = (width / 3) * 2;
     const float second_border_width = width - first_border_width;
 
-    offset = AdjustedFocusRingOffset(offset, default_offset, std::ceil(width));
+    offset = AdjustedFocusRingOffset(offset, std::ceil(width));
     // How much space the focus ring would like to take from the actual border.
     const float inside_border_width = 1;
     if (min_border_width >= inside_border_width) {

third_party/blink/renderer/platform/graphics/graphics_context.h

@@ -362,7 +362,6 @@ class PLATFORM_EXPORT GraphicsContext {
   void DrawFocusRing(const Vector<IntRect>&,
                      float width,
                      int offset,
-                     int default_offset,
                      float border_radius,
                      float min_border_width,
                      const Color&);
@@ -421,7 +420,7 @@ class PLATFORM_EXPORT GraphicsContext {
                                           FloatPoint& p2,
                                           float stroke_width);
 
-  static int FocusRingOutsetExtent(int offset, int default_offset, int width);
+  static int FocusRingOutsetExtent(int offset, int width);
 
   void SetInDrawingRecorder(bool);
   bool InDrawingRecorder() const { return in_drawing_recorder_; }

third_party/blink/web_tests/FlagExpectations/composite-after-paint

@@ -129,3 +129,7 @@ crbug.com/1041322 virtual/threaded/synthetic_gestures/synthetic-pinch-zoom-gestu
 
 compositing/gestures/gesture-tapHighlight-composited-img.html [ Pass Failure ]
 http/tests/images/image-decode-in-frame.html [ Pass Failure ]
+
+# TODO(iopopesc) these need to be rebaselined for FormControlsRefresh focus ring.
+crbug.com/1035582 virtual/scalefactor200withzoom/fast/hidpi/static/validation-bubble-appearance-hidpi.html [ Failure ]
+crbug.com/1035582 compositing/overflow/do-not-paint-outline-into-composited-scrolling-contents.html [ Failure ]

third_party/blink/web_tests/TestExpectations

@@ -2144,6 +2144,7 @@ crbug.com/953591 [ Win ] virtual/form-controls-refresh-disabled/fast/forms/datal
 crbug.com/591099 [ Mac ] virtual/form-controls-refresh-disabled/fast/forms/text/text-lineheight-centering.html [ Failure ]
 crbug.com/770971 [ Win7 ] virtual/form-controls-refresh-disabled/fast/forms/suggested-value.html [ Pass Failure ]
 crbug.com/1035582 virtual/form-controls-refresh-disabled/fast/forms/number/number-input-event-composed.html [ Pass Failure ]
+crbug.com/1035582 [ Mac ] virtual/form-controls-refresh-disabled/fast/forms/text/input-readonly-focus-ring.html [ Skip ]
 
 # From never fix tests:
 crbug.com/123456 [ Mac ] virtual/form-controls-refresh-disabled/fast/forms/select-popup/* [ Skip ]

third_party/blink/web_tests/fast/forms/text/input-readonly-focus-ring-expected.html

- <input id="target" readonly style="outline-offset: -2px; outline: -webkit-focus-ring-color auto 5px;">
+ <input id="target" readonly style="outline-offset: 0px; outline: -webkit-focus-ring-color auto 5px;">

third_party/blink/web_tests/virtual/controls-refresh/focus-rect/focus-ring-outline-offset.html

+<!DOCTYPE html>
+<script src="../../../resources/run-after-layout-and-paint.js"></script>
+<script src="../../../fast/forms/resources/common.js"></script>
+<body style="background-color: red">
+<!-- no style for reference -->
+<input type="button" id="focusTarget" value="button" />
+<br>
+<br>
+<input type="checkbox" checked id="focusTarget" />
+<br>
+<br>
+<input type="radio" id="focusTarget" />
+<br>
+<br>
+<input type="text" value="example text" id="focusTarget" />
+<br>
+<br>
+<a href="#" id="focusTarget" >Test</a>
+<br>
+<br>
+<!-- outline-offset: 4px -->
+<input type="button" style="outline-offset: 4px" value="button" id="focusTarget" />
+<br>
+<br>
+<input type="checkbox" style="outline-offset: 4px" checked id="focusTarget" />
+<br>
+<br>
+<input type="radio" style="outline-offset: 4px" id="focusTarget" />
+<br>
+<br>
+<input type="text" style="outline-offset: 4px" value="example text" id="focusTarget" />
+<br>
+<br>
+<a href="#" style="outline-offset: 4px" id="focusTarget">Test</a>
+<br>
+<script>
+  runAfterLayoutAndPaint(function() {
+    document.querySelectorAll("#focusTarget").forEach(node => {
+      internals.setPseudoClassState(node, ":focus", true);
+      // console.log(node);
+    });
+  }, true);
+</script>
+</body>