Bug 1431255 - Part IV, Load videocontrols.js, migrated from videoControls binding r=jaws

videocontrols.js handles the controls attribute with a callback named
"onattributechange" called by UAWidgets, replaces the CSS selectors.

MozReview-Commit-ID: 8rrw0Pbu8Dj

--HG--
rename : toolkit/content/widgets/videocontrols.xml => toolkit/content/widgets/videocontrols.js
extra : rebase_source : 8d8a38afac0273621f711b988c1be82d04865e33

toolkit/content/jar.mn

@@ -103,6 +103,7 @@ toolkit.jar:
    content/global/elements/general.js          (widgets/general.js)
    content/global/elements/stringbundle.js     (widgets/stringbundle.js)
    content/global/elements/textbox.js          (widgets/textbox.js)
+   content/global/elements/videocontrols.js    (widgets/videocontrols.js)
 #ifdef XP_MACOSX
    content/global/macWindowMenu.js
 #endif

toolkit/content/tests/widgets/test_audiocontrols_dimensions.html

@@ -42,6 +42,25 @@
     isnot(controlBar.clientWidth, originalControlBarWidth, "new width should differ from the origianl width");
     is(controlBar.clientWidth, 400, "controlbar's width should grow with audio width");
   });
+
+  add_task(function check_audio_height_construction_sync() {
+    let el = new Audio();
+    el.src = "audio.wav";
+    el.controls = true;
+    document.body.appendChild(el);
+    is(el.clientHeight, 40, "Height of audio element with controls");
+    document.body.removeChild(el);
+  });
+
+  add_task(function check_audio_height_add_control_sync() {
+    let el = new Audio();
+    el.src = "audio.wav";
+    document.body.appendChild(el);
+    is(el.clientHeight, 0, "Height of audio element without controls");
+    el.controls = true;
+    is(el.clientHeight, 40, "Height of audio element with controls");
+    document.body.removeChild(el);
+  });
 </script>
 </pre>
 </body>

toolkit/themes/shared/media/videocontrols.css

@@ -6,7 +6,8 @@
 @namespace url("http://www.w3.org/1999/xhtml");
 
 video > xul|videocontrols,
-audio > xul|videocontrols {
+audio > xul|videocontrols,
+.videocontrols {
   writing-mode: horizontal-tb;
   width: 100%;
   height: 100%;