Source/WebCore: Source/WebCore: Mac: Media Controls always hide time display elements
authorjer.noble@apple.com <jer.noble@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 27 Mar 2013 16:43:02 +0000 (16:43 +0000)
committerjer.noble@apple.com <jer.noble@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 27 Mar 2013 16:43:02 +0000 (16:43 +0000)
https://bugs.webkit.org/show_bug.cgi?id=113355

Reviewed by Eric Carlson.

No new tests; rebaselined existing tests against correct behavior.

A prior commit set the "min-width:0" property on the time display elements, which, combined
with the "-webkit-flex-box:0 0" setting, caused the flex-box container to collapse the width
of the elements to zero. To achieve the desired effect of hiding the time display elements,
first set the elements' min-width to the desired width, as the new flex-box spec treats the
default value of "min-width:auto" as the intrinsic width, and will collapse the text display
elements to the intrinsic width of its contained text node.

The above allows the timeline container to collapse beyond the sum of its childrens'
intrinsic width. Create a custom renderer that detects when this happens, and hide the time
display controls.

* css/mediaControls.css:
* css/mediaControlsQuickTime.css:
(audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display):
    Set the "min-width:" property to equal the "width:" property.
(audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display):
    Ditto.
* css/mediaControlsChromium.css:
(audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display):
    Chromium assumes the time display controls are flex-boxes, so make that explicit.
* html/shadow/MediaControlElementTypes.cpp: Removed MediaControlTimeDisplayElement::createRenderer().
* html/shadow/MediaControlElementTypes.h:
(MediaControlTimeDisplayElement): Ditto.
* html/shadow/MediaControlElements.cpp:
(WebCore::MediaControlTimelineContainerElement::setTimeDisplaysHidden): Added, walks through the
    container's children and shows or hides time display elements.
(WebCore::MediaControlTimelineContainerElement::createRenderer): Added, creates a RenderMediaControlTimelineContainer.
(WebCore::getMediaControlTimeRemainingDisplayElementShadowPseudoId): Added, allow setTimeDisplaysHidden to
    query against children's shadowPseudoId().
(WebCore::MediaControlTimeRemainingDisplayElement::shadowPseudoId): Moved contents to getMediaControlTimeRemainingDisplayElementShadowPseudoId.
(WebCore::getMediaControlCurrentTimeDisplayElementShadowPseudoId): Added, allow setTimeDisplaysHidden to
    query against children's shadowPseudoId().
(WebCore::MediaControlCurrentTimeDisplayElement::shadowPseudoId): Moved contents to getMediaControlCurrentTimeDisplayElementShadowPseudoId.
* html/shadow/MediaControlElements.h:
(MediaControlTimelineContainerElement):
* rendering/RenderMediaControlElements.cpp:
(WebCore::RenderMediaControlTimelineContainer::RenderMediaControlTimelineContainer): Added, simple constructor.
(WebCore::RenderMediaControlTimelineContainer::layout): Detect when the controller's width is greater than
    a certain value, and show or hide the time display elements in response.
* rendering/RenderMediaControlElements.h:
(RenderMediaControlTimelineContainer):

LayoutTests: Mac: Media Controls always hide time display elements
https://bugs.webkit.org/show_bug.cgi?id=113355

Reviewed by Eric Carlson.

Rebaseline mac results.

* platform/mac/media/audio-controls-rendering-expected.png:
* platform/mac/media/audio-controls-rendering-expected.txt:
* platform/mac/media/controls-after-reload-expected.png:
* platform/mac/media/controls-after-reload-expected.txt:
* platform/mac/media/controls-strict-expected.png:
* platform/mac/media/controls-strict-expected.txt:
* platform/mac/media/controls-styling-strict-expected.png: Added.
* platform/mac/media/controls-styling-strict-expected.txt:
* platform/mac/media/controls-without-preload-expected.png:
* platform/mac/media/controls-without-preload-expected.txt:
* platform/mac/media/video-controls-rendering-expected.png:
* platform/mac/media/video-controls-rendering-expected.txt:
* platform/mac/media/video-display-toggle-expected.png:
* platform/mac/media/video-display-toggle-expected.txt:
* platform/mac/media/video-no-audio-expected.png:
* platform/mac/media/video-no-audio-expected.txt:
* platform/mac/media/video-playing-and-pause-expected.png:
* platform/mac/media/video-playing-and-pause-expected.txt:

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

28 files changed:
LayoutTests/ChangeLog
LayoutTests/platform/mac/media/audio-controls-rendering-expected.png
LayoutTests/platform/mac/media/audio-controls-rendering-expected.txt
LayoutTests/platform/mac/media/controls-after-reload-expected.png
LayoutTests/platform/mac/media/controls-after-reload-expected.txt
LayoutTests/platform/mac/media/controls-strict-expected.png
LayoutTests/platform/mac/media/controls-strict-expected.txt
LayoutTests/platform/mac/media/controls-styling-strict-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/media/controls-styling-strict-expected.txt
LayoutTests/platform/mac/media/controls-without-preload-expected.png
LayoutTests/platform/mac/media/controls-without-preload-expected.txt
LayoutTests/platform/mac/media/video-controls-rendering-expected.png
LayoutTests/platform/mac/media/video-controls-rendering-expected.txt
LayoutTests/platform/mac/media/video-display-toggle-expected.png
LayoutTests/platform/mac/media/video-display-toggle-expected.txt
LayoutTests/platform/mac/media/video-no-audio-expected.png
LayoutTests/platform/mac/media/video-no-audio-expected.txt
LayoutTests/platform/mac/media/video-playing-and-pause-expected.png
LayoutTests/platform/mac/media/video-playing-and-pause-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/css/mediaControlsChromium.css
Source/WebCore/css/mediaControlsQuickTime.css
Source/WebCore/html/shadow/MediaControlElementTypes.cpp
Source/WebCore/html/shadow/MediaControlElementTypes.h
Source/WebCore/html/shadow/MediaControlElements.cpp
Source/WebCore/html/shadow/MediaControlElements.h
Source/WebCore/rendering/RenderMediaControlElements.cpp
Source/WebCore/rendering/RenderMediaControlElements.h

index 93850c1..602188a 100644 (file)
@@ -1,3 +1,31 @@
+2013-03-27  Jer Noble  <jer.noble@apple.com>
+
+        Mac: Media Controls always hide time display elements
+        https://bugs.webkit.org/show_bug.cgi?id=113355
+
+        Reviewed by Eric Carlson.
+
+        Rebaseline mac results.
+
+        * platform/mac/media/audio-controls-rendering-expected.png:
+        * platform/mac/media/audio-controls-rendering-expected.txt:
+        * platform/mac/media/controls-after-reload-expected.png:
+        * platform/mac/media/controls-after-reload-expected.txt:
+        * platform/mac/media/controls-strict-expected.png:
+        * platform/mac/media/controls-strict-expected.txt:
+        * platform/mac/media/controls-styling-strict-expected.png: Added.
+        * platform/mac/media/controls-styling-strict-expected.txt:
+        * platform/mac/media/controls-without-preload-expected.png:
+        * platform/mac/media/controls-without-preload-expected.txt:
+        * platform/mac/media/video-controls-rendering-expected.png:
+        * platform/mac/media/video-controls-rendering-expected.txt:
+        * platform/mac/media/video-display-toggle-expected.png:
+        * platform/mac/media/video-display-toggle-expected.txt:
+        * platform/mac/media/video-no-audio-expected.png:
+        * platform/mac/media/video-no-audio-expected.txt:
+        * platform/mac/media/video-playing-and-pause-expected.png:
+        * platform/mac/media/video-playing-and-pause-expected.txt:
+
 2013-03-27  Chris Fleizach  <cfleizach@apple.com>
 
         Regression in tests due to https://bugs.webkit.org/show_bug.cgi?id=113339
index bf55bec..37b3529 100644 (file)
Binary files a/LayoutTests/platform/mac/media/audio-controls-rendering-expected.png and b/LayoutTests/platform/mac/media/audio-controls-rendering-expected.png differ
index 818e9b3..cd60b26 100644 (file)
@@ -35,11 +35,21 @@ layer at (8,85) size 320x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x17
     RenderFlexibleBox {DIV} at (49,5) size 246x15
-      RenderSlider {INPUT} at (0,2) size 246x13
-        RenderFlexibleBox {DIV} at (0,0) size 246x13
-          RenderBlock {DIV} at (0,2) size 246x9
+      RenderSlider {INPUT} at (45,2) size 156x13
+        RenderFlexibleBox {DIV} at (0,0) size 156x13
+          RenderBlock {DIV} at (0,2) size 156x9
             RenderBlock {DIV} at (0,0) size 10x8
     RenderBlock {DIV} at (295,6) size 25x13
+layer at (57,92) size 45x11
+  RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (9,0) size 27x11
+      RenderText {#text} at (0,0) size 26x11
+        text run at (0,0) width 26: "00:00"
+layer at (258,92) size 45x11
+  RenderFlexibleBox {DIV} at (201,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (7,0) size 31x11
+      RenderText {#text} at (0,0) size 31x11
+        text run at (0,0) width 31: "-00:07"
 layer at (305,92) size 14x12
   RenderButton zI: 1 {INPUT} at (2,0) size 14x12
 layer at (8,128) size 320x100
@@ -51,10 +61,20 @@ layer at (8,203) size 320x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x17
     RenderFlexibleBox {DIV} at (49,5) size 246x15
-      RenderSlider {INPUT} at (0,2) size 246x13
-        RenderFlexibleBox {DIV} at (0,0) size 246x13
-          RenderBlock {DIV} at (0,2) size 246x9
+      RenderSlider {INPUT} at (45,2) size 156x13
+        RenderFlexibleBox {DIV} at (0,0) size 156x13
+          RenderBlock {DIV} at (0,2) size 156x9
             RenderBlock {DIV} at (0,0) size 10x8
     RenderBlock {DIV} at (295,6) size 25x13
+layer at (57,210) size 45x11
+  RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (9,0) size 27x11
+      RenderText {#text} at (0,0) size 26x11
+        text run at (0,0) width 26: "00:00"
+layer at (258,210) size 45x11
+  RenderFlexibleBox {DIV} at (201,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (7,0) size 31x11
+      RenderText {#text} at (0,0) size 31x11
+        text run at (0,0) width 31: "-00:07"
 layer at (305,210) size 14x12
   RenderButton zI: 1 {INPUT} at (2,0) size 14x12
index 17621f4..32280a6 100644 (file)
Binary files a/LayoutTests/platform/mac/media/controls-after-reload-expected.png and b/LayoutTests/platform/mac/media/controls-after-reload-expected.png differ
index 5694ea1..29580ce 100644 (file)
@@ -17,11 +17,21 @@ layer at (8,257) size 320x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x17
     RenderFlexibleBox {DIV} at (49,5) size 216x15
-      RenderSlider {INPUT} at (0,2) size 216x13
-        RenderFlexibleBox {DIV} at (0,0) size 216x13
-          RenderBlock {DIV} at (0,2) size 216x9
+      RenderSlider {INPUT} at (45,2) size 126x13
+        RenderFlexibleBox {DIV} at (0,0) size 126x13
+          RenderBlock {DIV} at (0,2) size 126x9
             RenderBlock {DIV} at (0,0) size 10x8
     RenderButton {INPUT} at (297,4) size 16x17
     RenderBlock {DIV} at (265,6) size 25x13
+layer at (57,264) size 45x11
+  RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (9,0) size 27x11
+      RenderText {#text} at (0,0) size 26x11
+        text run at (0,0) width 26: "00:00"
+layer at (228,264) size 45x11
+  RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (7,0) size 31x11
+      RenderText {#text} at (0,0) size 31x11
+        text run at (0,0) width 31: "-00:06"
 layer at (275,264) size 14x12
   RenderButton zI: 1 {INPUT} at (2,0) size 14x12
index 236f7cd..3d2c69c 100644 (file)
Binary files a/LayoutTests/platform/mac/media/controls-strict-expected.png and b/LayoutTests/platform/mac/media/controls-strict-expected.png differ
index e711ba8..b74646b 100644 (file)
@@ -17,11 +17,21 @@ layer at (8,265) size 320x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x17
     RenderFlexibleBox {DIV} at (49,5) size 216x15
-      RenderSlider {INPUT} at (0,2) size 216x13
-        RenderFlexibleBox {DIV} at (0,0) size 216x13
-          RenderBlock {DIV} at (0,2) size 216x9
+      RenderSlider {INPUT} at (45,2) size 126x13
+        RenderFlexibleBox {DIV} at (0,0) size 126x13
+          RenderBlock {DIV} at (0,2) size 126x9
             RenderBlock {DIV} at (0,0) size 10x8
     RenderButton {INPUT} at (297,4) size 16x17
     RenderBlock {DIV} at (265,6) size 25x13
+layer at (57,272) size 45x11
+  RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (9,0) size 27x11
+      RenderText {#text} at (0,0) size 26x11
+        text run at (0,0) width 26: "00:00"
+layer at (228,272) size 45x11
+  RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (7,0) size 31x11
+      RenderText {#text} at (0,0) size 31x11
+        text run at (0,0) width 31: "-00:06"
 layer at (275,272) size 14x12
   RenderButton zI: 1 {INPUT} at (2,0) size 14x12
diff --git a/LayoutTests/platform/mac/media/controls-styling-strict-expected.png b/LayoutTests/platform/mac/media/controls-styling-strict-expected.png
new file mode 100644 (file)
index 0000000..a30be7f
Binary files /dev/null and b/LayoutTests/platform/mac/media/controls-styling-strict-expected.png differ
index f6c19bb..e5acbee 100644 (file)
@@ -21,12 +21,22 @@ layer at (8,265) size 320x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x17
     RenderFlexibleBox {DIV} at (49,5) size 216x15
-      RenderSlider {INPUT} at (0,2) size 216x13
-        RenderFlexibleBox {DIV} at (0,0) size 216x13
-          RenderBlock {DIV} at (0,2) size 216x9
+      RenderSlider {INPUT} at (45,2) size 126x13
+        RenderFlexibleBox {DIV} at (0,0) size 126x13
+          RenderBlock {DIV} at (0,2) size 126x9
             RenderBlock {DIV} at (0,0) size 10x8
     RenderButton {INPUT} at (297,4) size 16x17
     RenderBlock {DIV} at (265,6) size 25x13
+layer at (57,272) size 45x11
+  RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (9,0) size 27x11
+      RenderText {#text} at (0,0) size 26x11
+        text run at (0,0) width 26: "00:00"
+layer at (228,272) size 45x11
+  RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (7,0) size 31x11
+      RenderText {#text} at (0,0) size 31x11
+        text run at (0,0) width 31: "-00:06"
 layer at (275,272) size 14x12
   RenderButton zI: 1 {INPUT} at (2,0) size 14x12
 layer at (332,50) size 320x240
@@ -36,11 +46,21 @@ layer at (332,265) size 320x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x17
     RenderFlexibleBox {DIV} at (49,5) size 216x15
-      RenderSlider {INPUT} at (0,2) size 216x13
-        RenderFlexibleBox {DIV} at (0,0) size 216x13
-          RenderBlock {DIV} at (0,2) size 216x9
+      RenderSlider {INPUT} at (45,2) size 126x13
+        RenderFlexibleBox {DIV} at (0,0) size 126x13
+          RenderBlock {DIV} at (0,2) size 126x9
             RenderBlock {DIV} at (0,0) size 10x8
     RenderButton {INPUT} at (297,4) size 16x17
     RenderBlock {DIV} at (265,6) size 25x13
+layer at (381,272) size 45x11
+  RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (9,0) size 27x11
+      RenderText {#text} at (0,0) size 26x11
+        text run at (0,0) width 26: "00:00"
+layer at (552,272) size 45x11
+  RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (7,0) size 31x11
+      RenderText {#text} at (0,0) size 31x11
+        text run at (0,0) width 31: "-00:06"
 layer at (599,272) size 14x12
   RenderButton zI: 1 {INPUT} at (2,0) size 14x12
index a12f9f7..39556a1 100644 (file)
Binary files a/LayoutTests/platform/mac/media/controls-without-preload-expected.png and b/LayoutTests/platform/mac/media/controls-without-preload-expected.png differ
index f7199bb..e0a208e 100644 (file)
@@ -17,11 +17,21 @@ layer at (8,257) size 320x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x17
     RenderFlexibleBox {DIV} at (49,5) size 216x15
-      RenderSlider {INPUT} at (0,2) size 216x13
-        RenderFlexibleBox {DIV} at (0,0) size 216x13
-          RenderBlock {DIV} at (0,2) size 216x9
+      RenderSlider {INPUT} at (45,2) size 126x13
+        RenderFlexibleBox {DIV} at (0,0) size 126x13
+          RenderBlock {DIV} at (0,2) size 126x9
             RenderBlock {DIV} at (0,0) size 10x8
     RenderButton {INPUT} at (297,4) size 16x17
     RenderBlock {DIV} at (265,6) size 25x13
+layer at (57,264) size 45x11
+  RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (9,0) size 27x11
+      RenderText {#text} at (0,0) size 26x11
+        text run at (0,0) width 26: "00:00"
+layer at (228,264) size 45x11
+  RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (7,0) size 31x11
+      RenderText {#text} at (0,0) size 31x11
+        text run at (0,0) width 31: "-00:06"
 layer at (275,264) size 14x12
   RenderButton zI: 1 {INPUT} at (2,0) size 14x12
index 805fb1d..032edf4 100644 (file)
Binary files a/LayoutTests/platform/mac/media/video-controls-rendering-expected.png and b/LayoutTests/platform/mac/media/video-controls-rendering-expected.png differ
index c407abf..af0254e 100644 (file)
@@ -22,12 +22,22 @@ layer at (8,257) size 320x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x17
     RenderFlexibleBox {DIV} at (49,5) size 216x15
-      RenderSlider {INPUT} at (0,2) size 216x13
-        RenderFlexibleBox {DIV} at (0,0) size 216x13
-          RenderBlock {DIV} at (0,2) size 216x9
+      RenderSlider {INPUT} at (45,2) size 126x13
+        RenderFlexibleBox {DIV} at (0,0) size 126x13
+          RenderBlock {DIV} at (0,2) size 126x9
             RenderBlock {DIV} at (0,0) size 10x8
     RenderButton {INPUT} at (297,4) size 16x17
     RenderBlock {DIV} at (265,6) size 25x13
+layer at (57,264) size 45x11
+  RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (9,0) size 27x11
+      RenderText {#text} at (0,0) size 26x11
+        text run at (0,0) width 26: "00:00"
+layer at (228,264) size 45x11
+  RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (7,0) size 31x11
+      RenderText {#text} at (0,0) size 31x11
+        text run at (0,0) width 31: "-00:06"
 layer at (275,264) size 14x12
   RenderButton zI: 1 {INPUT} at (2,0) size 14x12
 layer at (8,282) size 320x240
@@ -37,12 +47,22 @@ layer at (8,497) size 320x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x17
     RenderFlexibleBox {DIV} at (49,5) size 216x15
-      RenderSlider {INPUT} at (0,2) size 216x13
-        RenderFlexibleBox {DIV} at (0,0) size 216x13
-          RenderBlock {DIV} at (0,2) size 216x9
+      RenderSlider {INPUT} at (45,2) size 126x13
+        RenderFlexibleBox {DIV} at (0,0) size 126x13
+          RenderBlock {DIV} at (0,2) size 126x9
             RenderBlock {DIV} at (0,0) size 10x8
     RenderButton {INPUT} at (297,4) size 16x17
     RenderBlock {DIV} at (265,6) size 25x13
+layer at (57,504) size 45x11
+  RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (9,0) size 27x11
+      RenderText {#text} at (0,0) size 26x11
+        text run at (0,0) width 26: "00:00"
+layer at (228,504) size 45x11
+  RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (7,0) size 31x11
+      RenderText {#text} at (0,0) size 31x11
+        text run at (0,0) width 31: "-00:06"
 layer at (275,504) size 14x12
   RenderButton zI: 1 {INPUT} at (2,0) size 14x12
 layer at (8,522) size 320x240
@@ -54,11 +74,21 @@ layer at (8,737) size 320x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x17
     RenderFlexibleBox {DIV} at (49,5) size 216x15
-      RenderSlider {INPUT} at (0,2) size 216x13
-        RenderFlexibleBox {DIV} at (0,0) size 216x13
-          RenderBlock {DIV} at (0,2) size 216x9
+      RenderSlider {INPUT} at (45,2) size 126x13
+        RenderFlexibleBox {DIV} at (0,0) size 126x13
+          RenderBlock {DIV} at (0,2) size 126x9
             RenderBlock {DIV} at (0,0) size 10x8
     RenderButton {INPUT} at (297,4) size 16x17
     RenderBlock {DIV} at (265,6) size 25x13
+layer at (57,744) size 45x11
+  RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (9,0) size 27x11
+      RenderText {#text} at (0,0) size 26x11
+        text run at (0,0) width 26: "00:00"
+layer at (228,744) size 45x11
+  RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (7,0) size 31x11
+      RenderText {#text} at (0,0) size 31x11
+        text run at (0,0) width 31: "-00:06"
 layer at (275,744) size 14x12
   RenderButton zI: 1 {INPUT} at (2,0) size 14x12
index 6626c23..4f6c760 100644 (file)
Binary files a/LayoutTests/platform/mac/media/video-display-toggle-expected.png and b/LayoutTests/platform/mac/media/video-display-toggle-expected.png differ
index ef19ca6..85147eb 100644 (file)
@@ -16,11 +16,21 @@ layer at (8,241) size 320x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x17
     RenderFlexibleBox {DIV} at (49,5) size 216x15
-      RenderSlider {INPUT} at (0,2) size 216x13
-        RenderFlexibleBox {DIV} at (0,0) size 216x13
-          RenderBlock {DIV} at (0,2) size 216x9
+      RenderSlider {INPUT} at (45,2) size 126x13
+        RenderFlexibleBox {DIV} at (0,0) size 126x13
+          RenderBlock {DIV} at (0,2) size 126x9
             RenderBlock {DIV} at (0,0) size 10x8
     RenderButton {INPUT} at (297,4) size 16x17
     RenderBlock {DIV} at (265,6) size 25x13
+layer at (57,248) size 45x11
+  RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (9,0) size 27x11
+      RenderText {#text} at (0,0) size 26x11
+        text run at (0,0) width 26: "00:00"
+layer at (228,248) size 45x11
+  RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (7,0) size 31x11
+      RenderText {#text} at (0,0) size 31x11
+        text run at (0,0) width 31: "-00:06"
 layer at (275,248) size 14x12
   RenderButton zI: 1 {INPUT} at (2,0) size 14x12
index 261263c..ac09252 100644 (file)
Binary files a/LayoutTests/platform/mac/media/video-no-audio-expected.png and b/LayoutTests/platform/mac/media/video-no-audio-expected.png differ
index 489db8e..2b02508 100644 (file)
@@ -17,9 +17,19 @@ layer at (8,305) size 352x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x17
     RenderFlexibleBox {DIV} at (49,5) size 273x15
-      RenderSlider {INPUT} at (0,2) size 273x13
-        RenderFlexibleBox {DIV} at (0,0) size 273x13
-          RenderBlock {DIV} at (0,2) size 273x9
+      RenderSlider {INPUT} at (45,2) size 183x13
+        RenderFlexibleBox {DIV} at (0,0) size 183x13
+          RenderBlock {DIV} at (0,2) size 183x9
             RenderBlock {DIV} at (0,0) size 10x8
     RenderButton {INPUT} at (329,4) size 16x17
     RenderBlock {DIV} at (322,12) size 0x1
+layer at (57,312) size 45x11
+  RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (9,0) size 27x11
+      RenderText {#text} at (0,0) size 26x11
+        text run at (0,0) width 26: "00:00"
+layer at (285,312) size 45x11
+  RenderFlexibleBox {DIV} at (228,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (7,0) size 31x11
+      RenderText {#text} at (0,0) size 31x11
+        text run at (0,0) width 31: "-00:09"
index 2bcf501..bf23768 100644 (file)
Binary files a/LayoutTests/platform/mac/media/video-playing-and-pause-expected.png and b/LayoutTests/platform/mac/media/video-playing-and-pause-expected.png differ
index a45345a..4fad648 100644 (file)
@@ -18,11 +18,21 @@ layer at (8,283) size 320x25
     RenderButton {INPUT} at (6,3) size 18x18
     RenderButton {INPUT} at (32,4) size 16x17
     RenderFlexibleBox {DIV} at (49,5) size 216x15
-      RenderSlider {INPUT} at (0,2) size 216x13
-        RenderFlexibleBox {DIV} at (0,0) size 216x13
-          RenderBlock {DIV} at (0,2) size 216x9
+      RenderSlider {INPUT} at (45,2) size 126x13
+        RenderFlexibleBox {DIV} at (0,0) size 126x13
+          RenderBlock {DIV} at (0,2) size 126x9
             RenderBlock {DIV} at (0,0) size 10x8
     RenderButton {INPUT} at (297,4) size 16x17
     RenderBlock {DIV} at (265,6) size 25x13
+layer at (57,290) size 45x11
+  RenderFlexibleBox {DIV} at (0,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (9,0) size 27x11
+      RenderText {#text} at (0,0) size 26x11
+        text run at (0,0) width 26: "00:00"
+layer at (228,290) size 45x11
+  RenderFlexibleBox {DIV} at (171,2) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (7,0) size 31x11
+      RenderText {#text} at (0,0) size 31x11
+        text run at (0,0) width 31: "-00:06"
 layer at (275,290) size 14x12
   RenderButton zI: 1 {INPUT} at (2,0) size 14x12
index 891b268..83ae0d9 100644 (file)
@@ -1,3 +1,54 @@
+2013-03-26  Jer Noble  <jer.noble@apple.com>
+
+        Mac: Media Controls always hide time display elements
+        https://bugs.webkit.org/show_bug.cgi?id=113355
+
+        Reviewed by Eric Carlson.
+
+        No new tests; rebaselined existing tests against correct behavior.
+
+        A prior commit set the "min-width:0" property on the time display elements, which, combined
+        with the "-webkit-flex-box:0 0" setting, caused the flex-box container to collapse the width
+        of the elements to zero. To achieve the desired effect of hiding the time display elements,
+        first set the elements' min-width to the desired width, as the new flex-box spec treats the
+        default value of "min-width:auto" as the intrinsic width, and will collapse the text display
+        elements to the intrinsic width of its contained text node.
+
+        The above allows the timeline container to collapse beyond the sum of its childrens'
+        intrinsic width. Create a custom renderer that detects when this happens, and hide the time
+        display controls.
+
+        * css/mediaControls.css:
+        * css/mediaControlsQuickTime.css:
+        (audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display):
+            Set the "min-width:" property to equal the "width:" property.
+        (audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display):
+            Ditto.
+        * css/mediaControlsChromium.css:
+        (audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display):
+            Chromium assumes the time display controls are flex-boxes, so make that explicit.
+        * html/shadow/MediaControlElementTypes.cpp: Removed MediaControlTimeDisplayElement::createRenderer().
+        * html/shadow/MediaControlElementTypes.h:
+        (MediaControlTimeDisplayElement): Ditto.
+        * html/shadow/MediaControlElements.cpp:
+        (WebCore::MediaControlTimelineContainerElement::setTimeDisplaysHidden): Added, walks through the 
+            container's children and shows or hides time display elements.
+        (WebCore::MediaControlTimelineContainerElement::createRenderer): Added, creates a RenderMediaControlTimelineContainer.
+        (WebCore::getMediaControlTimeRemainingDisplayElementShadowPseudoId): Added, allow setTimeDisplaysHidden to
+            query against children's shadowPseudoId().
+        (WebCore::MediaControlTimeRemainingDisplayElement::shadowPseudoId): Moved contents to getMediaControlTimeRemainingDisplayElementShadowPseudoId.
+        (WebCore::getMediaControlCurrentTimeDisplayElementShadowPseudoId): Added, allow setTimeDisplaysHidden to
+            query against children's shadowPseudoId().
+        (WebCore::MediaControlCurrentTimeDisplayElement::shadowPseudoId): Moved contents to getMediaControlCurrentTimeDisplayElementShadowPseudoId.
+        * html/shadow/MediaControlElements.h:
+        (MediaControlTimelineContainerElement):
+        * rendering/RenderMediaControlElements.cpp:
+        (WebCore::RenderMediaControlTimelineContainer::RenderMediaControlTimelineContainer): Added, simple constructor.
+        (WebCore::RenderMediaControlTimelineContainer::layout): Detect when the controller's width is greater than
+            a certain value, and show or hide the time display elements in response.
+        * rendering/RenderMediaControlElements.h:
+        (RenderMediaControlTimelineContainer):
+
 2013-03-27  Ilya Tikhonovsky  <loislo@chromium.org>
 
         Web Inspector: CPU profiler. Swap FlameChart with Data Grid.
index a0f3511..8d73e73 100644 (file)
@@ -112,7 +112,7 @@ audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
     -webkit-appearance: media-current-time-display;
     -webkit-user-select: none;
     -webkit-flex: none;
-    display: block;
+    display: -webkit-flex;
     border: none;
     cursor: default;
 
index d9b2218..7b45f24 100644 (file)
@@ -82,7 +82,7 @@ audio::-webkit-media-controls-current-time-display, video::-webkit-media-control
     font-size: 9px;
     overflow: hidden;
     width: 45px;
-    min-width: 0; /* needed due to flexbox */
+    min-width: 45px;
     color: white;
     text-shadow: black 0px 1px 1px;
 
@@ -105,7 +105,7 @@ audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
     font-size: 9px;
     overflow: hidden;
     width: 45px;
-    min-width: 0; /* needed due to flexbox */
+    min-width: 45px;
     color: white;
     text-shadow: black 0px 1px 1px;
 
index 1ed679c..79efdcc 100644 (file)
@@ -159,11 +159,6 @@ void MediaControlTimeDisplayElement::setCurrentValue(float time)
     m_currentValue = time;
 }
 
-RenderObject* MediaControlTimeDisplayElement::createRenderer(RenderArena* arena, RenderStyle*)
-{
-    return new (arena) RenderMediaControlTimeDisplay(this);
-}
-
 // ----------------------------
 
 MediaControlMuteButtonElement::MediaControlMuteButtonElement(Document* document, MediaControlElementType displayType)
index 91b0c8a..c2f6791 100644 (file)
@@ -141,8 +141,6 @@ protected:
     explicit MediaControlTimeDisplayElement(Document*, MediaControlElementType);
 
 private:
-    virtual RenderObject* createRenderer(RenderArena*, RenderStyle*) OVERRIDE;
-
     float m_currentValue;
 };
 
index 7387ea0..2110d04 100644 (file)
@@ -67,6 +67,9 @@ namespace WebCore {
 
 using namespace HTMLNames;
 
+static const AtomicString& getMediaControlCurrentTimeDisplayElementShadowPseudoId();
+static const AtomicString& getMediaControlTimeRemainingDisplayElementShadowPseudoId();
+
 #if ENABLE(VIDEO_TRACK)
 static const char* textTracksOffAttrValue = "-1"; // This must match HTMLMediaElement::textTracksOffIndex()
 #endif
@@ -318,6 +321,30 @@ const AtomicString& MediaControlTimelineContainerElement::shadowPseudoId() const
     return id;
 }
 
+void MediaControlTimelineContainerElement::setTimeDisplaysHidden(bool hidden)
+{
+    for (unsigned i = 0; i < childNodeCount(); ++i) {
+        Node* child = childNode(i);
+        if (!child || !child->isElementNode())
+            continue;
+        Element* element = static_cast<Element*>(child);
+        if (element->shadowPseudoId() != getMediaControlTimeRemainingDisplayElementShadowPseudoId()
+            && element->shadowPseudoId() != getMediaControlCurrentTimeDisplayElementShadowPseudoId())
+            continue;
+
+        MediaControlTimeDisplayElement* timeDisplay = static_cast<MediaControlTimeDisplayElement*>(element);
+        if (hidden)
+            timeDisplay->hide();
+        else
+            timeDisplay->show();
+    }
+}
+
+RenderObject* MediaControlTimelineContainerElement::createRenderer(RenderArena* arena, RenderStyle*)
+{
+    return new (arena) RenderMediaControlTimelineContainer(this);
+}
+
 // ----------------------------
 
 MediaControlVolumeSliderContainerElement::MediaControlVolumeSliderContainerElement(Document* document)
@@ -1141,12 +1168,17 @@ PassRefPtr<MediaControlTimeRemainingDisplayElement> MediaControlTimeRemainingDis
     return adoptRef(new MediaControlTimeRemainingDisplayElement(document));
 }
 
-const AtomicString& MediaControlTimeRemainingDisplayElement::shadowPseudoId() const
+static const AtomicString& getMediaControlTimeRemainingDisplayElementShadowPseudoId()
 {
     DEFINE_STATIC_LOCAL(AtomicString, id, ("-webkit-media-controls-time-remaining-display", AtomicString::ConstructFromLiteral));
     return id;
 }
 
+const AtomicString& MediaControlTimeRemainingDisplayElement::shadowPseudoId() const
+{
+    return getMediaControlTimeRemainingDisplayElementShadowPseudoId();
+}
+
 // ----------------------------
 
 MediaControlCurrentTimeDisplayElement::MediaControlCurrentTimeDisplayElement(Document* document)
@@ -1159,12 +1191,17 @@ PassRefPtr<MediaControlCurrentTimeDisplayElement> MediaControlCurrentTimeDisplay
     return adoptRef(new MediaControlCurrentTimeDisplayElement(document));
 }
 
-const AtomicString& MediaControlCurrentTimeDisplayElement::shadowPseudoId() const
+static const AtomicString& getMediaControlCurrentTimeDisplayElementShadowPseudoId()
 {
     DEFINE_STATIC_LOCAL(AtomicString, id, ("-webkit-media-controls-current-time-display", AtomicString::ConstructFromLiteral));
     return id;
 }
 
+const AtomicString& MediaControlCurrentTimeDisplayElement::shadowPseudoId() const
+{
+    return getMediaControlCurrentTimeDisplayElementShadowPseudoId();
+}
+
 // ----------------------------
 
 #if ENABLE(VIDEO_TRACK)
index cf96d24..19f83ce 100644 (file)
@@ -106,9 +106,13 @@ class MediaControlTimelineContainerElement : public MediaControlDivElement {
 public:
     static PassRefPtr<MediaControlTimelineContainerElement> create(Document*);
 
+    void setTimeDisplaysHidden(bool);
+
 private:
     explicit MediaControlTimelineContainerElement(Document*);
     virtual const AtomicString& shadowPseudoId() const OVERRIDE;
+
+    virtual RenderObject* createRenderer(RenderArena*, RenderStyle*) OVERRIDE;
 };
 
 // ----------------------------
index 4d1a538..215b103 100644 (file)
@@ -59,7 +59,7 @@ void RenderMediaVolumeSliderContainer::layout()
 
 // ----------------------------
 
-RenderMediaControlTimeDisplay::RenderMediaControlTimeDisplay(Element* element)
+RenderMediaControlTimelineContainer::RenderMediaControlTimelineContainer(Element* element)
     : RenderFlexibleBox(element)
 {
 }
@@ -68,15 +68,13 @@ RenderMediaControlTimeDisplay::RenderMediaControlTimeDisplay(Element* element)
 // FIXME: Eliminate hard-coded widths altogether.
 static const int minWidthToDisplayTimeDisplays = 45 + 100 + 45;
 
-void RenderMediaControlTimeDisplay::layout()
+void RenderMediaControlTimelineContainer::layout()
 {
     RenderFlexibleBox::layout();
-    RenderBox* timelineContainerBox = parentBox();
-    while (timelineContainerBox && timelineContainerBox->isAnonymous())
-        timelineContainerBox = timelineContainerBox->parentBox();
 
-    if (timelineContainerBox && timelineContainerBox->width() < minWidthToDisplayTimeDisplays)
-        setWidth(0);
+    LayoutStateDisabler layoutStateDisabler(view());
+    MediaControlTimelineContainerElement* container = static_cast<MediaControlTimelineContainerElement*>(node());
+    container->setTimeDisplaysHidden(width().toInt() < minWidthToDisplayTimeDisplays);
 }
 
 // ----------------------------
index 4a3e35c..a3df364 100644 (file)
@@ -46,9 +46,9 @@ private:
 
 // ----------------------------
 
-class RenderMediaControlTimeDisplay : public RenderFlexibleBox {
+class RenderMediaControlTimelineContainer : public RenderFlexibleBox {
 public:
-    RenderMediaControlTimeDisplay(Element*);
+    RenderMediaControlTimelineContainer(Element*);
 
 private:
     virtual void layout();