[macOS] Fix appearance of text inputs with a datalist in vertical wri…

…ting mode

https://bugs.webkit.org/show_bug.cgi?id=264351
rdar://118066878

Reviewed by Tim Horton.

There are currently two issues with text inputs + <datalist> in vertical
writing mode:

1. Dropdown indicator is positioned incorrectly – the indicator is still vertically centered.
2. Dropdown menu is extremely narrow – the menu uses the width rather than the inline size.

Fix (1) by re-writing painting code to use logical coordinates. Fix (2) by using the larger
of element width and height to size the menu.

* Source/WebCore/platform/graphics/mac/controls/ControlMac.mm:
(WebCore::ControlMac::drawListButton):
* Source/WebKit/UIProcess/mac/WebDataListSuggestionsDropdownMac.mm:
(-[WKDataListSuggestionsController dropdownRectForElementRect:]):

Canonical link: https://commits.webkit.org/270356@main

Source/WebCore/platform/graphics/mac/controls/ControlMac.mm

@@ -414,12 +414,20 @@ static void drawCellFocusRingInView(GraphicsContext& context, const FloatRect& r
     comboBoxButtonContext.translate(comboBoxButtonInset.scaled(-1));
     comboBoxButtonContext.drawConsumingImageBuffer(WTFMove(comboBoxImageBuffer), FloatPoint::zero(), ImagePaintingOptions { ImageOrientation::Orientation::OriginBottomRight });
 
+    auto isVerticalWritingMode = style.states.contains(ControlStyle::State::VerticalWritingMode);
+
+    auto logicalRect = isVerticalWritingMode ? rect.transposedRect() : rect;
+    auto desiredComboBoxButtonLogicalSize = isVerticalWritingMode ? desiredComboBoxButtonSize.transposedSize() : desiredComboBoxButtonSize;
+
     FloatPoint listButtonLocation;
-    float listButtonY = rect.center().y() - desiredComboBoxButtonSize.height() / 2;
+    float listButtonLogicalTop = logicalRect.center().y() - desiredComboBoxButtonLogicalSize.height() / 2;
     if (style.states.contains(ControlStyle::State::RightToLeft))
-        listButtonLocation = { rect.x() + desiredComboBoxInset, listButtonY };
+        listButtonLocation = { logicalRect.x() + desiredComboBoxInset, listButtonLogicalTop };
     else
-        listButtonLocation = { rect.maxX() - desiredComboBoxButtonSize.width() - desiredComboBoxInset, listButtonY };
+        listButtonLocation = { logicalRect.maxX() - desiredComboBoxButtonLogicalSize.width() - desiredComboBoxInset, listButtonLogicalTop };
+
+    if (isVerticalWritingMode)
+        listButtonLocation = listButtonLocation.transposedPoint();
 
     context.drawConsumingImageBuffer(WTFMove(comboBoxButtonImageBuffer), listButtonLocation);
 }

Source/WebKit/UIProcess/mac/WebDataListSuggestionsDropdownMac.mm

@@ -455,7 +455,7 @@ - (NSRect)dropdownRectForElementRect:(const WebCore::IntRect&)rect
     if (_suggestions.size() > 1)
         totalIntercellSpacingAndPadding += (_suggestions.size() - 1) * [_table intercellSpacing].height;
 
-    CGFloat width = std::min<CGFloat>(rect.width(), screenRect.size.width);
+    CGFloat width = std::min<CGFloat>(std::max(rect.width(), rect.height()), screenRect.size.width);
     CGFloat height = std::min<CGFloat>(totalIntercellSpacingAndPadding + std::min(totalCellHeight, maximumTotalHeightForDropdownCells), screenRect.size.height);
     CGFloat originX = std::max<CGFloat>(NSMinX(windowRect), 0);
     CGFloat originY = std::max<CGFloat>(NSMinY(windowRect) - height - dropdownTopMargin, 0);