зеркало из https://github.com/mozilla/pjs.git
Bug 489631 - HTML5 <video>/<audio> elements should not inherit document direction; r=dolske,mconnor
This commit is contained in:
Родитель
9dce04c839
Коммит
69b3697469
|
@ -109,7 +109,26 @@ _TEST_FILES = test_bug360220.xul \
|
|||
test_sorttemplate.xul \
|
||||
test_contextmenu_list.xul \
|
||||
test_videocontrols.html \
|
||||
test_videocontrols_video_direction.html \
|
||||
test_videocontrols_audio_direction.html \
|
||||
videocontrols_direction-1-ref.html \
|
||||
videocontrols_direction-1a.html \
|
||||
videocontrols_direction-1b.html \
|
||||
videocontrols_direction-1c.html \
|
||||
videocontrols_direction-1d.html \
|
||||
videocontrols_direction-1e.html \
|
||||
videocontrols_direction-2-ref.html \
|
||||
videocontrols_direction-2a.html \
|
||||
videocontrols_direction-2b.html \
|
||||
videocontrols_direction-2c.html \
|
||||
videocontrols_direction-2d.html \
|
||||
videocontrols_direction-2e.html \
|
||||
videocontrols_direction_test.js \
|
||||
use_large_cache.js \
|
||||
audio.oga \
|
||||
black.ogv \
|
||||
video.ogg \
|
||||
videomask.css \
|
||||
$(NULL)
|
||||
|
||||
ifeq (,$(filter mac cocoa,$(MOZ_WIDGET_TOOLKIT)))
|
||||
|
|
Двоичный файл не отображается.
Двоичный файл не отображается.
|
@ -15,25 +15,9 @@
|
|||
</div>
|
||||
|
||||
<pre id="test">
|
||||
<script type="text/javascript" src="use_large_cache.js"></script>
|
||||
<script class="testbody" type="text/javascript">
|
||||
|
||||
// Use a large cache for this test, to stop it hanging due to the cache
|
||||
// filling up
|
||||
(function() {
|
||||
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
|
||||
// Set cache size to something large
|
||||
var prefService = Components.classes["@mozilla.org/preferences-service;1"]
|
||||
.getService(Components.interfaces.nsIPrefService);
|
||||
var branch = prefService.getBranch("media.");
|
||||
var oldSize = branch.getIntPref("cache_size");
|
||||
branch.setIntPref("cache_size", 40000);
|
||||
|
||||
window.addEventListener("unload", function() {
|
||||
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
|
||||
branch.setIntPref("cache_size", oldSize);
|
||||
}, false);
|
||||
})();
|
||||
|
||||
/*
|
||||
* Positions of the UI elements, relative to the upper-left corner of the
|
||||
* <video> box.
|
||||
|
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Video controls directionality test</title>
|
||||
<script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
|
||||
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<script type="text/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
|
||||
</head>
|
||||
<body>
|
||||
<p id="display"></p>
|
||||
|
||||
<div id="content">
|
||||
</div>
|
||||
|
||||
<pre id="test">
|
||||
<script class="testbody" type="text/javascript">
|
||||
|
||||
var tests = [
|
||||
{op: "==", test: "videocontrols_direction-2a.html", ref: "videocontrols_direction-2-ref.html"},
|
||||
{op: "==", test: "videocontrols_direction-2b.html", ref: "videocontrols_direction-2-ref.html"},
|
||||
{op: "==", test: "videocontrols_direction-2c.html", ref: "videocontrols_direction-2-ref.html"},
|
||||
{op: "==", test: "videocontrols_direction-2d.html", ref: "videocontrols_direction-2-ref.html"},
|
||||
{op: "==", test: "videocontrols_direction-2e.html", ref: "videocontrols_direction-2-ref.html"}
|
||||
];
|
||||
|
||||
</script>
|
||||
<script type="text/javascript" src="use_large_cache.js"></script>
|
||||
<script type="text/javascript" src="videocontrols_direction_test.js"></script>
|
||||
</pre>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Video controls directionality test</title>
|
||||
<script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
|
||||
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<script type="text/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
|
||||
</head>
|
||||
<body>
|
||||
<p id="display"></p>
|
||||
|
||||
<div id="content">
|
||||
</div>
|
||||
|
||||
<pre id="test">
|
||||
<script class="testbody" type="text/javascript">
|
||||
|
||||
var tests = [
|
||||
{op: "==", test: "videocontrols_direction-1a.html", ref: "videocontrols_direction-1-ref.html"},
|
||||
{op: "==", test: "videocontrols_direction-1b.html", ref: "videocontrols_direction-1-ref.html"},
|
||||
{op: "==", test: "videocontrols_direction-1c.html", ref: "videocontrols_direction-1-ref.html"},
|
||||
{op: "==", test: "videocontrols_direction-1d.html", ref: "videocontrols_direction-1-ref.html"},
|
||||
{op: "==", test: "videocontrols_direction-1e.html", ref: "videocontrols_direction-1-ref.html"},
|
||||
];
|
||||
|
||||
</script>
|
||||
<script type="text/javascript" src="use_large_cache.js"></script>
|
||||
<script type="text/javascript" src="videocontrols_direction_test.js"></script>
|
||||
</pre>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,14 @@
|
|||
(function() {
|
||||
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
|
||||
// Set cache size to something large
|
||||
var prefService = Components.classes["@mozilla.org/preferences-service;1"]
|
||||
.getService(Components.interfaces.nsIPrefService);
|
||||
var branch = prefService.getBranch("media.");
|
||||
var oldSize = branch.getIntPref("cache_size");
|
||||
branch.setIntPref("cache_size", 40000);
|
||||
|
||||
window.addEventListener("unload", function() {
|
||||
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
|
||||
branch.setIntPref("cache_size", oldSize);
|
||||
}, false);
|
||||
})();
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="videomask.css">
|
||||
</head>
|
||||
<body style="text-align: right;">
|
||||
<video controls id="av" src="black.ogv"></video>
|
||||
<div id="mask"></div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html dir="rtl">
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="videomask.css">
|
||||
</head>
|
||||
<body>
|
||||
<video controls id="av" src="black.ogv"></video>
|
||||
<div id="mask"></div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html style="direction: rtl">
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="videomask.css">
|
||||
</head>
|
||||
<body>
|
||||
<video controls id="av" src="black.ogv"></video>
|
||||
<div id="mask"></div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="videomask.css">
|
||||
</head>
|
||||
<body style="direction: rtl">
|
||||
<video controls id="av" src="black.ogv"></video>
|
||||
<div id="mask"></div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="videomask.css">
|
||||
</head>
|
||||
<body style="text-align: right;">
|
||||
<video controls id="av" src="black.ogv" dir="rtl"></video>
|
||||
<div id="mask"></div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="videomask.css">
|
||||
</head>
|
||||
<body style="text-align: right;">
|
||||
<video controls id="av" src="black.ogv" style="direction: rtl;"></video>
|
||||
<div id="mask"></div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="videomask.css">
|
||||
</head>
|
||||
<body style="text-align: right;">
|
||||
<audio controls id="av" src="audio.oga"></audio>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html dir="rtl">
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="videomask.css">
|
||||
</head>
|
||||
<body>
|
||||
<audio controls id="av" src="audio.oga"></audio>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html style="direction: rtl">
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="videomask.css">
|
||||
</head>
|
||||
<body>
|
||||
<audio controls id="av" src="audio.oga"></audio>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="videomask.css">
|
||||
</head>
|
||||
<body style="direction: rtl">
|
||||
<audio controls id="av" src="audio.oga"></audio>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="videomask.css">
|
||||
</head>
|
||||
<body style="text-align: right;">
|
||||
<audio controls id="av" src="audio.oga" dir="rtl"></audio>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="videomask.css">
|
||||
</head>
|
||||
<body style="text-align: right;">
|
||||
<audio controls id="av" src="audio.oga" style="direction: rtl;"></audio>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,75 @@
|
|||
var RemoteCanvas = function(url, id) {
|
||||
this.url = url;
|
||||
this.id = id;
|
||||
this.snapshot = null;
|
||||
};
|
||||
|
||||
RemoteCanvas.CANVAS_WIDTH = 200;
|
||||
RemoteCanvas.CANVAS_HEIGHT = 200;
|
||||
|
||||
RemoteCanvas.prototype.compare = function(otherCanvas, expected) {
|
||||
return compareSnapshots(this.snapshot, otherCanvas.snapshot, expected)[0];
|
||||
}
|
||||
|
||||
RemoteCanvas.prototype.load = function(callback) {
|
||||
var iframe = document.createElement("iframe");
|
||||
iframe.id = this.id + "-iframe";
|
||||
iframe.width = RemoteCanvas.CANVAS_WIDTH + "px";
|
||||
iframe.height = RemoteCanvas.CANVAS_HEIGHT + "px";
|
||||
iframe.src = this.url;
|
||||
var me = this;
|
||||
iframe.addEventListener("load", function() {
|
||||
me.remotePageLoaded(callback);
|
||||
}, false);
|
||||
window.document.body.appendChild(iframe);
|
||||
};
|
||||
|
||||
RemoteCanvas.prototype.remotePageLoaded = function(callback) {
|
||||
var ldrFrame = document.getElementById(this.id + "-iframe");
|
||||
this.snapshot = snapshotWindow(ldrFrame.contentWindow);
|
||||
this.snapshot.id = this.id + "-canvas";
|
||||
window.document.body.appendChild(this.snapshot);
|
||||
callback(this);
|
||||
};
|
||||
|
||||
RemoteCanvas.prototype.cleanup = function() {
|
||||
var iframe = document.getElementById(this.id + "-iframe");
|
||||
iframe.parentNode.removeChild(iframe);
|
||||
var canvas = document.getElementById(this.id + "-canvas");
|
||||
canvas.parentNode.removeChild(canvas);
|
||||
};
|
||||
|
||||
function runTest(index) {
|
||||
var canvases = [];
|
||||
function testCallback(canvas) {
|
||||
canvases.push(canvas);
|
||||
|
||||
if (canvases.length == 2) { // when both canvases are loaded
|
||||
var expectedEqual = currentTest.op == "==";
|
||||
var result = canvases[0].compare(canvases[1], expectedEqual);
|
||||
ok(result, "Rendering of reftest " + currentTest.test + " should " +
|
||||
(expectedEqual ? "not " : "") + "be different to the reference");
|
||||
|
||||
if (result) {
|
||||
canvases[0].cleanup();
|
||||
canvases[1].cleanup();
|
||||
}
|
||||
|
||||
if (index < tests.length - 1)
|
||||
runTest(index + 1);
|
||||
else
|
||||
SimpleTest.finish();
|
||||
}
|
||||
}
|
||||
|
||||
var currentTest = tests[index];
|
||||
var testCanvas = new RemoteCanvas(currentTest.test, "test-" + index);
|
||||
testCanvas.load(testCallback);
|
||||
|
||||
var refCanvas = new RemoteCanvas(currentTest.ref, "ref-" + index);
|
||||
refCanvas.load(testCallback);
|
||||
}
|
||||
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
|
||||
window.addEventListener("load", function() { runTest(0); }, true);
|
|
@ -0,0 +1,28 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 140px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
audio {
|
||||
width: 140px;
|
||||
height: 28px;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a mask for the video direction tests which covers up the throbber.
|
||||
*/
|
||||
#mask {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
top: 11px;
|
||||
right: 45px;
|
||||
}
|
|
@ -7,3 +7,7 @@
|
|||
.scrubber .scale-thumb {
|
||||
-moz-binding: url("chrome://global/content/bindings/videocontrols.xml#timeThumb");
|
||||
}
|
||||
|
||||
.mediaControlsFrame {
|
||||
direction: ltr;
|
||||
}
|
||||
|
|
|
@ -157,7 +157,8 @@
|
|||
<stylesheet src="chrome://global/skin/media/videocontrols.css"/>
|
||||
</resources>
|
||||
|
||||
<xbl:content xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
<xbl:content xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
|
||||
class="mediaControlsFrame">
|
||||
<stack flex="1">
|
||||
<vbox class="statusOverlay" hidden="true">
|
||||
<box class="statusIcon" flex="1"/>
|
||||
|
|
Загрузка…
Ссылка в новой задаче