Diff
Modified: trunk/LayoutTests/ChangeLog (241746 => 241747)
--- trunk/LayoutTests/ChangeLog 2019-02-18 23:40:50 UTC (rev 241746)
+++ trunk/LayoutTests/ChangeLog 2019-02-19 00:10:35 UTC (rev 241747)
@@ -1,3 +1,40 @@
+2019-02-18 Daniel Bates <[email protected]>
+
+ [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 <[email protected]>
Check the existence of the frame in Document::hasFrameSpecificStorageAccess() and Document::setHasFrameSpecificStorageAccess()
Added: trunk/LayoutTests/fast/forms/ios/focus-button-expected-mismatch.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-button-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-button-expected-mismatch.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<button>Button</button>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/focus-button.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-button.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-button.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+</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>
Added: trunk/LayoutTests/fast/forms/ios/focus-checkbox-expected-mismatch.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-checkbox-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-checkbox-expected-mismatch.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<input type="checkbox">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/focus-checkbox.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-checkbox.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-checkbox.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+</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>
Added: trunk/LayoutTests/fast/forms/ios/focus-checked-checkbox-expected-mismatch.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-checked-checkbox-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-checked-checkbox-expected-mismatch.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<input type="checkbox" checked>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/focus-checked-checkbox.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-checked-checkbox.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-checked-checkbox.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+</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>
Added: trunk/LayoutTests/fast/forms/ios/focus-checked-radio-expected-mismatch.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-checked-radio-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-checked-radio-expected-mismatch.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<input type="radio" checked>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/focus-checked-radio.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-checked-radio.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-checked-radio.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+</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>
Added: trunk/LayoutTests/fast/forms/ios/focus-radio-expected-mismatch.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-radio-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-radio-expected-mismatch.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<input type="radio">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/focus-radio.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-radio.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-radio.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+</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>
Added: trunk/LayoutTests/fast/forms/ios/focus-reset-button-expected-mismatch.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-reset-button-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-reset-button-expected-mismatch.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<input type="reset">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/focus-reset-button.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-reset-button.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-reset-button.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+</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>
Added: trunk/LayoutTests/fast/forms/ios/focus-search-field-expected-mismatch.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-search-field-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-search-field-expected-mismatch.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<input type="search">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/focus-search-field.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-search-field.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-search-field.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<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>
Added: trunk/LayoutTests/fast/forms/ios/focus-submit-button-expected-mismatch.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-submit-button-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-submit-button-expected-mismatch.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<input type="submit">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/focus-submit-button.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-submit-button.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-submit-button.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+</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>
Added: trunk/LayoutTests/fast/forms/ios/focus-text-field-expected-mismatch.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-text-field-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-text-field-expected-mismatch.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<input type="text">
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/focus-text-field.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-text-field.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-text-field.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<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>
Added: trunk/LayoutTests/fast/forms/ios/focus-textarea-expected-mismatch.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-textarea-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-textarea-expected-mismatch.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<textarea></textarea>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/focus-textarea.html (0 => 241747)
--- trunk/LayoutTests/fast/forms/ios/focus-textarea.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/focus-textarea.html 2019-02-19 00:10:35 UTC (rev 241747)
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<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>
Modified: trunk/LayoutTests/platform/ios/TestExpectations (241746 => 241747)
--- trunk/LayoutTests/platform/ios/TestExpectations 2019-02-18 23:40:50 UTC (rev 241746)
+++ trunk/LayoutTests/platform/ios/TestExpectations 2019-02-19 00:10:35 UTC (rev 241747)
@@ -3218,3 +3218,15 @@
# 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 ]
Modified: trunk/Source/WebCore/ChangeLog (241746 => 241747)
--- trunk/Source/WebCore/ChangeLog 2019-02-18 23:40:50 UTC (rev 241746)
+++ trunk/Source/WebCore/ChangeLog 2019-02-19 00:10:35 UTC (rev 241747)
@@ -1,3 +1,35 @@
+2019-02-18 Daniel Bates <[email protected]>
+
+ [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 <[email protected]>
[css-grid] Handle indefinite percentages in fit-content()
Modified: trunk/Source/WebCore/css/html.css (241746 => 241747)
--- trunk/Source/WebCore/css/html.css 2019-02-18 23:40:50 UTC (rev 241746)
+++ trunk/Source/WebCore/css/html.css 2019-02-19 00:10:35 UTC (rev 241747)
@@ -1162,7 +1162,11 @@
/* 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 @@
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 {
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (241746 => 241747)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2019-02-18 23:40:50 UTC (rev 241746)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2019-02-19 00:10:35 UTC (rev 241747)
@@ -1302,10 +1302,11 @@
#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());
Modified: trunk/Source/WebCore/rendering/RenderElement.cpp (241746 => 241747)
--- trunk/Source/WebCore/rendering/RenderElement.cpp 2019-02-18 23:40:50 UTC (rev 241746)
+++ trunk/Source/WebCore/rendering/RenderElement.cpp 2019-02-19 00:10:35 UTC (rev 241747)
@@ -1896,7 +1896,17 @@
// 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);
}
