Implement media cast buttons

Source/core/css/mediaControls.css

 /*
  * Copyright (C) 2009 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Google Inc.
  *
  * 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
@@ skipping 259 matching lines @@
     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-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;
 }
 
 video::-webkit-media-controls-toggle-closed-captions-button {
     -webkit-appearance: media-toggle-closed-captions-button;
     display: flex;
     flex: none;
     border: none;
     box-sizing: border-box;
@@ skipping 88 matching lines @@
     font-weight: bold;
 }
 
 video::-webkit-media-text-track-container u {
     text-decoration: underline;
 }
 
 video::-webkit-media-text-track-container i {
     font-style: italic;
 }