Bug 30802 – Implement automatic switching to slider-vertical

• Status: NEW
• Component: Forms

[Mike Taylor]

Per the spec, if the range input's height is greater than its width it should render as a vertical slider. WebKit's implementation does not do this yet.

A test page can be found here: http://miketaylr.com/test/vertical-range-input.html

[Kent Tamura]

We already have vertical slider internally and you can see it by style="width:20px;height:200px;-webkit-appearance:slider-vertical;".  So we need to implement automatic switching from slider-horizontal to slider-vertical.

[Kent Tamura]

Created attachment 56785 [details]
Patch

[Kent Tamura]

Created attachment 56786 [details]
Patch (rev.2)

[Jakub Wieczorek]

> diff --git a/WebCore/rendering/RenderTheme.cpp b/WebCore/rendering/RenderTheme.cpp
> index 445e637bf2d703fee9f5dc27d3b06e71335bff5d..baa8d7cde1c55fc122236f21b044b7a0fa92d42d 100644
> --- a/WebCore/rendering/RenderTheme.cpp
> +++ b/WebCore/rendering/RenderTheme.cpp
> @@ -962,8 +962,10 @@ void RenderTheme::adjustMenuListButtonStyle(CSSStyleSelector*, RenderStyle*, Ele
>  {
>  }
>  
> -void RenderTheme::adjustSliderTrackStyle(CSSStyleSelector*, RenderStyle*, Element*) const
> +void RenderTheme::adjustSliderTrackStyle(CSSStyleSelector*, RenderStyle* style, Element*) const
>  {
> +    if (style->height().isFixed() && style->width().isFixed() && style->height().value() > style->width().value())
> +        style->setAppearance(SliderVerticalPart);
>  }
>  
>  void RenderTheme::adjustSliderThumbStyle(CSSStyleSelector*, RenderStyle*, Element*) const
> diff --git a/WebCore/rendering/RenderThemeMac.mm b/WebCore/rendering/RenderThemeMac.mm
> index f1de7759e85349b948d2e4d445e22bd88f844de3..ca69babdb25f6d38279f4d362aed964f0e0e4b68 100644
> --- a/WebCore/rendering/RenderThemeMac.mm
> +++ b/WebCore/rendering/RenderThemeMac.mm
> @@ -1150,8 +1150,9 @@ int RenderThemeMac::minimumMenuListSize(RenderStyle* style) const
>  const int trackWidth = 5;
>  const int trackRadius = 2;
>  
> -void RenderThemeMac::adjustSliderTrackStyle(CSSStyleSelector*, RenderStyle* style, Element*) const
> +void RenderThemeMac::adjustSliderTrackStyle(CSSStyleSelector* selector, RenderStyle* style, Element* element) const
>  {
> +    RenderTheme::adjustSliderTrackStyle(selector, style, element);
>      style->setBoxShadow(0);
>  }
>  

The Qt port also reimplements this function (in WebCore/platform/qt/RenderThemeQt.cpp), hence it should call the base one too.

[Kent Tamura]

Created attachment 56812 [details]
Patch (rev.3)

[Kent Tamura]

(In reply to comment #4)
> The Qt port also reimplements this function (in WebCore/platform/qt/RenderThemeQt.cpp), hence it should call the base one too.

Thank you for pointing it out!  I fixed it.

[Ojan Vafai]

Comment on attachment 56812 [details]
Patch (rev.3)

> +    if (style->height().isFixed() && style->width().isFixed() && style->height().value() > style->width().value())

This won't work for percentage heights/widths, will it? What about the intrinsic width? Can you add that case to your test case? I'm not sure about this, but I think you might want to look at style->paddingBox().

[Kent Tamura]

(In reply to comment #7)
> (From update of attachment 56812 [details])
> > +    if (style->height().isFixed() && style->width().isFixed() && style->height().value() > style->width().value())
> 
> This won't work for percentage heights/widths, will it? What about the intrinsic width? Can you add that case to your test case? I'm not sure about this, but I think you might want to look at style->paddingBox().

Right, this won't work for percentage length. The patch was a hack and we shouldn't do this here.
We need more complex change like <meter> does.