<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=566046
-->
<head>
  <title>Test for Bug 566046</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/EventUtils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <base>
  <base target='frame2'>
  <base target=''>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=566046">Mozilla Bug 566046</a>
<p id="display"></p>
<style>
  iframe { width: 130px; height: 100px;}
</style>
<iframe name='frame1' id='frame1'></iframe>
<iframe name='frame2' id='frame2'></iframe>
<iframe name='frame3' id='frame3'></iframe>
<iframe name='frame4' id='frame4'></iframe>
<iframe name='frame5' id='frame5'></iframe>
<iframe name='frame5bis' id='frame5bis'></iframe>
<iframe name='frame6' id='frame6'></iframe>
<iframe name='frame7' id='frame7'></iframe>
<iframe name='frame8' id='frame8'></iframe>
<iframe name='frame9' id='frame9'></iframe>
<div id="content">
  <form target='frame1' action="dummy_page.html" method="GET">
    <input name='foo' value='foo'>
  </form>
  <form action="dummy_page.html" method="GET">
    <input name='bar' value='bar'>
  </form>
  <form target="">
  </form>

  <!-- submit controls with formtarget that are validated with a CLICK -->
  <form target="tulip" action="dummy_page.html" method="GET">
    <input name='tulip' value='tulip'>
    <input type='submit' id='is' formtarget='frame3'>
  </form>
  <form action="dummy_page.html" method="GET">
    <input name='foobar' value='foobar'>
    <input type='image' id='ii' formtarget='frame4'>
  </form>
  <form action="dummy_page.html" method="GET">
    <input name='tulip2' value='tulip2'>
    <button type='submit' id='bs' formtarget='frame5'>submit</button>
  </form>
  <form action="dummy_page.html" method="GET">
    <input name='tulip3' value='tulip3'>
    <button type='submit' id='bsbis' formtarget='frame5bis'>submit</button>
  </form>

  <!-- submit controls with formtarget that are validated with ENTER -->
  <form target="tulip" action="dummy_page.html" method="GET">
    <input name='footulip' value='footulip'>
    <input type='submit' id='is2' formtarget='frame6'>
  </form>
  <form action="dummy_page.html" method="GET">
    <input name='tulipfoobar' value='tulipfoobar'>
    <input type='image' id='ii2' formtarget='frame7'>
  </form>
  <form action="dummy_page.html" method="GET">
    <input name='tulipbar' value='tulipbar'>
    <button type='submit' id='bs2' formtarget='frame8'>submit</button>
  </form>

  <!-- check that a which is not a submit control do not use @formtarget -->
  <form target='frame9' action="dummy_page.html" method="GET">
    <input id='enter' name='input' value='enter' formtarget='frame6'>
  </form>
</div>
<pre id="test">
<script type="application/javascript">

/** Test for Bug 566046 **/

SimpleTest.waitForExplicitFinish();
addLoadEvent(function() {
  setTimeout(runTests, 0);
});

const BASE_URI = `${location.origin}/tests/dom/html/test/dummy_page.html`;
var gTestResults = {
  frame1: BASE_URI + "?foo=foo",
  frame2: BASE_URI + "?bar=bar",
  frame3: BASE_URI + "?tulip=tulip",
  frame4: BASE_URI + "?foobar=foobar&x=0&y=0",
  frame5: BASE_URI + "?tulip2=tulip2",
  frame5bis: BASE_URI + "?tulip3=tulip3",
  frame6: BASE_URI + "?footulip=footulip",
  frame7: BASE_URI + "?tulipfoobar=tulipfoobar&x=0&y=0",
  frame8: BASE_URI + "?tulipbar=tulipbar",
  frame9: BASE_URI + "?input=enter",
};

var gPendingLoad = 0; // Has to be set after depending on the frames number.

function runTests()
{
  // Check the target IDL attribute.
  for (var i=0; i<document.forms.length; ++i) {
    var testValue = document.forms[i].getAttribute('target');
    is(document.forms[i].target, testValue ? testValue : "",
       "target IDL attribute should reflect the target content attribute");
  }

  // We add a load event for the frames which will be called when the forms
  // will be submitted.
  var frames = [ document.getElementById('frame1'),
                 document.getElementById('frame2'),
                 document.getElementById('frame3'),
                 document.getElementById('frame4'),
                 document.getElementById('frame5'),
                 document.getElementById('frame5bis'),
                 document.getElementById('frame6'),
                 document.getElementById('frame7'),
                 document.getElementById('frame8'),
                 document.getElementById('frame9'),
               ];
  gPendingLoad = frames.length;

  for (var i=0; i<frames.length; i++) {
    frames[i].setAttribute('onload', "frameLoaded(this);");
  }

  // Submitting only the forms with a valid target.
  document.forms[0].submit();
  document.forms[1].submit();

  /**
   * We are going to focus each element before interacting with either for
   * simulating the ENTER key (synthesizeKey) or a click (synthesizeMouse) or
   * using .click(). This because it may be needed (ENTER) and because we want
   * to have the element visible in the iframe.
   *
   * Focusing the first element (id='is') is launching the tests.
   */
  document.getElementById('is').addEventListener('focus', function(aEvent) {
    synthesizeMouse(document.getElementById('is'), 5, 5, {});
    document.getElementById('ii').focus();
  }, {once: true});

  document.getElementById('ii').addEventListener('focus', function(aEvent) {
    synthesizeMouse(document.getElementById('ii'), 5, 5, {});
    document.getElementById('bs').focus();
  }, {once: true});

  document.getElementById('bs').addEventListener('focus', function(aEvent) {
    synthesizeMouse(document.getElementById('bs'), 5, 5, {});
    document.getElementById('bsbis').focus();
  }, {once: true});

  document.getElementById('bsbis').addEventListener('focus', function(aEvent) {
    document.getElementById('bsbis').click();
    document.getElementById('is2').focus();
  }, {once: true});

  document.getElementById('is2').addEventListener('focus', function(aEvent) {
    synthesizeKey("KEY_Enter");
    document.getElementById('ii2').focus();
  }, {once: true});

  document.getElementById('ii2').addEventListener('focus', function(aEvent) {
    synthesizeKey("KEY_Enter");
    document.getElementById('bs2').focus();
  }, {once: true});

  document.getElementById('bs2').addEventListener('focus', function(aEvent) {
    synthesizeKey("KEY_Enter");
    document.getElementById('enter').focus();
  }, {once: true});

  document.getElementById('enter').addEventListener('focus', function(aEvent) {
    synthesizeKey("KEY_Enter");
  }, {once: true});

  document.getElementById('is').focus();
}

function frameLoaded(aFrame) {
  // Check if when target is unspecified, it fallback correctly to the base
  // element target attribute.
  is(aFrame.contentWindow.location.href, gTestResults[aFrame.name],
     "the target attribute doesn't have the correct behavior");

  if (--gPendingLoad == 0) {
    SimpleTest.finish();
  }
}

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