Title: [271218] trunk
- Revision
- 271218
- Author
- [email protected]
- Date
- 2021-01-06 15:45:44 -0800 (Wed, 06 Jan 2021)
Log 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.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (271217 => 271218)
--- trunk/LayoutTests/ChangeLog 2021-01-06 23:39:18 UTC (rev 271217)
+++ trunk/LayoutTests/ChangeLog 2021-01-06 23:45:44 UTC (rev 271218)
@@ -1,3 +1,17 @@
+2021-01-06 Aditya Keerthi <[email protected]>
+
+ [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 <[email protected]>
[Mac] inspector/debugger/tail-deleted-frames/tail-deleted-frames-intermediate-frames.html is a flaky timeout
Added: trunk/LayoutTests/fast/forms/select-empty-size-expected.html (0 => 271218)
--- trunk/LayoutTests/fast/forms/select-empty-size-expected.html (rev 0)
+++ trunk/LayoutTests/fast/forms/select-empty-size-expected.html 2021-01-06 23:45:44 UTC (rev 271218)
@@ -0,0 +1,18 @@
+<html>
+<head>
+<style>
+
+select {
+ height: 50px;
+ border: 1px solid black;
+ border-radius: 0px;
+}
+
+</style>
+</head>
+<body>
+<select>
+<option>California</option>
+</select>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/select-empty-size.html (0 => 271218)
--- trunk/LayoutTests/fast/forms/select-empty-size.html (rev 0)
+++ trunk/LayoutTests/fast/forms/select-empty-size.html 2021-01-06 23:45:44 UTC (rev 271218)
@@ -0,0 +1,18 @@
+<html>
+<head>
+<style>
+
+select {
+ height: 50px;
+ border: 1px solid black;
+ border-radius: 0px;
+}
+
+</style>
+</head>
+<body>
+<select size>
+<option>California</option>
+</select>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (271217 => 271218)
--- trunk/Source/WebCore/ChangeLog 2021-01-06 23:39:18 UTC (rev 271217)
+++ trunk/Source/WebCore/ChangeLog 2021-01-06 23:45:44 UTC (rev 271218)
@@ -1,3 +1,42 @@
+2021-01-06 Aditya Keerthi <[email protected]>
+
+ [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 <[email protected]>
[iOS] REGRESSION(r265088): "pointerdown" doesn't fire using a trackpad after double-tapping
Modified: trunk/Source/WebCore/css/html.css (271217 => 271218)
--- trunk/Source/WebCore/css/html.css 2021-01-06 23:39:18 UTC (rev 271217)
+++ trunk/Source/WebCore/css/html.css 2021-01-06 23:45:44 UTC (rev 271218)
@@ -1006,7 +1006,7 @@
}
#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;
border: 1px inset gray;
@@ -1014,7 +1014,7 @@
white-space: initial;
}
-select:matches([size="0"], [size="1"]) {
+select:is([size=""], [size="0"], [size="1"]) {
-webkit-appearance: menulist;
align-items: center;
border: 1px solid;
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
