slider-thumb-float.html | Explore in Territory

<html>
<head>
<style>

input {
    float: left;
    -webkit-appearance: none;
    background-color: Red;
    height: 10px;
    width: 100px;
}

input::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: Green;
    width: 10px;
    height: 10px;
}

</style>
<script>

// Tests that the slider thumb is repainted correctly when the input element
// is floated.

function clickAndDrag(element)
{
    if (!window.eventSender)
        return;

    var maxX = element.offsetLeft + element.offsetWidth;
    var x = maxX / 2;
    var y = element.offsetTop + element.offsetHeight / 2;
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.mouseMoveTo(maxX, y);
    eventSender.mouseUp();
}

function runTest()
{
    clickAndDrag(document.getElementById('slider'));
}

</script>
</head>
<body onload="runTest()">
<input id="slider" type="range" value="0">
</body>
</html>

chromium/third_party/blink/web_tests/paint/invalidation/forms/slider-thumb-float.html