accessible/tests/mochitest/test_textattrs.html

   1 <html>
   2
   3 <head>
   4   <title>Text attributes tests</title>
   5   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
   6
   7   <script type="application/javascript" src="chrome://mochikit/content/MochiKit/packed.js"></script>
   8   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   9
  10   <script type="application/javascript">
  11     const nsIAccessibleRetrieval = Components.interfaces.nsIAccessibleRetrieval;
  12     const nsIAccessibleText = Components.interfaces.nsIAccessibleText;
  13     const nsIAccessibleEvent = Components.interfaces.nsIAccessibleEvent;
  14
  15     const nsIDOMNSEditableElement =
  16       Components.interfaces.nsIDOMNSEditableElement;
  17     const nsIObserverService = Components.interfaces.nsIObserverService;
  18
  19     var gAccRetrieval = null;
  20
  21     /**
  22      * Test text attributes.
  23      *
  24      * @param aID               the ID of DOM element having text accessible
  25      * @param aOffset           the offset inside text accessible to fetch
  26      *                          text attributes
  27      * @param aAttrs            the map of text attributes (name/value pairs)
  28      * @param aStartOffset      the start offset where text attributes are
  29      *                          applied
  30      * @param aEndOffset        the end offset where text attribute are applied
  31      * @param aDefAttrs         the list of default text attributes (name/value
  32      *                          pairs)
  33      */
  34     function testTextAttrs(aID, aOffset,
  35                            aAttrs, aStartOffset, aEndOffset, aDefAttrs)
  36     {
  37       var node = document.getElementById(aID);
  38       if (!node) {
  39         ok(false, "Can't get the element with ID " + aID);
  40         return;
  41       }
  42
  43       var accessible = null;
  44       try {
  45         accessible = gAccRetrieval.getAccessibleFor(node);
  46         accessible.QueryInterface(nsIAccessibleText);
  47       } catch (e) {
  48       }
  49
  50       if (!accessible) {
  51         ok(false, "Can't query nsIAccessibleText interface for " + aID);
  52         return;
  53       }
  54
  55       var startOffset = { value: -1 };
  56       var endOffset = { value: -1 };
  57       var attrs = null;
  58       try {
  59         attrs = accessible.getTextAttributes(false,
  60                                              aOffset,
  61                                              startOffset, endOffset);
  62       } catch (e) {
  63       }
  64
  65       if (!attrs) {
  66         ok(false, "Can't get text attributes for " + aID);
  67         return;
  68       }
  69
  70       var errorMsg = " for " + aID + "at offset " + aOffset;
  71       is(startOffset.value, aStartOffset,
  72          "Wrong start offset" + errorMsg);
  73       is(endOffset.value, aEndOffset,
  74           "Wrong end offset" + errorMsg);
  75
  76       compareTextAttrs(errorMsg, attrs, aAttrs);
  77
  78       var defAttrs = null;
  79       try{
  80         defAttrs = accessible.defaultTextAttributes;
  81       } catch (e) {
  82       }
  83
  84       if (!defAttrs) {
  85         ok(false, "Can't get default attributes for " + aID);
  86         return;
  87       }
  88
  89       compareTextAttrs(errorMsg, defAttrs, aDefAttrs);
  90     }
  91
  92     function compareTextAttrs(aErrorMsg, aAttrs, aExpectedAttrs)
  93     {
  94       var enumerate = aAttrs.enumerate();
  95       while (enumerate.hasMoreElements()) {
  96         var prop = enumerate.getNext().
  97           QueryInterface(Components.interfaces.nsIPropertyElement);
  98
  99         if (!(prop.key in aExpectedAttrs))
 100           ok(false,
 101              "Unexpected attribute '" + prop.key + "'" + aErrorMsg);
 102         else
 103           is(prop.value, aExpectedAttrs[prop.key],
 104              "Attribute '" + prop.key + "' has wrong value" + aErrorMsg);
 105       }
 106
 107       for (var name in aExpectedAttrs) {
 108         var value = "";
 109         try {
 110           value = aAttrs.getStringProperty(name);
 111         } catch(e) {
 112         }
 113
 114         if (!value)
 115           ok(false,
 116              "There is no expected attribute '" + name + "'" + aErrorMsg);
 117       }
 118     }
 119
 120     var gObserverService = null;
 121     var gA11yEventObserver = null;
 122
 123     function testSpellTextAttrs()
 124     {
 125       gA11yEventObserver = {
 126         observe: function observe(aSubject, aTopic, aData)
 127         {
 128           if (aTopic != "accessible-event")
 129             return;
 130
 131
 132           var event = aSubject.QueryInterface(nsIAccessibleEvent);
 133
 134           if (event.eventType == nsIAccessibleEvent.EVENT_TEXT_ATTRIBUTE_CHANGED)
 135             this.mTextAttrChangedEventCounter++;
 136         },
 137
 138         mTextAttrChangedEventCounter: 0
 139       };
 140
 141       // Add accessibility event listeners
 142       var gObserverService = Components.classes["@mozilla.org/observer-service;1"].
 143                             getService(nsIObserverService);
 144
 145       gObserverService.addObserver(gA11yEventObserver, "accessible-event",
 146                                   false);
 147
 148       ID = "area8";
 149
 150       var node = document.getElementById(ID);
 151       node.focus();
 152
 153       var editor = node.QueryInterface(nsIDOMNSEditableElement).editor;
 154       var spellchecker = editor.getInlineSpellChecker(true);
 155       spellchecker.enableRealTimeSpell = true;
 156
 157       window.setTimeout(function()
 158         {
 159           var defAttrs = {
 160             "font-style": "normal",
 161             "text-align": "start",
 162             "font-size": "11px",
 163             "background-color": "rgb(255, 255, 255)",
 164             "font-weight": "400",
 165             "text-indent": "0px",
 166             "color": "rgb(0, 0, 0)",
 167             "font-family": "Lucida Grande",
 168             "text-position": "baseline"
 169           };
 170
 171           var attrs = { "background-color": "transparent" };
 172           var misspelledAttrs = {
 173             "background-color": "transparent",
 174             "invalid": "spelling"
 175           };
 176
 177           testTextAttrs(ID, 0, attrs, 0, 11, defAttrs);
 178           testTextAttrs(ID, 11, misspelledAttrs, 11, 17, defAttrs);
 179           testTextAttrs(ID, 18, misspelledAttrs, 18, 22, defAttrs);
 180
 181           is(gA11yEventObserver.mTextAttrChangedEventCounter, 2,
 182              "Wrong count of 'text attribute changed' events for " + ID);
 183
 184           // Remove a11y events listener
 185           gObserverService.removeObserver(gA11yEventObserver,
 186                                           "accessible-event");
 187
 188           SimpleTest.finish();
 189         }, 0);
 190     }
 191
 192     function doTest()
 193     {
 194       gAccRetrieval = Components.classes["@mozilla.org/accessibleRetrieval;1"].
 195                       getService(nsIAccessibleRetrieval);
 196
 197       //////////////////////////////////////////////////////////////////////////
 198       // area1
 199       var ID = "area1";
 200       var defAttrs = {
 201         "font-style": "normal",
 202         "text-align": "start",
 203         "font-size": "16px",
 204         "background-color": "transparent",
 205         "font-weight": "400",
 206         "text-indent": "0px",
 207         "color": "rgb(0, 0, 0)",
 208         "font-family": "serif",
 209         "text-position": "baseline"
 210       };
 211
 212       var attrs = {};
 213       testTextAttrs(ID, 0, attrs, 0, 7, defAttrs);
 214
 215       attrs = {"font-weight": "401"};
 216       testTextAttrs(ID, 7, attrs, 7, 11, defAttrs);
 217
 218       attrs = {};
 219       testTextAttrs(ID, 12, attrs, 11, 18, defAttrs);
 220
 221       //////////////////////////////////////////////////////////////////////////
 222       // area2
 223       ID = "area2";
 224       defAttrs = {
 225         "font-style": "normal",
 226         "text-align": "start",
 227         "font-size": "16px",
 228         "background-color": "transparent",
 229         "font-weight": "400",
 230         "text-indent": "0px",
 231         "color": "rgb(0, 0, 0)",
 232         "font-family": "serif",
 233         "text-position": "baseline"
 234       };
 235
 236       attrs = {};
 237       testTextAttrs(ID, 0, attrs, 0, 7, defAttrs);
 238
 239       attrs = {"font-weight": "401"};
 240       testTextAttrs(ID, 7, attrs, 7, 12, defAttrs);
 241
 242       attrs = {"font-style": "italic", "font-weight": "401"};
 243       testTextAttrs(ID, 13, attrs, 12, 19, defAttrs);
 244
 245       attrs = {"font-weight": "401"};
 246       testTextAttrs(ID, 20, attrs, 19, 23, defAttrs);
 247
 248       attrs = {};
 249       testTextAttrs(ID, 24, attrs, 23, 30, defAttrs);
 250
 251       //////////////////////////////////////////////////////////////////////////
 252       // area3
 253       ID = "area3";
 254       defAttrs = {
 255         "font-style": "normal",
 256         "text-align": "start",
 257         "font-size": "16px",
 258         "background-color": "transparent",
 259         "font-weight": "400",
 260         "text-indent": "0px",
 261         "color": "rgb(0, 0, 0)",
 262         "font-family": "serif",
 263         "text-position": "baseline"
 264       };
 265
 266       attrs = {"color": "rgb(0, 128, 0)"};
 267       testTextAttrs(ID, 0, attrs, 0, 6, defAttrs);
 268
 269       attrs = {"color": "rgb(255, 0, 0)"};
 270       testTextAttrs(ID, 6, attrs, 6, 26, defAttrs);
 271
 272       attrs = {"color": "rgb(0, 128, 0)"};
 273       testTextAttrs(ID, 26, attrs, 26, 50, defAttrs);
 274
 275       //////////////////////////////////////////////////////////////////////////
 276       // area4
 277       ID = "area4";
 278       defAttrs = {
 279         "font-style": "normal",
 280         "text-align": "start",
 281         "font-size": "16px",
 282         "background-color": "transparent",
 283         "font-weight": "400",
 284         "text-indent": "0px",
 285         "color": "rgb(0, 0, 0)",
 286         "font-family": "serif",
 287         "text-position": "baseline"
 288       };
 289
 290       attrs = {"color": "rgb(0, 128, 0)"};
 291       testTextAttrs(ID, 0, attrs, 0, 16, defAttrs);
 292
 293       attrs = {"color": "rgb(255, 0, 0)"};
 294       testTextAttrs(ID, 16, attrs, 16, 33, defAttrs);
 295
 296       attrs = {"color": "rgb(0, 128, 0)"};
 297       testTextAttrs(ID, 34, attrs, 33, 46, defAttrs);
 298
 299       //////////////////////////////////////////////////////////////////////////
 300       // area5
 301       ID = "area5";
 302       defAttrs = {
 303         "font-style": "normal",
 304         "text-align": "start",
 305         "font-size": "16px",
 306         "background-color": "transparent",
 307         "font-weight": "400",
 308         "text-indent": "0px",
 309         "color": "rgb(0, 0, 0)",
 310         "font-family": "serif",
 311         "text-position": "baseline"
 312       };
 313
 314       attrs = {"color": "rgb(0, 128, 0)"};
 315       testTextAttrs(ID, 0, attrs, 0, 5, defAttrs);
 316
 317       attrs = {};
 318       testTextAttrs(ID, 7, attrs, 5, 8, defAttrs);
 319
 320       attrs = {"color": "rgb(255, 0, 0)"};
 321       testTextAttrs(ID, 9, attrs, 8, 11, defAttrs);
 322
 323       attrs = {};
 324       testTextAttrs(ID, 11, attrs, 11, 18, defAttrs);
 325
 326       //////////////////////////////////////////////////////////////////////////
 327       // area6 (CSS vertical-align property, bug 445938)
 328       ID = "area6";
 329       defAttrs = {
 330         "font-style": "normal",
 331         "text-align": "start",
 332         "font-size": "16px",
 333         "background-color": "transparent",
 334         "font-weight": "400",
 335         "text-indent": "0px",
 336         "color": "rgb(0, 0, 0)",
 337         "font-family": "serif",
 338         "text-position": "baseline"
 339       };
 340
 341       attrs = {};
 342       testTextAttrs(ID, 0, attrs, 0, 5, defAttrs);
 343
 344       attrs = {"text-position": "super", "font-size": "13px" };
 345       testTextAttrs(ID, 5, attrs, 5, 13, defAttrs);
 346
 347       attrs = {};
 348       testTextAttrs(ID, 13, attrs, 13, 27, defAttrs);
 349
 350       attrs = {"text-position": "super" };
 351       testTextAttrs(ID, 27, attrs, 27, 35, defAttrs);
 352
 353       attrs = {};
 354       testTextAttrs(ID, 35, attrs, 35, 39, defAttrs);
 355
 356       attrs = {"text-position": "sub", "font-size": "13px" };
 357       testTextAttrs(ID, 39, attrs, 39, 50, defAttrs);
 358
 359       attrs = {};
 360       testTextAttrs(ID, 50, attrs, 50, 55, defAttrs);
 361
 362       attrs = {"text-position": "sub" };
 363       testTextAttrs(ID, 55, attrs, 55, 64, defAttrs);
 364
 365       //////////////////////////////////////////////////////////////////////////
 366       // area7
 367       ID = "area7";
 368       defAttrs = {
 369         "font-style": "normal",
 370         "text-align": "start",
 371         "font-size": "16px",
 372         "background-color": "transparent",
 373         "font-weight": "400",
 374         "text-indent": "0px",
 375         "color": "rgb(0, 0, 0)",
 376         "font-family": "serif",
 377         "text-position": "baseline"
 378       };
 379
 380       attrs = {"language": "ru"};
 381       testTextAttrs(ID, 0, attrs, 0, 12, defAttrs);
 382
 383       attrs = {"language": "en"};
 384       testTextAttrs(ID, 12, attrs, 12, 13, defAttrs);
 385
 386       attrs = {"language" :"en", "background-color": "rgb(0, 0, 255)"};
 387       testTextAttrs(ID, 13, attrs, 13, 26, defAttrs);
 388
 389       attrs = {"language": "en" };
 390       testTextAttrs(ID, 26, attrs, 26, 27, defAttrs);
 391
 392       attrs = {"language": "de"};
 393       testTextAttrs(ID, 27, attrs, 27, 42, defAttrs);
 394
 395       attrs = {"language": "en"};
 396       testTextAttrs(ID, 42, attrs, 42, 43, defAttrs);
 397
 398       attrs = {};
 399       testTextAttrs(ID, 43, attrs, 43, 50, defAttrs);
 400
 401       attrs = {"color": "rgb(255, 0, 255)"};
 402       testTextAttrs(ID, 50, attrs, 50, 57, defAttrs);
 403
 404       attrs = {"font-weight": "401", "color": "rgb(255, 0, 255)" };
 405       testTextAttrs(ID, 57, attrs, 57, 61, defAttrs);
 406
 407       attrs = {"color": "rgb(255, 0, 255)"};
 408       testTextAttrs(ID, 61, attrs, 61, 68, defAttrs);
 409
 410       //////////////////////////////////////////////////////////////////////////
 411       // test spelling text attributes
 412       testSpellTextAttrs(); // Will call SimpleTest.finish();
 413     }
 414
 415     SimpleTest.waitForExplicitFinish();
 416     addLoadEvent(doTest);
 417   </script>
 418 </head>
 419 <body>
 420
 421   <a target="_blank"
 422      href="https://bugzilla.mozilla.org/show_bug.cgi?id=345759"
 423      title="Implement text attributes">
 424     Mozilla Bug 345759
 425   </a>
 426   <p id="display"></p>
 427   <div id="content" style="display: none"></div>
 428   <pre id="test">
 429   </pre>
 430
 431   <p id="area1">Normal <b>Bold</b> Normal</p>
 432   <p id="area2">Normal <b>Bold <i>Italic </i>Bold</b> Normal</p>
 433   <p id="area3">
 434     <span style="color: green">
 435       Green
 436       <span style="color: red">but children are red</span>
 437     </span><span style="color: green">
 438       Another green section.
 439     </span>
 440   </p>
 441   <p id="area4">
 442     <span style="color: green">
 443       Green
 444     </span><span style="color: green">
 445       Green too
 446       <span style="color: red">with red children</span>
 447       Green again
 448     </span>
 449   </p>
 450   <p id="area5">
 451     <span style="color: green">Green</span>
 452     <img src="moz.png" alt="image"/>
 453     <span style="color: red">Red</span>Normal
 454   </p>
 455   <p id="area6">
 456     This <sup>sentence</sup> has the word
 457     <span style="vertical-align:super;">sentence</span> in
 458     <sub>superscript</sub> and
 459     <span style="vertical-align:sub;">subscript</span>
 460   </p>
 461
 462   <p lang="en" id="area7">
 463     <span lang="ru">Привет</span>
 464     <span style="background-color: blue">Blue BG color</span>
 465     <span lang="de">Ich bin/Du bist</span>
 466     <span lang="en">
 467       Normal
 468       <span style="color: magenta">Magenta<b>Bold</b>Magenta</span>
 469     </span>
 470   </p>
 471
 472   <input id="area8" value="valid text inalid tixt"/>
 473
 474   <p id="output"/>
 475 </body>
 476 </html>