Diff
Modified: trunk/LayoutTests/ChangeLog (270206 => 270207)
--- trunk/LayoutTests/ChangeLog 2020-11-27 20:38:10 UTC (rev 270206)
+++ trunk/LayoutTests/ChangeLog 2020-11-27 21:31:57 UTC (rev 270207)
@@ -1,3 +1,25 @@
+2020-11-27 Aditya Keerthi <akeer...@apple.com>
+
+ [iOS][FCR] Add new look for meter element
+ https://bugs.webkit.org/show_bug.cgi?id=219103
+ <rdar://problem/71549155>
+
+ Reviewed by Wenson Hsieh.
+
+ Added tests to verify the stylability of native meters and to
+ verify that different states are painted with a different appearance.
+
+ * fast/forms/ios/form-control-refresh/meter/border-expected-mismatch.html: Added.
+ * fast/forms/ios/form-control-refresh/meter/border.html: Added.
+ * fast/forms/ios/form-control-refresh/meter/even-less-good-appearance-expected-mismatch.html: Added.
+ * fast/forms/ios/form-control-refresh/meter/even-less-good-appearance.html: Added.
+ * fast/forms/ios/form-control-refresh/meter/optimal-appearance-expected-mismatch.html: Added.
+ * fast/forms/ios/form-control-refresh/meter/optimal-appearance.html: Added.
+ * fast/forms/ios/form-control-refresh/meter/suboptimal-appearance-expected-mismatch.html: Added.
+ * fast/forms/ios/form-control-refresh/meter/suboptimal-appearance.html: Added.
+ * fast/forms/ios/form-control-refresh/meter/width-height-expected-mismatch.html: Added.
+ * fast/forms/ios/form-control-refresh/meter/width-height.html: Added.
+
2020-11-27 Víctor Manuel Jáquez Leal <vjaq...@igalia.com>
REGRESSION(r269642) [GStreamer][WebRTC] Unexpected results after update to M87
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/border-expected-mismatch.html (0 => 270207)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/border-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/border-expected-mismatch.html 2020-11-27 21:31:57 UTC (rev 270207)
@@ -0,0 +1,11 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+<meter min="0" max="100"
+ low="33" high="66" optimum="80"
+ value="85"></meter>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/border.html (0 => 270207)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/border.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/border.html 2020-11-27 21:31:57 UTC (rev 270207)
@@ -0,0 +1,18 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+
+meter {
+ border: 10px;
+}
+
+</style>
+</head>
+<body>
+<meter min="0" max="100"
+ low="33" high="66" optimum="80"
+ value="85"></meter>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/even-less-good-appearance-expected-mismatch.html (0 => 270207)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/even-less-good-appearance-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/even-less-good-appearance-expected-mismatch.html 2020-11-27 21:31:57 UTC (rev 270207)
@@ -0,0 +1,11 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+<meter min="0" max="100"
+ low="10" high="20" optimum="25"
+ value="30"></meter>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/even-less-good-appearance.html (0 => 270207)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/even-less-good-appearance.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/even-less-good-appearance.html 2020-11-27 21:31:57 UTC (rev 270207)
@@ -0,0 +1,11 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+<meter min="0" max="100"
+ low="40" high="70" optimum="95"
+ value="30"></meter>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/optimal-appearance-expected-mismatch.html (0 => 270207)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/optimal-appearance-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/optimal-appearance-expected-mismatch.html 2020-11-27 21:31:57 UTC (rev 270207)
@@ -0,0 +1,11 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+<meter min="0" max="100"
+ low="33" high="90" optimum="95"
+ value="85"></meter>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/optimal-appearance.html (0 => 270207)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/optimal-appearance.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/optimal-appearance.html 2020-11-27 21:31:57 UTC (rev 270207)
@@ -0,0 +1,11 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+<meter min="0" max="100"
+ low="33" high="66" optimum="80"
+ value="85"></meter>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/suboptimal-appearance-expected-mismatch.html (0 => 270207)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/suboptimal-appearance-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/suboptimal-appearance-expected-mismatch.html 2020-11-27 21:31:57 UTC (rev 270207)
@@ -0,0 +1,11 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+<meter min="0" max="100"
+ low="60" high="70" optimum="95"
+ value="50"></meter>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/suboptimal-appearance.html (0 => 270207)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/suboptimal-appearance.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/suboptimal-appearance.html 2020-11-27 21:31:57 UTC (rev 270207)
@@ -0,0 +1,11 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+<meter min="0" max="100"
+ low="40" high="70" optimum="95"
+ value="50"></meter>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/width-height-expected-mismatch.html (0 => 270207)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/width-height-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/width-height-expected-mismatch.html 2020-11-27 21:31:57 UTC (rev 270207)
@@ -0,0 +1,11 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+<meter min="0" max="100"
+ low="33" high="66" optimum="80"
+ value="85"></meter>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/width-height.html (0 => 270207)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/width-height.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/meter/width-height.html 2020-11-27 21:31:57 UTC (rev 270207)
@@ -0,0 +1,19 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+
+meter {
+ width: 300px;
+ height: 50px;
+}
+
+</style>
+</head>
+<body>
+<meter min="0" max="100"
+ low="33" high="66" optimum="80"
+ value="85"></meter>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (270206 => 270207)
--- trunk/Source/WebCore/ChangeLog 2020-11-27 20:38:10 UTC (rev 270206)
+++ trunk/Source/WebCore/ChangeLog 2020-11-27 21:31:57 UTC (rev 270207)
@@ -1,3 +1,48 @@
+2020-11-27 Aditya Keerthi <akeer...@apple.com>
+
+ [iOS][FCR] Add new look for meter element
+ https://bugs.webkit.org/show_bug.cgi?id=219103
+ <rdar://problem/71549155>
+
+ Reviewed by Wenson Hsieh.
+
+ Tests: fast/forms/ios/form-control-refresh/meter/border.html
+ fast/forms/ios/form-control-refresh/meter/even-less-good-appearance.html
+ fast/forms/ios/form-control-refresh/meter/optimal-appearance.html
+ fast/forms/ios/form-control-refresh/meter/suboptimal-appearance.html
+ fast/forms/ios/form-control-refresh/meter/width-height.html
+
+ * html/HTMLMeterElement.cpp:
+ (WebCore::HTMLMeterElement::createElementRenderer):
+ * rendering/RenderTheme.cpp:
+ (WebCore::RenderTheme::supportsMeter const):
+ * rendering/RenderTheme.h:
+
+ Added additional parameter to supportsMeter to control support at runtime.
+
+ * rendering/RenderThemeIOS.h:
+ * rendering/RenderThemeIOS.mm:
+ (WebCore::RenderThemeIOS::supportsMeter const):
+
+ Implement this method so that a native meter is painted on iOS. Note that
+ a native appearance for meter is currently supported on macOS, but is
+ unsupported on iOS.
+
+ (WebCore::RenderThemeIOS::paintMeter):
+
+ Paint a meter element using the new appearance. The color of the filled
+ portion matches the element's gauge region, and can be one of three
+ colors. If the style has an RTL direction, flip the filled portion to
+ start from the right side of the element. This matches the RTL behavior
+ for progress bars.
+
+ * rendering/RenderThemeMac.h:
+ * rendering/RenderThemeMac.mm:
+ (WebCore::RenderThemeMac::supportsMeter const):
+ * rendering/RenderThemeWin.cpp:
+ (WebCore::RenderThemeWin::supportsMeter const):
+ * rendering/RenderThemeWin.h:
+
2020-11-27 Don Olmstead <don.olmst...@sony.com>
Non-unified build fixes, late November 2020 edition, take two
Modified: trunk/Source/WebCore/html/HTMLMeterElement.cpp (270206 => 270207)
--- trunk/Source/WebCore/html/HTMLMeterElement.cpp 2020-11-27 20:38:10 UTC (rev 270206)
+++ trunk/Source/WebCore/html/HTMLMeterElement.cpp 2020-11-27 21:31:57 UTC (rev 270207)
@@ -58,7 +58,7 @@
RenderPtr<RenderElement> HTMLMeterElement::createElementRenderer(RenderStyle&& style, const RenderTreePosition&)
{
- if (!RenderTheme::singleton().supportsMeter(style.appearance()))
+ if (!RenderTheme::singleton().supportsMeter(style.appearance(), *this))
return RenderElement::createFor(*this, WTFMove(style));
return createRenderer<RenderMeter>(*this, WTFMove(style));
Modified: trunk/Source/WebCore/rendering/RenderTheme.cpp (270206 => 270207)
--- trunk/Source/WebCore/rendering/RenderTheme.cpp 2020-11-27 20:38:10 UTC (rev 270206)
+++ trunk/Source/WebCore/rendering/RenderTheme.cpp 2020-11-27 21:31:57 UTC (rev 270207)
@@ -982,7 +982,7 @@
return bounds.size();
}
-bool RenderTheme::supportsMeter(ControlPart) const
+bool RenderTheme::supportsMeter(ControlPart, const HTMLMeterElement&) const
{
return false;
}
Modified: trunk/Source/WebCore/rendering/RenderTheme.h (270206 => 270207)
--- trunk/Source/WebCore/rendering/RenderTheme.h 2020-11-27 20:38:10 UTC (rev 270206)
+++ trunk/Source/WebCore/rendering/RenderTheme.h 2020-11-27 21:31:57 UTC (rev 270207)
@@ -37,6 +37,7 @@
class FileList;
class FillLayer;
class HTMLInputElement;
+class HTMLMeterElement;
class Icon;
class Page;
class RenderAttachment;
@@ -210,7 +211,7 @@
#endif
virtual IntSize meterSizeForBounds(const RenderMeter&, const IntRect&) const;
- virtual bool supportsMeter(ControlPart) const;
+ virtual bool supportsMeter(ControlPart, const HTMLMeterElement&) const;
#if ENABLE(DATALIST_ELEMENT)
// Returns the threshold distance for snapping to a slider tick mark.
Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.h (270206 => 270207)
--- trunk/Source/WebCore/rendering/RenderThemeIOS.h 2020-11-27 20:38:10 UTC (rev 270206)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.h 2020-11-27 21:31:57 UTC (rev 270207)
@@ -116,6 +116,9 @@
Seconds animationRepeatIntervalForProgressBar(const RenderProgress&) const final;
bool paintProgressBarFCR(const RenderObject&, const PaintInfo&, const IntRect&);
+
+ bool supportsMeter(ControlPart, const HTMLMeterElement&) const final;
+ bool paintMeter(const RenderObject&, const PaintInfo&, const IntRect&) final;
#endif
bool supportsFocusRing(const RenderStyle&) const final;
Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.mm (270206 => 270207)
--- trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2020-11-27 20:38:10 UTC (rev 270206)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2020-11-27 21:31:57 UTC (rev 270207)
@@ -49,6 +49,7 @@
#import "GraphicsContextCG.h"
#import "HTMLAttachmentElement.h"
#import "HTMLInputElement.h"
+#import "HTMLMeterElement.h"
#import "HTMLNames.h"
#import "HTMLSelectElement.h"
#import "IOSurface.h"
@@ -61,6 +62,7 @@
#import "PathUtilities.h"
#import "PlatformLocale.h"
#import "RenderAttachment.h"
+#import "RenderMeter.h"
#import "RenderObject.h"
#import "RenderProgress.h"
#import "RenderStyle.h"
@@ -1986,6 +1988,10 @@
constexpr auto controlColor = SRGBA<uint8_t> { 0, 122, 255 };
constexpr auto controlBackgroundColor = SRGBA<uint8_t> { 238, 238, 238 };
+constexpr auto meterOptimalColor = SRGBA<uint8_t> { 52, 199, 89 };
+constexpr auto meterSuboptimalColor = SRGBA<uint8_t> { 247, 206, 70 };
+constexpr auto meterEvenLessGoodColor = SRGBA<uint8_t> { 255, 59, 48 };
+
bool RenderThemeIOS::paintCheckbox(const RenderObject& box, const PaintInfo& paintInfo, const IntRect& rect)
{
if (!box.settings().iOSFormControlRefreshEnabled())
@@ -2138,6 +2144,52 @@
return false;
}
+bool RenderThemeIOS::supportsMeter(ControlPart part, const HTMLMeterElement& element) const
+{
+ if (part == MeterPart)
+ return element.document().settings().iOSFormControlRefreshEnabled();
+
+ return false;
+}
+
+bool RenderThemeIOS::paintMeter(const RenderObject& renderer, const PaintInfo& paintInfo, const IntRect& rect)
+{
+ if (!renderer.settings().iOSFormControlRefreshEnabled() || !is<RenderMeter>(renderer))
+ return true;
+
+ auto& renderMeter = downcast<RenderMeter>(renderer);
+ auto element = makeRefPtr(renderMeter.meterElement());
+
+ auto& context = paintInfo.context();
+ GraphicsContextStateSaver stateSaver(context);
+
+ float cornerRadius = std::min(rect.width(), rect.height()) / 2.0f;
+ FloatRoundedRect roundedFillRect(rect, FloatRoundedRect::Radii(cornerRadius));
+ context.fillRoundedRect(roundedFillRect, controlBackgroundColor);
+ context.clipRoundedRect(roundedFillRect);
+
+ FloatRect fillRect(rect);
+ if (renderMeter.style().isLeftToRightDirection())
+ fillRect.move(rect.width() * (element->valueRatio() - 1), 0);
+ else
+ fillRect.move(rect.width() * (1 - element->valueRatio()), 0);
+ roundedFillRect.setRect(fillRect);
+
+ switch (element->gaugeRegion()) {
+ case HTMLMeterElement::GaugeRegionOptimum:
+ context.fillRoundedRect(roundedFillRect, meterOptimalColor);
+ break;
+ case HTMLMeterElement::GaugeRegionSuboptimal:
+ context.fillRoundedRect(roundedFillRect, meterSuboptimalColor);
+ break;
+ case HTMLMeterElement::GaugeRegionEvenLessGood:
+ context.fillRoundedRect(roundedFillRect, meterEvenLessGoodColor);
+ break;
+ }
+
+ return false;
+}
+
#endif // ENABLE(IOS_FORM_CONTROL_REFRESH)
} // namespace WebCore
Modified: trunk/Source/WebCore/rendering/RenderThemeMac.h (270206 => 270207)
--- trunk/Source/WebCore/rendering/RenderThemeMac.h 2020-11-27 20:38:10 UTC (rev 270206)
+++ trunk/Source/WebCore/rendering/RenderThemeMac.h 2020-11-27 21:31:57 UTC (rev 270207)
@@ -85,7 +85,7 @@
IntSize meterSizeForBounds(const RenderMeter&, const IntRect&) const final;
bool paintMeter(const RenderObject&, const PaintInfo&, const IntRect&) final;
- bool supportsMeter(ControlPart) const final;
+ bool supportsMeter(ControlPart, const HTMLMeterElement&) const final;
// Returns the repeat interval of the animation for the progress bar.
Seconds animationRepeatIntervalForProgressBar(const RenderProgress&) const final;
Modified: trunk/Source/WebCore/rendering/RenderThemeMac.mm (270206 => 270207)
--- trunk/Source/WebCore/rendering/RenderThemeMac.mm 2020-11-27 20:38:10 UTC (rev 270206)
+++ trunk/Source/WebCore/rendering/RenderThemeMac.mm 2020-11-27 21:31:57 UTC (rev 270207)
@@ -1227,7 +1227,7 @@
return false;
}
-bool RenderThemeMac::supportsMeter(ControlPart part) const
+bool RenderThemeMac::supportsMeter(ControlPart part, const HTMLMeterElement&) const
{
switch (part) {
case RelevancyLevelIndicatorPart:
Modified: trunk/Source/WebCore/rendering/RenderThemeWin.cpp (270206 => 270207)
--- trunk/Source/WebCore/rendering/RenderThemeWin.cpp 2020-11-27 20:38:10 UTC (rev 270206)
+++ trunk/Source/WebCore/rendering/RenderThemeWin.cpp 2020-11-27 21:31:57 UTC (rev 270207)
@@ -1100,7 +1100,7 @@
style.setBoxShadow(nullptr);
}
-bool RenderThemeWin::supportsMeter(ControlPart part) const
+bool RenderThemeWin::supportsMeter(ControlPart part, const HTMLMeterElement&) const
{
switch (part) {
case MeterPart:
Modified: trunk/Source/WebCore/rendering/RenderThemeWin.h (270206 => 270207)
--- trunk/Source/WebCore/rendering/RenderThemeWin.h 2020-11-27 20:38:10 UTC (rev 270206)
+++ trunk/Source/WebCore/rendering/RenderThemeWin.h 2020-11-27 21:31:57 UTC (rev 270207)
@@ -125,7 +125,7 @@
#endif
IntSize meterSizeForBounds(const RenderMeter&, const IntRect&) const override;
- bool supportsMeter(ControlPart) const override;
+ bool supportsMeter(ControlPart, const HTMLMeterElement&) const override;
void adjustMeterStyle(RenderStyle&, const Element*) const override;
bool paintMeter(const RenderObject&, const PaintInfo&, const IntRect&) override;