Title: [263303] trunk
Revision
263303
Author
wenson_hs...@apple.com
Date
2020-06-19 17:43:39 -0700 (Fri, 19 Jun 2020)

Log Message

REGRESSION (r263253): Search field results and cancel buttons have their own focus rings
https://bugs.webkit.org/show_bug.cgi?id=213413
<rdar://problem/64548419>

Reviewed by Tim Horton.

Source/WebCore:

After r263253, `paintCellAndSetFocusedElementNeedsRepaintIfNecessary` is used when painting the buttons in a
search field's shadow root. However, the renderer that is passed in (which is used to determine whether we
should additionally draw focus rings) is the input element's renderer rather than the renderers of the results
and cancel buttons themselves. This means that when the search field is focused, we will draw focus rings around
each of the buttons in the shadow root as well.

Address this by using `box` (the buttons' RenderBoxes) instead.

Test: fast/forms/search-field-buttons-do-not-have-focus-rings.html

* rendering/RenderThemeMac.mm:
(WebCore::RenderThemeMac::paintSearchFieldCancelButton):
(WebCore::RenderThemeMac::paintSearchFieldResultsButton):

LayoutTests:

Add a ref test to verify that the search and cancel buttons don't draw individual focus rings. This test works
by verifying that no focus ring around either the cancel or results button bleeds outside of the bounds of a div
that obscures the buttons.

* fast/forms/search-field-buttons-do-not-have-focus-rings-expected.html: Added.
* fast/forms/search-field-buttons-do-not-have-focus-rings.html: Added.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (263302 => 263303)


--- trunk/LayoutTests/ChangeLog	2020-06-20 00:16:12 UTC (rev 263302)
+++ trunk/LayoutTests/ChangeLog	2020-06-20 00:43:39 UTC (rev 263303)
@@ -1,3 +1,18 @@
+2020-06-19  Wenson Hsieh  <wenson_hs...@apple.com>
+
+        REGRESSION (r263253): Search field results and cancel buttons have their own focus rings
+        https://bugs.webkit.org/show_bug.cgi?id=213413
+        <rdar://problem/64548419>
+
+        Reviewed by Tim Horton.
+
+        Add a ref test to verify that the search and cancel buttons don't draw individual focus rings. This test works
+        by verifying that no focus ring around either the cancel or results button bleeds outside of the bounds of a div
+        that obscures the buttons.
+
+        * fast/forms/search-field-buttons-do-not-have-focus-rings-expected.html: Added.
+        * fast/forms/search-field-buttons-do-not-have-focus-rings.html: Added.
+
 2020-06-19  Truitt Savell  <tsav...@apple.com>
 
         Unreviewed, reverting r263121.

Added: trunk/LayoutTests/fast/forms/search-field-buttons-do-not-have-focus-rings-expected.html (0 => 263303)


--- trunk/LayoutTests/fast/forms/search-field-buttons-do-not-have-focus-rings-expected.html	                        (rev 0)
+++ trunk/LayoutTests/fast/forms/search-field-buttons-do-not-have-focus-rings-expected.html	2020-06-20 00:43:39 UTC (rev 263303)
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-cancel-button {
+            opacity: 0;
+        }
+
+        input[type="search"] {
+            font-size: 16px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            zoom: 1.4;
+            -webkit-appearance: none;
+        }
+
+        div {
+            position: absolute;
+            background-color: white;
+        }
+
+        #cover-results {
+            top: 10px;
+            left: 4px;
+            width: 28px;
+            height: 22px;
+        }
+
+        #cover-cancel {
+            top: 10px;
+            left: 316px;
+            width: 28px;
+            height: 24px;
+        }
+    </style>
+</head>
+<body>
+    <input type="search" results="5" value="foo" autofocus></input>
+    <div id="cover-results"></div>
+    <div id="cover-cancel"></div>
+</body>
+</html>
\ No newline at end of file

Added: trunk/LayoutTests/fast/forms/search-field-buttons-do-not-have-focus-rings.html (0 => 263303)


--- trunk/LayoutTests/fast/forms/search-field-buttons-do-not-have-focus-rings.html	                        (rev 0)
+++ trunk/LayoutTests/fast/forms/search-field-buttons-do-not-have-focus-rings.html	2020-06-20 00:43:39 UTC (rev 263303)
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        input[type="search"] {
+            font-size: 16px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            zoom: 1.4;
+            -webkit-appearance: none;
+        }
+
+        div {
+            position: absolute;
+            background-color: white;
+        }
+
+        #cover-results {
+            top: 10px;
+            left: 4px;
+            width: 28px;
+            height: 22px;
+        }
+
+        #cover-cancel {
+            top: 10px;
+            left: 316px;
+            width: 28px;
+            height: 24px;
+        }
+    </style>
+</head>
+<body>
+    <input type="search" results="5" value="foo" autofocus></input>
+    <div id="cover-results"></div>
+    <div id="cover-cancel"></div>
+</body>
+</html>
\ No newline at end of file

Modified: trunk/Source/WebCore/ChangeLog (263302 => 263303)


--- trunk/Source/WebCore/ChangeLog	2020-06-20 00:16:12 UTC (rev 263302)
+++ trunk/Source/WebCore/ChangeLog	2020-06-20 00:43:39 UTC (rev 263303)
@@ -1,3 +1,25 @@
+2020-06-19  Wenson Hsieh  <wenson_hs...@apple.com>
+
+        REGRESSION (r263253): Search field results and cancel buttons have their own focus rings
+        https://bugs.webkit.org/show_bug.cgi?id=213413
+        <rdar://problem/64548419>
+
+        Reviewed by Tim Horton.
+
+        After r263253, `paintCellAndSetFocusedElementNeedsRepaintIfNecessary` is used when painting the buttons in a
+        search field's shadow root. However, the renderer that is passed in (which is used to determine whether we
+        should additionally draw focus rings) is the input element's renderer rather than the renderers of the results
+        and cancel buttons themselves. This means that when the search field is focused, we will draw focus rings around
+        each of the buttons in the shadow root as well.
+
+        Address this by using `box` (the buttons' RenderBoxes) instead.
+
+        Test: fast/forms/search-field-buttons-do-not-have-focus-rings.html
+
+        * rendering/RenderThemeMac.mm:
+        (WebCore::RenderThemeMac::paintSearchFieldCancelButton):
+        (WebCore::RenderThemeMac::paintSearchFieldResultsButton):
+
 2020-06-19  Pinki Gyanchandani  <pgyanchand...@apple.com>
 
         Crash in WebCore::Range::borderAndTextRects

Modified: trunk/Source/WebCore/rendering/RenderThemeMac.mm (263302 => 263303)


--- trunk/Source/WebCore/rendering/RenderThemeMac.mm	2020-06-20 00:16:12 UTC (rev 263302)
+++ trunk/Source/WebCore/rendering/RenderThemeMac.mm	2020-06-20 00:43:39 UTC (rev 263303)
@@ -2016,7 +2016,7 @@
         paintInfo.context().scale(zoomLevel);
         paintInfo.context().translate(-unzoomedRect.location());
     }
-    paintCellAndSetFocusedElementNeedsRepaintIfNecessary([search cancelButtonCell], inputBox, paintInfo, unzoomedRect);
+    paintCellAndSetFocusedElementNeedsRepaintIfNecessary([search cancelButtonCell], box, paintInfo, unzoomedRect);
     [[search cancelButtonCell] setControlView:nil];
     return false;
 }
@@ -2152,7 +2152,7 @@
         paintInfo.context().translate(-unzoomedRect.location());
     }
 
-    paintCellAndSetFocusedElementNeedsRepaintIfNecessary([search searchButtonCell], inputBox, paintInfo, unzoomedRect);
+    paintCellAndSetFocusedElementNeedsRepaintIfNecessary([search searchButtonCell], box, paintInfo, unzoomedRect);
     [[search searchButtonCell] setControlView:nil];
 
     return false;
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to