WebKit Bugzilla
Attachment 362302 Details for
Bug 193599
: [iOS] Focus ring for checkboxes, radio buttons, buttons and search fields should hug tighter to the contour
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
[patch]
Patch
bug-193599-20190218104955.patch (text/plain), 4.05 KB, created by
Daniel Bates
on 2019-02-18 10:49:55 PST
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Daniel Bates
Created:
2019-02-18 10:49:55 PST
Size:
4.05 KB
patch
obsolete
>Subversion Revision: 241299 >diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog >index 3de6940cb1f1cfd8713f59902f82b7c852e6efc3..b6990475f0cfd81ce39c0b2cbfdf7b143e2d5525 100644 >--- a/Source/WebCore/ChangeLog >+++ b/Source/WebCore/ChangeLog >@@ -1,3 +1,26 @@ >+2019-02-18 Daniel Bates <dabates@apple.com> >+ >+ [iOS] Focus ring for checkboxes, radio buttons, buttons and search fields should hug tighter to the contour >+ https://bugs.webkit.org/show_bug.cgi?id=193599 >+ <rdar://problem/47399602> >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ For now, iOS uses a 3px outline width for its focus rings. Do not inset the focus ring on iOS >+ for text fields, textareas, keygens, and selects so as to match the visual appearance of all >+ the other controls. >+ >+ To fix focus ring positioning for radio buttons and checkbox apply the same workaround in >+ RenderElement::paintOutline() as we do in RenderBox::paintBoxDecorations(). Filed <https://bugs.webkit.org/show_bug.cgi?id=194781> >+ to find a better way to fix this. >+ >+ * css/html.css: >+ (:focus): Use 3px outline width. >+ (input:focus, textarea:focus, keygen:focus, select:focus): Do not include when building for iOS. >+ * rendering/RenderElement.cpp: >+ (WebCore::RenderElement::paintOutline): Adjust paint rect for checkbox and radio buttons here >+ just as we do in RenderBox::paintBoxDecorations(). >+ > 2019-02-12 Andy Estes <aestes@apple.com> > > [iOSMac] Enable Parental Controls Content Filtering >diff --git a/Source/WebCore/css/html.css b/Source/WebCore/css/html.css >index 4c25559b02c40c385592e5ae808ba6cf45551d25..6992145fe4df91debe6d1f754080469dafcbe86c 100644 >--- a/Source/WebCore/css/html.css >+++ b/Source/WebCore/css/html.css >@@ -1162,7 +1162,11 @@ nobr { > /* states */ > > :focus { >+#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY >+ outline: auto 3px -webkit-focus-ring-color; >+#else > outline: auto 5px -webkit-focus-ring-color; >+#endif > } > > /* Read-only text fields do not show a focus ring but do still receive focus */ >@@ -1170,9 +1174,11 @@ html:focus, body:focus, input[readonly]:focus, applet:focus, embed:focus, iframe > outline: none; > } > >+#if !defined(WTF_PLATFORM_IOS_FAMILY) || !WTF_PLATFORM_IOS_FAMILY > input:focus, textarea:focus, keygen:focus, select:focus { > outline-offset: -2px; > } >+#endif > > input:matches([type="button"], [type="checkbox"], [type="file"], [type="hidden"], [type="image"], [type="radio"], [type="reset"], [type="search"], [type="submit"]):focus, > input[type="file"]:focus::-webkit-file-upload-button { >diff --git a/Source/WebCore/rendering/RenderElement.cpp b/Source/WebCore/rendering/RenderElement.cpp >index 96d4a3c2abfc1562aaf023f2d47d05fa66ef6a3c..f91d46ae580ca0d147cb76d5c0ebb78e9120d47e 100644 >--- a/Source/WebCore/rendering/RenderElement.cpp >+++ b/Source/WebCore/rendering/RenderElement.cpp >@@ -1896,7 +1896,16 @@ void RenderElement::paintOutline(PaintInfo& paintInfo, const LayoutRect& paintRe > // Only paint the focus ring by hand if the theme isn't able to draw it. > if (styleToUse.outlineStyleIsAuto() == OutlineIsAuto::On && !theme().supportsFocusRing(styleToUse)) { > Vector<LayoutRect> focusRingRects; >- addFocusRingRects(focusRingRects, paintRect.location(), paintInfo.paintContainer); >+ LayoutRect paintRectToUse { paintRect }; >+#if PLATFORM(IOS_FAMILY) >+ // Workaround for <rdar://problem/6209763>. Force the painting bounds of checkboxes and radio controls to be square. >+ if (style().appearance() == CheckboxPart || style().appearance() == RadioPart) { >+ int width = std::min(paintRect.width(), paintRect.height()); >+ int height = width; >+ paintRectToUse = IntRect { paintRect.x(), paintRect.y() + (downcast<RenderBox>(*this).height() - height) / 2, width, height }; // Vertically center the checkbox, like on desktop >+ } >+#endif >+ addFocusRingRects(focusRingRects, paintRectToUse.location(), paintInfo.paintContainer); > paintFocusRing(paintInfo, styleToUse, focusRingRects); > } >
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 193599
:
362302
|
362307
|
362311
|
362312
|
362330
|
362333
|
362344
|
362347