Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/embedded-content/media-elements/user-interface/muted.html - WPT Dashboard Interop Dashboard
<!doctype html>
<title>muted</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/media.js"></script>
<style>video { display: none; }</style>
<div id=log></div>
<script>
function test_setting(e, muted, hasAttribute) {
assert_equals(e.muted, muted);
assert_equals(e.hasAttribute('muted'), hasAttribute);
e.muted = !e.muted;
assert_equals(e.muted, !muted);
assert_equals(e.hasAttribute('muted'), hasAttribute);
e.muted = !e.muted;
assert_equals(e.muted, muted);
assert_equals(e.hasAttribute('muted'), hasAttribute);
}
</script>
<!-- These tests are inside <audio>/<video> so that the steps for updating the
muted IDL attribute cannot be delayed until the end tag is parsed. -->
<audio id=a1>
<script>
var a1 = document.getElementById('a1');
test(function() {
assert_false(a1.muted);
}, 'getting audio.muted (parser-created)');
test(function() {
test_setting(a1, false, false);
}, 'setting audio.muted (parser-created)');
</script>
</audio>
<audio id=a2 muted>
<script>
var a2 = document.getElementById('a2');
test(function() {
assert_true(a2.muted);
}, 'getting audio.muted with muted="" (parser-created)');
test(function() {
test_setting(a2, true, true);
}, 'setting audio.muted with muted="" (parser-created)');
</script>
</audio>
<video id=v1>
<script>
var v1 = document.getElementById('v1');
test(function() {
assert_false(v1.muted);
}, 'getting video.muted (parser-created)');
test(function() {
test_setting(v1, false, false);
}, 'setting video.muted (parser-created)');
</script>
</video>
<video id=v2 muted>
<script>
var v2 = document.getElementById('v2');
test(function() {
assert_true(v2.muted);
}, 'getting video.muted with muted="" (parser-created)');
test(function() {
test_setting(v2, true, true);
}, 'setting video.muted with muted="" (parser-created)');
</script>
</video>
<!-- Negative test to ensure that the load algorithm does not update the
muted IDL attribute to match the content attribute. -->
<video id=v3 muted></video>
<script>
async_test(function(t) {
var v = document.getElementById('v3');
assert_true(v.muted);
v.muted = false;
v.src = 'data:,'; // invokes load()
v.addEventListener('error', t.step_func(function() {
assert_false(v.muted);
t.done();
}));
}, 'getting video.muted with muted="" after load (parser-created)');
</script>
<script>
['audio', 'video'].forEach(function(tagName) {
test(function() {
var m = document.createElement(tagName);
assert_false(m.muted);
}, 'getting ' + tagName + '.muted (script-created)');
test(function() {
var m = document.createElement(tagName);
test_setting(m, false, false);
}, 'setting ' + tagName + '.muted (script-created)');
test(function() {
var m = document.createElement(tagName);
m.setAttribute('muted', '');
assert_false(m.muted);
}, 'getting ' + tagName + '.muted with muted="" (script-created)');
test(function() {
var m = document.createElement(tagName);
m.setAttribute('muted', '');
test_setting(m, false, true);
}, 'setting ' + tagName + '.muted with muted="" (script-created)');
/*
test(function() {
var m = document.createElement(tagName);
m.setAttribute('muted', '');
m = m.cloneNode(false);
assert_true(m.hasAttribute('muted'));
assert_false(m.muted);
}, 'getting ' + tagName + '.muted with muted="" (cloneNode-created)');
*/
test(function() {
var div = document.createElement('div');
div.innerHTML = '<' + tagName + ' muted>';
m = div.firstChild;
assert_true(m.hasAttribute('muted'));
assert_true(m.muted);
}, 'getting ' + tagName + '.muted with muted="" (innerHTML-created)');
test(function() {
var id = tagName;
assert_equals(document.getElementById(id), null);
document.write('<' + tagName + ' id=' + id + ' muted>');
m = document.getElementById(id);
assert_true(m.hasAttribute('muted'));
assert_true(m.muted);
}, 'getting ' + tagName + '.muted with muted="" (document.write-created)');
test(function() {
var m = document.createElement(tagName);
m.setAttribute('muted', '');
var c = m.cloneNode(true);
assert_true(c.muted);
}, 'cloning ' + tagName + ' propagates muted (script-created)');
test(function() {
var div = document.createElement('div');
div.innerHTML = '<' + tagName + ' muted>';
m = div.firstChild;
var c = m.cloneNode(true);
assert_true(c.muted);
}, 'cloning ' + tagName + ' propagates muted (innerHTML-created)');
});
</script>