Changeset 280927 in webkit

Timestamp:

Aug 11, 2021, 1:19:33 PM (5 years ago)

Author:

Aditya Keerthi

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:

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/fast/forms/caps-lock-indicator-width-expected.txt (added)
• LayoutTests/fast/forms/caps-lock-indicator-width.html (added)
• LayoutTests/platform/ios-wk1/TestExpectations (modified) (1 diff)
• LayoutTests/platform/mac-wk1/TestExpectations (modified) (1 diff)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/css/html.css (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2021-08-11  Aditya Keerthi  <akeerthi@apple.com>
+
+        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  <ayumi_kojima@apple.com>
 

trunk/LayoutTests/platform/ios-wk1/TestExpectations

@@ -1296 +1296 @@
 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 ]

trunk/LayoutTests/platform/mac-wk1/TestExpectations

@@ -322 +322 @@
 # 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.

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2021-08-11  Aditya Keerthi  <akeerthi@apple.com>
+
+        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  <cdumez@apple.com>
 

trunk/Source/WebCore/css/html.css

@@ -689 +689 @@
     -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;