chrome/browser/resources/chromeos/chromevox/common/dom_util_test.unitjs

   1 // Copyright 2014 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 // Include test fixture.
   6 GEN_INCLUDE(['../testing/chromevox_unittest_base.js']);
   7
   8 /**
   9  * Test fixture.
  10  * @constructor
  11  * @extends {ChromeVoxUnitTestBase}
  12  */
  13 function CvoxDomUtilUnitTest() {}
  14
  15 CvoxDomUtilUnitTest.prototype = {
  16   __proto__: ChromeVoxUnitTestBase.prototype,
  17
  18   /** @override */
  19   closureModuleDeps: [
  20     'cvox.ChromeVox',
  21     'cvox.DescriptionUtil',
  22     'cvox.DomUtil',
  23     'cvox.TestMsgs',
  24   ],
  25
  26   /** @override */
  27   setUp: function() {
  28     cvox.ChromeVox.msgs = new cvox.TestMsgs();
  29   },
  30
  31   asText_: function(node) {
  32     var temp = document.createElement('div');
  33     temp.appendChild(node);
  34     return temp.innerHTML;
  35   },
  36
  37   assertEqualsAsText_: function(node1, node2) {
  38     assertEquals(this.asText_(node1), this.asText_(node2));
  39   },
  40
  41   loadDomUtilTestDoc_: function() {
  42     this.loadDoc(function() {/*!
  43     <style type="text/css">
  44       #display_none { display: none; }
  45       #visibility_hidden { visibility: hidden; }
  46       #forced_visible { visibility: hidden; }
  47       #visibility_collapse { visibility: collapse; }
  48       #opacity_zero { opacity: 0; }
  49       #opacity_partial { opacity: 0.5; }
  50       #opacity_undefined { }
  51       #nested_visibility_hide { visibility: hidden; }
  52       #nested_visibility_show { visibility: visible; }
  53       #nested_display_none { display: none; }
  54       #nested_display_block { display: block; }
  55     </style>
  56    <form action="">
  57
  58     <div id="normal_node">1</div>
  59     <div id="display_none">2</div>
  60     <div id="visibility_hidden">3</div>
  61     <div id="visibility_collapse">3b</div>
  62     <div id="opacity_zero">4</div>
  63     <div id="opacity_partial">4b</div>
  64     <div id="opacity_undefined">5</div>
  65     <select id="select_node"><option>5</option></select>
  66     <textarea id="textarea">6</textarea>
  67     <div id="forced_visible" aria-hidden="false">7</div>
  68     <p id="normal_para">----</p>
  69     <p id="presentation" role="presentation">----</p>
  70     <p id="aria_hidden" aria-hidden="true">----</p>
  71     <p id="only_spaces">    </p>
  72     <p id="only_tabs">        </p>
  73     <p id="only_newlines">
  74
  75     </p>
  76     <p id="only_nbsp">&nbsp;</p>
  77     <p id="other_entity">&amp;</p>
  78     <img id="img">
  79     <img id="img_alt" alt="tree">
  80     <img id="img_blankalt" alt="">
  81
  82     <input id="check" type="checkbox">
  83     <input id="check_checked" type="checkbox" checked>
  84
  85     <span><p id="a">a</p></span>
  86     <span><p id="b">b</p><p id="c">c</p></span>
  87     </form>
  88
  89     <a id="special_link1" href="http://google.com"><span id="empty_span"></span>
  90     </a>
  91     <a id="special_link2" href="http://google.com"><span>Text content</span></a>
  92     <a id="special_link3"><span></span></a>
  93
  94     <div id="nested_visibility_hide">
  95       hide<div id="nested_visibility_show">show</div>me
  96     </div>
  97     <div id="nested_display_none">
  98       nothing<div id="nested_display_block">will</div>show
  99     </div>
 100     */});
 101   },
 102 };
 103
 104 TEST_F('CvoxDomUtilUnitTest', 'IsVisible', function() {
 105   this.loadDomUtilTestDoc_();
 106
 107   // Simple tests.
 108   var node = $('normal_node');
 109   assertEquals(true, cvox.DomUtil.isVisible(node));
 110   node = $('display_none');
 111   assertEquals(false, cvox.DomUtil.isVisible(node));
 112   node = $('visibility_hidden');
 113   assertEquals(false, cvox.DomUtil.isVisible(node));
 114   node = $('visibility_collapse');
 115   assertEquals(false, cvox.DomUtil.isVisible(node));
 116   node = $('opacity_zero');
 117   assertEquals(false, cvox.DomUtil.isVisible(node));
 118   node = $('opacity_partial');
 119   assertEquals(true, cvox.DomUtil.isVisible(node));
 120   node = $('opacity_undefined');
 121   assertEquals(true, cvox.DomUtil.isVisible(node));
 122   node = $('forced_visible');
 123   assertEquals(true, cvox.DomUtil.isVisible(node));
 124
 125   // Nested visibility tests.
 126   node = $('nested_visibility_hide');
 127   assertEquals(true, cvox.DomUtil.isVisible(node)); // Has visible child.
 128   node = $('nested_visibility_hide').childNodes[0];
 129   assertEquals(false, cvox.DomUtil.isVisible(node)); // TextNode is invisible.
 130   node = $('nested_visibility_show');
 131   assertEquals(true, cvox.DomUtil.isVisible(node));
 132   node = $('nested_visibility_show').childNodes[0];
 133   assertEquals(true, cvox.DomUtil.isVisible(node)); // TextNode is visible.
 134   node = $('nested_display_block');
 135   assertEquals(false, cvox.DomUtil.isVisible(node));
 136
 137   // Options tests (for performance).
 138   node = $('nested_display_block');
 139   assertEquals(true,
 140       cvox.DomUtil.isVisible(node, {checkAncestors: false}));
 141   node = $('nested_visibility_hide');
 142   assertEquals(false,
 143       cvox.DomUtil.isVisible(node, {checkDescendants: false}));
 144
 145   // Test that an element not part of the DOM is treated as invisible.
 146   var div = document.createElement('div');
 147   assertEquals(false, cvox.DomUtil.isVisible(div));
 148   document.body.appendChild(div);
 149   assertEquals(true, cvox.DomUtil.isVisible(div));
 150 });
 151
 152 /** Test determining if a node is a leaf node or not. @export */
 153 TEST_F('CvoxDomUtilUnitTest', 'IsLeafNode', function() {
 154   this.loadDomUtilTestDoc_();
 155
 156   var node = $('normal_node');
 157   assertEquals(false, cvox.DomUtil.isLeafNode(node));
 158   node = $('display_none');
 159   assertEquals(true, cvox.DomUtil.isLeafNode(node));
 160   node = $('visibility_hidden');
 161   assertEquals(true, cvox.DomUtil.isLeafNode(node));
 162   node = $('opacity_zero');
 163   assertEquals(true, cvox.DomUtil.isLeafNode(node));
 164   node = $('select_node');
 165   assertEquals(true, cvox.DomUtil.isLeafNode(node));
 166   node = $('textarea');
 167   assertEquals(true, cvox.DomUtil.isLeafNode(node));
 168   node = $('normal_para');
 169   assertEquals(false, cvox.DomUtil.isLeafNode(node));
 170   node = $('aria_hidden');
 171   assertEquals(true, cvox.DomUtil.isLeafNode(node));
 172   node = $('special_link1');
 173   assertEquals(true, cvox.DomUtil.isLeafNode(node));
 174   node = $('special_link2');
 175   assertEquals(true, cvox.DomUtil.isLeafNode(node));
 176   node = $('special_link3');
 177   assertEquals(false, cvox.DomUtil.isLeafNode(node));
 178   node = $('nested_visibility_hide');
 179   assertEquals(false, cvox.DomUtil.isLeafNode(node));
 180 });
 181
 182 /** Test determining if a node has content or not. @export */
 183 TEST_F('CvoxDomUtilUnitTest', 'HasContent', function() {
 184   this.loadDomUtilTestDoc_();
 185
 186   var node = $('normal_node');
 187   cvox.DomUtil.hasContent(node);
 188   assertEquals(true, cvox.DomUtil.hasContent(node));
 189   node = $('display_none');
 190   assertEquals(false, cvox.DomUtil.hasContent(node));
 191   node = $('visibility_hidden');
 192   assertEquals(false, cvox.DomUtil.hasContent(node));
 193   node = $('opacity_zero');
 194   assertEquals(false, cvox.DomUtil.hasContent(node));
 195   node = $('select_node');
 196   assertEquals(true, cvox.DomUtil.hasContent(node));
 197   node = $('textarea');
 198   assertEquals(true, cvox.DomUtil.hasContent(node));
 199   node = $('normal_para');
 200   assertEquals(true, cvox.DomUtil.hasContent(node));
 201   // TODO (adu): This test fails. Will inspect.
 202   // node = $('presentation');
 203   // assertEquals(false, cvox.DomUtil.hasContent(node));
 204   node = $('aria_hidden');
 205   assertEquals(false, cvox.DomUtil.hasContent(node));
 206   node = $('only_spaces');
 207   assertEquals(false, cvox.DomUtil.hasContent(node));
 208   node = $('only_tabs');
 209   assertEquals(false, cvox.DomUtil.hasContent(node));
 210   node = $('only_newlines');
 211   assertEquals(false, cvox.DomUtil.hasContent(node));
 212   node = $('other_entity');
 213   assertEquals(true, cvox.DomUtil.hasContent(node));
 214   node = $('img');
 215   assertEquals(true, cvox.DomUtil.hasContent(node));
 216   node = $('img_alt');
 217   assertEquals(true, cvox.DomUtil.hasContent(node));
 218   node = $('img_blankalt');
 219   assertEquals(false, cvox.DomUtil.hasContent(node));
 220 });
 221
 222 /** Test getting a node's state. @export */
 223 TEST_F('CvoxDomUtilUnitTest', 'NodeState', function() {
 224   this.loadDomUtilTestDoc_();
 225   this.appendDoc(function() {/*!
 226   <input id="state1_enabled">
 227   <input id="state1_disabled" disabled>
 228   <button id="state2_enabled">Button</button>
 229   <button id="state2_disabled" disabled>Button</button>
 230   <textarea id="state3_enabled">Textarea</textarea>
 231   <textarea id="state3_disabled" disabled>Textarea</textarea>
 232   <select id="state4_enabled"><option>Select</option></select>
 233   <select id="state4_disabled" disabled><option>Select</option></select>
 234   <div role="button" id="state5_enabled" tabindex="0">ARIAButton</div>
 235   <div role="button" id="state5_disabled" tabindex="0" disabled>ARIAButton</div>
 236   <fieldset>
 237     <input id="state6_enabled">
 238   </fieldset>
 239   <fieldset disabled>
 240     <input id="state6_disabled">
 241   </fieldset>
 242   */});
 243   var node = $('check');
 244   assertEquals('not checked', cvox.DomUtil.getState(node, true));
 245   node = $('check_checked');
 246   assertEquals('checked', cvox.DomUtil.getState(node, true));
 247   node = $('state1_enabled');
 248   assertEquals('', cvox.DomUtil.getState(node, true));
 249   node = $('state1_disabled');
 250   assertEquals('Disabled', cvox.DomUtil.getState(node, true));
 251   node = $('state2_enabled');
 252   assertEquals('', cvox.DomUtil.getState(node, true));
 253   node = $('state2_disabled');
 254   assertEquals('Disabled', cvox.DomUtil.getState(node, true));
 255   node = $('state3_enabled');
 256   assertEquals('', cvox.DomUtil.getState(node, true));
 257   node = $('state3_disabled');
 258   assertEquals('Disabled', cvox.DomUtil.getState(node, true));
 259   node = $('state4_enabled');
 260   assertEquals('1 of 1', cvox.DomUtil.getState(node, true));
 261   node = $('state4_disabled');
 262   assertEquals('1 of 1 Disabled', cvox.DomUtil.getState(node, true));
 263   node = $('state5_enabled');
 264   assertEquals('', cvox.DomUtil.getState(node, true));
 265   node = $('state5_disabled');
 266   assertEquals('', cvox.DomUtil.getState(node, true));
 267   node = $('state6_enabled');
 268   assertEquals('', cvox.DomUtil.getState(node, true));
 269   node = $('state6_disabled');
 270   assertEquals('Disabled', cvox.DomUtil.getState(node, true));
 271 });
 272
 273 /** Test finding the next/previous leaf node. @export */
 274 TEST_F('CvoxDomUtilUnitTest', 'LeafNodeTraversal', function() {
 275   this.loadDomUtilTestDoc_();
 276
 277   var node = $('a');
 278   node = cvox.DomUtil.directedNextLeafNode(node);
 279   assertEquals('\n    ', node.textContent);
 280   node = cvox.DomUtil.directedNextLeafNode(node);
 281   assertEquals('b', node.textContent);
 282   node = cvox.DomUtil.directedNextLeafNode(node);
 283   assertEquals('c', node.textContent);
 284   node = cvox.DomUtil.previousLeafNode(node);
 285   assertEquals('b', node.textContent);
 286   node = cvox.DomUtil.previousLeafNode(node);
 287   assertEquals('\n    ', node.textContent);
 288   node = cvox.DomUtil.previousLeafNode(node);
 289   assertEquals('a', node.textContent);
 290 });
 291
 292 /** Test finding the label for controls. @export */
 293 TEST_F('CvoxDomUtilUnitTest', 'GetLabel', function() {
 294   this.loadDoc(function() {/*!
 295     <fieldset id="Fieldset">
 296     <legend>This is a legend inside a fieldset</legend>
 297     <div align="right">
 298     <span>
 299     Username:
 300     </span>
 301     </div>
 302     <input name="Email" id="Email" size="18" value="" type="text">
 303     <span>
 304     Password:
 305     </span>
 306     <input name="Passwd" id="Passwd" size="18" type="password">
 307     <input name="PersistentCookie" id="PersistentCookie" type="checkbox">
 308     <label for="PersistentCookie" id="PersistentCookieLabel">
 309     Stay signed in
 310     </label>
 311     <input name="signIn" id="signIn" value="Sign in" type="submit">
 312     <input id="dummyA" size="18" value="" type="text" title="">
 313     <input id="dummyB" size="18" value="" type="text" aria-label="">
 314     </fieldset>
 315   */});
 316
 317   function getControlText(control) {
 318     var description = cvox.DescriptionUtil.getControlDescription(control);
 319     return cvox.DomUtil.collapseWhitespace(
 320         description.context + ' ' +
 321         description.text + ' ' +
 322         description.userValue + ' ' +
 323         description.annotation);
 324   }
 325
 326   var fieldsetElement = $('Fieldset');
 327   assertEquals('This is a legend inside a fieldset',
 328       cvox.DomUtil.getName(fieldsetElement, false, false));
 329
 330   var usernameField = $('Email');
 331   assertEquals('', cvox.DomUtil.getValue(usernameField));
 332   assertEquals('Username:',
 333       cvox.DomUtil.getControlLabelHeuristics(usernameField));
 334   assertEquals('Username: Edit text', getControlText(usernameField));
 335   var passwordField = $('Passwd');
 336   assertEquals('', cvox.DomUtil.getValue(passwordField));
 337   assertEquals('Password:',
 338       cvox.DomUtil.getControlLabelHeuristics(passwordField));
 339   assertEquals('Password: Password edit text', getControlText(passwordField));
 340   var cookieCheckbox = $('PersistentCookie');
 341   assertEquals('Stay signed in', cvox.DomUtil.getName(cookieCheckbox));
 342   assertEquals('Stay signed in Check box not checked',
 343       getControlText(cookieCheckbox));
 344   var signinButton = $('signIn');
 345   assertEquals('Sign in', cvox.DomUtil.getName(signinButton));
 346   assertEquals('Sign in Button', getControlText(signinButton));
 347   var dummyInputA = $('dummyA');
 348   assertEquals('', cvox.DomUtil.getName(dummyInputA));
 349   var dummyInputB = $('dummyB');
 350   assertEquals('', cvox.DomUtil.getName(dummyInputB));
 351
 352   // The heuristic no longer returns 'Stay signed in' as the label for
 353   // the signIn button because 'Stay signed in' is in a label that's
 354   // explicitly associated with another control.
 355   //assertEquals('Stay signed in ',
 356   //    cvox.DomUtil.getControlLabelHeuristics(signinButton));
 357 });
 358
 359 /** Test finding the label for controls with a more complex setup. @export */
 360 TEST_F('CvoxDomUtilUnitTest', 'GetLabelComplex', function() {
 361   this.loadDoc(function() {/*!
 362   <table class="bug-report-table">
 363   <tbody><tr>
 364   <td class="bug-report-fieldlabel">
 365   <input id="page-url-checkbox" type="checkbox">
 366   <span id="page-url-label" i18n-content="page-url">Include this URL:</span>
 367   </td>
 368   <td>
 369   <input id="page-url-text" class="bug-report-field" maxlength="200">
 370   </td>
 371   </tr>
 372   </tbody></table>
 373   <table id="user-email-table" class="bug-report-table">
 374   <tbody><tr>
 375   <td class="bug-report-fieldlabel">
 376   <input id="user-email-checkbox" checked="checked" type="checkbox">
 377   <span id="user-email-label">Include this email:</span>
 378   </td>
 379   <td>
 380   <label id="user-email-text" class="bug-report-field"></label>
 381   </td>
 382   </tr>
 383   </tbody></table>
 384   <table class="bug-report-table">
 385   <tbody><tr>
 386   <td class="bug-report-fieldlabel">
 387   <input id="sys-info-checkbox" checked="checked" type="checkbox">
 388   <span id="sysinfo-label">
 389   <a id="sysinfo-url" href="#">Send system information</a>
 390   </span>
 391   </td>
 392   </tr>
 393   </tbody></table>
 394   <table class="bug-report-table">
 395   <tbody><tr>
 396   <td class="bug-report-fieldlabel">
 397   <input id="screenshot-checkbox" type="checkbox">
 398   <span id="screenshot-label-current">Include the current screenshot:</span>
 399   </td>
 400   </tr>
 401   </tbody></table>
 402   */});
 403   var urlCheckbox = $('page-url-checkbox');
 404   assertEquals('Include this URL:',
 405       cvox.DomUtil.getControlLabelHeuristics(urlCheckbox));
 406   var emailCheckbox = $('user-email-checkbox');
 407   assertEquals('Include this email:',
 408       cvox.DomUtil.getControlLabelHeuristics(emailCheckbox));
 409   var sysCheckbox = $('sys-info-checkbox');
 410   assertEquals('Send system information',
 411       cvox.DomUtil.getControlLabelHeuristics(sysCheckbox));
 412 });
 413
 414 /**************************************************************/
 415
 416 TEST_F('CvoxDomUtilUnitTest', 'EscapedNames', function() {
 417   this.loadDoc(function() {/*!
 418      <p id="en-title" title="&lt;&gt;"></p>
 419      <p id="en-arialabel" aria-label="&lt;&gt;"></p>
 420      <img id="en-img" title="&lt;&gt;"></img>
 421      <p id="en-double" title="&amp;lt;&amp;gt;"></p>
 422      */});
 423   assertEquals('<>', cvox.DomUtil.getName(
 424       $('en-title')));
 425   assertEquals('<>', cvox.DomUtil.getName(
 426       $('en-arialabel')));
 427   assertEquals('<>', cvox.DomUtil.getName(
 428       $('en-img')));
 429   assertEquals('&lt;&gt;', cvox.DomUtil.getName(
 430       $('en-double')));
 431 });
 432
 433 /** Test a paragraph with plain text. @export */
 434 TEST_F('CvoxDomUtilUnitTest', 'SimplePara', function() {
 435   this.loadDoc(function() {/*!
 436     <p id="simplepara">This is a simple paragraph.</p>
 437   */});
 438   var node = $('simplepara');
 439   var text = cvox.DomUtil.collapseWhitespace(cvox.DomUtil.getName(node));
 440   assertEquals('This is a simple paragraph.', text);
 441 });
 442
 443 /** Test a paragraph with nested tags. @export */
 444 TEST_F('CvoxDomUtilUnitTest', 'NestedPara', function() {
 445   this.loadDoc(function() {/*!
 446     <p id="nestedpara">This is a <b>paragraph</b> with <i>nested</i> tags.</p>
 447   */});
 448   var node = $('nestedpara');
 449   var text = cvox.DomUtil.collapseWhitespace(cvox.DomUtil.getName(node));
 450   assertEquals('This is a paragraph with nested tags.', text);
 451 });
 452
 453 /**
 454  * Test a paragraph with nested tags and varying visibility.
 455  * @export
 456  */
 457 TEST_F('CvoxDomUtilUnitTest', 'NestedVisibilityPara', function() {
 458   this.loadDoc(function() {/*!
 459     <style type="text/css">
 460       #nested_visibility_paragraph { }
 461       #nested_visibility_paragraph .hide { visibility: hidden; }
 462       #nested_visibility_paragraph .show { visibility: visible; }
 463     </style>
 464     <p id="nested_visibility_paragraph">
 465       This is
 466       <span class="hide">
 467         not
 468         <span class="show"> a sentence.</span>
 469       </span>
 470     </p>
 471   */});
 472   var node = $('nested_visibility_paragraph');
 473   var text = cvox.DomUtil.collapseWhitespace(cvox.DomUtil.getName(node));
 474   assertEquals('This is a sentence.', text);
 475 });
 476
 477 /** Test getting text from an IMG node. @export */
 478 TEST_F('CvoxDomUtilUnitTest', 'Image', function() {
 479   this.loadDoc(function() {/*!
 480     <img id="img">
 481     <img id="img_noalt" src="rose.png">
 482     <img id="img_alt" alt="flower" src="rose.png">
 483     <img id="img_title" title="a Flower" src="rose.png">
 484     <img id="img_noalt_long"
 485          src="777777777777777777777777777777777.png">
 486   */});
 487
 488   var node = $('img');
 489   assertEquals('Image', cvox.DomUtil.getName(node));
 490   node = $('img_noalt');
 491   assertEquals('rose Image', cvox.DomUtil.getName(node));
 492   node = $('img_alt');
 493   assertEquals('flower', cvox.DomUtil.getName(node));
 494   node = $('img_title');
 495   assertEquals('a Flower', cvox.DomUtil.getName(node));
 496   node = $('img_noalt_long');
 497   assertEquals('Image', cvox.DomUtil.getName(node));
 498 });
 499
 500 /** Test getting text from a select box. @export */
 501 TEST_F('CvoxDomUtilUnitTest', 'Select', function() {
 502   this.loadDoc(function() {/*!
 503     <select id="select_noneselected">
 504       <option>Apple</option>
 505       <option>Banana</option>
 506       <option>Pear</option>
 507     </select>
 508     <select id="select_bananaselected">
 509       <option>Apple</option>
 510       <option selected>Banana</option>
 511       <option>Pear</option>
 512     </select>
 513   */});
 514
 515   $('select_noneselected').selectedIndex = -1;
 516   var node = $('select_noneselected');
 517   assertEquals('', cvox.DomUtil.getValue(node));
 518   node = $('select_bananaselected');
 519   assertEquals('Banana', cvox.DomUtil.getValue(node));
 520 });
 521
 522 /** Test whether funky html causes getName to go into infinite loop. */
 523 TEST_F('CvoxDomUtilUnitTest', 'GetNameInfiniteLoop', function() {
 524   this.loadDoc(function() {/*!
 525     <div>
 526       <label for="a">
 527         <p id="a">asdf</p>
 528       </label>
 529     </div>
 530   */});
 531   // intentionally no asserts; if there is an infinite (recursive) loop,
 532   // the stack will blow up
 533   var node = $('a');
 534   var label = cvox.DomUtil.getName(node);
 535 });
 536
 537 /** Test getting text from an INPUT control. @export */
 538 TEST_F('CvoxDomUtilUnitTest', 'Input', function() {
 539   this.loadDoc(function() {/*!
 540     <form action="">
 541       <input id="hidden" type="hidden" value="hidden1">
 542       <input id="input_img" type="image" src="rose.png">
 543       <input id="input_img_alt" type="image" alt="flower" src="rose.png">
 544       <input id="submit" type="submit">
 545       <input id="submit_withvalue" type="submit" value="Go">
 546       <input id="reset" type="reset">
 547       <input id="reset_withvalue" type="reset" value="Stop">
 548       <input id="button" type="button" value="Button">
 549       <input id="checkbox" type="checkbox" value="ignore1">
 550       <input id="checkbox_title" type="checkbox" value="ignore1" title="toggle">
 551       <input id="radio" type="radio" value="ignore2">
 552       <input id="password" type="password" value="dragon">
 553       <input id="text" value="my text">
 554       <input id="placeholder0" placeholder="Phone number">
 555       <input id="placeholder1" title="Phone number">
 556       <input id="placeholder2" title="Phone number" placeholder="xxx-yyy-zzzz">
 557       <input id="placeholder3" title="Phone number" placeholder="xxx-yyy-zzzz"
 558                                value="310-555-1212">
 559     </form>
 560   */});
 561
 562   var node = $('hidden');
 563   assertEquals('', cvox.DomUtil.getName(node));
 564   node = $('input_img');
 565   assertEquals('rose Image', cvox.DomUtil.getName(node));
 566   node = $('input_img_alt');
 567   assertEquals('flower', cvox.DomUtil.getName(node));
 568   node = $('submit');
 569   assertEquals('Submit', cvox.DomUtil.getName(node));
 570   node = $('submit_withvalue');
 571   assertEquals('Go', cvox.DomUtil.getName(node));
 572   node = $('reset');
 573   assertEquals('Reset', cvox.DomUtil.getName(node));
 574   node = $('reset_withvalue');
 575   assertEquals('Stop', cvox.DomUtil.getName(node));
 576   node = $('button');
 577   assertEquals('Button', cvox.DomUtil.getName(node));
 578   node = $('checkbox');
 579   assertEquals('', cvox.DomUtil.getName(node));
 580   node = $('checkbox_title');
 581   assertEquals('toggle', cvox.DomUtil.getName(node));
 582   node = $('radio');
 583   assertEquals('', cvox.DomUtil.getName(node));
 584   node = $('password');
 585   assertEquals('dot dot dot dot dot dot ', cvox.DomUtil.getValue(node));
 586   node = $('text');
 587   assertEquals('my text', cvox.DomUtil.getValue(node));
 588   node = $('placeholder0');
 589   assertEquals('Phone number', cvox.DomUtil.getName(node));
 590   node = $('placeholder1');
 591   assertEquals('Phone number', cvox.DomUtil.getName(node));
 592   node = $('placeholder2');
 593   assertEquals('xxx-yyy-zzzz',
 594                cvox.DomUtil.getName(node));
 595   node = $('placeholder3');
 596   assertEquals('310-555-1212 xxx-yyy-zzzz',
 597                cvox.DomUtil.getValue(node) + ' ' + cvox.DomUtil.getName(node));
 598 });
 599
 600
 601 /** Test checking if something is a control. @export */
 602 TEST_F('CvoxDomUtilUnitTest', 'IsControl', function() {
 603   this.loadDoc(function() {/*!
 604   <table width="100%" border="0" cellpadding="0" cellspacing="0">
 605     <tbody>
 606       <tr>
 607         <td>&nbsp;</td>
 608
 609         <td nowrap="nowrap">
 610           <table width="100%" border="0" cellpadding="0" cellspacing="0">
 611             <tbody>
 612               <tr>
 613                 <td bgcolor="#3366CC"><img alt="" width="1" height="1"></td>
 614               </tr>
 615             </tbody>
 616           </table>
 617
 618           <table width="100%" border="0" cellpadding="0" cellspacing="0">
 619             <tbody>
 620               <tr>
 621                 <td bgcolor="#E5ECF9" nowrap="nowrap"><font color="#000000"
 622                 face="arial,sans-serif" size="+1"><b>&nbsp;Preferences</b>
 623                 </font></td>
 624
 625                 <td align="right" bgcolor="#E5ECF9" nowrap="nowrap">
 626                 <font color="#000000" face="arial,sans-serif" size="-1">
 627                 <a href="http://www.google.com/accounts/ManageAccount">Google
 628                 Account settings</a> | <a href="http://www.google.com/">
 629                 Preferences Help</a> | <a href="/about.html">About
 630                 Google</a>&nbsp;</font></td>
 631               </tr>
 632             </tbody>
 633           </table>
 634         </td>
 635       </tr>
 636     </tbody>
 637   </table>
 638
 639   <table width="100%" border="0" cellpadding="2" cellspacing="0">
 640     <tbody>
 641       <tr bgcolor="#E5ECF9">
 642         <td><font face="arial,sans-serif" size="-1"><b>Save</b> your
 643         preferences when finished and <b>return to search</b>.</font></td>
 644
 645         <td align="right"><font face="arial,sans-serif" size="-1">
 646         <input value="Save Preferences " name="submit2" type="submit">
 647         </font></td>
 648       </tr>
 649     </tbody>
 650   </table>
 651
 652   <h1>Global Preferences</h1><font size="-1">(changes apply to all Google
 653   services)</font><br>
 654
 655   <table width="100%" border="0" cellpadding="0" cellspacing="0">
 656     <tbody>
 657       <tr>
 658         <td bgcolor="#CBDCED"><img alt="" width="1" height="2"></td>
 659       </tr>
 660     </tbody>
 661   </table>
 662
 663   <table width="100%" border="0" cellpadding="0" cellspacing="0">
 664     <tbody>
 665       <tr>
 666         <td width="1" bgcolor="#CBDCED"><img alt="" width="2" height="1"></td>
 667
 668         <td valign="top" width="175" nowrap="nowrap">
 669           &nbsp;<br>
 670           &nbsp;
 671
 672           <h2>Interface Language</h2>
 673         </td>
 674
 675         <td colspan="2"><br>
 676         <font face="arial,sans-serif" size="-1">Display Google tips and
 677         messages in: <select name="hl">
 678           <option value="af">
 679             Afrikaans
 680           </option>
 681
 682           <option value="ak">
 683             Akan
 684           </option>
 685
 686           <option value="sq">
 687             Albanian
 688           </option>
 689
 690           <option value="am">
 691             Amharic
 692           </option>
 693
 694           <option value="ar">
 695             Arabic
 696           </option>
 697         </select><br>
 698         If you do not find your native language in the pulldown above, you
 699         can<br>
 700         help Google create it through our
 701         <a href="http://services.google.com/">Google in Your Language
 702         program</a>.<br>
 703         &nbsp;</font></td>
 704       </tr>
 705     </tbody>
 706   </table>
 707
 708   <table width="100%" border="0" cellpadding="0" cellspacing="0">
 709     <tbody>
 710       <tr>
 711         <td colspan="4" bgcolor="#CBDCED"><img alt="" width="1" height="1"></td>
 712       </tr>
 713
 714       <tr>
 715         <td width="1" bgcolor="#CBDCED"><img alt="" width="2" height="1"></td>
 716
 717         <td valign="top" width="175" nowrap="nowrap">
 718           &nbsp;<br>
 719           &nbsp;
 720
 721           <h2>Search Language</h2>
 722         </td>
 723
 724         <td>
 725           &nbsp;<br>
 726           <font face="arial,sans-serif" size="-1">Prefer pages written in these
 727           language(s):</font><br>
 728
 729           <table border="0" cellpadding="5" cellspacing="10">
 730             <tbody>
 731               <tr>
 732                 <td valign="top" nowrap="nowrap"><font face="arial,sans-serif"
 733                 size="-1"><label><input name="lr" value="lang_af"
 734                 onclick="tick()" id="paf" type="checkbox">
 735                 <span id="taf">Afrikaans</span></label><br>
 736                 <label><input name="lr" value="lang_ar" onclick="tick()"
 737                 id="par" type="checkbox"> <span id="tar">Arabic</span></label>
 738                 <br>
 739                 <label><input name="lr" value="lang_hy" onclick="tick()"
 740                 id="phy" type="checkbox"> <span id="thy">Armenian</span>
 741                 </label><br>
 742                 <label><input name="lr" value="lang_be" onclick="tick()"
 743                 id="pbe" type="checkbox"> <span id="tbe">Belarusian</span>
 744                 </label><br>
 745                 <label><input name="lr" value="lang_bg" onclick="tick()"
 746                 id="pbg" type="checkbox"> <span id="tbg">Bulgarian</span>
 747                 </label><br>
 748                 <label><input name="lr" value="lang_ca" onclick="tick()"
 749                 id="pca" type="checkbox"> <span id="tca">Catalan</span>
 750                 </label><br>
 751                 <label><input name="lr" value="lang_zh-CN" onclick="tick()"
 752                 id="pzh-CN" type="checkbox"> <span id="tzh-CN">
 753                 Chinese&nbsp;(Simplified)</span></label><br>
 754                 <label><input name="lr" value="lang_zh-TW" onclick="tick()"
 755                 id="pzh-TW" type="checkbox"> <span id="tzh-TW">
 756                 Chinese&nbsp;(Traditional)</span></label><br>
 757                 <label><input name="lr" value="lang_hr" onclick="tick()"
 758                 id="phr" type="checkbox"> <span id="thr">Croatian</span>
 759                 </label><br>
 760                 <label><input name="lr" value="lang_cs" onclick="tick()"
 761                 id="pcs" type="checkbox"> <span id="tcs">Czech</span>
 762                 </label><br>
 763                 <label><input name="lr" value="lang_da" onclick="tick()"
 764                 id="pda" type="checkbox"> <span id="tda">Danish</span>
 765                 </label><br>
 766                 <label><input name="lr" value="lang_nl" onclick="tick()"
 767                 id="pnl" type="checkbox"> <span id="tnl">Dutch</span>
 768                 </label></font></td>
 769               </tr>
 770             </tbody>
 771           </table>
 772         </td>
 773       </tr>
 774     </tbody>
 775   </table><a name="loc" id="loc"></a>
 776
 777   <table width="100%" border="0" cellpadding="0" cellspacing="0">
 778     <tbody>
 779       <tr>
 780         <td colspan="4" bgcolor="#CBDCED"><img alt="" width="1" height="1"></td>
 781       </tr>
 782
 783       <tr>
 784         <td width="1" bgcolor="#CBDCED"><img alt="" width="2" height="1"></td>
 785
 786         <td valign="top" width="175" nowrap="nowrap">
 787           &nbsp;<br>
 788           &nbsp;
 789
 790           <h2>Location</h2>
 791         </td>
 792
 793         <td>
 794           <br>
 795
 796           <div style="color: rgb(204, 0, 0); display: none;" id="locerr">
 797             <span id="lem"><font face="arial,sans-serif" size="-1">The location
 798             <b>X</b> was not recognized.</font></span>
 799             <font face="arial,sans-serif" size="-1"><br>
 800             <br>
 801             Suggestions:<br></font>
 802
 803             <ul>
 804               <li><font face="arial,sans-serif" size="-1">Make sure all street
 805               and city names are spelled correctly.</font></li>
 806
 807               <li><font face="arial,sans-serif" size="-1">Make sure the address
 808               included a city and state.</font></li>
 809
 810               <li><font face="arial,sans-serif" size="-1">Try entering a Zip
 811               code.</font></li>
 812             </ul>
 813           </div>
 814
 815           <div style="color: rgb(204, 0, 0); display: none;" id="locterr">
 816             <font face="arial,sans-serif" size="-1">Please enter a valid US
 817             city or zip code<br>
 818             <br></font>
 819           </div>
 820
 821           <div style="color: rgb(204, 0, 0); display: none;" id="locserr">
 822             <font face="arial,sans-serif" size="-1">Server error. Please try
 823             again.<br>
 824             <br></font>
 825           </div><font face="arial,sans-serif" size="-1">Use as the default
 826           location in Google Maps, customized search results, and other Google
 827           products:<br>
 828           <input name="uulo" value="1" type="hidden"><input name="muul"
 829           value="4_20" type="hidden"><input name="luul" size="60" value=""
 830           type="text"><br>
 831           This location is saved on this computer.
 832           <a href="/support/websearch/bin/answer.py?answer=35892&amp;hl=en">
 833           Learn more</a><br>
 834           <br></font>
 835         </td>
 836       </tr>
 837     </tbody>
 838   </table>
 839
 840   <table width="100%" border="0" cellpadding="0" cellspacing="0">
 841     <tbody>
 842       <tr>
 843         <td colspan="4" bgcolor="#CBDCED"><img alt="" width="1" height="1"></td>
 844       </tr>
 845
 846       <tr>
 847         <td rowspan="2" width="1" bgcolor="#CBDCED">
 848         <img alt="" width="2" height="1"></td>
 849
 850         <td width="175" nowrap="nowrap">
 851           &nbsp;<br>
 852           &nbsp;
 853           <h2>SafeSearch Filtering</h2>
 854         </td>
 855         <td><br>
 856         <font face="arial,sans-serif" size="-1">
 857         <a href="http://www.google.com/">
 858         Google's SafeSearch</a> blocks web pages containing explicit sexual
 859         content from appearing in search results.</font></td>
 860       </tr>
 861       <tr valign="top">
 862         <td width="175" nowrap="nowrap">&nbsp;</td>
 863         <td>
 864           <div style="margin-bottom: 1.2em; font: smaller arial,sans-serif;">
 865             <input id="stf" name="safeui" value="on" type="radio">
 866             <label for="stf">Use strict filtering&nbsp;(Filter both explicit
 867             text and explicit images)</label><br>
 868             <input id="modf" name="safeui" value="images" checked="checked"
 869             type="radio"><label for="modf">Use moderate
 870             filtering&nbsp;(Filter explicit images only - default
 871             behavior)</label><br>
 872             <input id="nof" name="safeui" value="off" type="radio">
 873             <label for="nof">Do not filter my search results</label>
 874           </div>
 875           <p style="margin-bottom: 1.2em; font-size: smaller;">This will apply
 876           strict filtering to all searches from this computer using Firefox.
 877           <a href="http://www.google.com/">Learn more</a></p>
 878         </td>
 879       </tr>
 880     </tbody>
 881   </table>
 882   <table width="100%" border="0" cellpadding="0" cellspacing="0">
 883     <tbody>
 884       <tr>
 885         <td colspan="4" bgcolor="#CBDCED"><img alt="" width="1" height="1"></td>
 886       </tr>
 887
 888       <tr>
 889         <td width="1" bgcolor="#CBDCED"><img alt="" width="2" height="1"></td>
 890
 891         <td valign="top" width="175" nowrap="nowrap">
 892           &nbsp;<br>
 893           &nbsp;
 894
 895           <h2>Number of Results</h2>
 896         </td>
 897
 898         <td>&nbsp;<br>
 899         <font face="arial,sans-serif" size="-1">Google's default (10 results)
 900         provides the fastest results.<br>
 901         Display <select name="num">
 902           <option value="10" selected="selected">
 903             10
 904           </option>
 905
 906           <option value="20">
 907             20
 908           </option>
 909
 910           <option value="30">
 911             30
 912           </option>
 913
 914           <option value="50">
 915             50
 916           </option>
 917
 918           <option value="100">
 919             100
 920           </option>
 921         </select> results per page.<br>
 922         &nbsp;</font></td>
 923       </tr>
 924     </tbody>
 925   </table>
 926
 927   <table width="100%" border="0" cellpadding="0" cellspacing="0">
 928     <tbody>
 929       <tr>
 930         <td colspan="4" bgcolor="#CBDCED"><img alt="" width="1" height="1"></td>
 931       </tr>
 932
 933       <tr>
 934         <td width="1" bgcolor="#CBDCED"><img alt="" width="2" height="1"></td>
 935
 936         <td valign="top" width="175" nowrap="nowrap">
 937           &nbsp;<br>
 938           &nbsp;
 939
 940           <h2>Results Window</h2><a name="safeui" id="safeui">&nbsp;</a>
 941         </td>
 942
 943         <td>&nbsp;<br>
 944         <font face="arial,sans-serif" size="-1"><input id="nwc" name="newwindow"
 945         value="1" type="checkbox">&nbsp; <label for="nwc">Open
 946         search results in a new browser window.</label></font><br>
 947         &nbsp;</td>
 948       </tr>
 949     </tbody>
 950   </table>
 951
 952   <table width="100%" border="0" cellpadding="0" cellspacing="0">
 953     <tbody>
 954       <tr>
 955         <td colspan="4" bgcolor="#CBDCED"><img alt="" width="1" height="1"></td>
 956       </tr>
 957
 958       <tr>
 959         <td width="1" bgcolor="#CBDCED"><img alt="" width="2" height="1"></td>
 960
 961         <td valign="top" width="175" nowrap="nowrap">
 962           &nbsp;<br>
 963           &nbsp;
 964
 965           <h2>Google Instant</h2>
 966         </td>
 967
 968         <td>&nbsp;<br>
 969         <font face="arial,sans-serif" size="-1"><input id="suggon" name="suggon"
 970         value="1" checked="checked" type="radio"><label for="suggon">Use Google
 971         Instant predictions and results appear while typing</label><br>
 972         <input id="suggmid" name="suggon" value="2" type="radio">
 973         <label for="suggmid">Do not use Google Instant</label><br>
 974         <br>
 975         Signed-in users can remove personalized predictions from their
 976         <a href="/history">Web History</a>. <a href="http://www.google.com/">
 977         Learn more</a><br>
 978         <br>
 979         &nbsp;</font></td>
 980       </tr>
 981
 982       <tr>
 983         <td colspan="4" bgcolor="#CBDCED"><img alt="" width="1" height="2"></td>
 984       </tr>
 985     </tbody>
 986   </table><br>
 987   */});
 988   var submitButton = document.getElementsByName('submit2')[0];
 989   assertEquals(true, cvox.DomUtil.isControl(submitButton));
 990   var selectControl = document.getElementsByName('hl')[0];
 991   assertEquals(true, cvox.DomUtil.isControl(selectControl));
 992   var checkbox = $('paf');
 993   assertEquals(true, cvox.DomUtil.isControl(checkbox));
 994   var textInput = document.getElementsByName('luul')[0];
 995   assertEquals(true, cvox.DomUtil.isControl(textInput));
 996   var radioButton = $('suggmid');
 997   assertEquals(true, cvox.DomUtil.isControl(radioButton));
 998   var h1Elem = document.getElementsByTagName('h1');
 999   assertEquals(false, cvox.DomUtil.isControl(h1Elem));
1000 });
1001
1002 /** Test if something is an ARIA control. @export */
1003 TEST_F('CvoxDomUtilUnitTest', 'IsAriaControl', function() {
1004   this.loadDoc(function() {/*!
1005   <li id="cb1" role="checkbox" tabindex="0" aria-checked="false"
1006   aria-describedby="cond desc1">
1007       Lettuce
1008   </li>
1009   <li id="larger1" role="button" tabindex="0" aria-pressed="false"
1010   aria-labelledby="larger_label">+</li>
1011   <li id="r1" role="radio" tabindex="-1" aria-checked="false">Thai</li>
1012   <li id="treeitem1" role="treeitem" tabindex="-1">Oranges</li>
1013   */});
1014   var checkbox = $('cb1');
1015   assertEquals(true, cvox.DomUtil.isControl(checkbox));
1016   var button = $('larger1');
1017   assertEquals(true, cvox.DomUtil.isControl(button));
1018   var radio = $('r1');
1019   assertEquals(true, cvox.DomUtil.isControl(radio));
1020   var treeitem = $('treeitem1');
1021   assertEquals(false, cvox.DomUtil.isControl(treeitem));
1022 });
1023
1024 /** Test if something is an focusable. @export */
1025 TEST_F('CvoxDomUtilUnitTest', 'IsFocusable', function() {
1026   this.loadDoc(function() {/*!
1027   <a id="focus_link" href="#">Link</a>
1028   <a id="focus_anchor">Unfocusable anchor</a>
1029   <input id="focus_input" value="Input" />
1030   <select id="focus_select"><option>Select</option></select>
1031   <button id="focus_button1">Button</button>
1032   <button id="focus_button2" tabindex="-1">Button 2</button>
1033   <button id="focus_button3" tabindex="0">Button 3</button>
1034   <button id="focus_button4" tabindex="1">Button 4</button>
1035   <div id="focus_div1">Div</div>
1036   <div id="focus_div2" tabindex="-1">Div 2</div>
1037   <div id="focus_div3" tabindex="0">Div 3</div>
1038   <div id="focus_div4" tabindex="1">Div 4</div>
1039   */});
1040   var node;
1041   node = $('focus_link');
1042   assertEquals(true, cvox.DomUtil.isFocusable(node));
1043   node = $('focus_anchor');
1044   assertEquals(false, cvox.DomUtil.isFocusable(node));
1045   node = $('focus_input');
1046   assertEquals(true, cvox.DomUtil.isFocusable(node));
1047   node = $('focus_select');
1048   assertEquals(true, cvox.DomUtil.isFocusable(node));
1049   node = $('focus_button1');
1050   assertEquals(true, cvox.DomUtil.isFocusable(node));
1051   node = $('focus_button2');
1052   assertEquals(true, cvox.DomUtil.isFocusable(node));
1053   node = $('focus_button3');
1054   assertEquals(true, cvox.DomUtil.isFocusable(node));
1055   node = $('focus_button4');
1056   assertEquals(true, cvox.DomUtil.isFocusable(node));
1057   node = $('focus_div1');
1058   assertEquals(false, cvox.DomUtil.isFocusable(node));
1059   node = $('focus_div2');
1060   assertEquals(true, cvox.DomUtil.isFocusable(node));
1061   node = $('focus_div3');
1062   assertEquals(true, cvox.DomUtil.isFocusable(node));
1063   node = $('focus_div4');
1064   assertEquals(true, cvox.DomUtil.isFocusable(node));
1065
1066   // Test it with null.
1067   assertEquals(false, cvox.DomUtil.isFocusable(null));
1068
1069   // Test it with something that's not an element.
1070   assertEquals(false, cvox.DomUtil.isFocusable(new Object()));
1071
1072   // Test it with a Text node.
1073   node = $('focus_button1').firstChild;
1074   assertEquals(false, cvox.DomUtil.isFocusable(node));
1075 });
1076
1077 /** Some additional tests for getName function. */
1078 TEST_F('CvoxDomUtilUnitTest', 'GetName', function() {
1079   this.loadDoc(function() {/*!
1080   <span id="test-span" aria-labelledby="fake-id">Some text</span>
1081   <label id="label1">One</label>
1082   <label id="label3">Label</label>
1083   <div id="test-div" aria-labelledby="label1 label2 label3"></div>
1084   */});
1085   var node = $('test-span');
1086   // Makes sure we can deal with invalid ids in aria-labelledby.
1087   var text = cvox.DomUtil.collapseWhitespace(cvox.DomUtil.getName(node));
1088   assertEquals('Some text', text);
1089   node = $('test-div');
1090   text = cvox.DomUtil.collapseWhitespace(cvox.DomUtil.getName(node));
1091   assertEquals('One Label', cvox.DomUtil.getName(node));
1092 });
1093
1094 /** Test for getLinkURL. */
1095 TEST_F('CvoxDomUtilUnitTest', 'GetLinkURL', function() {
1096   this.loadDoc(function() {/*!
1097   <a id="l1" name="nohref">Anchor</a>
1098   <a id="l2" href="">Empty link</a>
1099   <a id="l3" href="#">Link to self</a>
1100   <a id="l4" href="http://google.com">Google</a>
1101   <span id="l5" role="link" onClick="javascript:alert('?')">Something</span>
1102   <div id="l6" role="link">Div with link role</a>
1103   */});
1104   var node = $('l1');
1105   assertEquals('', cvox.DomUtil.getLinkURL(node));
1106   node = $('l2');
1107   assertEquals('', cvox.DomUtil.getLinkURL(node));
1108   node = $('l3');
1109   assertEquals('Internal link', cvox.DomUtil.getLinkURL(node));
1110   node = $('l4');
1111   assertEquals('http://google.com', cvox.DomUtil.getLinkURL(node));
1112   node = $('l5');
1113   assertEquals('Unknown link', cvox.DomUtil.getLinkURL(node));
1114   node = $('l6');
1115   assertEquals('Unknown link', cvox.DomUtil.getLinkURL(node));
1116 });
1117
1118 /** Test for isDisabled. */
1119 TEST_F('CvoxDomUtilUnitTest', 'IsDisabled', function() {
1120   this.loadDoc(function() {/*!
1121   <input id="button1" type="button" value="Press me!"/>
1122   <input id="button2" type="button" value="Don't touch me!" disabled/>
1123   */});
1124   var node = $('button1');
1125   assertEquals(false, cvox.DomUtil.isDisabled(node));
1126   node = $('button2');
1127   assertEquals(true, cvox.DomUtil.isDisabled(node));
1128 });
1129
1130 /** Test for a tree with aria-expanded attribute. */
1131 TEST_F('CvoxDomUtilUnitTest', 'Tree', function() {
1132   this.loadDoc(function() {/*!
1133   <div id=":0" role="tree" aria-selected="false" aria-expanded="true"
1134     aria-level="0" aria-labelledby=":0.label" tabindex="0"
1135     aria-activedescendant=":1">
1136     <span id=":0.label">Countries</span>
1137       <div class="goog-tree-item" id=":1" role="treeitem" aria-selected="true"
1138           aria-expanded="false" aria-labelledby=":1.label" aria-level="1">
1139         <span id=":1.label">A</span>
1140       </div>
1141       <div class="goog-tree-item" id=":2" role="treeitem" aria-selected="false"
1142           aria-expanded="false" aria-labelledby=":2.label" aria-level="1">
1143         <span id=":2.label">B<span>
1144       </div>
1145       <div class="goog-tree-item" id=":3" role="treeitem" aria-selected="false"
1146           aria-expanded="true" aria-labelledby=":3.label" aria-level="1">
1147         <span id=":3.label">C</span>
1148         <div class="goog-tree-children" role="group">
1149           <div class="goog-tree-item" id=":3a" role="treeitem"
1150               aria-selected="false" aria-expanded="false"
1151               aria-labelledby=":3a.label" aria-level="2">
1152             <span id=":3a.label">Chile</span>
1153           </div>
1154           <div class="goog-tree-item" id=":3b" role="treeitem"
1155               aria-selected="false" aria-expanded="false"
1156               aria-labelledby=":3b.label" aria-level="2">
1157             <span id=":3b.label">China</span>
1158           </div>
1159           <div class="goog-tree-item" id=":3c" role="treeitem"
1160               aria-selected="false" aria-expanded="false"
1161               aria-labelledby=":3c.label" aria-level="2">
1162             <span id=":3c.label">Christmas Island</span>
1163           </div>
1164           <div class="goog-tree-item" id=":3d" role="treeitem"
1165               aria-selected="false" aria-expanded="false"
1166               aria-labelledby=":3d.label" aria-level="2">
1167             <span id=":3d.label">Cocos (Keeling) Islands</span>
1168           </div>
1169         </div>
1170       </div>
1171   </div>
1172   */});
1173   var node = $(':0');
1174   assertEquals('A Collapsed Selected 1 of 3',
1175       cvox.DomUtil.getControlValueAndStateString(node));
1176   node = $(':1');
1177   assertEquals('A Collapsed Selected 1 of 3',
1178       cvox.DomUtil.getControlValueAndStateString(node));
1179   node = $(':2');
1180   assertEquals('B Collapsed Not selected 2 of 3',
1181       cvox.DomUtil.getControlValueAndStateString(node));
1182   node = $(':3');
1183   assertEquals('C Expanded Not selected 3 of 3',
1184       cvox.DomUtil.getControlValueAndStateString(node));
1185     node = $(':3b');
1186   assertEquals('China Collapsed Not selected 2 of 4',
1187       cvox.DomUtil.getControlValueAndStateString(node));
1188 });
1189
1190 /** Test for tables with different border specifications */
1191 TEST_F('CvoxDomUtilUnitTest', 'TableBorders', function() {
1192   this.loadDoc(function() {/*!
1193   <table id=":0" border="1">
1194     <tr>
1195       <td>A</td>
1196     </tr>
1197   </table>
1198   <table id=":1" border="0">
1199     <tr>
1200       <td>A</td>
1201     </tr>
1202   </table>
1203   <table id=":2" border="0px">
1204     <tr>
1205       <td>A</td>
1206     </tr>
1207   </table>
1208   <table id=":3" frame="box">
1209     <tr>
1210       <td>A</td>
1211     </tr>
1212   </table>
1213   <table id=":4" frame="void">
1214     <tr>
1215       <td>A</td>
1216     </tr>
1217   </table>
1218   <table id=":5" style="border-width: medium">
1219     <tr>
1220       <td>A</td>
1221     </tr>
1222   </table>
1223   <table id=":6" style="border-width: medium; border-style: none">
1224     <tr>
1225       <td>A</td>
1226     </tr>
1227   </table>
1228   <table id=":7" style="border-color: red">
1229     <tr>
1230       <td>A</td>
1231     </tr>
1232   </table>
1233   <table id=":8" style="border-style: dotted; border-width: 0px">
1234     <tr>
1235       <td>A</td>
1236     </tr>
1237   </table>
1238   <table id=":9" style="border-width: 0px">
1239     <tr>
1240       <td>A</td>
1241     </tr>
1242   </table>
1243   <table id=":10" style="border: 0px">
1244     <tr>
1245       <td>A</td>
1246     </tr>
1247   </table>
1248   <table id=":11" style="border: 0">
1249     <tr>
1250       <td>A</td>
1251     </tr>
1252   </table>
1253   */});
1254   var node = $(':0');
1255   assertTrue(cvox.DomUtil.hasBorder(node));
1256
1257   node = $(':1');
1258   assertFalse(cvox.DomUtil.hasBorder(node));
1259
1260   node = $(':2');
1261   assertFalse(cvox.DomUtil.hasBorder(node));
1262
1263   node = $(':3');
1264   assertTrue(cvox.DomUtil.hasBorder(node));
1265
1266   node = $(':4');
1267   assertFalse(cvox.DomUtil.hasBorder(node));
1268
1269   node = $(':5');
1270   assertTrue(cvox.DomUtil.hasBorder(node));
1271
1272   node = $(':6');
1273   assertFalse(cvox.DomUtil.hasBorder(node));
1274
1275   node = $(':7');
1276   assertTrue(cvox.DomUtil.hasBorder(node));
1277
1278   node = $(':8');
1279   assertFalse(cvox.DomUtil.hasBorder(node));
1280
1281   node = $(':9');
1282   assertFalse(cvox.DomUtil.hasBorder(node));
1283
1284   node = $(':10');
1285   assertFalse(cvox.DomUtil.hasBorder(node));
1286
1287   node = $(':11');
1288   assertFalse(cvox.DomUtil.hasBorder(node));
1289 });
1290
1291 /** Tests for shallowChildlessClone */
1292 TEST_F('CvoxDomUtilUnitTest', 'ShallowChildlessClone', function() {
1293   this.loadDoc(function() {/*!
1294     <div id='simple'>asdf</div>
1295     <div id='expectedSimpleClone'>asdf</div>
1296     <div id='oneLevel'><div>asdf</div></div>
1297     <div id='expectedOneLevelClone'><div></div></div>
1298     <div id='withAttrs'><div class="asdf">asdf</div></div>
1299     <div id='expectedWithAttrsClone'><div class="asdf"></div></div>
1300   */});
1301
1302   var simple = $('simple').firstChild;
1303   var expectedSimpleClone = $('expectedSimpleClone').firstChild;
1304   var oneLevel = $('oneLevel').firstChild;
1305   var expectedOneLevelClone = $('expectedOneLevelClone').firstChild;
1306   var withAttrs = $('withAttrs').firstChild;
1307   var expectedWithAttrsClone = $('expectedWithAttrsClone').firstChild;
1308
1309   var simpleClone = cvox.DomUtil.shallowChildlessClone(simple);
1310   this.assertEqualsAsText_(simpleClone, expectedSimpleClone);
1311
1312   var oneLevelClone = cvox.DomUtil.shallowChildlessClone(oneLevel);
1313   this.assertEqualsAsText_(oneLevelClone, expectedOneLevelClone);
1314
1315   var withAttrsClone = cvox.DomUtil.shallowChildlessClone(withAttrs);
1316   this.assertEqualsAsText_(withAttrsClone, expectedWithAttrsClone);
1317 });
1318
1319 /** Tests for deepClone */
1320 TEST_F('CvoxDomUtilUnitTest', 'DeepClone', function() {
1321   this.loadDoc(function() {/*!
1322     <div id='simple'>asdf</div>
1323   */});
1324   var simpleClone = cvox.DomUtil.deepClone($('simple'));
1325   this.assertEqualsAsText_(simpleClone, $('simple'));
1326
1327   this.loadDoc(function() {/*!
1328     <div id="withAttrs" class="asdf">asdf</div>
1329   */});
1330   var withAttrsClone = cvox.DomUtil.deepClone($('withAttrs'));
1331   this.assertEqualsAsText_(withAttrsClone, $('withAttrs'));
1332 });
1333
1334 /** Tests for findNode */
1335 TEST_F('CvoxDomUtilUnitTest', 'FindNode', function() {
1336   this.loadDoc(function() {/*!
1337     <div id="root">
1338       <p id="a">a</p>
1339       <a href="#" id="b">b</a>
1340     </div>
1341   */});
1342   var f = cvox.DomUtil.findNode;
1343   var node = f($('root'), function(n) {return n.id == 'b';});
1344   assertEquals('b', node.id);
1345 });
1346
1347 /** Tests for getState for a list */
1348 TEST_F('CvoxDomUtilUnitTest', 'ListLength', function() {
1349   this.loadDoc(function() {/*!
1350     <ul id="ul1">
1351       <li>A
1352       <li>B
1353       <li>C
1354     </ul>
1355     <ul id="ul2">
1356       <li aria-setsize="10">A
1357       <li aria-setsize="10">B
1358       <li aria-setsize="10">C
1359     </ul>
1360   */});
1361   var ul1 = $('ul1');
1362   assertEquals('with 3 items',
1363       cvox.DomUtil.collapseWhitespace(cvox.DomUtil.getState(ul1)));
1364
1365   var ul2 = $('ul2');
1366   assertEquals('with 10 items',
1367       cvox.DomUtil.collapseWhitespace(cvox.DomUtil.getState(ul2)));
1368 });
1369
1370 /** Tests for hasLongDesc */
1371 TEST_F('CvoxDomUtilUnitTest', 'HasLongDesc', function() {
1372   this.loadDoc(function() {/*!
1373     <img id="img0" longdesc="desc.html" src="img0.jpg"></img>
1374     <img id="img1" src="img1.jpg"></img>
1375   */});
1376   var img0 = $('img0');
1377   assertEquals(true, cvox.DomUtil.hasLongDesc(img0));
1378
1379   var img1 = $('img1');
1380   assertEquals(false, cvox.DomUtil.hasLongDesc(img1));
1381 });
1382
1383 /** Tests for various link leaf types. */
1384 TEST_F('CvoxDomUtilUnitTest', 'LinkLeaf', function() {
1385   this.loadDoc(function() {/*!
1386     <a id='leaf' href='google.com'><strong>Click</strong><div>here</div></a>
1387     <a id='non-leaf' href='google.com'>Click <h2>here</h2></a>
1388   */});
1389   var leaf = $('leaf');
1390   var nonLeaf = $('non-leaf');
1391   assertTrue(cvox.DomUtil.isLeafNode(leaf));
1392   assertFalse(cvox.DomUtil.isLeafNode(nonLeaf));
1393 });
1394
1395
1396 /** Test the value and state of a multiple select. */
1397 TEST_F('CvoxDomUtilUnitTest', 'MultipleSelectValue', function() {
1398   this.loadDoc(function() {/*!
1399     <select id='cars' multiple>
1400       <option value="volvo">Volvo</option>
1401       <option value="saab">Saab</option>
1402       <option value="opel" selected>Opel</option>
1403       <option value="audi" selected>Audi</option>
1404     </select>
1405   */});
1406   var cars = $('cars');
1407   assertEquals('Opel to Audi', cvox.DomUtil.getValue(cars));
1408   assertEquals('selected 2 items', cvox.DomUtil.getState(cars));
1409 });
1410
1411
1412 /**
1413  * Test correctness of elementToPoint.
1414  *
1415  * Absolute positioning of the container is used to avoid the window of the
1416  * browser being too small to contain the test elements.
1417  */
1418 TEST_F('CvoxDomUtilUnitTest', 'ElementToPoint', function() {
1419   this.loadDoc(function() {/*!
1420     <div style="position: absolute; top: 0; left: 0">
1421       <a id='one' href='#a'>First</a>
1422       <p id='two'>Some text</p>
1423       <ul><li id='three'>LI</li><li>LI2</li></ul>
1424     </div>
1425   */});
1426   var one = $('one');
1427   var two = $('two');
1428   var three = $('three');
1429
1430   var oneHitPoint = cvox.DomUtil.elementToPoint(one);
1431   var twoHitPoint = cvox.DomUtil.elementToPoint(two);
1432   var threeHitPoint = cvox.DomUtil.elementToPoint(three);
1433
1434   assertEquals(one, document.elementFromPoint(oneHitPoint.x, oneHitPoint.y));
1435   assertEquals(two, document.elementFromPoint(twoHitPoint.x, twoHitPoint.y));
1436   assertEquals(three,
1437                document.elementFromPoint(threeHitPoint.x, threeHitPoint.y));
1438 });
1439
1440 /** Tests we compute the correct name for hidden aria labelledby nodes. */
1441 TEST_F('CvoxDomUtilUnitTest', 'HiddenAriaLabelledby', function() {
1442   this.loadDoc(function() {/*!
1443     <span id="acc_name" style="display: none">
1444       hello world!
1445     </span>
1446     <button id="button" aria-labelledby="acc_name">
1447   */});
1448   assertEquals('hello world!',
1449                cvox.DomUtil.getName($('button')));
1450 });
1451
1452 /** Tests that we compute the correct state for accesskeys. */
1453 TEST_F('CvoxDomUtilUnitTest', 'AccessKey', function() {
1454   this.loadDoc(function() {/*!
1455     <a id='accessKey' href="#f" title="Next page" accesskey="n">Next page</a>
1456   */});
1457   var a = $('accessKey');
1458   assertEquals('has access key, n', cvox.DomUtil.getState(a));
1459 });
1460
1461
1462 /** Tests that we compute the correct name for ordered listitems. */
1463 TEST_F('CvoxDomUtilUnitTest', 'OrderedListitem', function() {
1464   this.loadDoc(function() {/*!
1465     <ol id="fruits_ol">
1466       <li id='ol_li1'>apple
1467       <li id='ol_li2'>orange
1468       <li id='ol_li3'>strawberry
1469       <li id='ol_li4'>banana
1470     </ol>
1471   */});
1472   var li1 = $('ol_li1');
1473   var li2 = $('ol_li2');
1474   var li3 = $('ol_li3');
1475   var li4 = $('ol_li4');
1476   // Note that whitespace processing happens at a higher layer
1477   // (DescriptionUtil).
1478   assertEquals('1. apple',
1479                cvox.DomUtil.collapseWhitespace(cvox.DomUtil.getName(li1)));
1480   assertEquals('2. orange',
1481                cvox.DomUtil.collapseWhitespace(cvox.DomUtil.getName(li2)));
1482   assertEquals('3. strawberry',
1483                cvox.DomUtil.collapseWhitespace(cvox.DomUtil.getName(li3)));
1484   assertEquals('4. banana',
1485                cvox.DomUtil.collapseWhitespace(cvox.DomUtil.getName(li4)));
1486
1487   $('fruits_ol').style.listStyleType = 'lower-latin';
1488
1489   assertEquals('A. apple',
1490                cvox.DomUtil.collapseWhitespace(cvox.DomUtil.getName(li1)));
1491   assertEquals('B. orange',
1492                cvox.DomUtil.collapseWhitespace(cvox.DomUtil.getName(li2)));
1493   assertEquals('C. strawberry',
1494                cvox.DomUtil.collapseWhitespace(cvox.DomUtil.getName(li3)));
1495   assertEquals('D. banana',
1496                cvox.DomUtil.collapseWhitespace(cvox.DomUtil.getName(li4)));
1497 });
1498
1499 /** Tests a node with title, and textContent containing only whitespace. */
1500 TEST_F('CvoxDomUtilUnitTest', 'TitleOverridesInnerWhitespace', function() {
1501   this.loadDoc(function() {/*!
1502     <button id="btn1" title="Remove from Chrome">
1503       <span class="lid"></span>
1504       <span class="can"></span>
1505     </button>
1506   */});
1507   var btn1 = $('btn1');
1508   assertEquals('Remove from Chrome', cvox.DomUtil.getName(btn1));
1509 });
1510
1511 /** Test memoization. **/
1512 TEST_F('CvoxDomUtilUnitTest', 'Memoization', function() {
1513   this.loadDoc(function() {/*!
1514     <div id="container">
1515     </div>
1516   */});
1517
1518   // Nest divs 100 levels deep.
1519   var container = $('container');
1520   var outer = container;
1521   for (var i = 0; i < 100; i++) {
1522     var inner = document.createElement('div');
1523     outer.appendChild(inner);
1524     outer = inner;
1525   }
1526   var target = document.createElement('p');
1527   target.innerHTML = 'Text';
1528   outer.appendChild(target);
1529
1530   var iterations = 200;
1531
1532   function logTime(msg, fn) {
1533     var t0 = new Date();
1534     fn();
1535     console.log(msg + ' elapsed time: ' + (new Date() - t0) + ' ms');
1536   }
1537
1538   // First, test without memoization.
1539   logTime('No memoization', function() {
1540     container.style.visibility = 'hidden';
1541     for (var i = 0; i < iterations; i++) {
1542       assertFalse(cvox.DomUtil.isVisible(target));
1543     }
1544     container.style.visibility = 'visible';
1545     for (var i = 0; i < iterations; i++) {
1546       assertTrue(cvox.DomUtil.isVisible(target));
1547     }
1548   });
1549
1550   // Now test with memoization enabled.
1551   logTime('With memoization', function() {
1552     cvox.Memoize.scope(function() {
1553       container.style.visibility = 'hidden';
1554       for (var i = 0; i < iterations; i++) {
1555         assertFalse(cvox.DomUtil.isVisible(target));
1556       }
1557     });
1558     cvox.Memoize.scope(function() {
1559       container.style.visibility = 'visible';
1560       for (var i = 0; i < iterations; i++) {
1561         assertTrue(cvox.DomUtil.isVisible(target));
1562       }
1563     });
1564   });
1565
1566   // Finally as a sanity check that things are being memoized, turn on
1567   // memoization and show that we get the wrong result if we change the
1568   // DOM and call isVisible again.
1569   cvox.Memoize.scope(function() {
1570     container.style.visibility = 'hidden';
1571     assertFalse(cvox.DomUtil.isVisible(target));
1572
1573     container.style.visibility = 'visible';
1574     // This should be true! It will return the wrong answer because
1575     // we're deliberately leaving memoization on while modifying the DOM.
1576     assertFalse(cvox.DomUtil.isVisible(target));
1577   });
1578 });