[iOS] Focus ring for checkboxes, radio buttons, buttons and search fields should...
authordbates@webkit.org <dbates@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 19 Feb 2019 00:10:35 +0000 (00:10 +0000)
committerdbates@webkit.org <dbates@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 19 Feb 2019 00:10:35 +0000 (00:10 +0000)
https://bugs.webkit.org/show_bug.cgi?id=193599
<rdar://problem/47399602>

Reviewed by Simon Fraser.

Source/WebCore:

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.

Tests: fast/forms/ios/focus-button.html
       fast/forms/ios/focus-checkbox.html
       fast/forms/ios/focus-checked-checkbox.html
       fast/forms/ios/focus-checked-radio.html
       fast/forms/ios/focus-radio.html
       fast/forms/ios/focus-reset-button.html
       fast/forms/ios/focus-search-field.html
       fast/forms/ios/focus-submit-button.html
       fast/forms/ios/focus-text-field.html
       fast/forms/ios/focus-textarea.html

* css/html.css:
(:focus): Use 3px outline width.
(input:focus, textarea:focus, keygen:focus, select:focus): Guard this code to exclude it when building for iOS.
* rendering/RenderBox.cpp:
(WebCore::RenderBox::paintBoxDecorations): Add FIXME comment.
* rendering/RenderElement.cpp:
(WebCore::RenderElement::paintOutline): Call RenderTheme::adjustPaintRect() to adjust the paint rect.
Otherwise, the focus rings for radios and checkboxes are drawn at the wrong y-coordinate and are not snug.

LayoutTests:

Ideally we should find a way to write non-pixel tests for focus rings. For now, add some mismatch ref
tests.

We cannot write a "good" mismatch ref test for <select> at the moment since there is no way to defocus
a <select> without closing its popup. We also cannot change outline-color when outline-style: auto is
used and outline-style: auto is needed to get shrink-wrapped focus rings :(

* fast/forms/ios/focus-button-expected-mismatch.html: Added.
* fast/forms/ios/focus-button.html: Added.
* fast/forms/ios/focus-checkbox-expected-mismatch.html: Added.
* fast/forms/ios/focus-checkbox.html: Added.
* fast/forms/ios/focus-checked-checkbox-expected-mismatch.html: Added.
* fast/forms/ios/focus-checked-checkbox.html: Added.
* fast/forms/ios/focus-checked-radio-expected-mismatch.html: Added.
* fast/forms/ios/focus-checked-radio.html: Added.
* fast/forms/ios/focus-radio-expected-mismatch.html: Added.
* fast/forms/ios/focus-radio.html: Added.
* fast/forms/ios/focus-reset-button-expected-mismatch.html: Added.
* fast/forms/ios/focus-reset-button.html: Added.
* fast/forms/ios/focus-search-field-expected-mismatch.html: Added.
* fast/forms/ios/focus-search-field.html: Added.
* fast/forms/ios/focus-submit-button-expected-mismatch.html: Added.
* fast/forms/ios/focus-submit-button.html: Added.
* fast/forms/ios/focus-text-field-expected-mismatch.html: Added.
* fast/forms/ios/focus-text-field.html: Added.
* fast/forms/ios/focus-textarea-expected-mismatch.html: Added.
* fast/forms/ios/focus-textarea.html: Added.
* platform/ios/TestExpectations: Skip the tests for now on iOS we do not build with ENABLE(FULL_KEYBOARD_ACCESS) enabled.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@241747 268f45cc-cd09-0410-ab3c-d52691b4dbfc

26 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/forms/ios/focus-button-expected-mismatch.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-button.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-checkbox-expected-mismatch.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-checkbox.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-checked-checkbox-expected-mismatch.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-checked-checkbox.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-checked-radio-expected-mismatch.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-checked-radio.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-radio-expected-mismatch.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-radio.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-reset-button-expected-mismatch.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-reset-button.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-search-field-expected-mismatch.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-search-field.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-submit-button-expected-mismatch.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-submit-button.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-text-field-expected-mismatch.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-text-field.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-textarea-expected-mismatch.html [new file with mode: 0644]
LayoutTests/fast/forms/ios/focus-textarea.html [new file with mode: 0644]
LayoutTests/platform/ios/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/css/html.css
Source/WebCore/rendering/RenderBox.cpp
Source/WebCore/rendering/RenderElement.cpp

index e3cac30..589a9cd 100644 (file)
@@ -1,3 +1,40 @@
+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 Simon Fraser.
+
+        Ideally we should find a way to write non-pixel tests for focus rings. For now, add some mismatch ref
+        tests.
+
+        We cannot write a "good" mismatch ref test for <select> at the moment since there is no way to defocus
+        a <select> without closing its popup. We also cannot change outline-color when outline-style: auto is
+        used and outline-style: auto is needed to get shrink-wrapped focus rings :(
+
+        * fast/forms/ios/focus-button-expected-mismatch.html: Added.
+        * fast/forms/ios/focus-button.html: Added.
+        * fast/forms/ios/focus-checkbox-expected-mismatch.html: Added.
+        * fast/forms/ios/focus-checkbox.html: Added.
+        * fast/forms/ios/focus-checked-checkbox-expected-mismatch.html: Added.
+        * fast/forms/ios/focus-checked-checkbox.html: Added.
+        * fast/forms/ios/focus-checked-radio-expected-mismatch.html: Added.
+        * fast/forms/ios/focus-checked-radio.html: Added.
+        * fast/forms/ios/focus-radio-expected-mismatch.html: Added.
+        * fast/forms/ios/focus-radio.html: Added.
+        * fast/forms/ios/focus-reset-button-expected-mismatch.html: Added.
+        * fast/forms/ios/focus-reset-button.html: Added.
+        * fast/forms/ios/focus-search-field-expected-mismatch.html: Added.
+        * fast/forms/ios/focus-search-field.html: Added.
+        * fast/forms/ios/focus-submit-button-expected-mismatch.html: Added.
+        * fast/forms/ios/focus-submit-button.html: Added.
+        * fast/forms/ios/focus-text-field-expected-mismatch.html: Added.
+        * fast/forms/ios/focus-text-field.html: Added.
+        * fast/forms/ios/focus-textarea-expected-mismatch.html: Added.
+        * fast/forms/ios/focus-textarea.html: Added.
+        * platform/ios/TestExpectations: Skip the tests for now on iOS we do not build with ENABLE(FULL_KEYBOARD_ACCESS) enabled.
+
 2019-02-18  John Wilander  <wilander@apple.com>
 
         Check the existence of the frame in Document::hasFrameSpecificStorageAccess() and Document::setHasFrameSpecificStorageAccess()
diff --git a/LayoutTests/fast/forms/ios/focus-button-expected-mismatch.html b/LayoutTests/fast/forms/ios/focus-button-expected-mismatch.html
new file mode 100644 (file)
index 0000000..d9363b0
--- /dev/null
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<button>Button</button>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-button.html b/LayoutTests/fast/forms/ios/focus-button.html
new file mode 100644 (file)
index 0000000..2bb0a85
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/ui-helper.js"></script>
+</head>
+<body>
+<button id="test">Button</button> <!-- Test PASSED if there is a focus ring -->
+<script>
+if (window.testRunner) {
+    testRunner.waitUntilDone();
+    let testElement = document.getElementById("test");
+    testElement.addEventListener("focus", () => testRunner.notifyDone(), { once: true });
+    UIHelper.keyDown("\t", ["altKey"]);
+}
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-checkbox-expected-mismatch.html b/LayoutTests/fast/forms/ios/focus-checkbox-expected-mismatch.html
new file mode 100644 (file)
index 0000000..441ee3c
--- /dev/null
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<input type="checkbox">
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-checkbox.html b/LayoutTests/fast/forms/ios/focus-checkbox.html
new file mode 100644 (file)
index 0000000..c590c87
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/ui-helper.js"></script>
+</head>
+<body>
+<input id="test" type="checkbox"> <!-- Test PASSED if there is a focus ring -->
+<script>
+if (window.testRunner) {
+    testRunner.waitUntilDone();
+    let testElement = document.getElementById("test");
+    testElement.addEventListener("focus", () => testRunner.notifyDone(), { once: true });
+    UIHelper.keyDown("\t", ["altKey"]);
+}
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-checked-checkbox-expected-mismatch.html b/LayoutTests/fast/forms/ios/focus-checked-checkbox-expected-mismatch.html
new file mode 100644 (file)
index 0000000..8a4383d
--- /dev/null
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<input type="checkbox" checked>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-checked-checkbox.html b/LayoutTests/fast/forms/ios/focus-checked-checkbox.html
new file mode 100644 (file)
index 0000000..75813da
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/ui-helper.js"></script>
+</head>
+<body>
+<input id="test" type="checkbox" checked> <!-- Test PASSED if there is a focus ring -->
+<script>
+if (window.testRunner) {
+    testRunner.waitUntilDone();
+    let testElement = document.getElementById("test");
+    testElement.addEventListener("focus", () => testRunner.notifyDone(), { once: true });
+    UIHelper.keyDown("\t", ["altKey"]);
+}
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-checked-radio-expected-mismatch.html b/LayoutTests/fast/forms/ios/focus-checked-radio-expected-mismatch.html
new file mode 100644 (file)
index 0000000..00766de
--- /dev/null
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<input type="radio" checked>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-checked-radio.html b/LayoutTests/fast/forms/ios/focus-checked-radio.html
new file mode 100644 (file)
index 0000000..4924d32
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/ui-helper.js"></script>
+</head>
+<body>
+<input id="test" type="radio" checked> <!-- Test PASSED if there is a focus ring -->
+<script>
+if (window.testRunner) {
+    testRunner.waitUntilDone();
+    let testElement = document.getElementById("test");
+    testElement.addEventListener("focus", () => testRunner.notifyDone(), { once: true });
+    UIHelper.keyDown("\t", ["altKey"]);
+}
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-radio-expected-mismatch.html b/LayoutTests/fast/forms/ios/focus-radio-expected-mismatch.html
new file mode 100644 (file)
index 0000000..4f07a77
--- /dev/null
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<input type="radio">
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-radio.html b/LayoutTests/fast/forms/ios/focus-radio.html
new file mode 100644 (file)
index 0000000..09af6a0
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/ui-helper.js"></script>
+</head>
+<body>
+<input id="test" type="radio"> <!-- Test PASSED if there is a focus ring -->
+<script>
+if (window.testRunner) {
+    testRunner.waitUntilDone();
+    let testElement = document.getElementById("test");
+    testElement.addEventListener("focus", () => testRunner.notifyDone(), { once: true });
+    UIHelper.keyDown("\t", ["altKey"]);
+}
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-reset-button-expected-mismatch.html b/LayoutTests/fast/forms/ios/focus-reset-button-expected-mismatch.html
new file mode 100644 (file)
index 0000000..871d2fc
--- /dev/null
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<input type="reset">
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-reset-button.html b/LayoutTests/fast/forms/ios/focus-reset-button.html
new file mode 100644 (file)
index 0000000..6aac0ab
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/ui-helper.js"></script>
+</head>
+<body>
+<input id="test" type="reset"> <!-- Test PASSED if there is a focus ring -->
+<script>
+if (window.testRunner) {
+    testRunner.waitUntilDone();
+    let testElement = document.getElementById("test");
+    testElement.addEventListener("focus", () => testRunner.notifyDone(), { once: true });
+    UIHelper.keyDown("\t", ["altKey"]);
+}
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-search-field-expected-mismatch.html b/LayoutTests/fast/forms/ios/focus-search-field-expected-mismatch.html
new file mode 100644 (file)
index 0000000..934722b
--- /dev/null
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<input type="search">
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-search-field.html b/LayoutTests/fast/forms/ios/focus-search-field.html
new file mode 100644 (file)
index 0000000..c2cc669
--- /dev/null
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/ui-helper.js"></script>
+<style>
+input {
+    caret-color: transparent;
+}
+</style>
+</head>
+<body>
+<input id="test" type="search"> <!-- Test PASSED if there is a focus ring -->
+<script>
+if (window.testRunner) {
+    testRunner.waitUntilDone();
+    let testElement = document.getElementById("test");
+    testElement.addEventListener("focus", () => testRunner.notifyDone(), { once: true });
+    UIHelper.keyDown("\t", ["altKey"]);
+}
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-submit-button-expected-mismatch.html b/LayoutTests/fast/forms/ios/focus-submit-button-expected-mismatch.html
new file mode 100644 (file)
index 0000000..e648275
--- /dev/null
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<input type="submit">
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-submit-button.html b/LayoutTests/fast/forms/ios/focus-submit-button.html
new file mode 100644 (file)
index 0000000..70fd075
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/ui-helper.js"></script>
+</head>
+<body>
+<input id="test" type="submit"> <!-- Test PASSED if there is a focus ring -->
+<script>
+if (window.testRunner) {
+    testRunner.waitUntilDone();
+    let testElement = document.getElementById("test");
+    testElement.addEventListener("focus", () => testRunner.notifyDone(), { once: true });
+    UIHelper.keyDown("\t", ["altKey"]);
+}
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-text-field-expected-mismatch.html b/LayoutTests/fast/forms/ios/focus-text-field-expected-mismatch.html
new file mode 100644 (file)
index 0000000..5008bfb
--- /dev/null
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<input type="text">
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-text-field.html b/LayoutTests/fast/forms/ios/focus-text-field.html
new file mode 100644 (file)
index 0000000..1de76e4
--- /dev/null
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/ui-helper.js"></script>
+<style>
+input {
+    caret-color: transparent;
+}
+</style>
+</head>
+<body>
+<input id="test" type="text"> <!-- Test PASSED if there is a focus ring -->
+<script>
+if (window.testRunner) {
+    testRunner.waitUntilDone();
+    let testElement = document.getElementById("test");
+    testElement.addEventListener("focus", () => testRunner.notifyDone(), { once: true });
+    UIHelper.keyDown("\t", ["altKey"]);
+}
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-textarea-expected-mismatch.html b/LayoutTests/fast/forms/ios/focus-textarea-expected-mismatch.html
new file mode 100644 (file)
index 0000000..0d83e68
--- /dev/null
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<textarea></textarea>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/ios/focus-textarea.html b/LayoutTests/fast/forms/ios/focus-textarea.html
new file mode 100644 (file)
index 0000000..7c67d93
--- /dev/null
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/ui-helper.js"></script>
+<style>
+textarea {
+    caret-color: transparent;
+}
+</style>
+</head>
+<body>
+<textarea id="test"></textarea> <!-- Test PASSED if there is a focus ring -->
+<script>
+if (window.testRunner) {
+    testRunner.waitUntilDone();
+    let testElement = document.getElementById("test");
+    testElement.addEventListener("focus", () => testRunner.notifyDone(), { once: true });
+    UIHelper.keyDown("\t", ["altKey"]);
+}
+</script>
+</body>
+</html>
index db52d67..a967043 100644 (file)
@@ -3218,3 +3218,15 @@ fast/events/touch/ios/pointer-events-with-modifiers.html [ Skip ]
 # FIXME: Unskip the following test once we have the fix for <rdar://problem/44928156>.
 fast/events/ios/key-command-delete-to-end-of-paragraph.html [ Skip ]
 fast/events/ios/key-command-transpose.html [ Skip ]
+
+# FIXME: Unskip the following tests once we ENABLE(FULL_KEYBOARD_ACCESS) is enabled by default on iOS
+fast/forms/ios/focus-button.html [ Skip ]
+fast/forms/ios/focus-checkbox.html [ Skip ]
+fast/forms/ios/focus-checked-checkbox.html [ Skip ]
+fast/forms/ios/focus-checked-radio.html [ Skip ]
+fast/forms/ios/focus-radio.html [ Skip ]
+fast/forms/ios/focus-reset-button.html [ Skip ]
+fast/forms/ios/focus-search-field.html [ Skip ]
+fast/forms/ios/focus-submit-button.html [ Skip ]
+fast/forms/ios/focus-text-field.html [ Skip ]
+fast/forms/ios/focus-textarea.html [ Skip ]
index d220583..8b4d70d 100644 (file)
@@ -1,3 +1,35 @@
+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 Simon Fraser.
+
+        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.
+
+        Tests: fast/forms/ios/focus-button.html
+               fast/forms/ios/focus-checkbox.html
+               fast/forms/ios/focus-checked-checkbox.html
+               fast/forms/ios/focus-checked-radio.html
+               fast/forms/ios/focus-radio.html
+               fast/forms/ios/focus-reset-button.html
+               fast/forms/ios/focus-search-field.html
+               fast/forms/ios/focus-submit-button.html
+               fast/forms/ios/focus-text-field.html
+               fast/forms/ios/focus-textarea.html
+
+        * css/html.css:
+        (:focus): Use 3px outline width.
+        (input:focus, textarea:focus, keygen:focus, select:focus): Guard this code to exclude it when building for iOS.
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::paintBoxDecorations): Add FIXME comment.
+        * rendering/RenderElement.cpp:
+        (WebCore::RenderElement::paintOutline): Call RenderTheme::adjustPaintRect() to adjust the paint rect.
+        Otherwise, the focus rings for radios and checkboxes are drawn at the wrong y-coordinate and are not snug.
+
 2019-02-18  Oriol Brufau  <obrufau@igalia.com>
 
         [css-grid] Handle indefinite percentages in fit-content()
index 4c25559..6992145 100644 (file)
@@ -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 {
index 7bd279b..24f208d 100644 (file)
@@ -1302,10 +1302,11 @@ void RenderBox::paintBoxDecorations(PaintInfo& paintInfo, const LayoutPoint& pai
 
 #if PLATFORM(IOS_FAMILY)
     // Workaround for <rdar://problem/6209763>. Force the painting bounds of checkboxes and radio controls to be square.
+    // FIXME: Consolidate this code with the same code in RenderElement::paintOutline(). See <https://bugs.webkit.org/show_bug.cgi?id=194781>.
     if (style().appearance() == CheckboxPart || style().appearance() == RadioPart) {
         int width = std::min(paintRect.width(), paintRect.height());
         int height = width;
-        paintRect = IntRect(paintRect.x(), paintRect.y() + (this->height() - height) / 2, width, height); // Vertically center the checkbox, like on desktop
+        paintRect = IntRect { paintRect.x(), paintRect.y() + (this->height() - height) / 2, width, height }; // Vertically center the checkbox, like on desktop
     }
 #endif
     BackgroundBleedAvoidance bleedAvoidance = determineBackgroundBleedAvoidance(paintInfo.context());
index 96d4a3c..022fe3b 100644 (file)
@@ -1896,7 +1896,17 @@ 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.
+        // FIXME: Consolidate this code with the same code in RenderBox::paintBoxDecorations(). See <https://bugs.webkit.org/show_bug.cgi?id=194781>.
+        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);
     }