[macOS] Support rendering native <progress> in vertical writing mode

https://bugs.webkit.org/show_bug.cgi?id=261493
rdar://115408537

Reviewed by Tim Nguyen and Richard Robinson.

Add support for rendering `<progress>` with `appearance: auto` with a vertical
writing mode, by rotating the CoreUI image by 90 degrees. This approach is viable
since the image does not have any shadows or orientation specific behaviors.

* LayoutTests/fast/forms/vertical-writing-mode/progress-expected.html: Added.
* LayoutTests/fast/forms/vertical-writing-mode/progress.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional-expected.txt:

These subtests were previously incorrectly passing, as the minimum block size
was not actually being enforced with a vertical writing mode. Now, the vertical
writing mode fails the same way as the horizontal writing mode.

* LayoutTests/platform/glib/TestExpectations:
* LayoutTests/platform/ios/TestExpectations:
* LayoutTests/platform/wincairo/TestExpectations:
* Source/WebCore/platform/graphics/mac/controls/ProgressBarMac.mm:
(WebCore::ProgressBarMac::rectForBounds const):

Adjust `rectForBounds` to ensure a minimum block-size is enforced. Support for
vertical writing modes is not added at a "lower-level" (`controlSizeForFont`,
`cellSize`, `cellOutsets`), since all controls can not necessarily be rotated.

(WebCore::ProgressBarMac::draw):

Draw vertical progress bars into a horizontal buffer and rotate the context to
achieve a vertical appearance.

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

LayoutTests/fast/forms/vertical-writing-mode/progress-expected.html

@@ -0,0 +1,10 @@
+<style>
+
+progress {
+    transform: rotate(90deg) translate(0, -100%);
+    transform-origin: left top;
+}
+
+</style>
+<progress value="20" max="100"></progress>
+

LayoutTests/fast/forms/vertical-writing-mode/progress.html

@@ -0,0 +1,9 @@
+<meta name="fuzzy" content="maxDifference=0-8; totalPixels=0-1"/>
+<style>
+
+progress {
+    writing-mode: vertical-lr;
+}
+
+</style>
+<progress value="20" max="100"></progress>

LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional-expected.txt

@@ -1,6 +1,6 @@
 
 
 FAIL progress[style="writing-mode: horizontal-tb"] block size should match height and inline should match width assert_equals: expected "16px" but got "21px"
-PASS progress[style="writing-mode: vertical-lr"] block size should match width and inline should match width
-PASS progress[style="writing-mode: vertical-rl"] block size should match width and inline should match width
+FAIL progress[style="writing-mode: vertical-lr"] block size should match width and inline should match width assert_equals: expected "16px" but got "21px"
+FAIL progress[style="writing-mode: vertical-rl"] block size should match width and inline should match width assert_equals: expected "16px" but got "21px"
 

LayoutTests/platform/glib/TestExpectations

@@ -722,6 +722,8 @@ webkit.org/b/216853 css3/font-synthesis-small-caps.html [ ImageOnlyFailure ]
 webkit.org/b/221308 [ Debug ] fast/selectors/matches-backtracking.html [ Timeout ]
 webkit.org/b/221308 [ Debug ] fast/selectors/is-backtracking.html [ Timeout ]
 
+fast/forms/vertical-writing-mode/progress.html [ ImageOnlyFailure ]
+
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/line-box-height-vlr-011.xht [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/line-box-height-vlr-013.xht [ ImageOnlyFailure ]
 

LayoutTests/platform/ios/TestExpectations

@@ -1179,6 +1179,8 @@ css3/color-filters/color-filter-caret-color.html [ Skip ]
 # Not relevant for iOS.
 css3/color-filters/color-filter-ignore-semantic.html [ Skip ]
 
+fast/forms/vertical-writing-mode/progress.html [ ImageOnlyFailure ]
+
 # WebCryptoAPI features that enabled only for iOS 11/High Sierra+
 crypto/subtle/rsa-pss-generate-export-key-jwk-sha1.html [ Pass ]
 crypto/subtle/rsa-pss-generate-export-key-jwk-sha224.html [ Pass ]

LayoutTests/platform/wincairo/TestExpectations

@@ -550,6 +550,8 @@ fast/gradients/conic-from-angle.html [ Pass ]
 fast/gradients/conic-two-hints.html [ Pass ]
 fast/gradients/conic-gradient-alpha.html [ ImageOnlyFailure ]
 
+fast/forms/vertical-writing-mode/progress.html [ ImageOnlyFailure ]
+
 [ Debug ] animations/CSSKeyframesRule-name-null.html [ Pass Timeout ]
 
 [ Debug ] css3/filters/filter-property-computed-style.html [ Pass Timeout ]

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

@@ -67,16 +67,28 @@
 
 FloatRect ProgressBarMac::rectForBounds(const FloatRect& bounds, const ControlStyle& style) const
 {
-    int minimumProgressBarHeight = sizeForSystemFont(style).height();
-    if (bounds.height() > minimumProgressBarHeight)
+    auto isVerticalWritingMode = style.states.contains(ControlStyle::State::VerticalWritingMode);
+
+    auto logicalBounds = bounds;
+    if (isVerticalWritingMode)
+        logicalBounds.setSize(bounds.size().transposedSize());
+
+    int minimumProgressBarBlockSize = sizeForSystemFont(style).height();
+    if (logicalBounds.height() > minimumProgressBarBlockSize)
         return bounds;
 
     auto controlSize = controlSizeForFont(style);
     auto size = cellSize(controlSize, style);
     auto outsets = cellOutsets(controlSize, style);
 
     size.scale(style.zoomFactor);
-    size.setWidth(bounds.width());
+
+    if (isVerticalWritingMode) {
+        outsets = { outsets.left(), outsets.top(), outsets.right(), outsets.bottom() };
+        size.setWidth(size.height());
+        size.setHeight(bounds.height());
+    } else
+        size.setWidth(bounds.width());
 
     // Make enough room for the shadow.
     return inflatedRect(bounds, size, outsets, style);
@@ -86,7 +98,12 @@
 {
     LocalDefaultSystemAppearance localAppearance(style.states.contains(ControlStyle::State::DarkAppearance), style.accentColor);
 
+    auto isVerticalWritingMode = style.states.contains(ControlStyle::State::VerticalWritingMode);
+
     auto inflatedRect = rectForBounds(borderRect.rect(), style);
+    if (isVerticalWritingMode)
+        inflatedRect.setSize(inflatedRect.size().transposedSize());
+
     auto imageBuffer = context.createImageBuffer(inflatedRect.size(), deviceScaleFactor);
     if (!imageBuffer)
         return;
@@ -126,6 +143,13 @@
 
     GraphicsContextStateSaver stateSaver(context);
 
+    if (isVerticalWritingMode) {
+        context.translate(inflatedRect.height(), 0);
+        context.translate(inflatedRect.location());
+        context.rotate(piOverTwoFloat);
+        context.translate(-inflatedRect.location());
+    }
+
     if (style.states.contains(ControlStyle::State::RightToLeft)) {
         context.translate(2 * inflatedRect.x() + inflatedRect.width(), 0);
         context.scale(FloatSize(-1, 1));