<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>slider-transformed</title>
  <style type="text/css" media="screen">
    input[type="range"] {
      -webkit-transform-origin: top left;
      transform: rotate(45deg);
      width: 200px;
    }
    
    #results {
      margin-top: 160px;
    }
  </style>
  <script type="text/javascript" charset="utf-8">
    if (window.testRunner)
        testRunner.dumpAsText();

    function test()
    {
      // For some reason the slider needs mouseup/mousedown, not just a "click"
      if (window.eventSender) {
          eventSender.mouseMoveTo(61, 71);
          eventSender.mouseDown(0);
          eventSender.mouseUp(0);
      }

      const expectedValue = 39;
      var val = document.getElementById('slider').value;
      var result;
      if (val == expectedValue)
        result = "PASS: slider value set to " + expectedValue;
      else
        result = "FAIL: expected slider value " + expectedValue + ", got " + val;
      document.getElementById('results').innerHTML = result;
    }
  </script>
</head>
<body onload="test()">
  <input type="range" id="slider" min="0" max="100" value="10">
  <div id="results">
  </div>
</body>
</html>