Implement media cast buttons

Source/core/css/mediaControls.css

Index: Source/core/css/mediaControls.css
diff --git a/Source/core/css/mediaControls.css b/Source/core/css/mediaControls.css
index d3b5536e4a4526b8ceab2ba14b949ae3bbfd4843..959e04a05e86fac64e72dd68aa18cd3b82d68937 100644
--- a/Source/core/css/mediaControls.css
+++ b/Source/core/css/mediaControls.css
@@ -277,6 +277,38 @@ audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f
     color: inherit;
 }
 
+audio::-webkit-media-controls-cast-off-button, video::-webkit-media-controls-cast-off-button {
+    -webkit-appearance: media-enter-cast-off-button;

[Peter Beverloo, 2014/05/20 11:24:47]

You're using the |media-enter-cast-off-button| keyword here, while defining
|media-cast-off-button| as the keyword in CSSValueKeywords.in. This will cause
it to ignore the declaration as it's an invalid keyword.

Since the CSSValueKeywords.in file generates an enumaration which has to be in
the same order as ControlPart, we cast the the MediaCastOffButton value to
MediaCastOffButtonPart (in
StyleBuilderFunctions::applyValueCSSPropertyWebkitAppearance). This mapping now
doesn't exist, which is why the switch() case in RenderTheme doesn't get hit.

tl;dr: s/media-enter-cast-off-button/media-cast-off-button/.

+    display: flex;
+    flex: none;
+    border: none;
+    box-sizing: border-box;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    margin-left: -5px;
+    margin-right: 9px;
+    padding: 0;
+    background-color: initial;
+    color: inherit;
+}
+
+audio::-webkit-media-controls-cast-on-button, video::-webkit-media-controls-cast-on-button {
+    -webkit-appearance: media-enter-cast-on-button;
+    display: flex;
+    flex: none;
+    border: none;
+    box-sizing: border-box;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    margin-left: -5px;
+    margin-right: 9px;
+    padding: 0;
+    background-color: initial;
+    color: inherit;
+}
+
 audio::-webkit-media-controls-toggle-closed-captions-button {
     display: none;
 }