<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=346485
-->
<head>
  <title>Test for Bug 346485</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="application/javascript" src="../reflect.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <script type="application/javascript">
    frameLoaded = function() {
      is(frames.submit_frame.location.href, "about:blank",
         "Blank frame loaded");
    }
  </script>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=346485">Mozilla Bug 346485</a>
<p id="display"></p>
<iframe name="submit_frame" onload="frameLoaded()" style="visibility: hidden;"></iframe>
<div id="content" style="display: none">
  <form id='f' method='get' target='submit_frame' action='foo'>
    <input name='a' id='a'>
    <input name='b' id='b'>
    <output id='o' for='a b' name='output-name'>tulip</output>
  </form>
</div>
<pre id="test">
<script type="application/javascript">

/** Test for Bug 346485 **/

function checkNameAttribute(element)
{
  is(element.name, "output-name", "Output name IDL attribute is not correct");
  is(element.getAttribute('name'), "output-name",
    "Output name content attribute is not correct");
}

function checkValueAndDefaultValueIDLAttribute(element)
{
  is(element.value, element.textContent,
    "The value IDL attribute should act like the textContent IDL attribute");

  element.value = "foo";
  is(element.value, "foo", "Value should be 'foo'");

  is(element.defaultValue, "tulip", "Default defaultValue is 'tulip'");

  element.defaultValue = "bar";
  is(element.defaultValue, "bar", "defaultValue should be 'bar'");

  // More complex situation.
  element.textContent = 'foo';
  var b = document.createElement('b');
  b.textContent = 'bar'
  element.appendChild(b);
  is(element.value, element.textContent,
    "The value IDL attribute should act like the textContent IDL attribute");
}

function checkValueModeFlag(element)
{
  /**
   * The value mode flag is the flag used to know if value should represent the
   * textContent or the default value.
   */
  // value mode flag should be 'value'
  isnot(element.defaultValue, element.value,
    "When value is set, defaultValue keeps its value");

  var f = document.getElementById('f');
  f.reset();
  // value mode flag should be 'default'
  is(element.defaultValue, element.value, "When reset, defaultValue=value");
  is(element.textContent, element.defaultValue,
    "textContent should contain the defaultValue");
}

function checkDescendantChanged(element)
{
  /**
   * Whenever a descendant is changed if the value mode flag is value,
   * the default value should be the textContent value.
   */
  element.defaultValue = 'tulip';
  element.value = 'foo';

  // set value mode flag to 'default'
  var f = document.getElementById('f');
  f.reset();

  is(element.textContent, element.defaultValue,
    "textContent should contain the defaultValue");
  element.textContent = "bar";
  is(element.textContent, element.defaultValue,
    "textContent should contain the defaultValue");
}

function checkFormIDLAttribute(element)
{
  is(element.form, document.getElementById('f'),
    "form IDL attribute is invalid");
}

function checkHtmlForIDLAttribute(element)
{
  is(String(element.htmlFor), 'a b',
    "htmlFor IDL attribute should reflect the for content attribute");

  // DOMTokenList is tested in another bug so we just test assignation
  element.htmlFor.value = 'a b c';
  is(String(element.htmlFor), 'a b c', "htmlFor should have changed");
}

function submitForm()
{
  // Setting the values for the submit.
  document.getElementById('o').value = 'foo';
  document.getElementById('a').value = 'afield';
  document.getElementById('b').value = 'bfield';

  frameLoaded = checkFormSubmission;

  // This will call checkFormSubmission() which is going to call ST.finish().
  document.getElementById('f').submit();
}

function checkFormSubmission()
{
  /**
   * All elements values have been set just before the submission.
   * The input elements values should be in the submit url but the ouput
   * element value should not appear.
   */

  is(frames.submit_frame.location.href,
    `${location.origin}/tests/dom/html/test/forms/foo?a=afield&b=bfield`,
     "The output element value should not be submitted");
  SimpleTest.finish();
}

SimpleTest.waitForExplicitFinish();
addLoadEvent(function() {
  reflectString({
    element: document.createElement("output"),
    attribute: "name",
  });

  var o = document.getElementsByTagName('output');
  is(o.length, 1, "There should be one output element");

  o = o[0];
  ok(o instanceof HTMLOutputElement,
    "The output should be instance of HTMLOutputElement");

  o = document.getElementById('o');
  ok(o instanceof HTMLOutputElement,
    "The output should be instance of HTMLOutputElement");

  is(o.type, "output", "Output type IDL attribute should be 'output'");

  checkNameAttribute(o);

  checkValueAndDefaultValueIDLAttribute(o);

  checkValueModeFlag(o);

  checkDescendantChanged(o);

  checkFormIDLAttribute(o);

  checkHtmlForIDLAttribute(o);

  submitForm();
});

</script>
</pre>
</body>
</html>
