Attachment 184253 Details for Bug 83869 – Patch

[patch] Patch

webkit.patch (text/plain), 124.11 KB, created by Xabier Rodríguez Calvar on 2013-01-23 09:39:24 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Xabier Rodríguez Calvar

Created: 2013-01-23 09:39:24 PST

Size: 124.11 KB

patch

obsolete

>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index 3e48c67..bab3cd5 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,34 @@
>+2013-01-23  Xabier Rodriguez Calvar  <calvaris@igalia.com>
>+
>+        [Gtk] HTML5 Media controls require a design refresh
>+        https://bugs.webkit.org/show_bug.cgi?id=83869
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * platform/gtk-wk2/fast/hidpi/video-controls-in-hidpi-expected.txt: Rebaseline.
>+        * platform/gtk-wk2/fast/layers/video-layer-expected.txt: Rebaseline
>+        * platform/gtk-wk2/media/audio-controls-rendering-expected.txt: Rebaseline.
>+        * platform/gtk-wk2/media/audio-repaint-expected.txt: Rebaseline.
>+        * platform/gtk-wk2/media/media-controls-clone-expected.txt: Rebaseline.
>+        * platform/gtk-wk2/media/video-empty-source-expected.txt: Rebaseline.
>+        * platform/gtk/TestExpectations: Marked some tests.
>+        * platform/gtk/accessibility/media-element-expected.txt: Rebaseline.
>+        * platform/gtk/fast/hidpi/video-controls-in-hidpi-expected.txt: Rebaseline.
>+        * platform/gtk/fast/layers/video-layer-expected.txt: Rebaseline.
>+        * platform/gtk/media/audio-controls-rendering-expected.txt: Rebaseline.
>+        * platform/gtk/media/audio-repaint-expected.txt: Rebaseline.
>+        * platform/gtk/media/controls-after-reload-expected.txt: Rebaseline.
>+        * platform/gtk/media/controls-strict-expected.txt: Rebaseline.
>+        * platform/gtk/media/controls-styling-expected.txt: Rebaseline.
>+        * platform/gtk/media/controls-styling-strict-expected.txt: Rebaseline.
>+        * platform/gtk/media/controls-without-preload-expected.txt: Rebaseline.
>+        * platform/gtk/media/media-controls-clone-expected.txt: Rebaseline.
>+        * platform/gtk/media/video-controls-rendering-expected.txt: Rebaseline.
>+        * platform/gtk/media/video-display-toggle-expected.txt: Rebaseline.
>+        * platform/gtk/media/video-empty-source-expected.txt: Rebaseline.
>+        * platform/gtk/media/video-no-audio-expected.txt: Rebaseline.
>+        * platform/gtk/media/video-volume-slider-expected.txt: Rebaseline.
>+
> 2013-01-22  Kent Tamura  <tkent@chromium.org>
> 
>         [Chromium] Fix svn:mime-type of PNG files in platform/chromium*/
>diff --git a/LayoutTests/platform/gtk-wk2/fast/hidpi/video-controls-in-hidpi-expected.txt b/LayoutTests/platform/gtk-wk2/fast/hidpi/video-controls-in-hidpi-expected.txt
>new file mode 100644
>index 0000000..85bca2f
>--- /dev/null
>+++ b/LayoutTests/platform/gtk-wk2/fast/hidpi/video-controls-in-hidpi-expected.txt
>@@ -0,0 +1,26 @@
>+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 {DIV} at (0,0) size 784x18
>+        RenderText {#text} at (0,0) size 539x19
>+          text run at (0,0) width 539: "This test passes if the video controls are non-blurry and properly positioned in HiDPI."
>+      RenderBlock (anonymous) at (0,18) size 784x150
>+        RenderText {#text} at (0,0) size 0x0
>+layer at (8,26) size 300x150
>+  RenderVideo {VIDEO} at (0,0) size 300x150
>+layer at (8,26) size 300x150
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x150
>+    RenderBlock {DIV} at (0,115) size 300x35
>+layer at (13,141) size 290x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,0) size 290x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 186x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 186x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 198x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (249,0) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:00"
>diff --git a/LayoutTests/platform/gtk-wk2/fast/layers/video-layer-expected.txt b/LayoutTests/platform/gtk-wk2/fast/layers/video-layer-expected.txt
>new file mode 100644
>index 0000000..62594b4
>--- /dev/null
>+++ b/LayoutTests/platform/gtk-wk2/fast/layers/video-layer-expected.txt
>@@ -0,0 +1,31 @@
>+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 784x36
>+        RenderInline {A} at (0,0) size 305x19 [color=#0000EE]
>+          RenderText {#text} at (0,0) size 305x19
>+            text run at (0,0) width 305: "https://bugs.webkit.org/show_bug.cgi?id=25066"
>+        RenderBR {BR} at (305,15) size 0x0
>+        RenderText {#text} at (0,18) size 415x19
>+          text run at (0,18) width 415: "controls should not be misplaced when video gets a RenderLayer."
>+      RenderBlock (anonymous) at (0,52) size 784x252
>+        RenderText {#text} at (0,0) size 0x0
>+        RenderText {#text} at (0,0) size 0x0
>+layer at (58,110) size 302x152
>+  RenderVideo {VIDEO} at (50,50) size 302x152 [border: (1px solid #000000)]
>+layer at (59,111) size 300x150
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (1,1) size 300x150
>+    RenderBlock {DIV} at (0,115) size 300x35
>+layer at (64,226) size 290x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,0) size 290x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 186x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 186x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 198x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (249,0) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:00"
>diff --git a/LayoutTests/platform/gtk-wk2/media/audio-controls-rendering-expected.txt b/LayoutTests/platform/gtk-wk2/media/audio-controls-rendering-expected.txt
>new file mode 100644
>index 0000000..409b6b6
>--- /dev/null
>+++ b/LayoutTests/platform/gtk-wk2/media/audio-controls-rendering-expected.txt
>@@ -0,0 +1,63 @@
>+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 153x19
>+          text run at (0,0) width 153: "Test controls placement."
>+      RenderBlock (anonymous) at (0,34) size 784x114
>+        RenderMedia {AUDIO} at (0,0) size 300x30 [bgcolor=#0000FF]
>+        RenderBR {BR} at (300,30) size 0x0
>+        RenderBR {BR} at (0,30) size 0x19
>+        RenderMedia {AUDIO} at (0,48) size 320x30 [bgcolor=#0000FF]
>+        RenderBR {BR} at (320,78) size 0x0
>+        RenderBR {BR} at (0,78) size 0x19
>+        RenderBR {BR} at (0,96) size 0x19
>+layer at (8,42) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30
>+    RenderBlock {DIV} at (0,0) size 300x30
>+layer at (8,42) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 157x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 157x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 169x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (220,0) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:07"
>+    RenderButton {INPUT} at (261,0) size 30x30
>+layer at (8,90) size 320x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x30
>+    RenderBlock {DIV} at (0,0) size 320x30
>+layer at (8,90) size 320x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 177x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 177x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 189x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (240,0) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:07"
>+    RenderButton {INPUT} at (281,0) size 30x30
>+layer at (8,138) size 320x100
>+  RenderMedia {AUDIO} at (8,138) size 320x100 [bgcolor=#0000FF]
>+layer at (8,138) size 320x100
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x100
>+    RenderBlock {DIV} at (0,70) size 320x30
>+layer at (8,208) size 320x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 177x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 177x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 189x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (240,0) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:07"
>+    RenderButton {INPUT} at (281,0) size 30x30
>diff --git a/LayoutTests/platform/gtk-wk2/media/audio-repaint-expected.txt b/LayoutTests/platform/gtk-wk2/media/audio-repaint-expected.txt
>new file mode 100644
>index 0000000..c4a87f7
>--- /dev/null
>+++ b/LayoutTests/platform/gtk-wk2/media/audio-repaint-expected.txt
>@@ -0,0 +1,63 @@
>+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 699x19
>+          text run at (0,0) width 609: "This tests that in a html document with inline audio content, the media element repaints correctly "
>+          text run at (609,0) width 90: "while playing."
>+      RenderBlock (anonymous) at (0,34) size 784x169
>+        RenderMedia {AUDIO} at (0,0) size 300x30
>+        RenderBR {BR} at (300,30) size 0x0
>+        RenderBR {BR} at (300,85) size 0x0
>+        RenderBR {BR} at (300,169) size 0x0
>+layer at (8,72) size 300x30
>+  RenderMedia {AUDIO} at (0,30) size 300x30
>+layer at (8,72) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30
>+    RenderBlock {DIV} at (0,0) size 300x30
>+layer at (8,72) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 115x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 115x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 127x12
>+          RenderBlock {DIV} at (50,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (178,0) size 74x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 74x30
>+        RenderText {#text} at (0,7) size 74x15
>+          text run at (0,7) width 74: "00:00 / 00:01"
>+    RenderButton {INPUT} at (261,0) size 30x30
>+layer at (8,42) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30
>+    RenderBlock {DIV} at (0,0) size 300x30
>+layer at (8,42) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 115x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 115x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 127x12
>+          RenderBlock {DIV} at (50,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (178,0) size 74x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 74x30
>+        RenderText {#text} at (0,7) size 74x15
>+          text run at (0,7) width 74: "00:00 / 00:01"
>+    RenderButton {INPUT} at (261,0) size 30x30
>+layer at (8,154) size 300x30
>+  RenderMedia {AUDIO} at (0,112) size 300x30
>+layer at (8,154) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30
>+    RenderBlock {DIV} at (0,0) size 300x30
>+layer at (8,154) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 115x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 115x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 127x12
>+          RenderBlock {DIV} at (50,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (178,0) size 74x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 74x30
>+        RenderText {#text} at (0,7) size 74x15
>+          text run at (0,7) width 74: "00:00 / 00:01"
>+    RenderButton {INPUT} at (261,0) size 30x30
>diff --git a/LayoutTests/platform/gtk-wk2/media/media-controls-clone-expected.txt b/LayoutTests/platform/gtk-wk2/media/media-controls-clone-expected.txt
>new file mode 100644
>index 0000000..bf6a191
>--- /dev/null
>+++ b/LayoutTests/platform/gtk-wk2/media/media-controls-clone-expected.txt
>@@ -0,0 +1,69 @@
>+layer at (0,0) size 800x600
>+  RenderView at (0,0) size 800x600
>+layer at (0,0) size 800x322
>+  RenderBlock {HTML} at (0,0) size 800x322
>+    RenderBody {BODY} at (8,8) size 784x306
>+      RenderBlock {DIV} at (0,0) size 784x153
>+        RenderMedia {AUDIO} at (300,120) size 300x30
>+      RenderBlock {DIV} at (0,153) size 784x153
>+        RenderMedia {AUDIO} at (300,120) size 300x30
>+layer at (8,8) size 300x150
>+  RenderVideo {VIDEO} at (0,0) size 300x150
>+layer at (8,161) size 300x150
>+  RenderVideo {VIDEO} at (0,0) size 300x150
>+layer at (8,8) size 300x150
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x150
>+    RenderBlock {DIV} at (0,115) size 300x35
>+layer at (13,123) size 290x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,0) size 290x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 186x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 186x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 198x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (249,0) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:00"
>+layer at (308,128) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30
>+    RenderBlock {DIV} at (0,0) size 300x30
>+layer at (308,128) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 196x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 196x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 208x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (259,0) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:00"
>+layer at (8,161) size 300x150
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x150
>+    RenderBlock {DIV} at (0,115) size 300x35
>+layer at (13,276) size 290x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,0) size 290x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 186x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 186x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 198x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (249,0) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:00"
>+layer at (308,281) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30
>+    RenderBlock {DIV} at (0,0) size 300x30
>+layer at (308,281) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 196x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 196x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 208x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (259,0) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:00"
>diff --git a/LayoutTests/platform/gtk-wk2/media/video-empty-source-expected.txt b/LayoutTests/platform/gtk-wk2/media/video-empty-source-expected.txt
>new file mode 100644
>index 0000000..ccb169d
>--- /dev/null
>+++ b/LayoutTests/platform/gtk-wk2/media/video-empty-source-expected.txt
>@@ -0,0 +1,26 @@
>+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 430x19
>+          text run at (0,0) width 430: "Slider drawing with no source. The controls should render correctly."
>+      RenderBlock (anonymous) at (0,34) size 784x152
>+        RenderText {#text} at (0,0) size 0x0
>+layer at (8,42) size 302x152
>+  RenderVideo {VIDEO} at (0,0) size 302x152 [border: (1px solid #000000)]
>+layer at (9,43) size 300x150
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (1,1) size 300x150
>+    RenderBlock {DIV} at (0,115) size 300x35
>+layer at (14,158) size 290x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,0) size 290x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 186x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 186x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 198x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (249,0) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:00"
>diff --git a/LayoutTests/platform/gtk/TestExpectations b/LayoutTests/platform/gtk/TestExpectations
>index bf29773..57c3b73 100644
>--- a/LayoutTests/platform/gtk/TestExpectations
>+++ b/LayoutTests/platform/gtk/TestExpectations
>@@ -442,6 +442,15 @@ webkit.org/b/103926 media/track/opera/track/webvtt/rendering/adhoc/voice_with_ev
> webkit.org/b/103771 media/track/track-in-band.html [ Failure ]
> webkit.org/b/103771 media/track/track-in-band-cues-added-once.html [ Timeout ]
> 
>+# New chromium based controls
>+fullscreen/video-controls-drag.html [ Failure ]
>+media/audio-delete-while-step-button-clicked.html [ Failure ]
>+media/media-volume-slider-rendered-below.html [ Failure ]
>+media/nodesFromRect-shadowContent.html [ Skip ]
>+media/video-zoom-controls.html [ Failure ]
>+media/video-controls-fullscreen-volume.html [ Skip ]
>+
>+
> #////////////////////////////////////////////////////////////////////////////////////////
> # End of Expected failures
> #////////////////////////////////////////////////////////////////////////////////////////
>diff --git a/LayoutTests/platform/gtk/accessibility/media-element-expected.txt b/LayoutTests/platform/gtk/accessibility/media-element-expected.txt
>index ec478c1..ac3a5c8 100644
>--- a/LayoutTests/platform/gtk/accessibility/media-element-expected.txt
>+++ b/LayoutTests/platform/gtk/accessibility/media-element-expected.txt
>@@ -8,28 +8,24 @@ State at 'canplaythrough' event:
>     role: AXRole: AXToolbar
> 
> 
>-        description: AXDescription: play
>-        role: AXRole: AXButton
>+        description: AXDescription: video element controller
>+        role: AXRole: AXToolbar
> 
> 
>-        description: AXDescription: 
>-        role: AXRole: AXSlider
>+            description: AXDescription: play
>+            role: AXRole: AXButton
> 
> 
>-        description: AXDescription: fast reverse
>-        role: AXRole: AXButton
>+            description: AXDescription: 
>+            role: AXRole: AXSlider
> 
> 
>-        description: AXDescription: fast forward
>-        role: AXRole: AXButton
>+            description: AXDescription: enter fullscreen
>+            role: AXRole: AXButton
> 
> 
>-        description: AXDescription: enter fullscreen
>-        role: AXRole: AXButton
>-
>-
>-        description: AXDescription: mute
>-        role: AXRole: AXButton
>+            description: AXDescription: mute
>+            role: AXRole: AXButton
> 
> 
> 
>diff --git a/LayoutTests/platform/gtk/fast/hidpi/video-controls-in-hidpi-expected.txt b/LayoutTests/platform/gtk/fast/hidpi/video-controls-in-hidpi-expected.txt
>index de1be1a..e543316 100644
>--- a/LayoutTests/platform/gtk/fast/hidpi/video-controls-in-hidpi-expected.txt
>+++ b/LayoutTests/platform/gtk/fast/hidpi/video-controls-in-hidpi-expected.txt
>@@ -12,19 +12,15 @@ layer at (8,26) size 300x150
>   RenderVideo {VIDEO} at (0,0) size 300x150
> layer at (8,26) size 300x150
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x150
>-layer at (8,26) size 300x150 scrollHeight 160
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x150
>-    RenderButton {INPUT} at (0,130) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,130) size 240x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:00"
>-      RenderSlider {INPUT} at (66,0) size 173x20
>-        RenderFlexibleBox {DIV} at (2,0) size 169x20
>-          RenderBlock {DIV} at (0,4) size 169x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (260,130) size 20x20
>-    RenderButton {INPUT} at (280,130) size 20x20
>-    RenderBlock {DIV} at (300,150) size 0x0
>+    RenderBlock {DIV} at (0,110) size 300x40
>+layer at (13,141) size 290x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 290x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 177x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 177x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 189x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (240,-1) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:00"
>diff --git a/LayoutTests/platform/gtk/fast/layers/video-layer-expected.txt b/LayoutTests/platform/gtk/fast/layers/video-layer-expected.txt
>index b318ad9..6d505ea 100644
>--- a/LayoutTests/platform/gtk/fast/layers/video-layer-expected.txt
>+++ b/LayoutTests/platform/gtk/fast/layers/video-layer-expected.txt
>@@ -17,19 +17,15 @@ layer at (58,110) size 302x152
>   RenderVideo {VIDEO} at (50,50) size 302x152 [border: (1px solid #000000)]
> layer at (59,111) size 300x150
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (1,1) size 300x150
>-layer at (59,111) size 300x150 scrollHeight 160
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x150
>-    RenderButton {INPUT} at (0,130) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,130) size 240x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:00"
>-      RenderSlider {INPUT} at (66,0) size 173x20
>-        RenderFlexibleBox {DIV} at (2,0) size 169x20
>-          RenderBlock {DIV} at (0,4) size 169x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (260,130) size 20x20
>-    RenderButton {INPUT} at (280,130) size 20x20
>-    RenderBlock {DIV} at (300,150) size 0x0
>+    RenderBlock {DIV} at (0,110) size 300x40
>+layer at (64,226) size 290x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 290x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 177x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 177x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 189x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (240,-1) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:00"
>diff --git a/LayoutTests/platform/gtk/media/audio-controls-rendering-expected.txt b/LayoutTests/platform/gtk/media/audio-controls-rendering-expected.txt
>index 9049442..150d396 100644
>--- a/LayoutTests/platform/gtk/media/audio-controls-rendering-expected.txt
>+++ b/LayoutTests/platform/gtk/media/audio-controls-rendering-expected.txt
>@@ -6,73 +6,58 @@ layer at (0,0) size 800x600
>       RenderBlock {P} at (0,0) size 784x18
>         RenderText {#text} at (0,0) size 153x19
>           text run at (0,0) width 153: "Test controls placement."
>-      RenderBlock (anonymous) at (0,34) size 784x94
>-        RenderMedia {AUDIO} at (0,0) size 300x20 [bgcolor=#0000FF]
>-        RenderBR {BR} at (300,20) size 0x0
>-        RenderBR {BR} at (0,20) size 0x19
>-        RenderMedia {AUDIO} at (0,38) size 320x20 [bgcolor=#0000FF]
>-        RenderBR {BR} at (320,58) size 0x0
>-        RenderBR {BR} at (0,58) size 0x19
>-        RenderBR {BR} at (0,76) size 0x19
>-layer at (8,42) size 300x20
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x20
>-layer at (8,42) size 300x20 scrollHeight 30
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x20
>-    RenderButton {INPUT} at (0,0) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,0) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:07"
>-      RenderSlider {INPUT} at (66,0) size 153x20
>-        RenderFlexibleBox {DIV} at (2,0) size 149x20
>-          RenderBlock {DIV} at (0,4) size 149x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (240,0) size 20x20
>-    RenderButton {INPUT} at (260,0) size 20x20
>-    RenderBlock {DIV} at (280,0) size 20x20
>-layer at (288,42) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>-layer at (8,80) size 320x20
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x20
>-layer at (8,80) size 320x20 scrollHeight 30
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x20
>-    RenderButton {INPUT} at (0,0) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,0) size 240x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:07"
>-      RenderSlider {INPUT} at (66,0) size 173x20
>-        RenderFlexibleBox {DIV} at (2,0) size 169x20
>-          RenderBlock {DIV} at (0,4) size 169x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (260,0) size 20x20
>-    RenderButton {INPUT} at (280,0) size 20x20
>-    RenderBlock {DIV} at (300,0) size 20x20
>-layer at (308,80) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>-layer at (8,118) size 320x100
>-  RenderMedia {AUDIO} at (8,118) size 320x100 [bgcolor=#0000FF]
>-layer at (8,118) size 320x100
>+      RenderBlock (anonymous) at (0,34) size 784x114
>+        RenderMedia {AUDIO} at (0,0) size 300x30 [bgcolor=#0000FF]
>+        RenderBR {BR} at (300,30) size 0x0
>+        RenderBR {BR} at (0,30) size 0x19
>+        RenderMedia {AUDIO} at (0,48) size 320x30 [bgcolor=#0000FF]
>+        RenderBR {BR} at (320,78) size 0x0
>+        RenderBR {BR} at (0,78) size 0x19
>+        RenderBR {BR} at (0,96) size 0x19
>+layer at (8,42) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30
>+    RenderBlock {DIV} at (0,0) size 300x30
>+layer at (8,42) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 157x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 157x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 169x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (220,-1) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:07"
>+    RenderButton {INPUT} at (261,0) size 30x30
>+layer at (8,90) size 320x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x30
>+    RenderBlock {DIV} at (0,0) size 320x30
>+layer at (8,90) size 320x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 177x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 177x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 189x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (240,-1) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:07"
>+    RenderButton {INPUT} at (281,0) size 30x30
>+layer at (8,138) size 320x100
>+  RenderMedia {AUDIO} at (8,138) size 320x100 [bgcolor=#0000FF]
>+layer at (8,138) size 320x100
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x100
>-layer at (8,118) size 320x100 scrollHeight 110
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x100
>-    RenderButton {INPUT} at (0,80) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,80) size 240x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:07"
>-      RenderSlider {INPUT} at (66,0) size 173x20
>-        RenderFlexibleBox {DIV} at (2,0) size 169x20
>-          RenderBlock {DIV} at (0,4) size 169x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (260,80) size 20x20
>-    RenderButton {INPUT} at (280,80) size 20x20
>-    RenderBlock {DIV} at (300,80) size 20x20
>-layer at (308,198) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>+    RenderBlock {DIV} at (0,70) size 320x30
>+layer at (8,208) size 320x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 177x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 177x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 189x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (240,-1) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:07"
>+    RenderButton {INPUT} at (281,0) size 30x30
>diff --git a/LayoutTests/platform/gtk/media/audio-repaint-expected.txt b/LayoutTests/platform/gtk/media/audio-repaint-expected.txt
>index b8f0dd3..dcf0f3d 100644
>--- a/LayoutTests/platform/gtk/media/audio-repaint-expected.txt
>+++ b/LayoutTests/platform/gtk/media/audio-repaint-expected.txt
>@@ -7,70 +7,57 @@ layer at (0,0) size 800x600
>         RenderText {#text} at (0,0) size 699x19
>           text run at (0,0) width 609: "This tests that in a html document with inline audio content, the media element repaints correctly "
>           text run at (609,0) width 90: "while playing."
>-      RenderBlock (anonymous) at (0,34) size 784x139
>-        RenderMedia {AUDIO} at (0,0) size 300x20
>-        RenderBR {BR} at (300,20) size 0x0
>-        RenderBR {BR} at (300,65) size 0x0
>-        RenderBR {BR} at (300,139) size 0x0
>-layer at (8,62) size 300x20
>-  RenderMedia {AUDIO} at (0,20) size 300x20
>-layer at (8,62) size 300x20
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x20
>-layer at (8,62) size 300x20 scrollHeight 30
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x20
>-    RenderButton {INPUT} at (0,0) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,0) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:01"
>-      RenderSlider {INPUT} at (66,0) size 153x20
>-        RenderFlexibleBox {DIV} at (2,0) size 149x20
>-          RenderBlock {DIV} at (0,4) size 149x12
>-            RenderBlock {DIV} at (68,0) size 12x12
>-    RenderButton {INPUT} at (240,0) size 20x20
>-    RenderButton {INPUT} at (260,0) size 20x20
>-    RenderBlock {DIV} at (280,0) size 20x20
>-layer at (288,62) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>-layer at (8,42) size 300x20
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x20
>-layer at (8,42) size 300x20 scrollHeight 30
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x20
>-    RenderButton {INPUT} at (0,0) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,0) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:01"
>-      RenderSlider {INPUT} at (66,0) size 153x20
>-        RenderFlexibleBox {DIV} at (2,0) size 149x20
>-          RenderBlock {DIV} at (0,4) size 149x12
>-            RenderBlock {DIV} at (68,0) size 12x12
>-    RenderButton {INPUT} at (240,0) size 20x20
>-    RenderButton {INPUT} at (260,0) size 20x20
>-    RenderBlock {DIV} at (280,0) size 20x20
>-layer at (288,42) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>-layer at (8,134) size 300x20
>-  RenderMedia {AUDIO} at (0,92) size 300x20
>-layer at (8,134) size 300x20
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x20
>-layer at (8,134) size 300x20 scrollHeight 30
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x20
>-    RenderButton {INPUT} at (0,0) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,0) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:01"
>-      RenderSlider {INPUT} at (66,0) size 153x20
>-        RenderFlexibleBox {DIV} at (2,0) size 149x20
>-          RenderBlock {DIV} at (0,4) size 149x12
>-            RenderBlock {DIV} at (68,0) size 12x12
>-    RenderButton {INPUT} at (240,0) size 20x20
>-    RenderButton {INPUT} at (260,0) size 20x20
>-    RenderBlock {DIV} at (280,0) size 20x20
>+      RenderBlock (anonymous) at (0,34) size 784x169
>+        RenderMedia {AUDIO} at (0,0) size 300x30
>+        RenderBR {BR} at (300,30) size 0x0
>+        RenderBR {BR} at (300,85) size 0x0
>+        RenderBR {BR} at (300,169) size 0x0
>+layer at (8,72) size 300x30
>+  RenderMedia {AUDIO} at (0,30) size 300x30
>+layer at (8,72) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30
>+    RenderBlock {DIV} at (0,0) size 300x30
>+layer at (8,72) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 115x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 115x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 127x12
>+          RenderBlock {DIV} at (50,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (178,-1) size 74x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 74x30
>+        RenderText {#text} at (0,7) size 74x15
>+          text run at (0,7) width 74: "00:00 / 00:01"
>+    RenderButton {INPUT} at (261,0) size 30x30
>+layer at (8,42) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30
>+    RenderBlock {DIV} at (0,0) size 300x30
>+layer at (8,42) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 115x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 115x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 127x12
>+          RenderBlock {DIV} at (50,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (178,-1) size 74x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 74x30
>+        RenderText {#text} at (0,7) size 74x15
>+          text run at (0,7) width 74: "00:00 / 00:01"
>+    RenderButton {INPUT} at (261,0) size 30x30
>+layer at (8,154) size 300x30
>+  RenderMedia {AUDIO} at (0,112) size 300x30
>+layer at (8,154) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30
>+    RenderBlock {DIV} at (0,0) size 300x30
>+layer at (8,154) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 115x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 115x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 127x12
>+          RenderBlock {DIV} at (50,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (178,-1) size 74x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 74x30
>+        RenderText {#text} at (0,7) size 74x15
>+          text run at (0,7) width 74: "00:00 / 00:01"
>+    RenderButton {INPUT} at (261,0) size 30x30
>diff --git a/LayoutTests/platform/gtk/media/controls-after-reload-expected.txt b/LayoutTests/platform/gtk/media/controls-after-reload-expected.txt
>index 64a5547..774d630 100644
>--- a/LayoutTests/platform/gtk/media/controls-after-reload-expected.txt
>+++ b/LayoutTests/platform/gtk/media/controls-after-reload-expected.txt
>@@ -12,22 +12,17 @@ layer at (8,42) size 320x240
>   RenderVideo {VIDEO} at (0,0) size 320x240
> layer at (8,42) size 320x240
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-layer at (8,42) size 320x240 scrollHeight 250
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-    RenderButton {INPUT} at (0,220) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,220) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:06"
>-      RenderSlider {INPUT} at (66,0) size 153x20
>-        RenderFlexibleBox {DIV} at (2,0) size 149x20
>-          RenderBlock {DIV} at (0,4) size 149x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (240,220) size 20x20
>-    RenderButton {INPUT} at (260,220) size 20x20
>-    RenderButton {INPUT} at (280,220) size 20x20
>-    RenderBlock {DIV} at (300,220) size 20x20
>-layer at (308,262) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>+    RenderBlock {DIV} at (0,200) size 320x40
>+layer at (13,247) size 310x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 95x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 95x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 107x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (158,-1) size 74x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 74x30
>+        RenderText {#text} at (0,7) size 74x15
>+          text run at (0,7) width 74: "00:00 / 00:06"
>+    RenderButton {INPUT} at (241,0) size 30x30
>+    RenderButton {INPUT} at (271,0) size 30x30
>diff --git a/LayoutTests/platform/gtk/media/controls-strict-expected.txt b/LayoutTests/platform/gtk/media/controls-strict-expected.txt
>index 1bebfc4..e22bc44 100644
>--- a/LayoutTests/platform/gtk/media/controls-strict-expected.txt
>+++ b/LayoutTests/platform/gtk/media/controls-strict-expected.txt
>@@ -12,22 +12,17 @@ layer at (8,50) size 320x240
>   RenderVideo {VIDEO} at (0,0) size 320x240
> layer at (8,50) size 320x240
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-layer at (8,50) size 320x240 scrollHeight 251
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-    RenderButton {INPUT} at (0,220) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,220) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x31
>-        RenderDeprecatedFlexibleBox {DIV} at (0,1) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:06"
>-      RenderSlider {INPUT} at (66,0) size 153x20
>-        RenderFlexibleBox {DIV} at (2,0) size 149x20
>-          RenderBlock {DIV} at (0,4) size 149x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (240,220) size 20x20
>-    RenderButton {INPUT} at (260,220) size 20x20
>-    RenderButton {INPUT} at (280,220) size 20x20
>-    RenderBlock {DIV} at (300,220) size 20x20
>-layer at (308,270) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>+    RenderBlock {DIV} at (0,200) size 320x40
>+layer at (13,255) size 310x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 95x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 95x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 107x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (158,-1) size 74x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 74x30
>+        RenderText {#text} at (0,7) size 74x15
>+          text run at (0,7) width 74: "00:00 / 00:06"
>+    RenderButton {INPUT} at (241,0) size 30x30
>+    RenderButton {INPUT} at (271,0) size 30x30
>diff --git a/LayoutTests/platform/gtk/media/controls-styling-expected.txt b/LayoutTests/platform/gtk/media/controls-styling-expected.txt
>index 8b10a7d..e2dfaa2 100644
>--- a/LayoutTests/platform/gtk/media/controls-styling-expected.txt
>+++ b/LayoutTests/platform/gtk/media/controls-styling-expected.txt
>@@ -16,45 +16,33 @@ layer at (8,282) size 320x240
>   RenderVideo {VIDEO} at (0,0) size 320x240
> layer at (18,42) size 320x240
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-layer at (18,42) size 320x240 scrollHeight 481
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-    RenderButton {INPUT} at (0,220) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,220) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 218x30
>-        RenderDeprecatedFlexibleBox {DIV} at (10,0) size 218x30
>-          RenderBlock (anonymous) at (5,5) size 208x20
>-            RenderText {#text} at (22,44) size 179x212
>-              text run at (22,44) width 174: "00:00"
>-              text run at (87,144) width 34: "/"
>-              text run at (17,244) width 174: "00:06"
>-      RenderSlider {INPUT} at (219,0) size 4x20
>-        RenderFlexibleBox {DIV} at (2,0) size 0x20
>-          RenderBlock {DIV} at (0,4) size 0x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (240,220) size 20x20
>-    RenderButton {INPUT} at (260,220) size 20x20
>-    RenderButton {INPUT} at (280,220) size 20x20
>-    RenderBlock {DIV} at (300,220) size 20x20
>-layer at (318,262) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>+    RenderBlock {DIV} at (0,200) size 320x40
>+layer at (23,247) size 310x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 95x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 95x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 107x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (158,-1) size 74x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 74x30
>+        RenderText {#text} at (0,7) size 74x15
>+          text run at (0,7) width 74: "00:00 / 00:06"
>+    RenderButton {INPUT} at (241,0) size 30x30
>+    RenderButton {INPUT} at (271,0) size 30x30
> layer at (8,282) size 320x240
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-layer at (8,282) size 320x240 scrollHeight 250
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-    RenderButton {INPUT} at (0,220) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,220) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:06"
>-      RenderSlider {INPUT} at (66,0) size 153x20
>-        RenderFlexibleBox {DIV} at (2,0) size 149x20
>-          RenderBlock {DIV} at (0,4) size 149x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (240,220) size 20x20
>-    RenderButton {INPUT} at (260,220) size 20x20
>-    RenderButton {INPUT} at (280,220) size 20x20
>-    RenderBlock {DIV} at (300,220) size 20x20
>-layer at (308,502) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>+    RenderBlock {DIV} at (0,200) size 320x40
>+layer at (13,487) size 310x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 95x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 95x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 107x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (158,-1) size 74x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 74x30
>+        RenderText {#text} at (0,7) size 74x15
>+          text run at (0,7) width 74: "00:00 / 00:06"
>+    RenderButton {INPUT} at (241,0) size 30x30
>+    RenderButton {INPUT} at (271,0) size 30x30
>diff --git a/LayoutTests/platform/gtk/media/controls-styling-strict-expected.txt b/LayoutTests/platform/gtk/media/controls-styling-strict-expected.txt
>index 7ce00bb..7200f2b 100644
>--- a/LayoutTests/platform/gtk/media/controls-styling-strict-expected.txt
>+++ b/LayoutTests/platform/gtk/media/controls-styling-strict-expected.txt
>@@ -16,43 +16,33 @@ layer at (332,50) size 320x240
>   RenderVideo {VIDEO} at (324,0) size 320x240
> layer at (8,50) size 320x240
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-layer at (8,50) size 320x240 scrollHeight 261
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-    RenderButton {INPUT} at (0,220) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,220) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 88x41
>-        RenderDeprecatedFlexibleBox {DIV} at (0,11) size 88x30
>-          RenderBlock (anonymous) at (5,5) size 78x20
>-            RenderText {#text} at (0,0) size 78x12
>-              text run at (0,0) width 78: "00:00 / 00:06"
>-      RenderSlider {INPUT} at (89,0) size 130x20
>-        RenderFlexibleBox {DIV} at (2,0) size 126x20
>-          RenderBlock {DIV} at (0,4) size 126x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (240,220) size 20x20
>-    RenderButton {INPUT} at (260,220) size 20x20
>-    RenderButton {INPUT} at (280,220) size 20x20
>-    RenderBlock {DIV} at (300,220) size 20x20
>-layer at (308,270) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>+    RenderBlock {DIV} at (0,200) size 320x40
>+layer at (13,255) size 310x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 95x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 95x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 107x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (158,-1) size 74x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 74x30
>+        RenderText {#text} at (0,7) size 74x15
>+          text run at (0,7) width 74: "00:00 / 00:06"
>+    RenderButton {INPUT} at (241,0) size 30x30
>+    RenderButton {INPUT} at (271,0) size 30x30
> layer at (332,50) size 320x240
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-layer at (332,50) size 320x240 scrollHeight 251
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-    RenderButton {INPUT} at (0,220) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,220) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x31
>-        RenderDeprecatedFlexibleBox {DIV} at (0,1) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:06"
>-      RenderSlider {INPUT} at (66,0) size 153x20
>-        RenderFlexibleBox {DIV} at (2,0) size 149x20
>-          RenderBlock {DIV} at (0,4) size 149x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (240,220) size 20x20
>-    RenderButton {INPUT} at (260,220) size 20x20
>-    RenderButton {INPUT} at (280,220) size 20x20
>-    RenderBlock {DIV} at (300,220) size 20x20
>-layer at (632,270) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>+    RenderBlock {DIV} at (0,200) size 320x40
>+layer at (337,255) size 310x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 95x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 95x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 107x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (158,-1) size 74x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 74x30
>+        RenderText {#text} at (0,7) size 74x15
>+          text run at (0,7) width 74: "00:00 / 00:06"
>+    RenderButton {INPUT} at (241,0) size 30x30
>+    RenderButton {INPUT} at (271,0) size 30x30
>diff --git a/LayoutTests/platform/gtk/media/controls-without-preload-expected.txt b/LayoutTests/platform/gtk/media/controls-without-preload-expected.txt
>index b616ffa..cf9a2d9 100644
>--- a/LayoutTests/platform/gtk/media/controls-without-preload-expected.txt
>+++ b/LayoutTests/platform/gtk/media/controls-without-preload-expected.txt
>@@ -12,22 +12,17 @@ layer at (8,42) size 320x240
>   RenderVideo {VIDEO} at (0,0) size 320x240
> layer at (8,42) size 320x240
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-layer at (8,42) size 320x240 scrollHeight 250
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-    RenderButton {INPUT} at (0,220) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,220) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:06"
>-      RenderSlider {INPUT} at (66,0) size 153x20
>-        RenderFlexibleBox {DIV} at (2,0) size 149x20
>-          RenderBlock {DIV} at (0,4) size 149x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (240,220) size 20x20
>-    RenderButton {INPUT} at (260,220) size 20x20
>-    RenderButton {INPUT} at (280,220) size 20x20
>-    RenderBlock {DIV} at (300,220) size 20x20
>-layer at (308,262) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>+    RenderBlock {DIV} at (0,200) size 320x40
>+layer at (13,247) size 310x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 95x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 95x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 107x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (158,-1) size 74x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 74x30
>+        RenderText {#text} at (0,7) size 74x15
>+          text run at (0,7) width 74: "00:00 / 00:06"
>+    RenderButton {INPUT} at (241,0) size 30x30
>+    RenderButton {INPUT} at (271,0) size 30x30
>diff --git a/LayoutTests/platform/gtk/media/media-controls-clone-expected.txt b/LayoutTests/platform/gtk/media/media-controls-clone-expected.txt
>index 54d297d..871bcfa 100644
>--- a/LayoutTests/platform/gtk/media/media-controls-clone-expected.txt
>+++ b/LayoutTests/platform/gtk/media/media-controls-clone-expected.txt
>@@ -4,82 +4,66 @@ layer at (0,0) size 800x322
>   RenderBlock {HTML} at (0,0) size 800x322
>     RenderBody {BODY} at (8,8) size 784x306
>       RenderBlock {DIV} at (0,0) size 784x153
>-        RenderMedia {AUDIO} at (300,130) size 300x20
>+        RenderMedia {AUDIO} at (300,120) size 300x30
>       RenderBlock {DIV} at (0,153) size 784x153
>-        RenderMedia {AUDIO} at (300,130) size 300x20
>+        RenderMedia {AUDIO} at (300,120) size 300x30
> layer at (8,8) size 300x150
>   RenderVideo {VIDEO} at (0,0) size 300x150
> layer at (8,161) size 300x150
>   RenderVideo {VIDEO} at (0,0) size 300x150
> layer at (8,8) size 300x150
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x150
>-layer at (8,8) size 300x150 scrollHeight 161
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x150
>-    RenderButton {INPUT} at (0,130) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,130) size 240x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x31
>-        RenderDeprecatedFlexibleBox {DIV} at (0,1) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:00"
>-      RenderSlider {INPUT} at (66,0) size 173x20
>-        RenderFlexibleBox {DIV} at (2,0) size 169x20
>-          RenderBlock {DIV} at (0,4) size 169x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (260,130) size 20x20
>-    RenderButton {INPUT} at (280,130) size 20x20
>-    RenderBlock {DIV} at (300,150) size 0x0
>-layer at (308,138) size 300x20
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x20
>-layer at (308,138) size 300x20 scrollHeight 31
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x20
>-    RenderButton {INPUT} at (0,0) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,0) size 240x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x31
>-        RenderDeprecatedFlexibleBox {DIV} at (0,1) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:00"
>-      RenderSlider {INPUT} at (66,0) size 173x20
>-        RenderFlexibleBox {DIV} at (2,0) size 169x20
>-          RenderBlock {DIV} at (0,4) size 169x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (260,0) size 20x20
>-    RenderButton {INPUT} at (280,0) size 20x20
>-    RenderBlock {DIV} at (300,20) size 0x0
>+    RenderBlock {DIV} at (0,110) size 300x40
>+layer at (13,123) size 290x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 290x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 177x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 177x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 189x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (240,-1) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:00"
>+layer at (308,128) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30
>+    RenderBlock {DIV} at (0,0) size 300x30
>+layer at (308,128) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 187x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 187x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 199x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (250,-1) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:00"
> layer at (8,161) size 300x150
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x150
>-layer at (8,161) size 300x150 scrollHeight 161
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x150
>-    RenderButton {INPUT} at (0,130) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,130) size 240x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x31
>-        RenderDeprecatedFlexibleBox {DIV} at (0,1) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:00"
>-      RenderSlider {INPUT} at (66,0) size 173x20
>-        RenderFlexibleBox {DIV} at (2,0) size 169x20
>-          RenderBlock {DIV} at (0,4) size 169x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (260,130) size 20x20
>-    RenderButton {INPUT} at (280,130) size 20x20
>-    RenderBlock {DIV} at (300,150) size 0x0
>-layer at (308,291) size 300x20
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x20
>-layer at (308,291) size 300x20 scrollHeight 31
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x20
>-    RenderButton {INPUT} at (0,0) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,0) size 240x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x31
>-        RenderDeprecatedFlexibleBox {DIV} at (0,1) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:00"
>-      RenderSlider {INPUT} at (66,0) size 173x20
>-        RenderFlexibleBox {DIV} at (2,0) size 169x20
>-          RenderBlock {DIV} at (0,4) size 169x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (260,0) size 20x20
>-    RenderButton {INPUT} at (280,0) size 20x20
>-    RenderBlock {DIV} at (300,20) size 0x0
>+    RenderBlock {DIV} at (0,110) size 300x40
>+layer at (13,276) size 290x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 290x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 177x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 177x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 189x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (240,-1) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:00"
>+layer at (308,281) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30
>+    RenderBlock {DIV} at (0,0) size 300x30
>+layer at (308,281) size 300x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 187x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 187x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 199x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (250,-1) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:00"
>diff --git a/LayoutTests/platform/gtk/media/video-controls-rendering-expected.txt b/LayoutTests/platform/gtk/media/video-controls-rendering-expected.txt
>index 4ff0289..9e4be28 100644
>--- a/LayoutTests/platform/gtk/media/video-controls-rendering-expected.txt
>+++ b/LayoutTests/platform/gtk/media/video-controls-rendering-expected.txt
>@@ -17,66 +17,51 @@ layer at (8,282) size 320x240
>   RenderVideo {VIDEO} at (0,0) size 320x240
> layer at (8,42) size 320x240
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-layer at (8,42) size 320x240 scrollHeight 250
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-    RenderButton {INPUT} at (0,220) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,220) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:06"
>-      RenderSlider {INPUT} at (66,0) size 153x20
>-        RenderFlexibleBox {DIV} at (2,0) size 149x20
>-          RenderBlock {DIV} at (0,4) size 149x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (240,220) size 20x20
>-    RenderButton {INPUT} at (260,220) size 20x20
>-    RenderButton {INPUT} at (280,220) size 20x20
>-    RenderBlock {DIV} at (300,220) size 20x20
>-layer at (308,262) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>+    RenderBlock {DIV} at (0,200) size 320x40
>+layer at (13,247) size 310x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 95x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 95x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 107x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (158,-1) size 74x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 74x30
>+        RenderText {#text} at (0,7) size 74x15
>+          text run at (0,7) width 74: "00:00 / 00:06"
>+    RenderButton {INPUT} at (241,0) size 30x30
>+    RenderButton {INPUT} at (271,0) size 30x30
> layer at (8,282) size 320x240
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-layer at (8,282) size 320x240 scrollHeight 250
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-    RenderButton {INPUT} at (0,220) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,220) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:06"
>-      RenderSlider {INPUT} at (66,0) size 153x20
>-        RenderFlexibleBox {DIV} at (2,0) size 149x20
>-          RenderBlock {DIV} at (0,4) size 149x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (240,220) size 20x20
>-    RenderButton {INPUT} at (260,220) size 20x20
>-    RenderButton {INPUT} at (280,220) size 20x20
>-    RenderBlock {DIV} at (300,220) size 20x20
>-layer at (308,502) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>+    RenderBlock {DIV} at (0,200) size 320x40
>+layer at (13,487) size 310x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 95x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 95x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 107x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (158,-1) size 74x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 74x30
>+        RenderText {#text} at (0,7) size 74x15
>+          text run at (0,7) width 74: "00:00 / 00:06"
>+    RenderButton {INPUT} at (241,0) size 30x30
>+    RenderButton {INPUT} at (271,0) size 30x30
> layer at (8,522) size 320x240
>   RenderVideo {VIDEO} at (8,522) size 320x240
> layer at (8,522) size 320x240
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-layer at (8,522) size 320x240 scrollHeight 250
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-    RenderButton {INPUT} at (0,220) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,220) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:06"
>-      RenderSlider {INPUT} at (66,0) size 153x20
>-        RenderFlexibleBox {DIV} at (2,0) size 149x20
>-          RenderBlock {DIV} at (0,4) size 149x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (240,220) size 20x20
>-    RenderButton {INPUT} at (260,220) size 20x20
>-    RenderButton {INPUT} at (280,220) size 20x20
>-    RenderBlock {DIV} at (300,220) size 20x20
>-layer at (308,742) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>+    RenderBlock {DIV} at (0,200) size 320x40
>+layer at (13,727) size 310x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 95x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 95x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 107x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (158,-1) size 74x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 74x30
>+        RenderText {#text} at (0,7) size 74x15
>+          text run at (0,7) width 74: "00:00 / 00:06"
>+    RenderButton {INPUT} at (241,0) size 30x30
>+    RenderButton {INPUT} at (271,0) size 30x30
>diff --git a/LayoutTests/platform/gtk/media/video-display-toggle-expected.txt b/LayoutTests/platform/gtk/media/video-display-toggle-expected.txt
>index 9bd0219..f079d16 100644
>--- a/LayoutTests/platform/gtk/media/video-display-toggle-expected.txt
>+++ b/LayoutTests/platform/gtk/media/video-display-toggle-expected.txt
>@@ -11,22 +11,17 @@ layer at (8,26) size 320x240
>   RenderVideo {VIDEO} at (0,18) size 320x240
> layer at (8,26) size 320x240
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-layer at (8,26) size 320x240 scrollHeight 250
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-    RenderButton {INPUT} at (0,220) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,220) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:06"
>-      RenderSlider {INPUT} at (66,0) size 153x20
>-        RenderFlexibleBox {DIV} at (2,0) size 149x20
>-          RenderBlock {DIV} at (0,4) size 149x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (240,220) size 20x20
>-    RenderButton {INPUT} at (260,220) size 20x20
>-    RenderButton {INPUT} at (280,220) size 20x20
>-    RenderBlock {DIV} at (300,220) size 20x20
>-layer at (308,246) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>+    RenderBlock {DIV} at (0,200) size 320x40
>+layer at (13,231) size 310x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 137x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 137x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 149x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (200,-1) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:06"
>+    RenderButton {INPUT} at (241,0) size 30x30
>+    RenderButton {INPUT} at (271,0) size 30x30
>diff --git a/LayoutTests/platform/gtk/media/video-empty-source-expected.txt b/LayoutTests/platform/gtk/media/video-empty-source-expected.txt
>index 45aebbd..c141775 100644
>--- a/LayoutTests/platform/gtk/media/video-empty-source-expected.txt
>+++ b/LayoutTests/platform/gtk/media/video-empty-source-expected.txt
>@@ -12,19 +12,15 @@ layer at (8,42) size 302x152
>   RenderVideo {VIDEO} at (0,0) size 302x152 [border: (1px solid #000000)]
> layer at (9,43) size 300x150
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (1,1) size 300x150
>-layer at (9,43) size 300x150 scrollHeight 160
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 300x150
>-    RenderButton {INPUT} at (0,130) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,130) size 240x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:00"
>-      RenderSlider {INPUT} at (66,0) size 173x20
>-        RenderFlexibleBox {DIV} at (2,0) size 169x20
>-          RenderBlock {DIV} at (0,4) size 169x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (260,130) size 20x20
>-    RenderButton {INPUT} at (280,130) size 20x20
>-    RenderBlock {DIV} at (300,150) size 0x0
>+    RenderBlock {DIV} at (0,110) size 300x40
>+layer at (14,158) size 290x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 290x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 177x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 177x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 189x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (240,-1) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:00"
>diff --git a/LayoutTests/platform/gtk/media/video-no-audio-expected.txt b/LayoutTests/platform/gtk/media/video-no-audio-expected.txt
>index 364735b..11f20e0 100644
>--- a/LayoutTests/platform/gtk/media/video-no-audio-expected.txt
>+++ b/LayoutTests/platform/gtk/media/video-no-audio-expected.txt
>@@ -12,20 +12,16 @@ layer at (8,42) size 352x288
>   RenderVideo {VIDEO} at (0,0) size 352x288
> layer at (8,42) size 352x288
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 352x288
>-layer at (8,42) size 352x288 scrollHeight 298
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 352x288
>-    RenderButton {INPUT} at (0,268) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,268) size 272x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:09"
>-      RenderSlider {INPUT} at (66,0) size 205x20
>-        RenderFlexibleBox {DIV} at (2,0) size 201x20
>-          RenderBlock {DIV} at (0,4) size 201x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (292,268) size 20x20
>-    RenderButton {INPUT} at (312,268) size 20x20
>-    RenderButton {INPUT} at (332,268) size 20x20
>-    RenderBlock {DIV} at (352,288) size 0x0
>+    RenderBlock {DIV} at (0,248) size 352x40
>+layer at (13,295) size 342x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 342x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 199x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 199x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 211x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (262,-1) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:09"
>+    RenderButton {INPUT} at (303,0) size 30x30
>diff --git a/LayoutTests/platform/gtk/media/video-volume-slider-expected.txt b/LayoutTests/platform/gtk/media/video-volume-slider-expected.txt
>index 8e24fc6..2854401 100644
>--- a/LayoutTests/platform/gtk/media/video-volume-slider-expected.txt
>+++ b/LayoutTests/platform/gtk/media/video-volume-slider-expected.txt
>@@ -17,29 +17,23 @@ layer at (8,62) size 320x240
>   RenderVideo {VIDEO} at (0,54) size 320x240
> layer at (8,62) size 320x240
>   RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-layer at (8,62) size 320x240 scrollHeight 250
>-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
>-    RenderButton {INPUT} at (0,220) size 20x20
>-    RenderDeprecatedFlexibleBox {DIV} at (20,220) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
>-      RenderBlock (anonymous) at (1,0) size 65x30
>-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
>-          RenderBlock (anonymous) at (5,5) size 55x20
>-            RenderText {#text} at (0,0) size 55x12
>-              text run at (0,0) width 55: "00:00 / 00:06"
>-      RenderSlider {INPUT} at (66,0) size 153x20
>-        RenderFlexibleBox {DIV} at (2,0) size 149x20
>-          RenderBlock {DIV} at (0,4) size 149x12
>-            RenderBlock {DIV} at (0,0) size 12x12
>-    RenderButton {INPUT} at (240,220) size 20x20
>-    RenderButton {INPUT} at (260,220) size 20x20
>-    RenderButton {INPUT} at (280,220) size 20x20
>-    RenderBlock {DIV} at (300,220) size 20x20
>-layer at (308,182) size 20x100
>-  RenderBlock (positioned) zI: 1 {DIV} at (300,120) size 20x100
>-layer at (311,187) size 14x95
>-  RenderSlider {INPUT} at (3,5) size 14x95
>-    RenderFlexibleBox {DIV} at (0,0) size 14x95
>-      RenderBlock {DIV} at (0,0) size 14x95
>-        RenderBlock {DIV} at (0,20) size 14x31
>-layer at (308,282) size 20x20
>-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
>+    RenderBlock {DIV} at (0,200) size 320x40
>+layer at (13,267) size 310x30
>+  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
>+    RenderButton {INPUT} at (9,0) size 30x30
>+    RenderSlider {INPUT} at (48,11) size 137x8 [color=#E6E6E659]
>+      RenderFlexibleBox {DIV} at (0,0) size 137x8 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (1,-2) size 149x12
>+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
>+    RenderDeprecatedFlexibleBox {DIV} at (200,-1) size 32x30 [color=#FFFFFF]
>+      RenderBlock (anonymous) at (0,0) size 32x30
>+        RenderText {#text} at (0,7) size 32x15
>+          text run at (0,7) width 32: "00:06"
>+    RenderButton {INPUT} at (241,0) size 30x30
>+    RenderButton {INPUT} at (271,0) size 30x30
>+layer at (283,167) size 30x100
>+  RenderBlock (positioned) zI: 2 {DIV} at (270,-100) size 30x100
>+    RenderSlider {INPUT} at (0,0) size 30x100 [border: (1px solid #E6E6E659)]
>+      RenderFlexibleBox {DIV} at (11,11) size 8x78 [border: (1px solid #E6E6E659)]
>+        RenderBlock {DIV} at (-3,-6) size 14x90
>+          RenderBlock {DIV} at (0,18) size 14x31 [color=#FFFFFF]
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index 9e80645..c2d703d 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,133 @@
>+2013-01-23  Xabier Rodriguez Calvar  <calvaris@igalia.com>
>+
>+        [Gtk] HTML5 Media controls require a design refresh
>+        https://bugs.webkit.org/show_bug.cgi?id=83869
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * GNUmakefile.list.am: Added compilation for MediaControlsGtk.cpp
>+        and MediaControlsGtk.h
>+        * css/mediaControlsGtk.css: CSS changes for the GTK+ port controls
>+        (body:-webkit-full-page-media): Background for full page media.
>+        (audio): Setting controls width and height.
>+        (audio:-webkit-full-page-media, video:-webkit-full-page-media):
>+        (video:-webkit-full-page-media::-webkit-media-controls-panel):
>+        Full media controls fill 100 of the width and height for the full
>+        page media
>+        (::-webkit-media-controls): General css setup for the controls.
>+        (audio::-webkit-media-controls-enclosure)
>+        (video::-webkit-media-controls-enclosure): Controls enclosure to
>+        have some padding with the video borders.
>+        (video::-webkit-media-controls-enclosure): More parameters for the
>+        controls for video.
>+        (audio::-webkit-media-controls-panel)
>+        (video::-webkit-media-controls-panel): Controls general box prameters.
>+        (audio::-webkit-media-controls-mute-button)
>+        (video::-webkit-media-controls-mute-button): Mute button parameters
>+        (audio::-webkit-media-controls-play-button)
>+        (video::-webkit-media-controls-play-button): Play button parameters.
>+        (audio::-webkit-media-controls-time-remaining-display)
>+        (video::-webkit-media-controls-time-remaining-display): Current
>+        and duration time display parameters.
>+        (audio::-webkit-media-controls-timeline)
>+        (video::-webkit-media-controls-timeline): Time slider parameters
>+        (audio::-webkit-media-controls-volume-slider-container)
>+        (video::-webkit-media-controls-volume-slider-container): Volume
>+        slider container parameters. We need it because the slider floats
>+        out of the controls.
>+        (audio::-webkit-media-controls-volume-slider)
>+        (video::-webkit-media-controls-volume-slider): Volume slider track
>+        parameters.
>+        (audio::-webkit-media-controls-volume-slider-container
>+        input[type="range"]::-webkit-media-slider-container > div)
>+        (video::-webkit-media-controls-volume-slider-container
>+        input[type="range"]::-webkit-media-slider-container > div): Volume
>+        thumb path parameters. It needs to have the selector to make it
>+        different from the time slider.
>+        (audio::-webkit-media-controls-volume-slider-container
>+        input[type="range"]::-webkit-media-slider-thumb)
>+        (video::-webkit-media-controls-volume-slider-container
>+        input[type="range"]::-webkit-media-slider-thumb): Volume thumb
>+        parameters. It needs to have the selector to make it different
>+        from the time slider.
>+        (input[type="range"]::-webkit-media-slider-container): Media
>+        slider container.
>+        (input[type="range"]::-webkit-media-slider-container > div): Media
>+        slider thumb path parameters.
>+        (input[type="range"]::-webkit-media-slider-thumb): Media thumb parameters
>+        (audio::-webkit-media-controls-toggle-closed-captions-button)
>+        (video::-webkit-media-controls-toggle-closed-captions-button):
>+        Captions button parameters, currently disabled.
>+        (audio::-webkit-media-controls-fullscreen-button)
>+        (video::-webkit-media-controls-fullscreen-button): Fullscreen
>+        button parameters.
>+        * html/shadow/MediaControlsGtk.cpp: Added.
>+        (WebCore): Added MediaControlsGtk class.
>+        (WebCore::MediaControlsGtk::MediaControlsGtk): Class constructor
>+        (WebCore::MediaControls::create): Creates the Gtk+ controls
>+        components.
>+        (WebCore::MediaControlsGtk::createControls): Creates the Gtk+
>+        controls components.
>+        (WebCore::MediaControlsGtk::initializeControls): Initializes all
>+        media controls.
>+        (WebCore::MediaControlsGtk::setMediaController): Sets the media
>+        controller.
>+        (WebCore::MediaControlsGtk::reset): Resets the controllers.
>+        (WebCore::MediaControlsGtk::playbackStarted): Invoked when the
>+        playback starts
>+        (WebCore::MediaControlsGtk::updateCurrentTimeDisplay): Updates the
>+        controls when the current time shall be updated.
>+        (WebCore::MediaControlsGtk::changedMute): Updates the controls
>+        then the mute changes.
>+        (WebCore::MediaControlsGtk::showVolumeSlider): Invoked when the
>+        volume slider is meant to be shown.
>+        (WebCore::MediaControlsGtk::createTextTrackDisplay): Creates the
>+        track display. Though it is not used by us, it needs to be created
>+        to prevent immediate crashes when loading a video.
>+        * html/shadow/MediaControlsGtk.h: Added.
>+        (WebCore): Added the MediaControlsGtk class.
>+        (MediaControlsGtk): Added the MediaControlsGtk class.
>+        * platform/gtk/RenderThemeGtk.cpp:
>+        (WebCore): Added getStockSymbolicIconForWidgetType function
>+        signature to load symbolic icons.
>+        (WebCore::supportsFocus): Added media control widgets to support
>+        focus so that the focus ring is not painted by WebCore.
>+        (WebCore::RenderThemeGtk::paintMediaButton): Added the symbolic
>+        icon support. It supports now normal and symbolic icons at the
>+        same time.
>+        (WebCore::RenderThemeGtk::paintMediaFullscreenButton): Added the
>+        symbolic icon support.
>+        (WebCore::RenderThemeGtk::paintMediaMuteButton): Added the
>+        symbolic icon support.
>+        (WebCore::RenderThemeGtk::paintMediaPlayButton): Added the
>+        symbolic icon support.
>+        (WebCore::RenderThemeGtk::paintMediaSeekBackButton): Added the
>+        symbolic icon support.
>+        (WebCore::RenderThemeGtk::paintMediaSeekForwardButton): Added the
>+        symbolic icon support.
>+        (WebCore::RenderThemeGtk::paintMediaSliderTrack): Removed the
>+        background and the Gtk widget support as it is painted with
>+        CSS. Also paint the time ranges with the CSS style.
>+        (WebCore::RenderThemeGtk::paintMediaSliderThumb): Paint slider
>+        thumb according to the CSS parameters.
>+        (WebCore::RenderThemeGtk::paintMediaVolumeSliderContainer):
>+        Delegates in the CSS.
>+        (WebCore::RenderThemeGtk::paintMediaVolumeSliderTrack): Delegates
>+        in the CSS.
>+        (WebCore::RenderThemeGtk::paintMediaVolumeSliderThumb): Delegates
>+        in the paintMediaSliderThumb method so the thumb is painted the
>+        same with the CSS parameters.
>+        (WebCore::RenderThemeGtk::paintMediaCurrentTime): Removed the Gtk
>+        background to use only CSS.
>+        * platform/gtk/RenderThemeGtk.h:
>+        (RenderThemeGtk): Changed paintMediaButton to support the symbolic
>+        and normal icons at the same time.
>+        * platform/gtk/RenderThemeGtk3.cpp:
>+        (WebCore):
>+        (WebCore::getStockSymbolicIconForWidgetType): Added this function
>+        to load symbolic icons. It falls back to normal icons if the
>+        symbolic is not found.
>+
> 2013-01-22  Kentaro Hara  <haraken@chromium.org>
> 
>         [V8] Make an Isolate parameter mandatory in throwTypeError()
>diff --git a/Source/WebCore/GNUmakefile.list.am b/Source/WebCore/GNUmakefile.list.am
>index aa0ea82..ee90f29 100644
>--- a/Source/WebCore/GNUmakefile.list.am
>+++ b/Source/WebCore/GNUmakefile.list.am
>@@ -3620,8 +3620,8 @@ webcore_sources += \
> 	Source/WebCore/html/shadow/MediaControlElementTypes.h \
> 	Source/WebCore/html/shadow/MediaControls.cpp \
> 	Source/WebCore/html/shadow/MediaControls.h \
>-	Source/WebCore/html/shadow/MediaControlsApple.cpp \
>-	Source/WebCore/html/shadow/MediaControlsApple.h \
>+	Source/WebCore/html/shadow/MediaControlsGtk.cpp \
>+	Source/WebCore/html/shadow/MediaControlsGtk.h \
> 	Source/WebCore/html/shadow/MeterShadowElement.cpp \
> 	Source/WebCore/html/shadow/MeterShadowElement.h \
> 	Source/WebCore/html/shadow/ProgressShadowElement.cpp \
>diff --git a/Source/WebCore/css/mediaControlsGtk.css b/Source/WebCore/css/mediaControlsGtk.css
>index cd2c4c3..af1efe3 100644
>--- a/Source/WebCore/css/mediaControlsGtk.css
>+++ b/Source/WebCore/css/mediaControlsGtk.css
>@@ -1,101 +1,233 @@
> /*
>- * WebKitGTK+ specific overrides for HTML5 media elements.
>+ * Copyright (C) 2009 Apple Inc.  All rights reserved.
>+ * Copyright (C) 2009 Google Inc.
>+ * Copyright (C) 2012 Zan Dobersek <zandobersek@gmail.com>
>+ * Copyright (C) 2012 Igalia S.L.
>  *
>- * Copyright (C) 2009 Zan Dobersek <zandobersek@gmail.com>
>- *
>- * This library is free software; you can redistribute it and/or
>- * modify it under the terms of the GNU Library General Public
>- * License as published by the Free Software Foundation; either
>- * version 2 of the License, or (at your option) any later version.
>- *
>- * This library is distributed in the hope that it will be useful,
>- * but WITHOUT ANY WARRANTY; without even the implied warranty of
>- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
>- * Library General Public License for more details.
>- *
>- * You should have received a copy of the GNU Library General Public License
>- * along with this library; see the file COPYING.LIB.  If not, write to
>- * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
>- * Boston, MA 02110-1301, USA.
>+ * Redistribution and use in source and binary forms, with or without
>+ * modification, are permitted provided that the following conditions
>+ * are met:
>+ * 1. Redistributions of source code must retain the above copyright
>+ *    notice, this list of conditions and the following disclaimer.
>+ * 2. Redistributions in binary form must reproduce the above copyright
>+ *    notice, this list of conditions and the following disclaimer in the
>+ *    documentation and/or other materials provided with the distribution.
>  *
>+ * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
>+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
>+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
>+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
>+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
>+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
>+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
>+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
>+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
>+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
>  */
> 
>+/* These are based on the Chromium media controls */
>+
>+body:-webkit-full-page-media {
>+    background-color: rgb(0, 0, 0);
>+}
>+
> audio {
>-    height: 20px;
>     width: 300px;
>+    height: 30px;
> }
> 
>-audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
>-    -webkit-box-align: end;
>-    text-align: right;
>-    height: 100%;
>+audio:-webkit-full-page-media, video:-webkit-full-page-media {
>+    max-height: 100%;
>+    max-width: 100%;
> }
> 
>-audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
>-    width: 20px;
>-    height: 20px;
>-    position: relative;
>-    z-index: 2;
>+audio:-webkit-full-page-media::-webkit-media-controls-panel,
>+video:-webkit-full-page-media::-webkit-media-controls-panel {
>+    bottom: 0px;
> }
> 
>-audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
>-    width: 20px;
>-    height: 20px;
>+::-webkit-media-controls {
>+    display: -webkit-box;
>+    -webkit-box-orient: vertical;
>+    -webkit-box-pack: end;
>+    -webkit-box-align: center;
> }
> 
>-audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
>-    height: 20px;
>-    border-left: 1px solid rgba(255, 255, 255, 0.2);
>-    border-right: 1px solid rgba(255, 255, 255, 0.2);
>+audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
>+    width: 100%;
>+    max-width: 800px;
>+    height: 30px;
>+    bottom: 0;
>+    text-indent: 0;
>+    padding: 0;
>+    box-sizing: border-box;
>+    overflow: visible;
> }
> 
>-audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
>-    height: 20px;
>+video::-webkit-media-controls-enclosure {
>+    padding: 5px;
>+    height: 40px;
> }
> 
>-audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
>-    -webkit-appearance: media-current-time-display;
>-    -webkit-user-select: none;
>-    display: inline-block;
>-    height: 20px;
>-
>-    padding: 5px;
>+audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
>+    display: -webkit-box;
>+    -webkit-box-orient: horizontal;
>+    -webkit-box-align: center;
>+    -webkit-box-pack: center;
>+    bottom: auto;
>+    height: 30px;
>+    background-color: rgba(20, 20, 20, 0.8);
>+    border-radius: 5px;
>+    overflow: visible;
>+}
> 
>-    text-align: center;
>-    font-size: 10px;
>+audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
>+    -webkit-appearance: media-mute-button;
>+    display: -webkit-box;
>+    border: none;
>+    box-sizing: border-box;
>+    width: 30px;
>+    height: 30px;
>+    line-height: 30px;
>+    margin: 0 9px 0 -9px;
> }
> 
>-audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
>-    width: 20px;
>-    height: 20px;
>+audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
>+    -webkit-appearance: media-play-button;
>+    display: -webkit-box;
>+    border: none;
>+    box-sizing: border-box;
>+    width: 30px;
>+    height: 30px;
>+    line-height: 30px;
>+    margin: 0 9px;
> }
> 
>-audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
>-    width: 20px;
>-    height: 20px;
>+audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
>+audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
>+    -webkit-appearance: media-current-time-display;
>+    -webkit-user-select: none;
>+    display: block;
>+    border: none;
>+    cursor: default;
>+
>+    height: 30px;
>+    margin: -1px 18px 0 0;
>+
>+    line-height: 30px;
>+    font-family: Cantarell;
>+    font-size: 13px;
>+    font-weight: normal;
>+    font-style: normal;
>+    color: white;
>+
>+    letter-spacing: normal;
>+    word-spacing: normal;
>+    text-transform: none;
>+    text-indent: 0;
>+    text-shadow: none;
>+    text-decoration: none;
> }
> 
>-audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
>-    width: 20px;
>-    height: 20px;
>+audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
>+    -webkit-appearance: media-slider;
>+    display: -webkit-box;
>+    -webkit-box-flex: 1;
>+    height: 8px;
>+    margin: 0 15px 0 0;
>+    padding: 0;
>+    background-color: transparent;
>+    min-width: 25px;
>+    border-radius: 4px;
>+    color: rgba(230, 230, 230, 0.35);
> }
> 
> audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
>     -webkit-appearance: media-volume-slider-container;
>     position: absolute;
>+    padding: 0;
>     height: 100px;
>-    width: 20px;
>-    bottom: 20px;
>-    z-index: 1;
>+    width: 30px;
>+    bottom: 30px;
>+    z-index: 2;
>+    background-color: rgba(20, 20, 20, 0.8);
>+    right: 10px;
>+    border-radius: 5px 5px 0px 0px;
> }
> 
> audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
>     -webkit-appearance: media-volume-slider;
>-    display: inline;
>-    position: absolute;
>-    width: 14px;
>-    height: 95px;
>+    display: -webkit-box;
>+    -webkit-box-align: center;
>+    -webkit-box-orient: vertical;
>+    box-sizing: border-box;
>+    height: 100%;
>+    width: 100%;
>+    border: 1px solid rgba(230, 230, 230, 0.35);
>+    border-radius: 4px;
>+    background-color: transparent; /* Background drawing is managed by C++ code to draw ranges. */
>+
>+    padding: 10px;
>+}
> 
>-    left: 3px;
>-    top: 5px;
>+audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div, video::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div {
>+    margin: -7px 0;
>+}
>+
>+audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-thumb, video::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-thumb {
>+    padding: 2px 4px;
>+    border-radius: 3px;
>+    color: white;
>+    margin: 0;
>+}
>+
>+/* FIXME these shouldn't use special pseudoShadowIds, but nicer rules.
>+   https://code.google.com/p/chromium/issues/detail?id=112508
>+   https://bugs.webkit.org/show_bug.cgi?id=62218
>+*/
>+input[type="range"]::-webkit-media-slider-container {
>+    display: -webkit-box;
>+    -webkit-box-align: center;
>+    -webkit-box-orient: horizontal; /* This property is updated by C++ code. */
>+    box-sizing: border-box;
>+    height: 100%;
>+    width: 100%;
>+    border: 1px solid rgba(230, 230, 230, 0.35);
>+    border-radius: 4px;
>+    background-color: transparent; /* Background drawing is managed by C++ code to draw ranges. */
>+}
>+
>+/* The negative right margin causes the track to overflow its container. */
>+input[type="range"]::-webkit-media-slider-container > div {
>+    margin-right: -14px;
>+}
>+
>+input[type="range"]::-webkit-media-slider-thumb {
>+    padding: 0;
>+    border-radius: 3px;
>+    color: white;
>+    margin-left: -7px;
>+    margin-right: -7px;
>+}
>+
>+audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
>+    -webkit-appearance: media-toggle-closed-captions-button;
>+    display: -webkit-box;
>+    border: none;
>+    box-sizing: border-box;
>+    width: 30px;
>+    height: 30px;
>+    line-height: 30px;
>+    margin: 0 9px 0 -9px;
>+}
>+
>+audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
>+    -webkit-appearance: media-enter-fullscreen-button;
>+    display: -webkit-box;
>+    border: none;
>+    box-sizing: border-box;
>+    width: 30px;
>+    height: 30px;
>+    line-height: 30px;
>+    margin: 0 9px 0 -9px;
> }
>diff --git a/Source/WebCore/html/shadow/MediaControlsGtk.cpp b/Source/WebCore/html/shadow/MediaControlsGtk.cpp
>new file mode 100644
>index 0000000..7d40eb6
>--- /dev/null
>+++ b/Source/WebCore/html/shadow/MediaControlsGtk.cpp
>@@ -0,0 +1,234 @@
>+/*
>+ * Copyright (C) 2007, 2008, 2009, 2010 Apple Inc. All rights reserved.
>+ * Copyright (C) 2011, 2012 Google Inc. All rights reserved.
>+ * Copyright (C) 2012 Zan Dobersek <zandobersek@gmail.com>
>+ * Copyright (C) 2012 Igalia S.L.
>+ *
>+ * Redistribution and use in source and binary forms, with or without
>+ * modification, are permitted provided that the following conditions
>+ * are met:
>+ * 1. Redistributions of source code must retain the above copyright
>+ *    notice, this list of conditions and the following disclaimer.
>+ * 2. Redistributions in binary form must reproduce the above copyright
>+ *    notice, this list of conditions and the following disclaimer in the
>+ *    documentation and/or other materials provided with the distribution.
>+ *
>+ * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
>+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
>+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
>+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
>+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
>+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
>+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
>+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
>+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
>+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
>+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
>+ */
>+
>+#include "config.h"
>+
>+#if ENABLE(VIDEO)
>+#include "MediaControlsGtk.h"
>+
>+namespace WebCore {
>+
>+MediaControlsGtk::MediaControlsGtk(Document* document)
>+    : MediaControls(document)
>+    , m_durationDisplay(0)
>+    , m_enclosure(0)
>+{
>+}
>+
>+PassRefPtr<MediaControls> MediaControls::create(Document* document)
>+{
>+    return MediaControlsGtk::createControls(document);
>+}
>+
>+PassRefPtr<MediaControlsGtk> MediaControlsGtk::createControls(Document* document)
>+{
>+    if (!document->page())
>+        return 0;
>+
>+    RefPtr<MediaControlsGtk> controls = adoptRef(new MediaControlsGtk(document));
>+
>+    if (controls->initializeControls(document))
>+        return controls.release();
>+
>+    return 0;
>+}
>+
>+bool MediaControlsGtk::initializeControls(Document* document)
>+{
>+    // Create an enclosing element for the panel so we can visually offset the controls correctly.
>+    RefPtr<MediaControlPanelEnclosureElement> enclosure = MediaControlPanelEnclosureElement::create(document);
>+    RefPtr<MediaControlPanelElement> panel = MediaControlPanelElement::create(document);
>+    ExceptionCode ec;
>+
>+    RefPtr<MediaControlPlayButtonElement> playButton = MediaControlPlayButtonElement::create(document);
>+    m_playButton = playButton.get();
>+    panel->appendChild(playButton.release(), ec, true);
>+    if (ec)
>+        return false;
>+
>+    RefPtr<MediaControlTimelineElement> timeline = MediaControlTimelineElement::create(document, this);
>+    m_timeline = timeline.get();
>+    panel->appendChild(timeline.release(), ec, true);
>+    if (ec)
>+        return false;
>+
>+    RefPtr<MediaControlCurrentTimeDisplayElement> currentTimeDisplay = MediaControlCurrentTimeDisplayElement::create(document);
>+    m_currentTimeDisplay = currentTimeDisplay.get();
>+    m_currentTimeDisplay->hide();
>+    panel->appendChild(currentTimeDisplay.release(), ec, true);
>+    if (ec)
>+        return false;
>+
>+    RefPtr<MediaControlTimeRemainingDisplayElement> durationDisplay = MediaControlTimeRemainingDisplayElement::create(document);
>+    m_durationDisplay = durationDisplay.get();
>+    panel->appendChild(durationDisplay.release(), ec, true);
>+    if (ec)
>+        return false;
>+
>+    if (document->page()->theme()->supportsClosedCaptioning()) {
>+        RefPtr<MediaControlToggleClosedCaptionsButtonElement> toggleClosedCaptionsButton = MediaControlToggleClosedCaptionsButtonElement::create(document, this);
>+        m_toggleClosedCaptionsButton = toggleClosedCaptionsButton.get();
>+        panel->appendChild(toggleClosedCaptionsButton.release(), ec, true);
>+        if (ec)
>+            return false;
>+    }
>+
>+    RefPtr<MediaControlFullscreenButtonElement> fullscreenButton = MediaControlFullscreenButtonElement::create(document);
>+    m_fullScreenButton = fullscreenButton.get();
>+    panel->appendChild(fullscreenButton.release(), ec, true);
>+    if (ec)
>+        return false;
>+
>+    RefPtr<MediaControlPanelMuteButtonElement> panelMuteButton = MediaControlPanelMuteButtonElement::create(document, this);
>+    m_panelMuteButton = panelMuteButton.get();
>+    panel->appendChild(panelMuteButton.release(), ec, true);
>+    if (ec)
>+        return false;
>+
>+    RefPtr<MediaControlVolumeSliderContainerElement> sliderContainer = MediaControlVolumeSliderContainerElement::create(document);
>+    m_volumeSliderContainer = sliderContainer.get();
>+    panel->appendChild(sliderContainer.release(), ec, true);
>+    if (ec)
>+        return false;
>+
>+    RefPtr<MediaControlPanelVolumeSliderElement> slider = MediaControlPanelVolumeSliderElement::create(document);
>+    m_volumeSlider = slider.get();
>+    m_volumeSlider->setClearMutedOnUserInteraction(true);
>+    m_volumeSliderContainer->appendChild(slider.release(), ec, true);
>+    if (ec)
>+        return false;
>+
>+    m_panel = panel.get();
>+    enclosure->appendChild(panel.release(), ec, true);
>+    if (ec)
>+        return false;
>+
>+    m_enclosure = enclosure.get();
>+    appendChild(enclosure.release(), ec, true);
>+    if (ec)
>+        return false;
>+
>+    return true;
>+}
>+
>+void MediaControlsGtk::setMediaController(MediaControllerInterface* controller)
>+{
>+    if (m_mediaController == controller)
>+        return;
>+
>+    MediaControls::setMediaController(controller);
>+
>+    if (m_durationDisplay)
>+        m_durationDisplay->setMediaController(controller);
>+    if (m_enclosure)
>+        m_enclosure->setMediaController(controller);
>+}
>+
>+void MediaControlsGtk::reset()
>+{
>+    Page* page = document()->page();
>+    if (!page)
>+        return;
>+
>+    float duration = m_mediaController->duration();
>+    m_durationDisplay->setInnerText(page->theme()->formatMediaControlsTime(duration), ASSERT_NO_EXCEPTION);
>+    m_durationDisplay->setCurrentValue(duration);
>+
>+    MediaControls::reset();
>+}
>+
>+void MediaControlsGtk::playbackStarted()
>+{
>+    m_currentTimeDisplay->show();
>+    m_durationDisplay->hide();
>+
>+    MediaControls::playbackStarted();
>+}
>+
>+void MediaControlsGtk::updateCurrentTimeDisplay()
>+{
>+    float now = m_mediaController->currentTime();
>+    float duration = m_mediaController->duration();
>+
>+    Page* page = document()->page();
>+    if (!page)
>+        return;
>+
>+    // After seek, hide duration display and show current time.
>+    if (now > 0) {
>+        m_currentTimeDisplay->show();
>+        m_durationDisplay->hide();
>+    }
>+
>+    // Allow the theme to format the time.
>+    ExceptionCode ec;
>+    m_currentTimeDisplay->setInnerText(page->theme()->formatMediaControlsCurrentTime(now, duration), ec);
>+    m_currentTimeDisplay->setCurrentValue(now);
>+}
>+
>+void MediaControlsGtk::changedMute()
>+{
>+    MediaControls::changedMute();
>+
>+    if (m_mediaController->muted())
>+        m_volumeSlider->setVolume(0);
>+    else
>+        m_volumeSlider->setVolume(m_mediaController->volume());
>+}
>+
>+void MediaControlsGtk::showVolumeSlider()
>+{
>+    if (!m_mediaController->hasAudio())
>+        return;
>+
>+    if (m_volumeSliderContainer)
>+        m_volumeSliderContainer->show();
>+}
>+
>+#if ENABLE(VIDEO_TRACK)
>+void MediaControlsGtk::createTextTrackDisplay()
>+{
>+    if (m_textDisplayContainer)
>+        return;
>+
>+    RefPtr<MediaControlTextTrackContainerElement> textDisplayContainer = MediaControlTextTrackContainerElement::create(document());
>+    m_textDisplayContainer = textDisplayContainer.get();
>+
>+    if (m_mediaController)
>+        m_textDisplayContainer->setMediaController(m_mediaController);
>+
>+    // Insert it before the first controller element so it always displays behind the controls.
>+    insertBefore(textDisplayContainer, m_enclosure, ASSERT_NO_EXCEPTION, true);
>+    textDisplayContainer->createSubtrees(document());
>+    textDisplayContainer.release();
>+}
>+#endif
>+
>+}
>+
>+#endif
>diff --git a/Source/WebCore/html/shadow/MediaControlsGtk.h b/Source/WebCore/html/shadow/MediaControlsGtk.h
>new file mode 100644
>index 0000000..f709964
>--- /dev/null
>+++ b/Source/WebCore/html/shadow/MediaControlsGtk.h
>@@ -0,0 +1,69 @@
>+/*
>+ * Copyright (C) 2007, 2008, 2009, 2010 Apple Inc. All rights reserved.
>+ * Copyright (C) 2011, 2012 Google Inc. All rights reserved.
>+ * Copyright (C) 2012 Zan Dobersek <zandobersek@gmail.com>
>+ * Copyright (C) 2012 Igalia S.L.
>+ *
>+ * Redistribution and use in source and binary forms, with or without
>+ * modification, are permitted provided that the following conditions
>+ * are met:
>+ * 1. Redistributions of source code must retain the above copyright
>+ *    notice, this list of conditions and the following disclaimer.
>+ * 2. Redistributions in binary form must reproduce the above copyright
>+ *    notice, this list of conditions and the following disclaimer in the
>+ *    documentation and/or other materials provided with the distribution.
>+ *
>+ * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
>+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
>+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
>+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
>+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
>+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
>+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
>+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
>+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
>+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
>+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
>+ */
>+
>+#ifndef MediaControlsGtk_h
>+#define MediaControlsGtk_h
>+
>+#if ENABLE(VIDEO)
>+
>+#include "MediaControls.h"
>+
>+namespace WebCore {
>+
>+class MediaControlsGtk : public MediaControls {
>+public:
>+    // Called from port-specific parent create function to create custom controls.
>+    static PassRefPtr<MediaControlsGtk> createControls(Document*);
>+
>+    virtual void setMediaController(MediaControllerInterface*) OVERRIDE;
>+    virtual void reset() OVERRIDE;
>+    virtual void playbackStarted() OVERRIDE;
>+    void changedMute() OVERRIDE;
>+    virtual void updateCurrentTimeDisplay() OVERRIDE;
>+    virtual void showVolumeSlider() OVERRIDE;
>+
>+#if ENABLE(VIDEO_TRACK)
>+    void createTextTrackDisplay() OVERRIDE;
>+#endif
>+
>+protected:
>+    explicit MediaControlsGtk(Document*);
>+
>+    bool initializeControls(Document*);
>+
>+private:
>+    MediaControlTimeRemainingDisplayElement* m_durationDisplay;
>+    MediaControlPanelEnclosureElement* m_enclosure;
>+    MediaControlVolumeSliderContainerElement* m_volumeSliderContainer;
>+};
>+
>+}
>+
>+#endif
>+
>+#endif
>diff --git a/Source/WebCore/platform/gtk/RenderThemeGtk.cpp b/Source/WebCore/platform/gtk/RenderThemeGtk.cpp
>index 81eb5aa..ce09202 100644
>--- a/Source/WebCore/platform/gtk/RenderThemeGtk.cpp
>+++ b/Source/WebCore/platform/gtk/RenderThemeGtk.cpp
>@@ -58,6 +58,7 @@ namespace WebCore {
> // This would be a static method, except that forward declaring GType is tricky, since its
> // definition depends on including glib.h, negating the benefit of using a forward declaration.
> extern GRefPtr<GdkPixbuf> getStockIconForWidgetType(GType, const char* iconName, gint direction, gint state, gint iconSize);
>+extern GRefPtr<GdkPixbuf> getStockSymbolicIconForWidgetType(GType widgetType, const char* symbolicIconName, const char *fallbackStockIconName, gint direction, gint state, gint iconSize);
> 
> using namespace HTMLNames;
> 
>@@ -74,14 +75,6 @@ static HTMLMediaElement* getMediaElementFromRenderObject(RenderObject* o)
>     return static_cast<HTMLMediaElement*>(mediaNode);
> }
> 
>-static GtkIconSize getMediaButtonIconSize(int mediaIconSize)
>-{
>-    GtkIconSize iconSize = gtk_icon_size_from_name("webkit-media-button-size");
>-    if (!iconSize)
>-        iconSize = gtk_icon_size_register("webkit-media-button-size", mediaIconSize, mediaIconSize);
>-    return iconSize;
>-}
>-
> void RenderThemeGtk::initMediaButtons()
> {
>     static bool iconsInitialized = false;
>@@ -149,6 +142,14 @@ static bool supportsFocus(ControlPart appearance)
>     case CheckboxPart:
>     case SliderHorizontalPart:
>     case SliderVerticalPart:
>+    // We add here the media control elements to avoid WebCore
>+    // painting the focus ring as it is only painted if the focus ring
>+    // is supported
>+    case MediaPlayButtonPart:
>+    case MediaVolumeSliderPart:
>+    case MediaMuteButtonPart:
>+    case MediaEnterFullscreenButtonPart:
>+    case MediaSliderPart:
>         return true;
>     default:
>         return false;
>@@ -499,16 +500,17 @@ void RenderThemeGtk::adjustMediaSliderThumbSize(RenderStyle* style) const
>     style->setHeight(Length(m_mediaSliderThumbHeight, Fixed));
> }
> 
>-bool RenderThemeGtk::paintMediaButton(RenderObject* renderObject, GraphicsContext* context, const IntRect& rect, const char* iconName)
>+bool RenderThemeGtk::paintMediaButton(RenderObject* renderObject, GraphicsContext* context, const IntRect& rect, const char* symbolicIconName, const char* fallbackStockIconName)
> {
>-    GRefPtr<GdkPixbuf> icon = getStockIconForWidgetType(GTK_TYPE_CONTAINER, iconName,
>-                                                        gtkTextDirection(renderObject->style()->direction()),
>-                                                        gtkIconState(this, renderObject),
>-                                                        getMediaButtonIconSize(m_mediaIconSize));
>     IntRect iconRect(rect.x() + (rect.width() - m_mediaIconSize) / 2,
>                      rect.y() + (rect.height() - m_mediaIconSize) / 2,
>                      m_mediaIconSize, m_mediaIconSize);
>-    context->fillRect(FloatRect(rect), m_panelColor, ColorSpaceDeviceRGB);
>+    GRefPtr<GdkPixbuf> icon = getStockSymbolicIconForWidgetType(GTK_TYPE_CONTAINER,
>+        symbolicIconName,
>+        fallbackStockIconName,
>+        gtkTextDirection(renderObject->style()->direction()),
>+        gtkIconState(this, renderObject),
>+        iconRect.width());
>     paintGdkPixbuf(context, icon.get(), iconRect);
>     return false;
> }
>@@ -520,7 +522,7 @@ bool RenderThemeGtk::hasOwnDisabledStateHandlingFor(ControlPart part) const
> 
> bool RenderThemeGtk::paintMediaFullscreenButton(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
> {
>-    return paintMediaButton(renderObject, paintInfo.context, rect, GTK_STOCK_FULLSCREEN);
>+    return paintMediaButton(renderObject, paintInfo.context, rect, "view-fullscreen-symbolic", GTK_STOCK_FULLSCREEN);
> }
> 
> bool RenderThemeGtk::paintMediaMuteButton(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
>@@ -529,7 +531,10 @@ bool RenderThemeGtk::paintMediaMuteButton(RenderObject* renderObject, const Pain
>     if (!mediaElement)
>         return false;
> 
>-    return paintMediaButton(renderObject, paintInfo.context, rect, mediaElement->muted() ? "audio-volume-muted" : "audio-volume-high");
>+    bool muted = mediaElement->muted();
>+    return paintMediaButton(renderObject, paintInfo.context, rect,
>+        muted ? "audio-volume-muted-symbolic" : "audio-volume-high-symbolic",
>+        muted ? "audio-volume-muted" : "audio-volume-high");
> }
> 
> bool RenderThemeGtk::paintMediaPlayButton(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
>@@ -540,27 +545,26 @@ bool RenderThemeGtk::paintMediaPlayButton(RenderObject* renderObject, const Pain
>     if (!node->isMediaControlElement())
>         return false;
> 
>-    return paintMediaButton(renderObject, paintInfo.context, rect, mediaControlElementType(node) == MediaPlayButton ? GTK_STOCK_MEDIA_PLAY : GTK_STOCK_MEDIA_PAUSE);
>+    bool play = mediaControlElementType(node) == MediaPlayButton;
>+    return paintMediaButton(renderObject, paintInfo.context, rect,
>+        play ? "media-playback-start-symbolic" : "media-playback-pause-symbolic",
>+        play ? GTK_STOCK_MEDIA_PLAY : GTK_STOCK_MEDIA_PAUSE);
> }
> 
> bool RenderThemeGtk::paintMediaSeekBackButton(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
> {
>-    return paintMediaButton(renderObject, paintInfo.context, rect, GTK_STOCK_MEDIA_REWIND);
>+    return paintMediaButton(renderObject, paintInfo.context, rect, "media-seek-backward-symbolic", GTK_STOCK_MEDIA_REWIND);
> }
> 
> bool RenderThemeGtk::paintMediaSeekForwardButton(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
> {
>-    return paintMediaButton(renderObject, paintInfo.context, rect, GTK_STOCK_MEDIA_FORWARD);
>+    return paintMediaButton(renderObject, paintInfo.context, rect, "media-seek-forward-symbolic", GTK_STOCK_MEDIA_FORWARD);
> }
> 
> bool RenderThemeGtk::paintMediaSliderTrack(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r)
> {
>     GraphicsContext* context = paintInfo.context;
> 
>-    context->fillRect(FloatRect(r), m_panelColor, ColorSpaceDeviceRGB);
>-    context->fillRect(FloatRect(IntRect(r.x(), r.y() + (r.height() - m_mediaSliderHeight) / 2,
>-                                        r.width(), m_mediaSliderHeight)), m_sliderColor, ColorSpaceDeviceRGB);
>-
>     RenderStyle* style = o->style();
>     HTMLMediaElement* mediaElement = toParentMediaElement(o);
> 
>@@ -578,6 +582,17 @@ bool RenderThemeGtk::paintMediaSliderTrack(RenderObject* o, const PaintInfo& pai
>     context->save();
>     context->setStrokeStyle(NoStroke);
> 
>+    int radiusTopLeftWidth = style->borderTopLeftRadius().width().intValue();
>+    int radiusTopLeftHeight = style->borderTopLeftRadius().height().intValue();
>+    int radiusTopRightWidth = style->borderTopRightRadius().width().intValue();
>+    int radiusTopRightHeight = style->borderTopRightRadius().height().intValue();
>+    int radiusBottomLeftWidth = style->borderBottomLeftRadius().width().intValue();
>+    int radiusBottomLeftHeight = style->borderBottomLeftRadius().height().intValue();
>+    int radiusBottomRightWidth = style->borderBottomRightRadius().width().intValue();
>+    int radiusBottomRightHeight = style->borderBottomRightRadius().height().intValue();
>+    Color color = style->visitedDependentColor(CSSPropertyColor);
>+    ColorSpace colorSpace = style->colorSpace();
>+
>     for (unsigned index = 0; index < timeRanges->length(); ++index) {
>         ExceptionCode ignoredException;
>         float start = timeRanges->start(index, ignoredException);
>@@ -593,20 +608,15 @@ bool RenderThemeGtk::paintMediaSliderTrack(RenderObject* o, const PaintInfo& pai
>         }
> 
>         // Don't bother drawing empty range.
>-        if (rangeRect.isEmpty())
>-            continue;
>-
>-        IntPoint sliderTopLeft = rangeRect.location();
>-        IntPoint sliderTopRight = sliderTopLeft;
>-        sliderTopRight.move(0, rangeRect.height());
>-
>-        RefPtr<Gradient> gradient = Gradient::create(sliderTopLeft, sliderTopRight);
>-        Color startColor = m_panelColor;
>-        gradient->addColorStop(0.0, startColor);
>-        gradient->addColorStop(1.0, Color(startColor.red() / 2, startColor.green() / 2, startColor.blue() / 2, startColor.alpha()));
>-
>-        context->setFillGradient(gradient);
>-        context->fillRect(rangeRect);
>+        if (!rangeRect.isEmpty()) {
>+            context->fillRoundedRect(rangeRect,
>+                IntSize(radiusTopLeftWidth, radiusTopLeftHeight),
>+                IntSize(radiusTopRightWidth, radiusTopRightHeight),
>+                IntSize(radiusBottomLeftWidth, radiusBottomLeftHeight),
>+                IntSize(radiusBottomRightWidth, radiusBottomRightHeight),
>+                color,
>+                colorSpace);
>+        }
>     }
> 
>     context->restore();
>@@ -615,26 +625,42 @@ bool RenderThemeGtk::paintMediaSliderTrack(RenderObject* o, const PaintInfo& pai
> 
> bool RenderThemeGtk::paintMediaSliderThumb(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r)
> {
>-    // Make the thumb nicer with rounded corners.
>-    paintInfo.context->fillRoundedRect(r, IntSize(3, 3), IntSize(3, 3), IntSize(3, 3), IntSize(3, 3), m_sliderThumbColor, ColorSpaceDeviceRGB);
>+    RenderStyle * style = o->style();
>+    LengthBox padding = style->paddingBox();
>+    int topPadding = padding.top().intValue();
>+    int rightPadding = padding.right().intValue();
>+    int bottomPadding = padding.bottom().intValue();
>+    int leftPadding = padding.left().intValue();
>+    IntRect newRect = r;
>+    newRect.move(leftPadding, topPadding);
>+    newRect.contract(leftPadding + rightPadding, topPadding + bottomPadding);
>+    LengthSize radiusTopLeft = style->borderTopLeftRadius();
>+    LengthSize radiusTopRight = style->borderTopRightRadius();
>+    LengthSize radiusBottomLeft = style->borderBottomLeftRadius();
>+    LengthSize radiusBottomRight = style->borderBottomRightRadius();
>+    paintInfo.context->fillRoundedRect(newRect,
>+        IntSize(radiusTopLeft.width().intValue(), radiusTopLeft.height().intValue()),
>+        IntSize(radiusTopRight.width().intValue(), radiusTopRight.height().intValue()),
>+        IntSize(radiusBottomLeft.width().intValue(), radiusBottomLeft.height().intValue()),
>+        IntSize(radiusBottomRight.width().intValue(), radiusBottomRight.height().intValue()),
>+        style->visitedDependentColor(CSSPropertyColor),
>+        style->colorSpace());
>     return false;
> }
> 
> bool RenderThemeGtk::paintMediaVolumeSliderContainer(RenderObject*, const PaintInfo& paintInfo, const IntRect& rect)
> {
>-    GraphicsContext* context = paintInfo.context;
>-    context->fillRect(FloatRect(rect), m_panelColor, ColorSpaceDeviceRGB);
>-    return false;
>+    return true;
> }
> 
> bool RenderThemeGtk::paintMediaVolumeSliderTrack(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
> {
>-    return paintSliderTrack(renderObject, paintInfo, rect);
>+    return true;
> }
> 
> bool RenderThemeGtk::paintMediaVolumeSliderThumb(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
> {
>-    return paintSliderThumb(renderObject, paintInfo, rect);
>+    return paintMediaSliderThumb(renderObject, paintInfo, rect);
> }
> 
> String RenderThemeGtk::formatMediaControlsCurrentTime(float currentTime, float duration) const
>@@ -644,9 +670,6 @@ String RenderThemeGtk::formatMediaControlsCurrentTime(float currentTime, float d
> 
> bool RenderThemeGtk::paintMediaCurrentTime(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
> {
>-    GraphicsContext* context = paintInfo.context;
>-
>-    context->fillRect(FloatRect(rect), m_panelColor, ColorSpaceDeviceRGB);
>     return false;
> }
> #endif
>diff --git a/Source/WebCore/platform/gtk/RenderThemeGtk.h b/Source/WebCore/platform/gtk/RenderThemeGtk.h
>index 85645f4..cc76769 100644
>--- a/Source/WebCore/platform/gtk/RenderThemeGtk.h
>+++ b/Source/WebCore/platform/gtk/RenderThemeGtk.h
>@@ -196,7 +196,7 @@ private:
>     static double getScreenDPI();
> 
> #if ENABLE(VIDEO)
>-    bool paintMediaButton(RenderObject*, GraphicsContext*, const IntRect&, const char* iconName);
>+    bool paintMediaButton(RenderObject*, GraphicsContext*, const IntRect&, const char* symbolicIconName, const char* fallbackStockIconName);
> #endif
> 
> #if ENABLE(PROGRESS_ELEMENT)
>diff --git a/Source/WebCore/platform/gtk/RenderThemeGtk3.cpp b/Source/WebCore/platform/gtk/RenderThemeGtk3.cpp
>index dc29805..9377f4a 100644
>--- a/Source/WebCore/platform/gtk/RenderThemeGtk3.cpp
>+++ b/Source/WebCore/platform/gtk/RenderThemeGtk3.cpp
>@@ -899,6 +899,38 @@ GRefPtr<GdkPixbuf> getStockIconForWidgetType(GType widgetType, const char* iconN
>     return adoptGRef(icon);
> }
> 
>+GRefPtr<GdkPixbuf> getStockSymbolicIconForWidgetType(GType widgetType, const char* symbolicIconName, const char *fallbackStockIconName, gint direction, gint state, gint iconSize)
>+{
>+    GtkStyleContext* context = getStyleContext(widgetType);
>+
>+    gtk_style_context_save(context);
>+
>+    guint flags = 0;
>+    if (state == GTK_STATE_PRELIGHT)
>+        flags |= GTK_STATE_FLAG_PRELIGHT;
>+    else if (state == GTK_STATE_INSENSITIVE)
>+        flags |= GTK_STATE_FLAG_INSENSITIVE;
>+
>+    gtk_style_context_set_state(context, static_cast<GtkStateFlags>(flags));
>+    gtk_style_context_set_direction(context, static_cast<GtkTextDirection>(direction));
>+    GtkIconInfo* info = gtk_icon_theme_lookup_icon(gtk_icon_theme_get_default(),
>+        symbolicIconName,
>+        iconSize,
>+        static_cast<GtkIconLookupFlags>(GTK_ICON_LOOKUP_FORCE_SVG | GTK_ICON_LOOKUP_FORCE_SIZE));
>+    GdkPixbuf* icon = 0;
>+    if (info) {
>+        icon = gtk_icon_info_load_symbolic_for_context(info, context, 0, 0);
>+        gtk_icon_info_free(info);
>+    }
>+
>+    gtk_style_context_restore(context);
>+
>+    if (!icon)
>+        return getStockIconForWidgetType(widgetType, fallbackStockIconName, direction, state, iconSize);
>+
>+    return adoptGRef(icon);
>+}
>+
> Color RenderThemeGtk::platformActiveSelectionBackgroundColor() const
> {
>     GdkRGBA gdkRGBAColor;
>diff --git a/Tools/ChangeLog b/Tools/ChangeLog
>index f98c425..695a673 100644
>--- a/Tools/ChangeLog
>+++ b/Tools/ChangeLog
>@@ -1,3 +1,13 @@
>+2013-01-23  Xabier Rodriguez Calvar  <calvaris@igalia.com>
>+
>+        [Gtk] HTML5 Media controls require a design refresh
>+        https://bugs.webkit.org/show_bug.cgi?id=83869
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * gtk/jhbuild.modules: Added gnome-icon-theme-symbolic as external
>+        dependency.
>+
> 2013-01-22  Alan Cutter  <alancutter@chromium.org>
> 
>         Add monitoring of patches and queues to the QueueStatusServer
>diff --git a/Tools/gtk/jhbuild.modules b/Tools/gtk/jhbuild.modules
>index 8a7a18a..4ef6b2d 100644
>--- a/Tools/gtk/jhbuild.modules
>+++ b/Tools/gtk/jhbuild.modules
>@@ -17,6 +17,7 @@
>       <dep package="glib"/>
>       <dep package="glib-networking"/>
>       <dep package="gnome-icon-theme"/>
>+      <dep package="gnome-icon-theme-symbolic"/>
>       <dep package="gnome-themes-standard"/>
>       <dep package="libsoup"/>
>       <dep package="at-spi2-core"/>
>@@ -195,6 +196,17 @@
>     </branch>
>   </autotools>
> 
>+  <autotools id="gnome-icon-theme-symbolic" autogen-sh="configure">
>+    <dependencies>
>+      <dep package="gtk+"/>
>+    </dependencies>
>+    <branch module="pub/GNOME/sources/gnome-icon-theme-symbolic/3.2/gnome-icon-theme-symbolic-3.2.1.tar.xz" version="3.2.1"
>+            repo="ftp.gnome.org"
>+            hash="sha256:a558af2f87f761f00421f49c1addd2149b70228158e09327fa861219ac1a63cb"
>+            md5sum="94137d3c256f2cc80298a9bef15d68c4">
>+    </branch>
>+  </autotools>
>+
>   <autotools id="gnome-themes-standard" autogen-sh="configure">
>     <dependencies>
>       <dep package="gtk+"/>

Flags:

mrobinson: review-

Actions: View | Formatted Diff | Diff

Attachments on bug 83869: 179135 | 180498 | 181889 | 182087 | 183200 | 183202 | 183573 | 183575 | 184253 | 184255 | 184558 | 185276 | 185278 | 187534 | 187540 | 188404 | 189185