[Webkit-unassigned] [Bug 56059] New: REGRESSION: A slider thumb that is styled cannot be programmatically moved

Wed Mar 9 16:12:27 PST 2011

https://bugs.webkit.org/show_bug.cgi?id=56059

           Summary: REGRESSION: A slider thumb that is styled cannot be
                    programmatically moved
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Macintosh Intel
        OS/Version: Mac OS X 10.6
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: Forms
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: piet at motorola.com
                CC: dglazkov at chromium.org

This is a regression that I noticed after Chrome upgraded from 9 to 10. I'm developing an application that displays videos using the <video> element and custom controls. After upgrading to Chrome 10, the slider that shows the current playback position and allows to do some fast scrubbing is no longer being updated when the movie is playing.

The bug is related to the styling of the thumb. If the thumb is not styled, it is correctly updated when the value is changed by script. If the thumb is styled, it does not move anymore when the value is changed.

To reproduce:
- Go to http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_range
- Enter the code below in the left frame
- Click "Edit and Click Me >>"
==> BUG: The custom-styled thumb does not move every second as it should.

- Then remove the style rule that matches the thumb ("input[type="range"]::-webkit-slider-thumb")
- Click "Edit and Click Me >>"
==> OK: The native-looking thumb moves when the value is updated by script.

- Restore the style rule and re-activate the commented code that toggles between "inline-block" and "inline"
- Click "Edit and Click Me >>"
==> WORKAROUND: The custom-styled thumb now moves correctly (but that's quite an ugly workaround)

CCd dglazkov who recently refactored the slider.

Here is the code:
========

<!DOCTYPE HTML>
<html>
<style>

input[type="range"] {
    -webkit-appearance: none;
    height: 10px;
    border-radius: 4px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), color-stop(0.4, #888), color-stop(0.6, #888), to(#444));
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 28px;
    border-radius: 4px;
    background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#222), color-stop(0.4, #888), color-stop(0.6, #888), to(#222));
}

</style>
<body>

Points: <input id="slider" type="range" min="0" max="10" />
<input type="submit" />

<script>
var slider = document.getElementById('slider');
slider.value = 0;
setTimeout("test()", 1000);

function test() {
var slider = document.getElementById('slider');
slider.value++;
//if (!(slider.value % 2))
//setTimeout("slider.style.display = 'inline-block'", 1);
//else
//setTimeout("slider.style.display = 'inline'", 1);
if (slider.value < 9)
    setTimeout("test()", 1000);
}
</script>
</body>
</html>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.