WebCore:
authoradele@apple.com <adele@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 5 Dec 2007 00:08:37 +0000 (00:08 +0000)
committeradele@apple.com <adele@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 5 Dec 2007 00:08:37 +0000 (00:08 +0000)
        Reviewed by Hyatt.

        Fix for <rdar://problem/5622464> controls should show up for audio element

        * css/html4.css: Added styles for audio controls.  This will need to be refined, since we may want a different look for audio controls.
        * html/HTMLMediaElement.cpp:
        (WebCore::HTMLMediaElement::attributeChanged): When the controls attribute changes detach and reattach if necessary.
        (WebCore::HTMLMediaElement::rendererIsNeeded): Added.
        (WebCore::HTMLMediaElement::createRenderer): Added.  Uses RenderMedia.
        * html/HTMLMediaElement.h:
        * rendering/RenderMedia.cpp: (WebCore::RenderMedia::RenderMedia): Added constructor that doesn't take intrinsic size.
        * rendering/RenderMedia.h:

LayoutTests:

        Reviewed by Hyatt.

        Test for <rdar://problem/5622464> controls should show up for audio element

        * media/audio-controls-rendering.html: Added.
        * platform/mac/media/audio-controls-rendering-expected.checksum: Added.
        * platform/mac/media/audio-controls-rendering-expected.png: Added.
        * platform/mac/media/audio-controls-rendering-expected.txt: Added.

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

LayoutTests/ChangeLog
LayoutTests/media/audio-controls-rendering.html [new file with mode: 0644]
LayoutTests/platform/mac/media/audio-controls-rendering-expected.checksum [new file with mode: 0644]
LayoutTests/platform/mac/media/audio-controls-rendering-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/media/audio-controls-rendering-expected.txt [new file with mode: 0644]
WebCore/ChangeLog
WebCore/css/html4.css
WebCore/html/HTMLMediaElement.cpp
WebCore/html/HTMLMediaElement.h
WebCore/rendering/RenderMedia.cpp
WebCore/rendering/RenderMedia.h

index e454892..c71d160 100644 (file)
@@ -1,3 +1,14 @@
+2007-12-04  Adele Peterson  <adele@apple.com>
+
+        Reviewed by Hyatt.
+
+        Test for <rdar://problem/5622464> controls should show up for audio element
+
+        * media/audio-controls-rendering.html: Added.
+        * platform/mac/media/audio-controls-rendering-expected.checksum: Added.
+        * platform/mac/media/audio-controls-rendering-expected.png: Added.
+        * platform/mac/media/audio-controls-rendering-expected.txt: Added.
+
 2007-11-27  Adam Roben  <aroben@apple.com>
 
         Remove a now-passing test from the Windows Skipped file
diff --git a/LayoutTests/media/audio-controls-rendering.html b/LayoutTests/media/audio-controls-rendering.html
new file mode 100644 (file)
index 0000000..42b2735
--- /dev/null
@@ -0,0 +1,34 @@
+<html>
+    <head>
+        <style>
+            audio { background-color: blue; } 
+        </style>
+        <script>
+            function test()
+            {
+                if (window.layoutTestController) {
+                    layoutTestController.waitUntilDone();
+                    setTimeout(function() { 
+                        document.body.appendChild(document.createTextNode('FAIL')); 
+                        if (window.layoutTestController)
+                                layoutTestController.notifyDone();
+                    } , 8000);
+                }
+                var count = document.getElementsByTagName('audio').length;
+                document.addEventListener("load", function () {
+                    if (!--count) {
+                        document.body.offsetLeft;
+                        if (window.layoutTestController)
+                            layoutTestController.notifyDone();
+                    }
+                }, true);
+            }
+        </script>
+    </head>
+    <body onload="test()">
+        <p>Test controls placement. </p>
+        <audio controls src="content/test.wav"></audio><br><br>
+        <audio controls src="content/test.wav" style="width: 320px;"></audio><br><br>
+        <audio controls src="content/test.wav" style="position: absolute; width: 320px; height: 100px;"></audio><br>
+    </body>
+</html>
diff --git a/LayoutTests/platform/mac/media/audio-controls-rendering-expected.checksum b/LayoutTests/platform/mac/media/audio-controls-rendering-expected.checksum
new file mode 100644 (file)
index 0000000..6d27669
--- /dev/null
@@ -0,0 +1 @@
+73ef9fddb8d97b62acaa265d2ed0668b
\ No newline at end of file
diff --git a/LayoutTests/platform/mac/media/audio-controls-rendering-expected.png b/LayoutTests/platform/mac/media/audio-controls-rendering-expected.png
new file mode 100644 (file)
index 0000000..5af30a0
Binary files /dev/null and b/LayoutTests/platform/mac/media/audio-controls-rendering-expected.png differ
diff --git a/LayoutTests/platform/mac/media/audio-controls-rendering-expected.txt b/LayoutTests/platform/mac/media/audio-controls-rendering-expected.txt
new file mode 100644 (file)
index 0000000..93255da
--- /dev/null
@@ -0,0 +1,70 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x600
+  RenderBlock {HTML} at (0,0) size 800x600
+    RenderBody {BODY} at (8,8) size 784x584
+      RenderBlock {P} at (0,0) size 784x18
+        RenderText {#text} at (0,0) size 153x18
+          text run at (0,0) width 153: "Test controls placement."
+      RenderBlock (anonymous) at (0,34) size 784x174
+        RenderMedia {AUDIO} at (0,0) size 234x69 [bgcolor=#0000FF]
+        RenderBR {BR} at (234,69) size 0x0
+        RenderBR {BR} at (0,69) size 0x18
+        RenderMedia {AUDIO} at (0,87) size 320x69 [bgcolor=#0000FF]
+        RenderBR {BR} at (320,156) size 0x0
+        RenderBR {BR} at (0,156) size 0x18
+      RenderBlock (anonymous) at (0,208) size 784x18
+        RenderBR {BR} at (0,0) size 0x18
+layer at (8,42) size 234x69
+  RenderBlock (positioned) {DIV} at (8,42) size 234x69
+layer at (8,42) size 234x69
+  RenderBlock (positioned) {DIV} at (0,0) size 234x69 [bgcolor=#00000099] [border: (2px solid #EEEEEE)]
+layer at (92,49) size 66x40
+  RenderButton {INPUT} at (84,7) size 66x40 [color=#FFFFFF]
+    RenderBlock (anonymous) at (0,0) size 66x40
+      RenderText at (18,0) size 30x38
+        text run at (18,0) width 30: "\x{25B6}"
+layer at (15,88) size 220x16
+  RenderBlock (positioned) {DIV} at (7,46) size 220x16 [bgcolor=#EEEEEE]
+    RenderText {#text} at (165,0) size 50x15
+      text run at (165,0) width 50: "00:00:00"
+layer at (8,129) size 320x69
+  RenderBlock (positioned) {DIV} at (8,129) size 320x69
+layer at (51,129) size 234x69
+  RenderBlock (positioned) {DIV} at (43,0) size 234x69 [bgcolor=#00000099] [border: (2px solid #EEEEEE)]
+layer at (135,136) size 66x40
+  RenderButton {INPUT} at (84,7) size 66x40 [color=#FFFFFF]
+    RenderBlock (anonymous) at (0,0) size 66x40
+      RenderText at (18,0) size 30x38
+        text run at (18,0) width 30: "\x{25B6}"
+layer at (58,175) size 220x16
+  RenderBlock (positioned) {DIV} at (7,46) size 220x16 [bgcolor=#EEEEEE]
+    RenderText {#text} at (165,0) size 50x15
+      text run at (165,0) width 50: "00:00:00"
+layer at (8,216) size 320x100
+  RenderMedia {AUDIO} at (8,216) size 320x100 [bgcolor=#0000FF]
+layer at (8,216) size 320x100
+  RenderBlock (positioned) {DIV} at (0,0) size 320x100
+layer at (51,231) size 234x69
+  RenderBlock (positioned) {DIV} at (43,15) size 234x69 [bgcolor=#00000099] [border: (2px solid #EEEEEE)]
+layer at (135,238) size 66x40
+  RenderButton {INPUT} at (84,7) size 66x40 [color=#FFFFFF]
+    RenderBlock (anonymous) at (0,0) size 66x40
+      RenderText at (18,0) size 30x38
+        text run at (18,0) width 30: "\x{25B6}"
+layer at (58,277) size 220x16
+  RenderBlock (positioned) {DIV} at (7,46) size 220x16 [bgcolor=#EEEEEE]
+    RenderText {#text} at (165,0) size 50x15
+      text run at (165,0) width 50: "00:00:00"
+layer at (20,87) size 142x17
+  RenderSlider zI: 1 {INPUT} at (12,45) size 142x16 [border: (2px solid #FFFFFF)]
+layer at (22,90) size 15x15
+  RenderBlock (relative positioned) {DIV} at (2,2) size 15x15
+layer at (63,174) size 142x17
+  RenderSlider zI: 1 {INPUT} at (12,45) size 142x16 [border: (2px solid #FFFFFF)]
+layer at (65,177) size 15x15
+  RenderBlock (relative positioned) {DIV} at (2,2) size 15x15
+layer at (63,276) size 142x17
+  RenderSlider zI: 1 {INPUT} at (12,45) size 142x16 [border: (2px solid #FFFFFF)]
+layer at (65,279) size 15x15
+  RenderBlock (relative positioned) {DIV} at (2,2) size 15x15
index 0dca724..fd811fb 100644 (file)
@@ -1,3 +1,18 @@
+2007-12-04  Adele Peterson  <adele@apple.com>
+
+        Reviewed by Hyatt.
+
+        Fix for <rdar://problem/5622464> controls should show up for audio element
+
+        * css/html4.css: Added styles for audio controls.  This will need to be refined, since we may want a different look for audio controls.
+        * html/HTMLMediaElement.cpp:
+        (WebCore::HTMLMediaElement::attributeChanged): When the controls attribute changes detach and reattach if necessary. 
+        (WebCore::HTMLMediaElement::rendererIsNeeded): Added.
+        (WebCore::HTMLMediaElement::createRenderer): Added.  Uses RenderMedia.
+        * html/HTMLMediaElement.h:
+        * rendering/RenderMedia.cpp: (WebCore::RenderMedia::RenderMedia): Added constructor that doesn't take intrinsic size.
+        * rendering/RenderMedia.h:
+
 2007-12-04  Anders Carlsson  <andersca@apple.com>
 
         Reviewed by Sam.
index 1f5db5f..1860cb8 100644 (file)
@@ -592,11 +592,15 @@ iframe {
 /* media controls */
 /* FIXME this is not the final styling */
 
-video::-webkit-media-controls-panel {
-    display: inline-block;
+audio {
+    width: 234px;
+    height: 69px;
+}
+
+audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
     position: absolute;
     left: 0; right: 0; top: 0; bottom: 0;
-    margin: auto auto 10% auto;
+    margin: auto;
     width: 230px;
     height: 65px;
     border: 2px solid #eee;
@@ -605,9 +609,12 @@ video::-webkit-media-controls-panel {
     -webkit-user-select: none;
 }
 
-video::-webkit-media-controls-play-button {
+video::-webkit-media-controls-panel {
+    margin-bottom: 10%;
+}
+
+audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
     -webkit-appearance: none;
-    display: inline-block;
     position: absolute;
     margin: 5px auto auto auto;
     left: 0; right: 0; top: 0; bottom: 0;
@@ -621,7 +628,7 @@ video::-webkit-media-controls-play-button {
     height: 1.2em;
 }
 
-video::-webkit-media-controls-timeline {
+audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
     -webkit-appearance: slider-horizontal;
     position: absolute;
     margin: auto auto 5px 10px;
@@ -633,8 +640,7 @@ video::-webkit-media-controls-timeline {
     z-index: 1;
 }
 
-video::-webkit-media-controls-time-display {
-    display: inline-block;
+audio::-webkit-media-controls-time-display, video::-webkit-media-controls-time-display {
     position: absolute;
     margin: auto 5px 5px 5px;
     left: 0; right: 0; top: 0; bottom: 0px;
index 654ba81..d381f4d 100644 (file)
@@ -110,11 +110,25 @@ void HTMLMediaElement::attributeChanged(Attribute* attr, bool preserveDecls)
         if (inDocument() && m_networkState == EMPTY)
             scheduleLoad();
     } if (attrName == controlsAttr) {
+        if (!isVideo() && attached() && (controls() != (renderer() != 0))) {
+            detach();
+            attach();
+        }
         if (renderer())
             renderer()->updateFromElement();
     }
 }
     
+bool HTMLMediaElement::rendererIsNeeded(RenderStyle* style)
+{
+    return controls() ? HTMLElement::rendererIsNeeded(style) : false;
+}
+
+RenderObject* HTMLMediaElement::createRenderer(RenderArena* arena, RenderStyle*)
+{
+    return new (arena) RenderMedia(this);
+}
 void HTMLMediaElement::insertedIntoDocument()
 {
     HTMLElement::insertedIntoDocument();
index c442866..f26343a 100644 (file)
@@ -52,7 +52,8 @@ public:
     
     void attributeChanged(Attribute*, bool preserveDecls);
 
-    virtual bool rendererIsNeeded(RenderStyle*) { return false; }
+    virtual bool rendererIsNeeded(RenderStyle*);
+    virtual RenderObject* createRenderer(RenderArena*, RenderStyle*);
     virtual void insertedIntoDocument();
     virtual void removedFromDocument();
     
index 46b4b09..65f304d 100644 (file)
@@ -190,6 +190,22 @@ void MediaControlTimelineElement::update(bool updateDuration)
 
 // ----------------------------
 
+RenderMedia::RenderMedia(HTMLMediaElement* video)
+    : RenderReplaced(video)
+    , m_controlsShadowRoot(0)
+    , m_panel(0)
+    , m_playButton(0)
+    , m_timeline(0)
+    , m_timeDisplay(0)
+    , m_timeUpdateTimer(this, &RenderMedia::timeUpdateTimerFired)
+    , m_opacityAnimationTimer(this, &RenderMedia::opacityAnimationTimerFired)
+    , m_mouseOver(false)
+    , m_opacityAnimationStartTime(0)
+    , m_opacityAnimationFrom(0)
+    , m_opacityAnimationTo(1.0f)
+{
+}
+
 RenderMedia::RenderMedia(HTMLMediaElement* video, const IntSize& intrinsicSize)
     : RenderReplaced(video, intrinsicSize)
     , m_controlsShadowRoot(0)
index 67e6c38..a52f04f 100644 (file)
@@ -41,6 +41,7 @@ class Movie;
 
 class RenderMedia : public RenderReplaced {
 public:
+    RenderMedia(HTMLMediaElement*);
     RenderMedia(HTMLMediaElement*, const IntSize& intrinsicSize);
     virtual ~RenderMedia();