<!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)');

  // Spec bug: https://www.w3.org/Bugs/Public/show_bug.cgi?id=25153
  /*
  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>