The Tor Browser: accessible/tests/mochitest/treeupdate/test

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

     1 <!DOCTYPE html>

     2 <html>

     3 <head>

     4   <title>HTML img map accessible tree update tests</title>

     5   <link rel="stylesheet" type="text/css"

     6         href="chrome://mochikit/content/tests/SimpleTest/test.css" />

     8   <script type="application/javascript"

     9           src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

    10   <script type="application/javascript"

    11           src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>

    13   <script type="application/javascript"

    14           src="../common.js"></script>

    15   <script type="application/javascript"

    16           src="../role.js"></script>

    17   <script type="application/javascript"

    18           src="../events.js"></script>

    20   <script type="application/javascript">

    21     function insertArea(aImageMapID, aMapID)

    22     {

    23       this.imageMap = getAccessible(aImageMapID);

    24       this.mapNode = getNode(aMapID);

    26       function getInsertedArea(aThisObj)

    27       {

    28         return aThisObj.imageMap.firstChild;

    29       }

    31       this.eventSeq = [

    32         new invokerChecker(EVENT_SHOW, getInsertedArea, this),

    33         new invokerChecker(EVENT_REORDER, this.imageMap)

    34       ];

    36       this.invoke = function insertArea_invoke()

    37       {

    38         var areaElm = document.createElement("area");

    39         areaElm.setAttribute("href",

    40                              "http://www.bbc.co.uk/radio4/atoz/index.shtml#a");

    41         areaElm.setAttribute("coords", "0,0,13,14");

    42         areaElm.setAttribute("alt", "a");

    43         areaElm.setAttribute("shape", "rect");

    45         this.mapNode.insertBefore(areaElm, this.mapNode.firstChild);

    46       }

    48       this.finalCheck = function insertArea_finalCheck()

    49       {

    50         var accTree =

    51           { IMAGE_MAP: [

    52             {

    53               role: ROLE_LINK,

    54               name: "a",

    55               children: [ ]

    56             },

    57             {

    58               role: ROLE_LINK,

    59               name: "b",

    60               children: [ ]

    61             },

    62           ] };

    63         testAccessibleTree(this.imageMap, accTree);

    64       }

    66       this.getID = function insertArea_getID()

    67       {

    68         return "insert area element";

    69       }

    70     }

    72     function appendArea(aImageMapID, aMapID)

    73     {

    74       this.imageMap = getAccessible(aImageMapID);

    75       this.mapNode = getNode(aMapID);

    77       function getAppendedArea(aThisObj)

    78       {

    79         return aThisObj.imageMap.lastChild;

    80       }

    82       this.eventSeq = [

    83         new invokerChecker(EVENT_SHOW, getAppendedArea, this),

    84         new invokerChecker(EVENT_REORDER, this.imageMap)

    85       ];

    87       this.invoke = function appendArea_invoke()

    88       {

    89         var areaElm = document.createElement("area");

    90         areaElm.setAttribute("href",

    91                              "http://www.bbc.co.uk/radio4/atoz/index.shtml#c");

    92         areaElm.setAttribute("coords", "34,0,47,14");

    93         areaElm.setAttribute("alt", "c");

    94         areaElm.setAttribute("shape", "rect");

    96         this.mapNode.appendChild(areaElm);

    97       }

    99       this.finalCheck = function appendArea_finalCheck()

   100       {

   101         var accTree =

   102           { IMAGE_MAP: [

   103             {

   104               role: ROLE_LINK,

   105               name: "a",

   106               children: [ ]

   107             },

   108             {

   109               role: ROLE_LINK,

   110               name: "b",

   111               children: [ ]

   112             },

   113             {

   114               role: ROLE_LINK,

   115               name: "c",

   116               children: [ ]

   117             }

   118           ] };

   119         testAccessibleTree(this.imageMap, accTree);

   120       }

   122       this.getID = function appendArea_getID()

   123       {

   124         return "append area element";

   125       }

   126     }

   128     function removeArea(aImageMapID, aMapID)

   129     {

   130       this.imageMap = getAccessible(aImageMapID);

   131       this.area = null;

   132       this.mapNode = getNode(aMapID);

   134       function getRemovedArea(aThisObj)

   135       {

   136         return aThisObj.area;

   137       }

   139       this.eventSeq = [

   140         new invokerChecker(EVENT_HIDE, getRemovedArea, this),

   141         new invokerChecker(EVENT_REORDER, this.imageMap)

   142       ];

   144       this.invoke = function removeArea_invoke()

   145       {

   146         this.area = this.imageMap.firstChild;

   147         this.mapNode.removeChild(this.mapNode.firstElementChild);

   148       }

   150       this.finalCheck = function removeArea_finalCheck()

   151       {

   152         var accTree =

   153           { IMAGE_MAP: [

   154             {

   155               role: ROLE_LINK,

   156               name: "b",

   157               children: [ ]

   158             },

   159             {

   160               role: ROLE_LINK,

   161               name: "c",

   162               children: [ ]

   163             }

   164           ] };

   165         testAccessibleTree(this.imageMap, accTree);

   166       }

   168       this.getID = function removeArea_getID()

   169       {

   170         return "remove area element";

   171       }

   172     }

   174     function removeNameOnMap(aImageMapContainerID, aImageMapID, aMapID)

   175     {

   176       this.container = getAccessible(aImageMapContainerID);

   177       this.containerNode = this.container.DOMNode;

   178       this.imageMap = getAccessible(aImageMapID);

   179       this.imgNode = this.imageMap.DOMNode;

   180       this.mapNode = getNode(aMapID);

   182       this.eventSeq = [

   183         new invokerChecker(EVENT_HIDE, this.imageMap),

   184         new invokerChecker(EVENT_SHOW, this.imgNode),

   185         new invokerChecker(EVENT_REORDER, this.container)

   186       ];

   188       this.invoke = function removeNameOnMap_invoke()

   189       {

   190         this.mapNode.removeAttribute("name");

   191       }

   193       this.finalCheck = function removeNameOnMap_finalCheck()

   194       {

   195         var accTree =

   196           { SECTION: [

   197             { GRAPHIC: [ ] }

   198           ] };

   199         testAccessibleTree(this.container, accTree);

   200       }

   202       this.getID = function removeNameOnMap_getID()

   203       {

   204         return "remove @name on map element";

   205       }

   206     }

   208     function restoreNameOnMap(aImageMapContainerID, aImageMapID, aMapID)

   209     {

   210       this.container = getAccessible(aImageMapContainerID);

   211       this.containerNode = this.container.DOMNode;

   212       this.imageMap = null;

   213       this.imgNode = getNode(aImageMapID);

   214       this.mapNode = getNode(aMapID);

   216       function getImageMap(aThisObj)

   217       {

   218         return aThisObj.imageMap;

   219       }

   221       this.eventSeq = [

   222         new invokerChecker(EVENT_HIDE, getImageMap, this),

   223         new invokerChecker(EVENT_SHOW, this.imgNode),

   224         new invokerChecker(EVENT_REORDER, this.container)

   225       ];

   227       this.invoke = function restoreNameOnMap_invoke()

   228       {

   229         this.imageMap = getAccessible(aImageMapID);

   230         this.mapNode.setAttribute("name", "atoz_map");

   232         // XXXhack: force repainting of the image (see bug 745788 for details).

   233         waveOverImageMap(aImageMapID);

   234       }

   236       this.finalCheck = function removeNameOnMap_finalCheck()

   237       {

   238         var accTree =

   239           { SECTION: [

   240             { IMAGE_MAP: [

   241               { LINK: [ ] },

   242               { LINK: [ ] }

   243             ] }

   244           ] };

   245         testAccessibleTree(this.container, accTree);

   246       }

   248       this.getID = function removeNameOnMap_getID()

   249       {

   250         return "restore @name on map element";

   251       }

   252     }

   254     function removeMap(aImageMapContainerID, aImageMapID, aMapID)

   255     {

   256       this.container = getAccessible(aImageMapContainerID);

   257       this.containerNode = this.container.DOMNode;

   258       this.imageMap = null;

   259       this.imgNode = getNode(aImageMapID);

   260       this.mapNode = getNode(aMapID);

   262       function getImageMap(aThisObj)

   263       {

   264         return aThisObj.imageMap;

   265       }

   267       this.eventSeq = [

   268         new invokerChecker(EVENT_HIDE, getImageMap, this),

   269         new invokerChecker(EVENT_SHOW, this.imgNode),

   270         new invokerChecker(EVENT_REORDER, this.container)

   271       ];

   273       this.invoke = function removeMap_invoke()

   274       {

   275         this.imageMap = getAccessible(aImageMapID);

   276         this.mapNode.parentNode.removeChild(this.mapNode);

   277       }

   279       this.finalCheck = function removeMap_finalCheck()

   280       {

   281         var accTree =

   282           { SECTION: [

   283             { GRAPHIC: [ ] }

   284           ] };

   285         testAccessibleTree(this.container, accTree);

   286       }

   288       this.getID = function removeMap_getID()

   289       {

   290         return "remove map element";

   291       }

   292     }

   294     function insertMap(aImageMapContainerID, aImageID)

   295     {

   296       this.container = getAccessible(aImageMapContainerID);

   297       this.containerNode = this.container.DOMNode;

   298       this.image = null;

   299       this.imgMapNode = getNode(aImageID);

   301       function getImage(aThisObj)

   302       {

   303         return aThisObj.image;

   304       }

   306       this.eventSeq = [

   307         new invokerChecker(EVENT_HIDE, getImage, this),

   308         new invokerChecker(EVENT_SHOW, this.imgMapNode),

   309         new invokerChecker(EVENT_REORDER, this.container)

   310       ];

   312       this.invoke = function insertMap_invoke()

   313       {

   314         this.image = getAccessible(aImageID);

   316         var map = document.createElement("map");

   317         map.setAttribute("name", "atoz_map");

   318         map.setAttribute("id", "map");

   320         var area = document.createElement("area")

   321         area.setAttribute("href",

   322                           "http://www.bbc.co.uk/radio4/atoz/index.shtml#b");

   323         area.setAttribute("coords", "17,0,30,14");

   324         area.setAttribute("alt", "b");

   325         area.setAttribute("shape", "rect");

   327         map.appendChild(area);

   329         this.containerNode.appendChild(map);

   330       }

   332       this.finalCheck = function insertMap_finalCheck()

   333       {

   334         var accTree =

   335           { SECTION: [

   336             { IMAGE_MAP: [

   337               { LINK: [ ] }

   338             ] }

   339           ] };

   340         testAccessibleTree(this.container, accTree);

   341       }

   343       this.getID = function insertMap_getID()

   344       {

   345         return "insert map element";

   346       }

   347     }

   349     function hideImageMap(aContainerID, aImageID)

   350     {

   351       this.container = getAccessible(aContainerID);

   352       this.imageMap = null;

   353       this.imageMapNode = getNode(aImageID);

   355       function getImageMap(aThisObj)

   356       {

   357         return aThisObj.imageMap;

   358       }

   360       this.eventSeq = [

   361         new invokerChecker(EVENT_HIDE, getImageMap, this),

   362         new invokerChecker(EVENT_REORDER, aContainerID)

   363       ];

   365       this.invoke = function hideImageMap_invoke()

   366       {

   367         this.imageMap = getAccessible(this.imageMapNode);

   368         this.imageMapNode.style.display = "none";

   369       }

   371       this.finalCheck = function hideImageMap_finalCheck()

   372       {

   373         var accTree =

   374           { SECTION: [ ] };

   375         testAccessibleTree(this.container, accTree);

   376       }

   378       this.getID = function hideImageMap_getID()

   379       {

   380         return "display:none image";

   381       }

   382     }

   384     //gA11yEventDumpToConsole = true; // debug stuff

   385     function doPreTest()

   386     {

   387       waitForImageMap("imgmap", doTest);

   388     }

   390     var gQueue = null;

   391     function doTest()

   392     {

   393       gQueue = new eventQueue();

   395       gQueue.push(new insertArea("imgmap", "map"));

   396       gQueue.push(new appendArea("imgmap", "map"));

   397       gQueue.push(new removeArea("imgmap", "map"));

   398       gQueue.push(new removeNameOnMap("container", "imgmap", "map"));

   399       gQueue.push(new restoreNameOnMap("container", "imgmap", "map"));

   400       gQueue.push(new removeMap("container", "imgmap", "map"));

   401       gQueue.push(new insertMap("container", "imgmap"));

   402       gQueue.push(new hideImageMap("container", "imgmap"));

   404       //enableLogging("tree"); // debug stuff

   405       //gQueue.onFinish = function() { disableLogging("tree"); }

   407       gQueue.invoke(); // Will call SimpleTest.finish();

   408     }

   410     SimpleTest.waitForExplicitFinish();

   411     addA11yLoadEvent(doPreTest);

   412   </script>

   414 </head>

   415 <body>

   417   <a target="_blank"

   418      title="Image map accessible tree is not updated when image map is changed"

   419      href="https://bugzilla.mozilla.org/show_bug.cgi?id=732389">

   420     Mozilla Bug 732389

   421   </a>

   422   <p id="display"></p>

   423   <div id="content" style="display: none"></div>

   424   <pre id="test">

   425   </pre>

   427   <map name="atoz_map" id="map">

   428     <area href="http://www.bbc.co.uk/radio4/atoz/index.shtml#b"

   429           coords="17,0,30,14" alt="b" shape="rect">

   430   </map>

   432   <div id="container">

   433     <img id="imgmap" width="447" height="15"

   434          usemap="#atoz_map"

   435          src="../letters.gif"><!--

   436     Important: no whitespace between the <img> and the </div>, so we

   437     don't end up with textframes there, because those would be reflected

   438     in our accessible tree in some cases.

   439     --></div>

   441 </body>

   442 </html>

The Tor Browser / file revision

accessible/tests/mochitest/treeupdate/test_imagemap.html@b8a032363ba2

accessible/tests/mochitest/treeupdate/test_imagemap.html