Changeset 271218 in webkit

Timestamp:

Jan 6, 2021, 3:45:44 PM (6 years ago)

Author:

Aditya Keerthi

Message:

[macOS] Text inside form controls is off center on burton.com
​https://bugs.webkit.org/show_bug.cgi?id=220376
<rdar://problem/72833977>

Reviewed by Devin Rousso.

Source/WebCore:

<select> elements on burton.com specify an empty size attribute. This
results in the "select:matches([size], [multiple]), select[size][multiple]"
ruleset being applied, which adds the rule "align-items: flex-start". That
rules causes the text within the element to be aligned to the top.

This rule is necessary for <select multiple> and <select> elements with
a size attribute greater than or equal to 2, which both have a listbox
appearance (a popup menu is not shown when clicking the element).
However, <select> elements with a size attribute less than or equal to 1
have a menulist appearance and display a popup when clicked.

<select size> also displays a popup when clicked, and like other browsers
it should have vertically centered text. WebKit already has an additional
ruleset for size="0" and size="1" to preserve the menulist appearance.
Consequently, we can augment the ruleset to include size="", removing the
"align-items: flex-start" rule for <select size> and ensuring the text is
vertically centered.

Test: fast/forms/select-empty-size.html

• css/html.css:

(select:is([size], [multiple]), select[size][multiple]):

Update ruleset to use :is(), instead of the obsolete :matches().

(select:is([size=""], [size="0"], [size="1"])):

Add [size=""] to the list of matching attributes, since <select size>
should not have a listbox appearance. The new appearance matches
Chrome and Firefox.

LayoutTests:

Added a test to verify that the appearance of a <select> element with
an empty size attribute is the same as one without a size attribute.

• fast/forms/select-empty-size-expected.html: Added.
• fast/forms/select-empty-size.html: Added.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/fast/forms/select-empty-size-expected.html (added)
• LayoutTests/fast/forms/select-empty-size.html (added)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/css/html.css (modified) (2 diffs)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2021-01-06  Aditya Keerthi  <akeerthi@apple.com>
+
+        [macOS] Text inside form controls is off center on burton.com
+        https://bugs.webkit.org/show_bug.cgi?id=220376
+        <rdar://problem/72833977>
+
+        Reviewed by Devin Rousso.
+
+        Added a test to verify that the appearance of a <select> element with
+        an empty size attribute is the same as one without a size attribute.
+
+        * fast/forms/select-empty-size-expected.html: Added.
+        * fast/forms/select-empty-size.html: Added.
+
 2021-01-06  Ryan Haddad  <ryanhaddad@apple.com>
 

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2021-01-06  Aditya Keerthi  <akeerthi@apple.com>
+
+        [macOS] Text inside form controls is off center on burton.com
+        https://bugs.webkit.org/show_bug.cgi?id=220376
+        <rdar://problem/72833977>
+
+        Reviewed by Devin Rousso.
+
+        <select> elements on burton.com specify an empty size attribute. This
+        results in the "select:matches([size], [multiple]), select[size][multiple]"
+        ruleset being applied, which adds the rule "align-items: flex-start". That
+        rules causes the text within the element to be aligned to the top.
+
+        This rule is necessary for <select multiple> and <select> elements with
+        a size attribute greater than or equal to 2, which both have a listbox
+        appearance (a popup menu is not shown when clicking the element).
+        However, <select> elements with a size attribute less than or equal to 1
+        have a menulist appearance and display a popup when clicked.
+
+        <select size> also displays a popup when clicked, and like other browsers
+        it should have vertically centered text. WebKit already has an additional
+        ruleset for size="0" and size="1" to preserve the menulist appearance.
+        Consequently, we can augment the ruleset to include size="", removing the
+        "align-items: flex-start" rule for <select size> and ensuring the text is
+        vertically centered.
+
+        Test: fast/forms/select-empty-size.html
+
+        * css/html.css:
+        (select:is([size], [multiple]), select[size][multiple]):
+
+        Update ruleset to use :is(), instead of the obsolete :matches().
+
+        (select:is([size=""], [size="0"], [size="1"])):
+
+        Add [size=""] to the list of matching attributes, since <select size>
+        should not have a listbox appearance. The new appearance matches
+        Chrome and Firefox.
+
 2021-01-06  Devin Rousso  <drousso@apple.com>
 

trunk/Source/WebCore/css/html.css

@@ -1007 +1007 @@
 
 #if !(defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY)
-select:matches([size], [multiple]), select[size][multiple] {
+select:is([size], [multiple]), select[size][multiple] {
     -webkit-appearance: listbox;
     align-items: flex-start;
@@ -1015 +1015 @@
 }
 
-select:matches([size="0"], [size="1"]) {
+select:is([size=""], [size="0"], [size="1"]) {
     -webkit-appearance: menulist;
     align-items: center;