Bug 715469 - Make video full-screen button use background image, so it doesn't fire a load event. r=gavin

2012-01-30 20:04:44 +13:00 · 2012-01-30 20:04:44 +13:00 · 3e0781b0f9
--- a/content/media/test/Makefile.in
+++ b/content/media/test/Makefile.in
@ -127,6 +127,7 @@ _TEST_FILES = \
 		test_loop.html \
 		test_media_selection.html \
 		test_mozLoadFrom.html \
+		test_no_load_event.html \
 		test_networkState.html \
 		test_new_audio.html \
 		test_paused.html \
--- a/content/media/test/test_no_load_event.html
+++ b/content/media/test/test_no_load_event.html
@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=715469
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 715469</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="text/javascript" src="manifest.js"></script>
+</head>
+<body onload="start();">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=715469">Mozilla Bug 715469</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+
+<script type="application/javascript">
+
+/** Test for Bug 715469 **/
+
+var gotLoadEvent = false;
+
+function start() {
+  var resource = getPlayableVideo(gSmallTests);
+  if (resource == null) {
+    todo(false, "No types supported");
+  } else {
+    SimpleTest.waitForExplicitFinish();
+    var v = document.createElement("video");
+    v.src = resource.name;
+    v.addEventListener("loadeddata", function(){v.play();}, false);
+    v.controls = "true";
+    
+    v.addEventListener("load",
+      function(){
+        gotLoadEvent = true;
+      },
+      false);
+      
+    v.addEventListener("ended", finished, false);
+    
+    document.body.appendChild(v);
+  }
+}
+
+function finished() {
+  is(gotLoadEvent, false, "Should not receive a load on the video element");
+  SimpleTest.finish();
+}
+
+
+</script>
+</pre>
+</body>
+</html>
--- a/toolkit/themes/pinstripe/global/media/videocontrols.css
+++ b/toolkit/themes/pinstripe/global/media/videocontrols.css
@ -35,18 +35,17 @@
 }

 .fullscreenButton {
-  background-color: transparent;
-  list-style-image: url("chrome://global/skin/media/fullscreenButton.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
+  background: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0) no-repeat center;
  -moz-appearance: none;
  margin: 0;
  padding: 0;
  min-height: 28px;
  min-width: 28px;
+  border: none;
 }

 .fullscreenButton[fullscreened] {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
+  background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16);
 }

 .volumeStack {
--- a/toolkit/themes/winstripe/global/media/videocontrols.css
+++ b/toolkit/themes/winstripe/global/media/videocontrols.css
@ -37,9 +37,7 @@
 }

 .fullscreenButton {
-  background-color: transparent;
-  list-style-image: url("chrome://global/skin/media/fullscreenButton.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
+  background: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0) no-repeat center;
  -moz-appearance: none;
  margin: 0;
  padding: 0;
@ -49,7 +47,7 @@
 }

 .fullscreenButton[fullscreened] {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
+  background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16);
 }

 .volumeStack {