chrome/browser/resources/chromeos/chromevox/common/content_editable_extractor_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 CvoxContentEditableExtractorUnitTest() {}
  14
  15 CvoxContentEditableExtractorUnitTest.prototype = {
  16   __proto__: ChromeVoxUnitTestBase.prototype,
  17
  18   /** @override */
  19   closureModuleDeps: [
  20     'cvox.ContentEditableExtractor',
  21   ]
  22 };
  23
  24 /**
  25  * Helper function to set the selection
  26  * @param {Node} startNode The base/start node of the range.
  27  * @param {number} startOffset The 0-based character index of the start.
  28  * @param {Node} endNode The extent/end node of the range.
  29  * @param {number} endOffset The 0-based character index of the end.
  30  */
  31 function setSelection(startNode, startOffset, endNode, endOffset) {
  32   var r = document.createRange();
  33   r.setStart(startNode, startOffset);
  34   r.setEnd(endNode, endOffset);
  35   var sel = window.getSelection();
  36   sel.removeAllRanges();
  37   sel.addRange(r);
  38 }
  39
  40 TEST_F('CvoxContentEditableExtractorUnitTest', 'EmptyElement', function() {
  41   this.loadDoc(function() {/*!
  42     <div>
  43       <div id="textbox" contentEditable="true"></div>
  44     </div>
  45   */});
  46
  47   var textbox = $('textbox');
  48   var extractor = new cvox.ContentEditableExtractor();
  49   extractor.update(textbox);
  50   assertEquals('', extractor.getText());
  51   assertEquals(0, extractor.getStartIndex());
  52   assertEquals(0, extractor.getEndIndex(0));
  53   assertEquals(0, extractor.getLineIndex(0));
  54   assertEquals(0, extractor.getLineStart(0));
  55   assertEquals(0, extractor.getLineEnd(0));
  56 });
  57
  58 /**
  59  * Test getting text and selections from a single contenteditable node.
  60  */
  61 TEST_F('CvoxContentEditableExtractorUnitTest', 'SingleTextNode', function() {
  62   this.loadDoc(function() {/*!
  63     <div>
  64       <div id="textbox" contentEditable="true">Hello</div>
  65     </div>
  66   */});
  67   var textbox = $('textbox');
  68
  69   var extractor = new cvox.ContentEditableExtractor();
  70   extractor.update(textbox);
  71   assertEquals('Hello', extractor.getText());
  72   assertEquals(0, extractor.getLineIndex(0));
  73   assertEquals(0, extractor.getLineStart(0));
  74   assertEquals(5, extractor.getLineEnd(0));
  75   assertEquals(5, extractor.getStartIndex());
  76   assertEquals(5, extractor.getEndIndex());
  77
  78   // Test all possible cursor positions.
  79   for (var i = 0; i <= 5; i++) {
  80     setSelection(textbox.firstChild, i, textbox.firstChild, i);
  81     extractor.update(textbox);
  82     assertEquals(i, extractor.getStartIndex());
  83     assertEquals(i, extractor.getEndIndex());
  84   }
  85
  86   // Test all possible ways to select one character.
  87   for (i = 0; i < 5; i++) {
  88     setSelection(textbox.firstChild, i, textbox.firstChild, i + 1);
  89     extractor.update(textbox);
  90     assertEquals(i, extractor.getStartIndex());
  91     assertEquals(i + 1, extractor.getEndIndex());
  92   }
  93
  94   // Test selecting everything.
  95   setSelection(textbox.firstChild, 0, textbox.firstChild, 5);
  96   extractor.update(textbox);
  97   assertEquals(0, extractor.getStartIndex());
  98   assertEquals(5, extractor.getEndIndex());
  99 });
 100
 101 /**
 102  * Test getting text and selections from a contenteditable node with
 103  * nonprinted whitespace.
 104  */
 105 TEST_F('CvoxContentEditableExtractorUnitTest', 'TextWithWhitespace',
 106     function() {
 107   this.loadDoc(function() {/*!
 108     <div>
 109       <div id="textbox" contentEditable="true"> Hello  World </div>
 110     </div>
 111   */});
 112   var textbox = $('textbox');
 113
 114   var extractor = new cvox.ContentEditableExtractor();
 115   extractor.update(textbox);
 116   assertEquals('Hello World', extractor.getText());
 117   assertEquals(0, extractor.getLineIndex(0));
 118   assertEquals(0, extractor.getLineStart(0));
 119   assertEquals(11, extractor.getLineEnd(0));
 120   assertEquals(11, extractor.getStartIndex());
 121   assertEquals(11, extractor.getEndIndex());
 122
 123   // Test all *reasonable* indexes of a selection into this text node
 124   // and the logical index into the text that these should result in.
 125   var expectedIndexMap = {
 126     0: 0,
 127     1: 0,
 128     2: 1,
 129     3: 2,
 130     4: 3,
 131     5: 4,
 132     6: 5,
 133     // Note: index=7 should never happen
 134     8: 6,
 135     9: 7,
 136     10: 8,
 137     11: 9,
 138     12: 10,
 139     13: 11,
 140     14: 11
 141   };
 142   for (var srcIndex in expectedIndexMap) {
 143     var dstIndex = expectedIndexMap[srcIndex];
 144     setSelection(textbox.firstChild, srcIndex, textbox.firstChild, srcIndex);
 145     extractor.update(textbox);
 146     assertEquals(dstIndex, extractor.getStartIndex());
 147     assertEquals(dstIndex, extractor.getEndIndex());
 148   }
 149 });
 150
 151 /**
 152  * Test getting text and selections from a contenteditable node with
 153  * preformatted text.
 154  */
 155 TEST_F('CvoxContentEditableExtractorUnitTest', 'Preformatted', function() {
 156   this.loadDoc(function() {/*!
 157     <div>
 158       <pre id="textbox" contentEditable="true">aaaaaaaaaa
 159 bbbbbbbbbb
 160 cccccccccc</pre>
 161     </div>
 162   */});
 163   var textbox = $('textbox');
 164
 165   var extractor = new cvox.ContentEditableExtractor();
 166   extractor.update(textbox);
 167   assertEquals('aaaaaaaaaa\nbbbbbbbbbb\ncccccccccc', extractor.getText());
 168   assertEquals(0, extractor.getLineStart(0));
 169   assertEquals(11, extractor.getLineEnd(0));
 170   assertEquals(11, extractor.getLineStart(1));
 171   assertEquals(22, extractor.getLineEnd(1));
 172   assertEquals(22, extractor.getLineStart(2));
 173   assertEquals(32, extractor.getLineEnd(2));
 174
 175   // Test all possible cursor positions.
 176   for (var i = 0; i <= 32; i++) {
 177     setSelection(textbox.firstChild, i, textbox.firstChild, i);
 178     extractor.update(textbox);
 179     assertEquals(i, extractor.getStartIndex());
 180     assertEquals(i, extractor.getEndIndex());
 181   }
 182 });
 183
 184 /**
 185  * Test getting text and selections from a contenteditable node with
 186  * wrapping.
 187  */
 188 TEST_F('CvoxContentEditableExtractorUnitTest', 'WordWrap', function() {
 189   this.loadDoc(function() {/*!
 190     <div>
 191       <div id="textbox"
 192            style="width: 1em; word-wrap: normal"
 193            contentEditable="true">One two three</div>
 194     </div>
 195   */});
 196   var textbox = $('textbox');
 197
 198   var extractor = new cvox.ContentEditableExtractor();
 199   extractor.update(textbox);
 200   assertEquals('One\ntwo\nthree', extractor.getText());
 201   assertEquals(0, extractor.getLineStart(0));
 202   assertEquals(4, extractor.getLineEnd(0));
 203   assertEquals(4, extractor.getLineStart(1));
 204   assertEquals(8, extractor.getLineEnd(1));
 205   assertEquals(8, extractor.getLineStart(2));
 206   assertEquals(13, extractor.getLineEnd(2));
 207
 208   // Test all possible cursor positions.
 209   for (var i = 0; i <= 13; i++) {
 210     setSelection(textbox.firstChild, i, textbox.firstChild, i);
 211     extractor.update(textbox);
 212     assertEquals(i, extractor.getStartIndex());
 213     assertEquals(i, extractor.getEndIndex());
 214   }
 215 });
 216
 217 /**
 218  * Test getting text and lines from a contenteditable region
 219  * containing two paragraphs and an explicit line break.
 220  */
 221 TEST_F('CvoxContentEditableExtractorUnitTest', 'TwoParas', function() {
 222   this.loadDoc(function() {/*!
 223     <div>
 224       <div id="textbox" contentEditable="true">
 225         <p>One</p>
 226         <p>Two<br>Three</p>
 227       </div>
 228     </div>
 229   */});
 230   var textbox = $('textbox');
 231
 232   var extractor = new cvox.ContentEditableExtractor();
 233   extractor.update(textbox);
 234   assertEquals('One\nTwo\nThree',
 235                extractor.getText());
 236   assertEquals(0, extractor.getLineStart(0));
 237   assertEquals(4, extractor.getLineEnd(0));
 238   assertEquals(4, extractor.getLineStart(1));
 239   assertEquals(8, extractor.getLineEnd(1));
 240   assertEquals(8, extractor.getLineStart(2));
 241   assertEquals(13, extractor.getLineEnd(2));
 242 });
 243
 244 /**
 245  * Test getting text and lines from a contenteditable region
 246  * containing two paragraphs, this time with added whitespace.
 247  */
 248 TEST_F('CvoxContentEditableExtractorUnitTest', 'TwoParasWithWhitespace',
 249     function() {
 250   this.loadDoc(function() {/*!
 251     <div>
 252       <div id="textbox" contentEditable="true">
 253         <p> One </p>
 254         <p> Two <br> Three </p>
 255       </div>
 256     </div>
 257   */});
 258   var textbox = $('textbox');
 259
 260   var extractor = new cvox.ContentEditableExtractor();
 261   extractor.update(textbox);
 262   assertEquals('One\nTwo Three',
 263                extractor.getText());
 264   assertEquals(0, extractor.getLineStart(0));
 265   assertEquals(4, extractor.getLineEnd(0));
 266   assertEquals(4, extractor.getLineStart(1));
 267   assertEquals(8, extractor.getLineEnd(1));
 268   assertEquals(8, extractor.getLineStart(2));
 269   assertEquals(13, extractor.getLineEnd(2));
 270 });
 271
 272 /**
 273  * Test getting text and lines from a contenteditable region
 274  * containing some raw text and then some text in a block-level element.
 275  */
 276 TEST_F('CvoxContentEditableExtractorUnitTest', 'NodePlusElement', function() {
 277   this.loadDoc(function() {/*!
 278     <div>
 279       <div id="textbox"
 280            contentEditable="true">One<div>Two<br>Three</div></div>
 281     </div>
 282   */});
 283   var textbox = $('textbox');
 284
 285   var extractor = new cvox.ContentEditableExtractor();
 286   extractor.update(textbox);
 287   assertEquals('One\nTwo\nThree',
 288                extractor.getText());
 289   assertEquals(0, extractor.getLineStart(0));
 290   assertEquals(4, extractor.getLineEnd(0));
 291   assertEquals(4, extractor.getLineStart(1));
 292   assertEquals(8, extractor.getLineEnd(1));
 293   assertEquals(8, extractor.getLineStart(2));
 294   assertEquals(13, extractor.getLineEnd(2));
 295
 296   var oneTextNode = textbox.firstChild;
 297   assertEquals('One', oneTextNode.data);
 298   var twoTextNode = textbox.firstElementChild.firstChild;
 299   assertEquals('Two', twoTextNode.data);
 300   var threeTextNode = twoTextNode.nextSibling.nextSibling;
 301   assertEquals('Three', threeTextNode.data);
 302
 303   // End of first line.
 304   setSelection(oneTextNode, 3, oneTextNode, 3);
 305   extractor.update(textbox);
 306   assertEquals(3, extractor.getStartIndex());
 307   assertEquals(3, extractor.getEndIndex());
 308
 309   // Beginning of second line.
 310   setSelection(twoTextNode, 0, twoTextNode, 0);
 311   extractor.update(textbox);
 312   assertEquals(4, extractor.getStartIndex());
 313   assertEquals(4, extractor.getEndIndex());
 314
 315   // End of second line.
 316   setSelection(twoTextNode, 3, twoTextNode, 3);
 317   extractor.update(textbox);
 318   assertEquals(7, extractor.getStartIndex());
 319   assertEquals(7, extractor.getEndIndex());
 320
 321   // Beginning of third line.
 322   setSelection(threeTextNode, 0, threeTextNode, 0);
 323   extractor.update(textbox);
 324   assertEquals(8, extractor.getStartIndex());
 325   assertEquals(8, extractor.getEndIndex());
 326 });