summaryrefslogtreecommitdiffstats
path: root/dom/html/test/forms/test_output_element.html
blob: ab11443d83c2b4d8a342b03c52065be00fca57e9 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!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>