Skip to content
  • tony@chromium.org's avatar
    input[type=range] as a flex item renders thumb at wrong position · 95a91acb
    tony@chromium.org authored
    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@131497 268f45cc-cd09-0410-ab3c-d52691b4dbfc
    95a91acb