input[type=range] as a flex item renders thumb at wrong position
authorTony Chang <tony@chromium.org>
Mon, 15 Oct 2012 22:02:31 +0000 (22:02 +0000)
committerTony Chang <tony@chromium.org>
Mon, 15 Oct 2012 22:02:31 +0000 (22:02 +0000)
commitf167d27366956d27cb45f28b826ea5afb791b4b3
tree15aa6770383ba6c87cef3fa7fd9891bae8ff94ba
parent4361b85b097c607ea59aac5353be2c2643c6f03a
input[type=range] as a flex item renders thumb at wrong position
https://bugs.webkit.org/show_bug.cgi?id=98666

Reviewed by Ojan Vafai.

Source/WebCore:

Replace RenderSlider implementation with new flexbox and clean up the shadow DOM.
The previous code was trying to set the height to 100% and had a bunch of hacks in
the renderer code to set an explicit height. Using the new flexbox allows us to
remove these renderer hacks.

Test: css3/flexbox/flexitem-stretch-range.html

* css/html.css:
(input[type="range"]::-webkit-slider-container, input[type="range"]::-webkit-media-slider-container): Use new flexbox.
(input[type="range"]::-webkit-slider-runnable-track): Use new flexbox.
(input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-media-slider-thumb): Remove relative positioning since we're
no longer setting top/left in the layout code.
* css/mediaControlsChromium.css: Remove redundant styles and bottom: 1px hack.
* css/mediaControlsChromiumAndroid.css: Remove redundant styles and bottom: 1px hack.
* html/RangeInputType.cpp:
(WebCore::RangeInputType::listAttributeTargetChanged): We need to force a layout
since the height of the control should change when adding/removing a datalist.
* html/shadow/SliderThumbElement.cpp:
(WebCore::RenderSliderContainer::RenderSliderContainer): Use new flexbox.
(WebCore::RenderSliderContainer::computeLogicalHeight): Rather than setting style()->height() in layout, just compute the correct
height when asked.  If we have a datalist, we increase the height (same code as before).  If we're vertical,
we use the intrinsic size.
(WebCore::RenderSliderContainer::layout): Remove extra layout code, but handle the position of the thumb.
This used to be handled in the thumb's layout method, but I deleted that.
* html/shadow/SliderThumbElement.h:
* rendering/RenderSlider.cpp:
(WebCore::RenderSlider::RenderSlider): Use new flexbox.
(WebCore::RenderSlider::layout): Set the limiter size to the size of the thumb. This is necessary
for fast/css/unknown-pseudo-element-matching.html which tries to set the height of the thumb to 1px
and expects the input to also have a height of 1px.  It worked before because the height of the input
didn't depend on the height of its children.
* rendering/RenderSlider.h: Fix indentation.
(RenderSlider): Use new flexible box.

LayoutTests:

Changing the render tree to use RenderFlexibleBox instead of RenderDeprecatedFlexibleBox
and not using a RenderLayer unless noted otherwise.

* css3/flexbox/flexitem-stretch-range-expected.html: Added.
* css3/flexbox/flexitem-stretch-range.html: Added. New test to verify stretched flex item has the
thumb in the correct place.
* platform/chromium-linux/fast/dom/HTMLInputElement/input-slider-update-expected.txt:
* platform/chromium-linux/fast/dom/HTMLInputElement/input-slider-update-styled-expected.txt:
* platform/chromium-linux/fast/forms/box-shadow-override-expected.txt:
* platform/chromium-linux/fast/forms/datalist/input-appearance-range-with-datalist-expected.png: Changed the default height to
129px for vertical controls. This makes more sense than having a height of 100%.
* platform/chromium-linux/fast/forms/input-appearance-height-expected.txt:
* platform/chromium-linux/fast/forms/range/input-appearance-range-expected.png: The thumb now appears below the
focus ring. This matches other form controls like buttons and textareas.
* platform/chromium-linux/fast/forms/range/input-appearance-range-expected.txt:
* platform/chromium-linux/fast/forms/range/range-thumb-height-percentage-expected.txt:
* platform/chromium-linux/fast/forms/range/slider-padding-expected.txt:
* platform/chromium-linux/fast/forms/range/slider-thumb-shared-style-expected.txt:
* platform/chromium-linux/fast/forms/range/slider-thumb-stylability-expected.txt:
* platform/chromium-linux/fast/hidpi/video-controls-in-hidpi-expected.txt:
* platform/chromium-linux/fast/multicol/client-rects-expected.txt:
* platform/chromium-linux/fast/repaint/slider-thumb-drag-release-expected.txt:
* platform/chromium-linux/fast/repaint/slider-thumb-float-expected.txt:
* platform/chromium-linux/media/track/track-cue-rendering-vertical-expected.txt:
* platform/chromium-win/fast/layers/video-layer-expected.txt:
* platform/chromium-win/media/audio-controls-rendering-expected.txt:
* platform/chromium-win/media/audio-repaint-expected.txt:
* platform/chromium-win/media/controls-after-reload-expected.txt:
* platform/chromium-win/media/controls-strict-expected.txt:
* platform/chromium-win/media/controls-styling-expected.txt:
* platform/chromium-win/media/controls-styling-strict-expected.txt:
* platform/chromium-win/media/controls-without-preload-expected.txt:
* platform/chromium-win/media/media-controls-clone-expected.txt:
* platform/chromium-win/media/media-document-audio-repaint-expected.txt:
* platform/chromium-win/media/track/track-cue-rendering-horizontal-expected.txt:
* platform/chromium-win/media/video-controls-rendering-expected.txt:
* platform/chromium-win/media/video-display-toggle-expected.txt:
* platform/chromium-win/media/video-empty-source-expected.txt:
* platform/chromium-win/media/video-no-audio-expected.txt:
* platform/chromium-win/media/video-playing-and-pause-expected.txt:
* platform/chromium-win/media/video-zoom-controls-expected.txt:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@131367 268f45cc-cd09-0410-ab3c-d52691b4dbfc
51 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/flexbox/flexitem-stretch-range-expected.html [new file with mode: 0644]
LayoutTests/css3/flexbox/flexitem-stretch-range.html [new file with mode: 0644]
LayoutTests/platform/chromium-linux/fast/dom/HTMLInputElement/input-slider-update-expected.txt
LayoutTests/platform/chromium-linux/fast/dom/HTMLInputElement/input-slider-update-styled-expected.txt
LayoutTests/platform/chromium-linux/fast/forms/box-shadow-override-expected.txt
LayoutTests/platform/chromium-linux/fast/forms/datalist/input-appearance-range-with-datalist-expected.png
LayoutTests/platform/chromium-linux/fast/forms/input-appearance-height-expected.txt
LayoutTests/platform/chromium-linux/fast/forms/range/input-appearance-range-expected.png
LayoutTests/platform/chromium-linux/fast/forms/range/input-appearance-range-expected.txt
LayoutTests/platform/chromium-linux/fast/forms/range/range-thumb-height-percentage-expected.txt
LayoutTests/platform/chromium-linux/fast/forms/range/slider-padding-expected.txt
LayoutTests/platform/chromium-linux/fast/forms/range/slider-thumb-shared-style-expected.txt
LayoutTests/platform/chromium-linux/fast/forms/range/slider-thumb-stylability-expected.txt
LayoutTests/platform/chromium-linux/fast/hidpi/video-controls-in-hidpi-expected.txt
LayoutTests/platform/chromium-linux/fast/multicol/client-rects-expected.txt
LayoutTests/platform/chromium-linux/fast/repaint/slider-thumb-drag-release-expected.txt
LayoutTests/platform/chromium-linux/fast/repaint/slider-thumb-float-expected.txt
LayoutTests/platform/chromium-linux/media/track/track-cue-rendering-vertical-expected.txt
LayoutTests/platform/chromium-win/fast/layers/video-layer-expected.txt
LayoutTests/platform/chromium-win/media/audio-controls-rendering-expected.txt
LayoutTests/platform/chromium-win/media/audio-repaint-expected.txt
LayoutTests/platform/chromium-win/media/controls-after-reload-expected.txt
LayoutTests/platform/chromium-win/media/controls-strict-expected.txt
LayoutTests/platform/chromium-win/media/controls-styling-expected.txt
LayoutTests/platform/chromium-win/media/controls-styling-strict-expected.txt
LayoutTests/platform/chromium-win/media/controls-without-preload-expected.txt
LayoutTests/platform/chromium-win/media/media-controls-clone-expected.txt
LayoutTests/platform/chromium-win/media/media-document-audio-repaint-expected.txt
LayoutTests/platform/chromium-win/media/track/track-cue-rendering-horizontal-expected.txt
LayoutTests/platform/chromium-win/media/video-controls-rendering-expected.txt
LayoutTests/platform/chromium-win/media/video-display-toggle-expected.txt
LayoutTests/platform/chromium-win/media/video-empty-source-expected.txt
LayoutTests/platform/chromium-win/media/video-no-audio-expected.txt
LayoutTests/platform/chromium-win/media/video-playing-and-pause-expected.txt
LayoutTests/platform/chromium-win/media/video-zoom-controls-expected.txt
LayoutTests/platform/chromium/TestExpectations
LayoutTests/platform/efl/TestExpectations
LayoutTests/platform/gtk/TestExpectations
LayoutTests/platform/mac/TestExpectations
LayoutTests/platform/qt/TestExpectations
LayoutTests/platform/win/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/css/html.css
Source/WebCore/css/mediaControlsChromium.css
Source/WebCore/css/mediaControlsChromiumAndroid.css
Source/WebCore/html/RangeInputType.cpp
Source/WebCore/html/shadow/SliderThumbElement.cpp
Source/WebCore/html/shadow/SliderThumbElement.h
Source/WebCore/rendering/RenderSlider.cpp
Source/WebCore/rendering/RenderSlider.h