Skip to content
Permalink
Browse files
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
  • Loading branch information
Ahmad-S792 authored and Ahmad Saleem committed Nov 30, 2022
1 parent 8e087fe commit 3a868b086d4bd0dc4a322dfa6499df20e8369364
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 2 deletions.
@@ -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"
@@ -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>
@@ -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"
@@ -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"
@@ -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)) {

0 comments on commit 3a868b0

Please sign in to comment.