Simplify volume slider rendering
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 23 Apr 2012 22:41:01 +0000 (22:41 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 23 Apr 2012 22:41:01 +0000 (22:41 +0000)
https://bugs.webkit.org/show_bug.cgi?id=82150

Patch by Victor Carbune <vcarbune@adobe.com> on 2012-04-23
Reviewed by Eric Carlson.

Source/WebCore:

Test: media/video-controls-rendering-toggle-display-none.html

* css/mediaControlsChromium.css: Update controls css for Chromium.
(audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel):
(audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button):
(audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container):
* css/mediaControlsGtk.css: Update controls css for GTK.
(audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button):
(audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container):
* css/mediaControlsQuickTime.css: Update controls css for Safari.
(audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button):
(audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container):
(audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider):
* html/shadow/MediaControlElements.cpp: Removed particular renderer.
(WebCore):
* html/shadow/MediaControlElements.h:
(MediaControlVolumeSliderContainerElement): Remoed particular renderer.
* html/shadow/MediaControlRootElement.cpp:
(WebCore::MediaControlRootElement::create): Added a div element as a container. Removed extra unused mute button.
* html/shadow/MediaControlRootElementChromium.cpp: Added an extra div
element as a container for the mute button and the volume slider to
easily position them relative to each other.
(WebCore::MediaControlRootElementChromium::create):

LayoutTests:

Added new TEXT baselines for Mac.
Baselines for GTK and Chromium need to be re-generated as well.

* media/video-controls-rendering-toggle-display-none-expected.txt: Added.
* media/video-controls-rendering-toggle-display-none.html: Added.
* platform/chromium/test_expectations.txt: Updated test expectations
* platform/gtk/test_expectations.txt: Updated test expectations.
Commented out a duplicate test marked as CRASH because otherwise cq complains.
* platform/mac/fast/hidpi/video-controls-in-hidpi-expected.txt: Updated.
* platform/mac/media/audio-controls-rendering-expected.txt: Updated.
* platform/mac/media/audio-repaint-expected.txt: Updated.
* platform/mac/media/controls-after-reload-expected.txt: Updated.
* platform/mac/media/controls-strict-expected.txt: Updated.
* platform/mac/media/media-controls-clone-expected.txt: Updated.
* platform/mac/media/video-controls-rendering-expected.txt: Updated.
* platform/mac/media/video-display-toggle-expected.txt: Updated.
* platform/mac/media/video-no-audio-expected.txt: Updated.
* platform/mac/media/video-playing-and-pause-expected.txt: Updated.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@114957 268f45cc-cd09-0410-ab3c-d52691b4dbfc

23 files changed:
LayoutTests/ChangeLog
LayoutTests/media/video-controls-rendering-toggle-display-none-expected.txt [new file with mode: 0644]
LayoutTests/media/video-controls-rendering-toggle-display-none.html [new file with mode: 0644]
LayoutTests/platform/chromium/test_expectations.txt
LayoutTests/platform/gtk/test_expectations.txt
LayoutTests/platform/mac/fast/hidpi/video-controls-in-hidpi-expected.txt
LayoutTests/platform/mac/media/audio-controls-rendering-expected.txt
LayoutTests/platform/mac/media/audio-repaint-expected.txt
LayoutTests/platform/mac/media/controls-after-reload-expected.txt
LayoutTests/platform/mac/media/controls-strict-expected.txt
LayoutTests/platform/mac/media/media-controls-clone-expected.txt
LayoutTests/platform/mac/media/video-controls-rendering-expected.txt
LayoutTests/platform/mac/media/video-display-toggle-expected.txt
LayoutTests/platform/mac/media/video-no-audio-expected.txt
LayoutTests/platform/mac/media/video-playing-and-pause-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/css/mediaControlsChromium.css
Source/WebCore/css/mediaControlsGtk.css
Source/WebCore/css/mediaControlsQuickTime.css
Source/WebCore/html/shadow/MediaControlElements.cpp
Source/WebCore/html/shadow/MediaControlElements.h
Source/WebCore/html/shadow/MediaControlRootElement.cpp
Source/WebCore/html/shadow/MediaControlRootElementChromium.cpp

index 9208752..f8139cd 100644 (file)
@@ -1,3 +1,29 @@
+2012-04-23  Victor Carbune  <vcarbune@adobe.com>
+
+        Simplify volume slider rendering
+        https://bugs.webkit.org/show_bug.cgi?id=82150
+
+        Reviewed by Eric Carlson.
+
+        Added new TEXT baselines for Mac.
+        Baselines for GTK and Chromium need to be re-generated as well.
+
+        * media/video-controls-rendering-toggle-display-none-expected.txt: Added.
+        * media/video-controls-rendering-toggle-display-none.html: Added.
+        * platform/chromium/test_expectations.txt: Updated test expectations
+        * platform/gtk/test_expectations.txt: Updated test expectations.
+        Commented out a duplicate test marked as CRASH because otherwise cq complains.
+        * platform/mac/fast/hidpi/video-controls-in-hidpi-expected.txt: Updated.
+        * platform/mac/media/audio-controls-rendering-expected.txt: Updated.
+        * platform/mac/media/audio-repaint-expected.txt: Updated.
+        * platform/mac/media/controls-after-reload-expected.txt: Updated.
+        * platform/mac/media/controls-strict-expected.txt: Updated.
+        * platform/mac/media/media-controls-clone-expected.txt: Updated.
+        * platform/mac/media/video-controls-rendering-expected.txt: Updated.
+        * platform/mac/media/video-display-toggle-expected.txt: Updated.
+        * platform/mac/media/video-no-audio-expected.txt: Updated.
+        * platform/mac/media/video-playing-and-pause-expected.txt: Updated.
+
 2012-04-23  Filip Pizlo  <fpizlo@apple.com>
 
         DFG must keep alive values that it will perform speculations on
diff --git a/LayoutTests/media/video-controls-rendering-toggle-display-none-expected.txt b/LayoutTests/media/video-controls-rendering-toggle-display-none-expected.txt
new file mode 100644 (file)
index 0000000..39c9b31
--- /dev/null
@@ -0,0 +1,9 @@
+Tests that the video controls are properly rendered when the display none is set and unset.
+
+** The volume slider should have almost the same left offset as the mute button **
+EXPECTED (volumeSliderElement.offsetLeft >= muteButtonElement.offsetLeft - threshold == 'true') OK
+EXPECTED (volumeSliderElement.offsetLeft <= muteButtonElement.offsetLeft + threshold == 'true') OK
+
+** The volume slider should be on top of the mute button **
+EXPECTED (volumeSliderElement.offsetTop < muteButtonElement.offsetTop == 'true') OK
+
diff --git a/LayoutTests/media/video-controls-rendering-toggle-display-none.html b/LayoutTests/media/video-controls-rendering-toggle-display-none.html
new file mode 100644 (file)
index 0000000..aacf67f
--- /dev/null
@@ -0,0 +1,70 @@
+<html>
+<head>
+    <title>Test rendering of volume slider of video tag</title>
+    <script src=media-file.js></script>
+    <script src=media-controls.js></script>
+    <script src=video-test.js></script>
+    <script>
+        var video;
+        var panel;
+        var threshold = 2;
+
+        var muteButtonCoordinates;
+        var volumeSliderCoordinates;
+
+        var volumeSliderElement;
+        var muteButtonElement;
+
+        function init()
+        {
+            video = document.getElementsByTagName("video")[0];
+            video.src = findMediaFile("video", "content/test");
+        }
+
+        function test()
+        {
+            if (window.eventSender) {
+                try {
+                    muteButtonCoordinates = mediaControlsButtonCoordinates(video, "mute-button");
+                    volumeSliderCoordinates = mediaControlsButtonCoordinates(video, "volume-slider-container");
+                } catch (exception) {
+                    layoutTestController.notifyDone();
+                    return;
+                }
+
+                eventSender.mouseMoveTo(muteButtonCoordinates[0], muteButtonCoordinates[1]);
+            }
+
+            panel = mediaControlsElement(internals.shadowRoot(video).firstChild, "-webkit-media-controls-panel");
+            volumeSliderElement = mediaControlsElement(internals.shadowRoot(video).firstChild, "-webkit-media-controls-volume-slider-container");
+            muteButtonElement = mediaControlsElement(internals.shadowRoot(video).firstChild, "-webkit-media-controls-mute-button");
+
+
+            // Ensure paint with display property set to "none".
+            panel.style.display = "none";
+            document.body.offsetTop;
+
+            // Ensure (re)paint with default display property.
+            panel.style.removeProperty("display");
+            document.body.offsetTop;
+
+            // Test that the left offset of both controls is equal.
+            consoleWrite("");
+            consoleWrite("** The volume slider should have almost the same left offset as the mute button **");
+            testExpected("volumeSliderElement.offsetLeft >= muteButtonElement.offsetLeft - threshold", true);
+            testExpected("volumeSliderElement.offsetLeft <= muteButtonElement.offsetLeft + threshold", true);
+
+            consoleWrite("");
+            consoleWrite("** The volume slider should be on top of the mute button **");
+            testExpected("volumeSliderElement.offsetTop < muteButtonElement.offsetTop", true);
+
+            layoutTestController.notifyDone();
+        }
+    </script>
+</head>
+<body onload="init()">
+    Tests that the video controls are properly rendered when the display none is set and unset.<br>
+
+    <video oncanplaythrough="test()" controls preload="true"></video>
+</body>
+</html>
index 9ca1ef4..0c5d0e8 100644 (file)
@@ -3422,6 +3422,24 @@ BUGWK81931 SNOWLEOPARD DEBUG : fast/images/destroyed-image-load-event.html = PAS
 BUGWK37244 : tables/mozilla/bugs/bug27038-1.html = IMAGE+TEXT
 BUGWK37244 : tables/mozilla/bugs/bug27038-2.html = IMAGE+TEXT
 
+// Need rebaselining.
+BUGWK82150 : media/media-document-audio-repaint.html = TEXT
+BUGWK82150 : media/video-no-audio.html = TEXT
+BUGWK82150 : media/controls-strict.html = TEXT
+BUGWK82150 : media/video-volume-slider.html = TEXT
+BUGWK82150 : media/controls-styling.html = TEXT
+BUGWK82150 : media/video-display-toggle.html = TEXT
+BUGWK82150 : media/audio-repaint.html = TEXT
+BUGWK82150 : media/audio-controls-rendering.html = TEXT
+BUGWK82150 : media/video-zoom-controls.html = TEXT
+BUGWK82150 : media/video-controls-rendering.html = TEXT
+BUGWK82150 : media/controls-without-preload.html = TEXT
+BUGWK82150 : media/media-controls-clone.html = TEXT
+BUGWK82150 : fast/layers/video-layer.html = TEXT
+BUGWK82150 : media/video-empty-source.html = TEXT
+BUGWK82150 : media/video-playing-and-pause.html = TEXT
+BUGWK82150 : media/controls-after-reload.html = TEXT
+
 // New test, flaky since added in r110965.
 BUGWK82097 : editing/selection/move-by-word-visually-crash-test-5.html = PASS TIMEOUT
 
index abcd4ce..12a7e6c 100644 (file)
@@ -310,7 +310,7 @@ BUGWK67007 DEBUG : fast/ruby/generated-before-and-after-counter-doesnt-crash.htm
 BUGWK76814 DEBUG : fast/xmlhttprequest/xmlhttprequest-get.xhtml = CRASH
 
 BUGWK74297 : http/tests/security/cross-origin-xsl-redirect-BLOCKED.html = PASS CRASH
-BUGWK83679 DEBUG : editing/undo/undo-smart-delete-reversed-selection.html = CRASH
+// BUGWK83679 DEBUG : editing/undo/undo-smart-delete-reversed-selection.html = CRASH
 
 // Crashes on GStreamer side when loading one of the media elements of the test.
 BUGWK50155 : fast/events/tabindex-focus-blur-all.html = CRASH
@@ -1544,6 +1544,16 @@ BUGWK73744 : fast/table/td-width-fifty-percent-regression.html = FAIL
 
 BUGWK84378 : media/track/track-cue-rendering-snap-to-lines-not-set.html = FAIL
 
+// Need new baselines.
+BUGWK82150 : media/audio-controls-rendering.html = TEXT
+BUGWK82150 : media/audio-repaint.html = TEXT
+BUGWK82150 : media/controls-strict.html = TEXT
+BUGWK82150 : media/controls-styling.html = TEXT
+BUGWK82150 : media/controls-without-preload.html = TEXT
+BUGWK82150 : media/media-controls-clone.html = TEXT
+BUGWK82150 : media/media-document-audio-repaint.html = TEXT
+BUGWK82150 : media/video-controls-rendering.html = TEXT
+
 //////////////////////////////////////////////////////////////////////////////////////////
 // End of Tests failing
 //////////////////////////////////////////////////////////////////////////////////////////
index 53a63c2..d91b5c8 100644 (file)
@@ -16,3 +16,4 @@ layer at (8,151) size 300x25
   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,125) size 300x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x16
+    RenderBlock {DIV} at (49,12) size 0x0
index 507984e..7e7ac0b 100644 (file)
@@ -33,9 +33,11 @@ layer at (8,42) size 200x25
         RenderBlock (anonymous) at (7,0) size 31x11
           RenderText {#text} at (0,0) size 31x11
             text run at (0,0) width 31: "-00:07"
-    RenderButton {INPUT} at (177,6) size 14x12
+    RenderBlock {DIV} at (175,6) size 25x12
 layer at (57,51) size 10x8
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
+layer at (185,48) size 14x12
+  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
 layer at (8,85) size 320x25
   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x25
 layer at (8,85) size 320x25
@@ -55,9 +57,11 @@ layer at (8,85) size 320x25
         RenderBlock (anonymous) at (7,0) size 31x11
           RenderText {#text} at (0,0) size 31x11
             text run at (0,0) width 31: "-00:07"
-    RenderButton {INPUT} at (297,6) size 14x12
+    RenderBlock {DIV} at (295,6) size 25x12
 layer at (102,94) size 10x8
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
+layer at (305,91) size 14x12
+  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
 layer at (8,128) size 320x100
   RenderMedia {AUDIO} at (8,128) size 320x100 [bgcolor=#0000FF]
 layer at (8,128) size 320x100
@@ -79,6 +83,8 @@ layer at (8,203) size 320x25
         RenderBlock (anonymous) at (7,0) size 31x11
           RenderText {#text} at (0,0) size 31x11
             text run at (0,0) width 31: "-00:07"
-    RenderButton {INPUT} at (297,6) size 14x12
+    RenderBlock {DIV} at (295,6) size 25x12
 layer at (102,212) size 10x8
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
+layer at (305,209) size 14x12
+  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
index 67600a3..69de5ca 100644 (file)
@@ -33,9 +33,11 @@ layer at (8,67) size 200x25
         RenderBlock (anonymous) at (7,0) size 31x11
           RenderText {#text} at (0,0) size 31x11
             text run at (0,0) width 31: "-00:00"
-    RenderButton {INPUT} at (177,6) size 14x12
+    RenderBlock {DIV} at (175,6) size 25x12
 layer at (114,76) size 10x8
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
+layer at (185,73) size 14x12
+  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
 layer at (8,42) size 200x25
   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 200x25
 layer at (8,42) size 200x25
@@ -55,9 +57,11 @@ layer at (8,42) size 200x25
         RenderBlock (anonymous) at (7,0) size 31x11
           RenderText {#text} at (0,0) size 31x11
             text run at (0,0) width 31: "-00:00"
-    RenderButton {INPUT} at (177,6) size 14x12
+    RenderBlock {DIV} at (175,6) size 25x12
 layer at (114,51) size 10x8
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
+layer at (185,48) size 14x12
+  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
 layer at (8,144) size 200x25
   RenderMedia {AUDIO} at (0,102) size 200x25
 layer at (8,144) size 200x25
@@ -79,6 +83,8 @@ layer at (8,144) size 200x25
         RenderBlock (anonymous) at (7,0) size 31x11
           RenderText {#text} at (0,0) size 31x11
             text run at (0,0) width 31: "-00:00"
-    RenderButton {INPUT} at (177,6) size 14x12
+    RenderBlock {DIV} at (175,6) size 25x12
 layer at (114,153) size 10x8
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
+layer at (185,150) size 14x12
+  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
index eb2d4f3..ebbc016 100644 (file)
@@ -30,6 +30,8 @@ layer at (8,257) size 320x25
           RenderText {#text} at (0,0) size 31x11
             text run at (0,0) width 31: "-00:06"
     RenderButton {INPUT} at (297,4) size 16x16
-    RenderButton {INPUT} at (267,6) size 14x12
+    RenderBlock {DIV} at (265,6) size 25x12
 layer at (102,266) size 10x8
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
+layer at (275,263) size 14x12
+  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
index 84de008..5acc479 100644 (file)
@@ -30,6 +30,8 @@ layer at (8,265) size 320x25
           RenderText {#text} at (0,0) size 31x11
             text run at (0,0) width 31: "-00:06"
     RenderButton {INPUT} at (297,4) size 16x16
-    RenderButton {INPUT} at (267,6) size 14x12
+    RenderBlock {DIV} at (265,6) size 25x12
 layer at (102,274) size 10x8
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
+layer at (275,271) size 14x12
+  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
index a4b7a13..4b37b28 100644 (file)
@@ -17,21 +17,25 @@ layer at (8,133) size 300x25
   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,125) size 300x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x16
+    RenderBlock {DIV} at (49,12) size 0x0
 layer at (308,133) size 200x25
   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 200x25
 layer at (308,133) size 200x25
   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 200x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x16
+    RenderBlock {DIV} at (49,12) size 0x0
 layer at (8,162) size 300x150
   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x150
 layer at (8,287) size 300x25
   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,125) size 300x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x16
+    RenderBlock {DIV} at (49,12) size 0x0
 layer at (308,287) size 200x25
   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 200x25
 layer at (308,287) size 200x25
   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 200x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x16
+    RenderBlock {DIV} at (49,12) size 0x0
index 49006fb..c0cd14e 100644 (file)
@@ -35,9 +35,11 @@ layer at (8,257) size 320x25
           RenderText {#text} at (0,0) size 31x11
             text run at (0,0) width 31: "-00:06"
     RenderButton {INPUT} at (297,4) size 16x16
-    RenderButton {INPUT} at (267,6) size 14x12
+    RenderBlock {DIV} at (265,6) size 25x12
 layer at (102,266) size 10x8
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
+layer at (275,263) size 14x12
+  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
 layer at (8,282) size 320x240
   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
 layer at (8,497) size 320x25
@@ -58,9 +60,11 @@ layer at (8,497) size 320x25
           RenderText {#text} at (0,0) size 31x11
             text run at (0,0) width 31: "-00:06"
     RenderButton {INPUT} at (297,4) size 16x16
-    RenderButton {INPUT} at (267,6) size 14x12
+    RenderBlock {DIV} at (265,6) size 25x12
 layer at (102,506) size 10x8
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
+layer at (275,503) size 14x12
+  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
 layer at (8,522) size 320x240
   RenderVideo {VIDEO} at (8,522) size 320x240
 layer at (8,522) size 320x240
@@ -83,6 +87,8 @@ layer at (8,737) size 320x25
           RenderText {#text} at (0,0) size 31x11
             text run at (0,0) width 31: "-00:06"
     RenderButton {INPUT} at (297,4) size 16x16
-    RenderButton {INPUT} at (267,6) size 14x12
+    RenderBlock {DIV} at (265,6) size 25x12
 layer at (102,746) size 10x8
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
+layer at (275,743) size 14x12
+  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
index 553b60c..5b9a804 100644 (file)
@@ -29,6 +29,8 @@ layer at (8,241) size 320x25
           RenderText {#text} at (0,0) size 31x11
             text run at (0,0) width 31: "-00:06"
     RenderButton {INPUT} at (297,4) size 16x16
-    RenderButton {INPUT} at (267,6) size 14x12
+    RenderBlock {DIV} at (265,6) size 25x12
 layer at (102,250) size 10x8
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
+layer at (275,247) size 14x12
+  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
index 1700e17..0209502 100644 (file)
@@ -30,5 +30,6 @@ layer at (8,305) size 352x25
           RenderText {#text} at (0,0) size 31x11
             text run at (0,0) width 31: "-00:09"
     RenderButton {INPUT} at (329,4) size 16x16
+    RenderBlock {DIV} at (322,12) size 0x0
 layer at (102,314) size 10x8
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
index 3e9d461..33c6f6f 100644 (file)
@@ -31,6 +31,8 @@ layer at (8,283) size 320x25
           RenderText {#text} at (0,0) size 31x11
             text run at (0,0) width 31: "-00:06"
     RenderButton {INPUT} at (297,4) size 16x16
-    RenderButton {INPUT} at (267,6) size 14x12
+    RenderBlock {DIV} at (265,6) size 25x12
 layer at (102,292) size 10x8
   RenderBlock (relative positioned) {DIV} at (0,0) size 10x8
+layer at (275,289) size 14x12
+  RenderButton zI: 2 {INPUT} at (2,0) size 14x12
index e9be46c..d765239 100644 (file)
@@ -1,3 +1,34 @@
+2012-04-23  Victor Carbune  <vcarbune@adobe.com>
+
+        Simplify volume slider rendering
+        https://bugs.webkit.org/show_bug.cgi?id=82150
+
+        Reviewed by Eric Carlson.
+
+        Test: media/video-controls-rendering-toggle-display-none.html
+
+        * css/mediaControlsChromium.css: Update controls css for Chromium.
+        (audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel):
+        (audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button):
+        (audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container):
+        * css/mediaControlsGtk.css: Update controls css for GTK.
+        (audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button):
+        (audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container):
+        * css/mediaControlsQuickTime.css: Update controls css for Safari.
+        (audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button):
+        (audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container):
+        (audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider):
+        * html/shadow/MediaControlElements.cpp: Removed particular renderer.
+        (WebCore):
+        * html/shadow/MediaControlElements.h:
+        (MediaControlVolumeSliderContainerElement): Remoed particular renderer.
+        * html/shadow/MediaControlRootElement.cpp:
+        (WebCore::MediaControlRootElement::create): Added a div element as a container. Removed extra unused mute button.
+        * html/shadow/MediaControlRootElementChromium.cpp: Added an extra div
+        element as a container for the mute button and the volume slider to
+        easily position them relative to each other.
+        (WebCore::MediaControlRootElementChromium::create):
+
 2012-04-23  Sheriff Bot  <webkit.review.bot@gmail.com>
 
         Unreviewed, rolling out r109981.
index 5fb62cc..7323f2a 100644 (file)
@@ -41,6 +41,7 @@ audio:-webkit-full-page-media, video:-webkit-full-page-media {
 
 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
     -webkit-user-select: none;
+    -webkit-box-pack: end;
     position: relative;
     overflow: visible;
     bottom: 0;
@@ -54,9 +55,13 @@ video:-webkit-full-page-media::-webkit-media-controls-panel {
     bottom: 0px;
 }
 
+audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
+    -webkit-box-align: end;
+}
+
 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
     -webkit-appearance: media-mute-button;
-    position: absolute;
+    position: relative;
     top: auto;
     bottom: 0;
     right: 0;
@@ -149,7 +154,7 @@ audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
 
 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
     -webkit-appearance: media-volume-slider-container;
-    position: absolute;
+    position: relative;
 
     width: 34px;
     height: 100px;
index aba4412..303b429 100644 (file)
@@ -42,6 +42,8 @@ audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
     width: 20px;
     height: 20px;
+    position: relative;
+    z-index: 2;
 }
 
 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
@@ -91,6 +93,8 @@ audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-cont
     position: absolute;
     height: 100px;
     width: 20px;
+    bottom: 20px;
+    z-index: 1;
 }
 
 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
index 5866a91..a7e5f41 100644 (file)
@@ -48,6 +48,9 @@ audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu
     margin-left: 2px;
     margin-right: 9px;
     border: none !important;
+
+    position: relative;
+    z-index: 2;
 }
 
 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
@@ -200,8 +203,8 @@ audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-cont
     -webkit-appearance: media-volume-slider-container;
     position: absolute;
 
-    top: 0;
-    left: 0;
+    bottom: 0px;
+    z-index: 1;
 
     width: 22px;
     height: 114px;
@@ -218,16 +221,3 @@ audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum
     width: 10px;
     height: 80px;
 }
-
-audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button {
-    -webkit-appearance: media-volume-slider-mute-button;
-    display: inline;
-    position: absolute;
-
-    bottom: 5px;
-    left: 4px;
-
-    width: 14px;
-    height: 12px;
-    border: none !important;
-} 
index 114c789..f1cffa0 100644 (file)
@@ -319,34 +319,6 @@ const AtomicString& MediaControlTimelineContainerElement::shadowPseudoId() const
 
 // ----------------------------
 
-class RenderMediaVolumeSliderContainer : public RenderBlock {
-public:
-    RenderMediaVolumeSliderContainer(Node*);
-
-private:
-    virtual void layout();
-};
-
-RenderMediaVolumeSliderContainer::RenderMediaVolumeSliderContainer(Node* node)
-    : RenderBlock(node)
-{
-}
-
-void RenderMediaVolumeSliderContainer::layout()
-{
-    RenderBlock::layout();
-    if (style()->display() == NONE || !previousSibling() || !previousSibling()->isBox())
-        return;
-
-    RenderBox* buttonBox = toRenderBox(previousSibling());
-
-    LayoutStateDisabler layoutStateDisabler(view());
-
-    IntPoint offset = theme()->volumeSliderOffsetFromMuteButton(buttonBox, pixelSnappedSize());
-    setX(offset.x() + buttonBox->offsetLeft());
-    setY(offset.y() + buttonBox->offsetTop());
-}
-
 inline MediaControlVolumeSliderContainerElement::MediaControlVolumeSliderContainerElement(Document* document)
     : MediaControlElement(document)
 {
@@ -359,11 +331,6 @@ PassRefPtr<MediaControlVolumeSliderContainerElement> MediaControlVolumeSliderCon
     return element.release();
 }
 
-RenderObject* MediaControlVolumeSliderContainerElement::createRenderer(RenderArena* arena, RenderStyle*)
-{
-    return new (arena) RenderMediaVolumeSliderContainer(this);
-}
-
 void MediaControlVolumeSliderContainerElement::defaultEventHandler(Event* event)
 {
     if (!event->isMouseEvent() || event->type() != eventNames().mouseoutEvent)
index 69a8491..530372b 100644 (file)
@@ -158,7 +158,6 @@ public:
 
 private:
     MediaControlVolumeSliderContainerElement(Document*);
-    virtual RenderObject* createRenderer(RenderArena*, RenderStyle*);
     virtual void defaultEventHandler(Event*);
     virtual MediaControlElementType displayType() const;
     virtual const AtomicString& shadowPseudoId() const;
index c9b996e..00e027d 100644 (file)
@@ -174,11 +174,8 @@ PassRefPtr<MediaControlRootElement> MediaControlRootElement::create(Document* do
     controls->m_fullScreenButton = fullScreenButton.get();
     panel->appendChild(fullScreenButton.release(), ec, true);
 
-    RefPtr<MediaControlPanelMuteButtonElement> panelMuteButton = MediaControlPanelMuteButtonElement::create(document, controls.get());
-    controls->m_panelMuteButton = panelMuteButton.get();
-    panel->appendChild(panelMuteButton.release(), ec, true);
-    if (ec)
-        return 0;
+    // The mute button and the slider element should be in the same div.
+    RefPtr<HTMLDivElement> panelVolumeControlContainer = HTMLDivElement::create(document);
 
     if (document->page()->theme()->usesMediaControlVolumeSlider()) {
         RefPtr<MediaControlVolumeSliderContainerElement> volumeSliderContainer = MediaControlVolumeSliderContainerElement::create(document);
@@ -189,18 +186,22 @@ PassRefPtr<MediaControlRootElement> MediaControlRootElement::create(Document* do
         if (ec)
             return 0;
 
-        RefPtr<MediaControlVolumeSliderMuteButtonElement> volumeSliderMuteButton = MediaControlVolumeSliderMuteButtonElement::create(document);
-        controls->m_volumeSliderMuteButton = volumeSliderMuteButton.get();
-        volumeSliderContainer->appendChild(volumeSliderMuteButton.release(), ec, true);
-        if (ec)
-            return 0;
-
         controls->m_volumeSliderContainer = volumeSliderContainer.get();
-        panel->appendChild(volumeSliderContainer.release(), ec, true);
+        panelVolumeControlContainer->appendChild(volumeSliderContainer.release(), ec, true);
         if (ec)
             return 0;
     }
 
+    RefPtr<MediaControlPanelMuteButtonElement> panelMuteButton = MediaControlPanelMuteButtonElement::create(document, controls.get());
+    controls->m_panelMuteButton = panelMuteButton.get();
+    panelVolumeControlContainer->appendChild(panelMuteButton.release(), ec, true);
+    if (ec)
+        return 0;
+
+    panel->appendChild(panelVolumeControlContainer, ec, true);
+    if (ec)
+        return 0;
+
     // FIXME: Only create when needed <http://webkit.org/b/57163>
     RefPtr<MediaControlFullscreenVolumeMinButtonElement> fullScreenMinVolumeButton = MediaControlFullscreenVolumeMinButtonElement::create(document);
     controls->m_fullScreenMinVolumeButton = fullScreenMinVolumeButton.get();
index bed2abb..dc498b8 100644 (file)
@@ -106,11 +106,7 @@ PassRefPtr<MediaControlRootElementChromium> MediaControlRootElementChromium::cre
     if (ec)
         return 0;
 
-    RefPtr<MediaControlPanelMuteButtonElement> panelMuteButton = MediaControlPanelMuteButtonElement::create(document, controls.get());
-    controls->m_panelMuteButton = panelMuteButton.get();
-    panel->appendChild(panelMuteButton.release(), ec, true);
-    if (ec)
-        return 0;
+    RefPtr<HTMLDivElement> panelVolumeControlContainer = HTMLDivElement::create(document);
 
     RefPtr<MediaControlVolumeSliderContainerElement> volumeSliderContainer = MediaControlVolumeSliderContainerElement::create(document);
 
@@ -121,7 +117,17 @@ PassRefPtr<MediaControlRootElementChromium> MediaControlRootElementChromium::cre
         return 0;
 
     controls->m_volumeSliderContainer = volumeSliderContainer.get();
-    panel->appendChild(volumeSliderContainer.release(), ec, true);
+    panelVolumeControlContainer->appendChild(volumeSliderContainer.release(), ec, true);
+    if (ec)
+        return 0;
+
+    RefPtr<MediaControlPanelMuteButtonElement> panelMuteButton = MediaControlPanelMuteButtonElement::create(document, controls.get());
+    controls->m_panelMuteButton = panelMuteButton.get();
+    panelVolumeControlContainer->appendChild(panelMuteButton.release(), ec, true);
+    if (ec)
+        return 0;
+
+    panel->appendChild(panelVolumeControlContainer, ec, true);
     if (ec)
         return 0;