Don't paint focus ring for anonymous block continuations

Don't paint focus ring for anonymous block continuations https://bugs.webkit.org/show_bug.cgi?id=248187 Reviewed by Alan Baradlay. Merge - https://src.chromium.org/viewvc/blink?view=revision&revision=180748 Now we push outline style to anonymous block continuations when the containing inline style changes. As the inline paints the whole focus ring, the anonymous block continuation should not paint focus ring again. * Source/WebCore/rendering/RenderBlock.cpp: (RenderBlock::paintObject): Add logic to not paint "anonymous block continuations" * LayoutTests/fast/css/focus-ring-continuations.html: Add Test Case * LayoutTests/fast/css/focus-ring-continuations-expected.txt: Add Test Case Expectations * LayoutTests/platform/ios/fast/css/focus-ring-continuations-expected.txt: Add Test Case Expectations (Platform Specific) * LayoutTests/platform/mac/fast/css/focus-ring-continuations-expected.txt: Add Test Case Expectations (Platform Specific) Canonical link: https://commits.webkit.org/257199@main
WebKit · Nov 30, 2022 · 3a868b0 · 3a868b0
1 parent 8e087fe
commit 3a868b0
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 2 deletions.
diff --git a/LayoutTests/fast/css/focus-ring-continuations-expected.txt b/LayoutTests/fast/css/focus-ring-continuations-expected.txt
@@ -0,0 +1,21 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x70
+  RenderBlock {HTML} at (0,0) size 800x70
+    RenderBody {BODY} at (8,8) size 784x54
+      RenderBlock (anonymous) at (0,0) size 784x18
+        RenderText {#text} at (0,0) size 688x17
+          text run at (0,0) width 688: "Tests focus ring around an inline element containing block continuations. There should be a single focus ring."
+      RenderBlock {DIV} at (0,18) size 200x36
+        RenderBlock (anonymous) at (0,0) size 200x18
+          RenderInline {SPAN} at (0,0) size 100x17
+            RenderText {#text} at (0,0) size 100x17
+              text run at (0,0) width 100: "INLINE TEXT"
+        RenderBlock (anonymous) at (0,18) size 200x18
+        RenderBlock (anonymous) at (0,36) size 200x0
+          RenderInline {SPAN} at (0,0) size 0x0
+          RenderText {#text} at (0,0) size 0x0
+layer at (8,41) size 200x18
+  RenderBlock (relative positioned) {DIV} at (0,0) size 200x18
+    RenderText {#text} at (0,0) size 146x17
+      text run at (0,0) width 146: "BLOCK CONTENTS"
diff --git a/LayoutTests/fast/css/focus-ring-continuations.html b/LayoutTests/fast/css/focus-ring-continuations.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<style>
+#focus {
+  outline: -webkit-focus-ring-color auto 5px;
+}
+#container {
+  width: 200px;
+}
+#inner {
+  position: relative;
+  top: -3px;
+}
+</style>
+Tests focus ring around an inline element containing block continuations.
+There should be a single focus ring.
+<div id="container">
+  <span id="focus">
+    INLINE TEXT
+    <div id="inner">BLOCK CONTENTS</div>
+  </span>
+</div>
diff --git a/LayoutTests/platform/ios/fast/css/focus-ring-continuations-expected.txt b/LayoutTests/platform/ios/fast/css/focus-ring-continuations-expected.txt
@@ -0,0 +1,21 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x76
+  RenderBlock {HTML} at (0,0) size 800x76
+    RenderBody {BODY} at (8,8) size 784x60
+      RenderBlock (anonymous) at (0,0) size 784x20
+        RenderText {#text} at (0,0) size 702x19
+          text run at (0,0) width 702: "Tests focus ring around an inline element containing block continuations. There should be a single focus ring."
+      RenderBlock {DIV} at (0,20) size 200x40
+        RenderBlock (anonymous) at (0,0) size 200x20
+          RenderInline {SPAN} at (0,0) size 99x19
+            RenderText {#text} at (0,0) size 99x19
+              text run at (0,0) width 99: "INLINE TEXT"
+        RenderBlock (anonymous) at (0,20) size 200x20
+        RenderBlock (anonymous) at (0,40) size 200x0
+          RenderInline {SPAN} at (0,0) size 0x0
+          RenderText {#text} at (0,0) size 0x0
+layer at (8,45) size 200x20
+  RenderBlock (relative positioned) {DIV} at (0,0) size 200x20
+    RenderText {#text} at (0,0) size 142x19
+      text run at (0,0) width 142: "BLOCK CONTENTS"
diff --git a/LayoutTests/platform/mac/fast/css/focus-ring-continuations-expected.txt b/LayoutTests/platform/mac/fast/css/focus-ring-continuations-expected.txt
@@ -0,0 +1,21 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x70
+  RenderBlock {HTML} at (0,0) size 800x70
+    RenderBody {BODY} at (8,8) size 784x54
+      RenderBlock (anonymous) at (0,0) size 784x18
+        RenderText {#text} at (0,0) size 702x18
+          text run at (0,0) width 702: "Tests focus ring around an inline element containing block continuations. There should be a single focus ring."
+      RenderBlock {DIV} at (0,18) size 200x36
+        RenderBlock (anonymous) at (0,0) size 200x18
+          RenderInline {SPAN} at (0,0) size 99x18
+            RenderText {#text} at (0,0) size 99x18
+              text run at (0,0) width 99: "INLINE TEXT"
+        RenderBlock (anonymous) at (0,18) size 200x18
+        RenderBlock (anonymous) at (0,36) size 200x0
+          RenderInline {SPAN} at (0,0) size 0x0
+          RenderText {#text} at (0,0) size 0x0
+layer at (8,41) size 200x18
+  RenderBlock (relative positioned) {DIV} at (0,0) size 200x18
+    RenderText {#text} at (0,0) size 142x18
+      text run at (0,0) width 142: "BLOCK CONTENTS"
diff --git a/Source/WebCore/rendering/RenderBlock.cpp b/Source/WebCore/rendering/RenderBlock.cpp
@@ -1331,8 +1331,13 @@ void RenderBlock::paintObject(PaintInfo& paintInfo, const LayoutPoint& paintOffs
         paintFloats(paintInfo, scrolledOffset, paintPhase == PaintPhase::Selection || paintPhase == PaintPhase::TextClip || paintPhase == PaintPhase::EventRegion);
 
     // 5. paint outline.
-    if ((paintPhase == PaintPhase::Outline || paintPhase == PaintPhase::SelfOutline) && hasOutline() && style().visibility() == Visibility::Visible)
-        paintOutline(paintInfo, LayoutRect(paintOffset, size()));
+    if ((paintPhase == PaintPhase::Outline || paintPhase == PaintPhase::SelfOutline) && hasOutline() && style().visibility() == Visibility::Visible) {
+        // Don't paint focus ring for anonymous block continuation because the
+        // inline element having outline-style:auto paints the whole focus ring.
+        bool hasOutlineStyleAuto = style().outlineStyleIsAuto() == OutlineIsAuto::On;
+        if (!hasOutlineStyleAuto || !isContinuation())
+            paintOutline(paintInfo, LayoutRect(paintOffset, size()));
+    }
 
     // 6. paint continuation outlines.
     if ((paintPhase == PaintPhase::Outline || paintPhase == PaintPhase::ChildOutlines)) {