third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-disabled.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <style type="text/css">
   6 input {
   7     background:rgb(255,255,100);
   8 }
   9 input:disabled {
  10     background:rgb(255,0,0);
  11 }
  12 </style>
  13 </head>
  14 <body>
  15 <p id="description"></p>
  16 <div id="console"></div>
  17 <form>
  18 <fieldset>
  19 <legend><input type="text" id="parserGeneratedInput1"></legend>
  20 <legend><input type="text" id="parserGeneratedInput2"></legend>
  21 <input type="text" id="parserGeneratedInput3">
  22 <input type="text" id="parserGeneratedInput4" disabled>
  23 </fieldset>
  24 <fieldset disabled>
  25 <legend><input type="text" id="parserGeneratedInput5"></legend>
  26 <legend><input type="text" id="parserGeneratedInput6"></legend>
  27 <input type="text" id="parserGeneratedInput7">
  28 <input type="text" id="parserGeneratedInput8" disabled>
  29 </fieldset>
  30 <fieldset disabled>
  31 <input type="text" id="parserGeneratedInput9">
  32 </fieldset>
  33 </form>
  34
  35 <script>
  36 description('Tests for HTMLFieldSetElement.disabled behavior.');
  37
  38 debug('\nVerifying parser generated fieldsets.');
  39 var parserGeneratedInput1 = document.getElementById("parserGeneratedInput1");
  40 var parserGeneratedInput2 = document.getElementById("parserGeneratedInput2");
  41 var parserGeneratedInput3 = document.getElementById("parserGeneratedInput3");
  42 var parserGeneratedInput4 = document.getElementById("parserGeneratedInput4");
  43 var parserGeneratedInput5 = document.getElementById("parserGeneratedInput5");
  44 var parserGeneratedInput6 = document.getElementById("parserGeneratedInput6");
  45 var parserGeneratedInput7 = document.getElementById("parserGeneratedInput7");
  46 var parserGeneratedInput8 = document.getElementById("parserGeneratedInput8");
  47 var parserGeneratedInput9 = document.getElementById("parserGeneratedInput9");
  48
  49 parserGeneratedInput1.focus();
  50 document.execCommand('insertText', false, 'L');
  51 parserGeneratedInput2.focus();
  52 document.execCommand('insertText', false, 'M');
  53 parserGeneratedInput3.focus();
  54 document.execCommand('insertText', false, 'N');
  55 parserGeneratedInput4.focus();
  56 document.execCommand('insertText', false, 'O');
  57 parserGeneratedInput5.focus();
  58 document.execCommand('insertText', false, 'P');
  59 parserGeneratedInput6.focus();
  60 document.execCommand('insertText', false, 'Q');
  61 parserGeneratedInput7.focus();
  62 document.execCommand('insertText', false, 'R');
  63 parserGeneratedInput8.focus();
  64 document.execCommand('insertText', false, 'S');
  65 parserGeneratedInput9.focus();
  66 document.execCommand('insertText', false, 'T');
  67
  68 shouldBe('parserGeneratedInput1.value', '"L"');
  69 shouldBe('parserGeneratedInput2.value', '"M"');
  70 shouldBe('parserGeneratedInput3.value', '"NO"');
  71 shouldBe('parserGeneratedInput4.value', '""');
  72 shouldBe('parserGeneratedInput5.value', '"PQRST"');
  73 shouldBe('parserGeneratedInput6.value', '""');
  74 shouldBe('parserGeneratedInput7.value', '""');
  75 shouldBe('parserGeneratedInput8.value', '""');
  76 shouldBe('parserGeneratedInput9.value', '""');
  77
  78
  79 debug('\nTesting a single fieldset element.');
  80 var fieldSet = document.createElement('fieldset');
  81 document.body.appendChild(fieldSet);
  82 var textInput = document.createElement('input');
  83 textInput.type = "text";
  84 fieldSet.appendChild(textInput);
  85
  86 debug('Verifying HTMLFormControl can be disabled regardless of enclosing fieldset.');
  87 textInput.disabled = true;
  88 shouldBeTrue('textInput.disabled');
  89 textInput.focus();
  90 document.execCommand('insertText', false, 'A');
  91 shouldBe('textInput.value', '""');
  92 shouldBeFalse('fieldSet.disabled');
  93 textInput.disabled = false;
  94
  95 debug('Fieldset is enabled by default. A user can insertText into the text input field.');
  96 textInput.focus();
  97 document.execCommand('insertText', false, 'A');
  98 shouldBe('textInput.value', '"A"');
  99
 100 debug('Disable fieldset.');
 101 fieldSet.disabled = true;
 102 shouldBeTrue('fieldSet.disabled');
 103
 104 debug('Once the fieldset is disabled, text cannot be inserted.');
 105 textInput.focus();
 106 document.execCommand('insertText', false, 'B');
 107 shouldBe('textInput.value', '"A"');
 108
 109 debug("Check if the style of the text element changed.");
 110 shouldBe("getComputedStyle(textInput).backgroundColor", "'rgb(255, 0, 0)'");
 111
 112 debug('Enable fieldset.');
 113 fieldSet.disabled = false;
 114 shouldBeFalse('fieldSet.disabled');
 115 shouldBe("getComputedStyle(textInput).backgroundColor", "'rgb(255, 255, 100)'");
 116
 117 textInput.focus();
 118 document.execCommand('insertText', false, 'B');
 119 shouldBe('textInput.value', '"AB"');
 120
 121 debug('Move the textinput element out of the fieldset.');
 122 fieldSet.removeChild(textInput);
 123 document.body.appendChild(textInput);
 124
 125 debug('Disable the fieldset.');
 126 fieldSet.disabled = true;
 127 shouldBeTrue('fieldSet.disabled');
 128
 129 debug('Text can be inserted, because the textinput element is outside of the disabled fieldset.');
 130 textInput.focus();
 131 document.execCommand('insertText', false, 'C');
 132 shouldBe('textInput.value', '"ABC"');
 133
 134 debug('Enable the fieldset.');
 135 fieldSet.disabled = false;
 136 shouldBeFalse('fieldSet.disabled');
 137
 138 debug('Insert a table into the fieldset.');
 139 var table = document.createElement('table');
 140 fieldSet.appendChild(table);
 141 var tr = document.createElement('tr');
 142 table.appendChild(tr);
 143 var td = document.createElement('td');
 144 tr.appendChild(td);
 145
 146 debug('Move the textinput field into the table.');
 147 document.body.removeChild(textInput);
 148 td.appendChild(textInput);
 149
 150 textInput.focus();
 151 document.execCommand('insertText', false, 'D');
 152 shouldBe('textInput.value', '"ABCD"');
 153
 154 debug('Disable the fieldset.');
 155 fieldSet.disabled = true;
 156 shouldBeTrue('fieldSet.disabled');
 157
 158 debug('Inserting text should fail.')
 159 textInput.focus();
 160 document.execCommand('insertText', false, 'E');
 161 shouldBe('textInput.value', '"ABCD"');
 162
 163 debug('Enable the fieldset.');
 164 fieldSet.disabled = false;
 165 shouldBeFalse('fieldSet.disabled');
 166
 167 textInput.focus();
 168 document.execCommand('insertText', false, 'E');
 169 shouldBe('textInput.value', '"ABCDE"');
 170
 171
 172 debug('\nTesting nested fieldset elements.');
 173 var outerFieldSet = document.createElement('fieldset');
 174 document.body.appendChild(outerFieldSet);
 175 var innerFieldSet = document.createElement('fieldset');
 176 outerFieldSet.appendChild(innerFieldSet);
 177 var outerTextInput = document.createElement('input');
 178 outerTextInput.type = "text";
 179 outerFieldSet.appendChild(outerTextInput);
 180 var innerTextInput = document.createElement('input');
 181 innerTextInput.type = "text";
 182 innerFieldSet.appendChild(innerTextInput);
 183
 184 debug('Verifying that subordinates of both fieldsets are enabled.');
 185 outerTextInput.focus();
 186 document.execCommand('insertText', false, 'F');
 187 innerTextInput.focus();
 188 document.execCommand('insertText', false, 'F');
 189 shouldBe('outerTextInput.value', '"F"');
 190 shouldBe('innerTextInput.value', '"F"');
 191
 192 debug('Disabling the inner fieldset only.');
 193 innerFieldSet.disabled = true;
 194 shouldBeTrue('innerFieldSet.disabled');
 195 outerTextInput.focus();
 196 document.execCommand('insertText', false, 'G');
 197 innerTextInput.focus();
 198 document.execCommand('insertText', false, 'G');
 199 shouldBe('outerTextInput.value', '"FGG"');
 200 shouldBe('innerTextInput.value', '"F"');
 201
 202 debug('Enabling the inner and disabling the outer fieldset.');
 203 outerFieldSet.disabled = true;
 204 innerFieldSet.disabled = false;
 205 shouldBeTrue('outerFieldSet.disabled');
 206 shouldBeFalse('innerFieldSet.disabled');
 207 outerTextInput.focus();
 208 document.execCommand('insertText', false, 'H');
 209 innerTextInput.focus();
 210 document.execCommand('insertText', false, 'H');
 211 shouldBe('outerTextInput.value', '"FGG"');
 212 shouldBe('innerTextInput.value', '"F"');
 213
 214 debug('Disabling both fieldset elements.');
 215 outerFieldSet.disabled = true;
 216 innerFieldSet.disabled = true;
 217 shouldBeTrue('outerFieldSet.disabled');
 218 shouldBeTrue('innerFieldSet.disabled');
 219 outerTextInput.focus();
 220 document.execCommand('insertText', false, 'H');
 221 innerTextInput.focus();
 222 document.execCommand('insertText', false, 'H');
 223 shouldBe('outerTextInput.value', '"FGG"');
 224 shouldBe('innerTextInput.value', '"F"');
 225
 226 debug('Enabling both fieldset elements.');
 227 outerFieldSet.disabled = false;
 228 innerFieldSet.disabled = false;
 229 shouldBeFalse('outerFieldSet.disabled');
 230 shouldBeFalse('innerFieldSet.disabled');
 231 outerTextInput.focus();
 232 document.execCommand('insertText', false, 'H');
 233 innerTextInput.focus();
 234 document.execCommand('insertText', false, 'H');
 235 shouldBe('outerTextInput.value', '"FGGH"');
 236 shouldBe('innerTextInput.value', '"FH"');
 237
 238
 239 debug('\nTest behavior of the first legend element in a fieldset elements.');
 240 var legendFieldSet = document.createElement('fieldset');
 241 document.body.appendChild(legendFieldSet);
 242 var firstLegend = document.createElement('legend');
 243 legendFieldSet.appendChild(firstLegend);
 244 var secondLegend = document.createElement('legend');
 245 legendFieldSet.appendChild(secondLegend);
 246
 247 var firstLegendTextInput = document.createElement('input');
 248 firstLegendTextInput.type = "text";
 249 firstLegend.appendChild(firstLegendTextInput);
 250
 251 var secondLegendTextInput = document.createElement('input');
 252 secondLegendTextInput.type = "text";
 253 secondLegend.appendChild(secondLegendTextInput);
 254
 255 debug('Children of the first legend element in a fieldset should not get disabled with the fieldset.');
 256 legendFieldSet.disabled = true;
 257 shouldBeTrue('legendFieldSet.disabled');
 258 firstLegendTextInput.focus();
 259 document.execCommand('insertText', false, 'I');
 260 secondLegendTextInput.focus()
 261 document.execCommand('insertText', false, 'I');
 262 shouldBe('firstLegendTextInput.value', '"II"');
 263 shouldBe('secondLegendTextInput.value', '""');
 264
 265 debug('Insert another legend element before the currently first one, and check again.');
 266 var insertedLegend = document.createElement('legend');
 267 legendFieldSet.insertBefore(insertedLegend, firstLegend);
 268 var insertedLegendTextInput = document.createElement('input');
 269 insertedLegend.appendChild(insertedLegendTextInput);
 270
 271 insertedLegendTextInput.focus();
 272 document.execCommand('insertText', false, 'J');
 273 firstLegendTextInput.focus();
 274 document.execCommand('insertText', false, 'J');
 275 secondLegendTextInput.focus()
 276 document.execCommand('insertText', false, 'J');
 277 shouldBe('insertedLegendTextInput.value', '"JJJ"');
 278 shouldBe('firstLegendTextInput.value', '"II"');
 279 shouldBe('secondLegendTextInput.value', '""');
 280
 281 debug('Enable the fieldset again and check for sanity.');
 282 legendFieldSet.disabled = false;
 283 shouldBeFalse('legendFieldSet.disabled');
 284 insertedLegendTextInput.focus();
 285 document.execCommand('insertText', false, 'K');
 286 firstLegendTextInput.focus();
 287 document.execCommand('insertText', false, 'K');
 288 secondLegendTextInput.focus()
 289 document.execCommand('insertText', false, 'K');
 290 shouldBe('insertedLegendTextInput.value', '"JJJK"');
 291 shouldBe('firstLegendTextInput.value', '"IIK"');
 292 shouldBe('secondLegendTextInput.value', '"K"');
 293
 294 document.body.removeChild(document.getElementsByTagName('form')[0]);
 295 document.body.removeChild(fieldSet);
 296 document.body.removeChild(outerFieldSet);
 297 document.body.removeChild(legendFieldSet);
 298 var successfullyParsed = true;
 299 </script>
 300
 301 </body>
 302 </html>