test_output_element.html

Enable keyboard shortcuts

<!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>