Bug 489631 - HTML5 <video>/<audio> elements should not inherit document direction; r=dolske,mconnor

This commit is contained in:
Ehsan Akhgari 2009-05-19 14:12:29 +04:30
Родитель 9dce04c839
Коммит 69b3697469
23 изменённых файлов: 321 добавлений и 18 удалений

Просмотреть файл

@ -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)))

Двоичные данные
toolkit/content/tests/widgets/audio.oga Normal file

Двоичный файл не отображается.

Двоичные данные
toolkit/content/tests/widgets/black.ogv Normal file

Двоичный файл не отображается.

Просмотреть файл

@ -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"/>