Bug 1397486 - Update controlBar width according to videocontrols which really grows along <audio> width. r=jaws

MozReview-Commit-ID: LpxH7Pnu7tQ

--HG--
extra : rebase_source : 455014838e4e023fa8b90941b0c2516b52c4d37e
This commit is contained in:
Ray Lin 2017-09-14 17:37:47 +08:00
Родитель 74240de91b
Коммит 5f143a8673
3 изменённых файлов: 38 добавлений и 17 удалений

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

@ -27,7 +27,10 @@ function waitForCondition(condition, nextTest, errorMsg) {
function getAnonElementWithinVideoByAttribute(video, aName, aValue) {
const domUtils = SpecialPowers.Cc["@mozilla.org/inspector/dom-utils;1"].
getService(SpecialPowers.Ci.inIDOMUtils);
const videoControl = domUtils.getChildrenForNode(video, true)[1];
// <videocontrols> is the second anonymous child node of <video>, but
// the first child node of <audio>.
const videoControlIndex = video.nodeName == "VIDEO" ? 1 : 0;
const videoControl = domUtils.getChildrenForNode(video, true)[videoControlIndex];
return SpecialPowers.wrap(videoControl.ownerDocument)
.getAnonymousElementByAttribute(videoControl, aName, aValue);

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

@ -2,8 +2,9 @@
<html>
<head>
<title>Audio controls test</title>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="text/javascript" src="/tests/SimpleTest/SpawnTask.js"></script>
<script type="text/javascript" src="head.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
@ -15,23 +16,32 @@
<pre id="test">
<script class="testbody" type="text/javascript">
function loadedmetadata(event) {
is(event.type, "loadedmetadata", "checking event type");
const audio = document.getElementById("audio");
const controlBar = getAnonElementWithinVideoByAttribute(audio, "anonid", "controlBar");
add_task(async function setup() {
await SpecialPowers.pushPrefEnv({"set": [["media.cache_size", 40000]]});
await new Promise(resolve => {
audio.addEventListener("loadedmetadata", resolve, {once: true});
audio.src = "audio.wav";
})
});
add_task(async function check_audio_height() {
is(audio.clientHeight, 40, "checking height of audio element");
});
SimpleTest.finish();
}
add_task(async function check_controlbar_width() {
const originalControlBarWidth = controlBar.clientWidth;
var audio = document.getElementById("audio");
isnot(originalControlBarWidth, 400, "the default audio width is not 400px");
SpecialPowers.pushPrefEnv({"set": [["media.cache_size", 40000]]}, startTest);
function startTest() {
// Kick off test once audio has loaded.
audio.addEventListener("loadedmetadata", loadedmetadata);
audio.src = "audio.wav";
}
audio.style.width = "400px";
audio.offsetWidth; // force reflow
SimpleTest.waitForExplicitFinish();
isnot(controlBar.clientWidth, originalControlBarWidth, "new width should differ from the origianl width");
is(controlBar.clientWidth, 400, "controlbar's width should grow with audio width");
});
</script>
</pre>
</body>

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

@ -1670,9 +1670,10 @@
let givenHeight = this.video.clientHeight;
let videoWidth = (this.isAudioOnly ?
this.controlBar.clientWidth :
this.videocontrols.clientWidth :
this.video.clientWidth) || minRequiredWidth;
let videoHeight = this.isAudioOnly ? this.controlBarMinHeight : givenHeight;
let videocontrolsWidth = this.videocontrols.clientWidth;
let widthUsed = minControlBarPaddingWidth;
let preventAppendControl = false;
@ -1707,7 +1708,14 @@
let controlBarHeight = Math.max(Math.min(givenHeight, this.controlBarMinHeight), this.controlBarMinVisibleHeight);
this.controlBar.style.height = `${controlBarHeight}px`;
}
this.controlBar.style.width = `${videoWidth}px`;
// Bug 1367875: Set minimum required width to controlBar if the given size is smaller than padding.
// This can help us expand the control and restore to the default size the next time we need
// to adjust the sizing.
if (videocontrolsWidth <= minControlBarPaddingWidth) {
this.controlBar.style.width = `${minRequiredWidth}px`;
} else {
this.controlBar.style.width = `${videoWidth}px`;
}
return;
}