New media playback UI.

LayoutTests/media/controls-volume-slider.html

Index: LayoutTests/media/controls-volume-slider.html
diff --git a/LayoutTests/media/controls-volume-slider.html b/LayoutTests/media/controls-volume-slider.html
index 4bd7497e739bee737b04bdbc1028269e23e8a0c5..44f2f4baae96d86292b5fda8dd86046a8d507235 100644
--- a/LayoutTests/media/controls-volume-slider.html
+++ b/LayoutTests/media/controls-volume-slider.html
@@ -14,14 +14,20 @@
             testExpected("audio.volume", 1);
             waitForEvent("loadedmetadata", function()
             {
-                // click the middle of the volume slider
-                var coords = mediaControlsButtonCoordinates(audio, "volume-slider");
+                // Click at 25% of the volume slider, to avoid hitting

[philipj_slow, 2015/07/08 10:31:51]

Perhaps this isn't a new bug, but now that the area is bigger, it's quite
noticeable and annoying that one can't click even slightly outside the blue
circle to seek. Clicking and then dragging a pixel does work, so it has a
glitchy feeling to it. Can the behavior be changed instead of the test?

[liberato (no reviews please), 2015/07/09 12:10:53]

sounds good.

[liberato (no reviews please), 2015/07/14 22:10:36]

done.

+                // the thumb touch rectangle.  That would cause no
+                // slider movement.
+                var slider = mediaControlsButton(audio, "volume-slider");
+                var boundingRect = slider.getBoundingClientRect();
+                coords = [ boundingRect.left + boundingRect.width * 0.25,
+                           boundingRect.top + boundingRect.height / 2 ];
+
                 eventSender.mouseMoveTo(coords[0], coords[1]);
                 eventSender.mouseDown();
                 eventSender.mouseUp();
 
-                testExpected("audio.volume", 0.4, '>');
-                testExpected("audio.volume", 0.6, '<');
+                testExpected("audio.volume", 0.15, '>');
+                testExpected("audio.volume", 0.35, '<');
                 waitForEventAndEnd("volumechange");
             });
         </script>