- Revision
- 280927
- Author
- [email protected]
- Date
- 2021-08-11 13:19:33 -0700 (Wed, 11 Aug 2021)
Log Message
REGRESSION (r273072): Caps lock indicator in password field is too large
https://bugs.webkit.org/show_bug.cgi?id=228970
rdar://81546781
Reviewed by Wenson Hsieh.
Source/WebCore:
r273072 made it so that flex items with an intrinsic size will honor
their aspect ratio when computing their content size. Prior to the
change, in taller password fields, the flex item representing the caps
lock indicator would be tall and narrow. The height would stretch to
fill the container, but the width would maintain its intrinsic width of
17px. Now that aspect ratio is accounted for, the width increases to
match the height, resulting in a much larger indicator in taller password
fields.
However, while r273072 regressed the appearance of the caps lock
indicator, it merely exposed an issue with the styling of the indicator.
Consider the following test case, which is a reduced version how the
caps lock indicator is styled:
<div style="display: flex; height: 100px">
<div style="content: url(17_x_17_blue_square.svg); align-self: stretch;"></div>
</div>
Prior to r273072, this displayed a 17x17 blue square (inside a 17x100
flex item). However, in Chrome, Firefox, and WebKit after r273072, this
shows a 100x100 blue square (inside a 100x100 flex item). This is the
expected behavior now that aspect ratio is accounted for.
Consequently, to fix the issue, the width of the indicator must be
limited to a maximum value. 17px was chosen to be the max-width, as the
indicator's width would not exceed 17px prior to r273072.
Test: fast/forms/caps-lock-indicator-width.html
* css/html.css:
(input::-webkit-caps-lock-indicator):
LayoutTests:
Added a layout test to verify that the width of the caps lock indicator
adapts to the height of the password field, but does not exceed a
maximum width.
The added test is skipped on WK1, since DumpRenderTree does not support
toggling caps lock state. Implementing the testing hook in DRT is made
difficult by the fact that, in WK1, the caps lock state is queried
directly from the OS, using GetCurrentKeyModifiers.
* fast/forms/caps-lock-indicator-width-expected.txt: Added.
* fast/forms/caps-lock-indicator-width.html: Added.
* platform/ios-wk1/TestExpectations:
* platform/mac-wk1/TestExpectations:
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (280926 => 280927)
--- trunk/LayoutTests/ChangeLog 2021-08-11 20:04:36 UTC (rev 280926)
+++ trunk/LayoutTests/ChangeLog 2021-08-11 20:19:33 UTC (rev 280927)
@@ -1,3 +1,25 @@
+2021-08-11 Aditya Keerthi <[email protected]>
+
+ REGRESSION (r273072): Caps lock indicator in password field is too large
+ https://bugs.webkit.org/show_bug.cgi?id=228970
+ rdar://81546781
+
+ Reviewed by Wenson Hsieh.
+
+ Added a layout test to verify that the width of the caps lock indicator
+ adapts to the height of the password field, but does not exceed a
+ maximum width.
+
+ The added test is skipped on WK1, since DumpRenderTree does not support
+ toggling caps lock state. Implementing the testing hook in DRT is made
+ difficult by the fact that, in WK1, the caps lock state is queried
+ directly from the OS, using GetCurrentKeyModifiers.
+
+ * fast/forms/caps-lock-indicator-width-expected.txt: Added.
+ * fast/forms/caps-lock-indicator-width.html: Added.
+ * platform/ios-wk1/TestExpectations:
+ * platform/mac-wk1/TestExpectations:
+
2021-08-11 Ayumi Kojima <[email protected]>
[ Win EWS ] fast/forms/input-baseline.html is flaky crashing.
Added: trunk/LayoutTests/fast/forms/caps-lock-indicator-width-expected.txt (0 => 280927)
--- trunk/LayoutTests/fast/forms/caps-lock-indicator-width-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/forms/caps-lock-indicator-width-expected.txt 2021-08-11 20:19:33 UTC (rev 280927)
@@ -0,0 +1,20 @@
+This test verifies that the width of the caps lock indicator in password fields adapts to the height of the field, but does not exceed a maximum value.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Small height
+PASS capsLockIndicatorWidth is 15
+
+Default height
+PASS capsLockIndicatorWidth is 17
+
+Large height
+PASS capsLockIndicatorWidth is 17
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
+
+
Added: trunk/LayoutTests/fast/forms/caps-lock-indicator-width.html (0 => 280927)
--- trunk/LayoutTests/fast/forms/caps-lock-indicator-width.html (rev 0)
+++ trunk/LayoutTests/fast/forms/caps-lock-indicator-width.html 2021-08-11 20:19:33 UTC (rev 280927)
@@ -0,0 +1,56 @@
+<html>
+<head>
+<script src=""
+<script src=""
+<style>
+
+#small {
+ height: 15px;
+}
+
+#large {
+ height: 100px;
+}
+
+</style>
+</head>
+<body>
+<input type="password" id="small">
+<br>
+<input type="password" id="normal">
+<br>
+<input type="password" id="large">
+</body>
+<script>
+jsTestIsAsync = true;
+
+async function runTest(name, input, expectedWidth)
+{
+ debug(name);
+
+ shadowRoot = window.internals.shadowRoot(input);
+
+ await UIHelper.activateElement(input);
+ await UIHelper.renderingUpdate();
+
+ capsLockIndicator = shadowRoot.querySelector("[pseudo='-webkit-caps-lock-indicator']");
+ capsLockIndicatorWidth = capsLockIndicator.getBoundingClientRect().width;
+
+ shouldBeEqualToNumber("capsLockIndicatorWidth", expectedWidth);
+
+ debug("");
+}
+
+addEventListener("load", async () => {
+ description("This test verifies that the width of the caps lock indicator in password fields adapts to the height of the field, but does not exceed a maximum value.");
+
+ await UIHelper.toggleCapsLock();
+
+ await runTest("Small height", small, 15);
+ await runTest("Default height", normal, 17);
+ await runTest("Large height", large, 17);
+
+ finishJSTest();
+});
+</script>
+</html>
Modified: trunk/LayoutTests/platform/ios-wk1/TestExpectations (280926 => 280927)
--- trunk/LayoutTests/platform/ios-wk1/TestExpectations 2021-08-11 20:04:36 UTC (rev 280926)
+++ trunk/LayoutTests/platform/ios-wk1/TestExpectations 2021-08-11 20:19:33 UTC (rev 280927)
@@ -1295,6 +1295,9 @@
# Changing system language is not supported in DumpRenderTree.
fast/text/international/system-language [ Skip ]
+# DumpRenderTree doesn't support toggling caps lock key state. WK1 reads caps lock key state directly from the OS.
+fast/forms/caps-lock-indicator-width.html [ Skip ]
+
# Imported Blink tests.
imported/blink/compositing/layer-creation/iframe-clip-removed.html [ ImageOnlyFailure ]
imported/blink/compositing/repaint/end-of-opacity-transition.html [ ImageOnlyFailure Pass ]
Modified: trunk/LayoutTests/platform/mac-wk1/TestExpectations (280926 => 280927)
--- trunk/LayoutTests/platform/mac-wk1/TestExpectations 2021-08-11 20:04:36 UTC (rev 280926)
+++ trunk/LayoutTests/platform/mac-wk1/TestExpectations 2021-08-11 20:19:33 UTC (rev 280927)
@@ -322,6 +322,9 @@
# DumpRenderTree doesn't support logging calls to runOpenPanel.
fast/forms/file/open-file-panel.html [ Skip ]
+# DumpRenderTree doesn't support toggling caps lock key state. WK1 reads caps lock key state directly from the OS.
+fast/forms/caps-lock-indicator-width.html [ Skip ]
+
# WK1 and WK2 mousemove events are subtly different in ways that break this test on WK1.
fast/events/ghostly-mousemoves-in-subframe.html [ Skip ]
Modified: trunk/Source/WebCore/ChangeLog (280926 => 280927)
--- trunk/Source/WebCore/ChangeLog 2021-08-11 20:04:36 UTC (rev 280926)
+++ trunk/Source/WebCore/ChangeLog 2021-08-11 20:19:33 UTC (rev 280927)
@@ -1,3 +1,44 @@
+2021-08-11 Aditya Keerthi <[email protected]>
+
+ REGRESSION (r273072): Caps lock indicator in password field is too large
+ https://bugs.webkit.org/show_bug.cgi?id=228970
+ rdar://81546781
+
+ Reviewed by Wenson Hsieh.
+
+ r273072 made it so that flex items with an intrinsic size will honor
+ their aspect ratio when computing their content size. Prior to the
+ change, in taller password fields, the flex item representing the caps
+ lock indicator would be tall and narrow. The height would stretch to
+ fill the container, but the width would maintain its intrinsic width of
+ 17px. Now that aspect ratio is accounted for, the width increases to
+ match the height, resulting in a much larger indicator in taller password
+ fields.
+
+ However, while r273072 regressed the appearance of the caps lock
+ indicator, it merely exposed an issue with the styling of the indicator.
+
+ Consider the following test case, which is a reduced version how the
+ caps lock indicator is styled:
+
+ <div style="display: flex; height: 100px">
+ <div style="content: url(17_x_17_blue_square.svg); align-self: stretch;"></div>
+ </div>
+
+ Prior to r273072, this displayed a 17x17 blue square (inside a 17x100
+ flex item). However, in Chrome, Firefox, and WebKit after r273072, this
+ shows a 100x100 blue square (inside a 100x100 flex item). This is the
+ expected behavior now that aspect ratio is accounted for.
+
+ Consequently, to fix the issue, the width of the indicator must be
+ limited to a maximum value. 17px was chosen to be the max-width, as the
+ indicator's width would not exceed 17px prior to r273072.
+
+ Test: fast/forms/caps-lock-indicator-width.html
+
+ * css/html.css:
+ (input::-webkit-caps-lock-indicator):
+
2021-08-11 Chris Dumez <[email protected]>
Stop evaluating <script>s moved between Documents during fetching
Modified: trunk/Source/WebCore/css/html.css (280926 => 280927)
--- trunk/Source/WebCore/css/html.css 2021-08-11 20:04:36 UTC (rev 280926)
+++ trunk/Source/WebCore/css/html.css 2021-08-11 20:19:33 UTC (rev 280927)
@@ -688,6 +688,7 @@
input::-webkit-caps-lock-indicator {
-webkit-appearance: caps-lock-indicator;
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17"><path fill="black" fill-opacity="0.4" d="M12.5 0.5A 4 4 0 0 1 16.5 4.5L 16.5 12.5A 4 4 0 0 1 12.5 16.5L 4.5 16.5A 4 4 0 0 1 0.5 12.5L 0.5 4.5A 4 4 0 0 1 4.5 0.5L 12.5 0.5M 8.5 2L 4 7L 6.25 7L 6.25 10.25L 10.75 10.25L 10.75 7L 13 7L 8.5 2M 10.75 12L 6.25 12L 6.25 14.25L 10.75 14.25L 10.75 12"/></svg>');
+ max-width: 17px;
align-self: stretch;
flex: none;
-webkit-user-select: none;
