tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

test_imagemap.html (12168B)

      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" />
      7 
      8  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
      9  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
     10 
     11  <script type="application/javascript"
     12          src="../common.js"></script>
     13  <script type="application/javascript"
     14          src="../role.js"></script>
     15  <script type="application/javascript"
     16          src="../events.js"></script>
     17 
     18  <script type="application/javascript">
     19    function insertArea(aImageMapID, aMapID) {
     20      this.imageMap = getAccessible(aImageMapID);
     21      this.mapNode = getNode(aMapID);
     22 
     23      function getInsertedArea(aThisObj) {
     24        return aThisObj.imageMap.firstChild;
     25      }
     26 
     27      this.eventSeq = [
     28        new invokerChecker(EVENT_SHOW, getInsertedArea, this),
     29        new invokerChecker(EVENT_REORDER, this.imageMap),
     30      ];
     31 
     32      this.invoke = function insertArea_invoke() {
     33        var areaElm = document.createElement("area");
     34        areaElm.setAttribute("href",
     35                             // eslint-disable-next-line @microsoft/sdl/no-insecure-url
     36                             "http://www.bbc.co.uk/radio4/atoz/index.shtml#a");
     37        areaElm.setAttribute("coords", "0,0,13,14");
     38        areaElm.setAttribute("alt", "a");
     39        areaElm.setAttribute("shape", "rect");
     40 
     41        this.mapNode.insertBefore(areaElm, this.mapNode.firstChild);
     42      };
     43 
     44      this.finalCheck = function insertArea_finalCheck() {
     45        var accTree =
     46          { IMAGE_MAP: [
     47            {
     48              role: ROLE_LINK,
     49              name: "a",
     50              children: [ ],
     51            },
     52            {
     53              role: ROLE_LINK,
     54              name: "b",
     55              children: [ ],
     56            },
     57          ] };
     58        testAccessibleTree(this.imageMap, accTree);
     59      };
     60 
     61      this.getID = function insertArea_getID() {
     62        return "insert area element";
     63      };
     64    }
     65 
     66    function appendArea(aImageMapID, aMapID) {
     67      this.imageMap = getAccessible(aImageMapID);
     68      this.mapNode = getNode(aMapID);
     69 
     70      function getAppendedArea(aThisObj) {
     71        return aThisObj.imageMap.lastChild;
     72      }
     73 
     74      this.eventSeq = [
     75        new invokerChecker(EVENT_SHOW, getAppendedArea, this),
     76        new invokerChecker(EVENT_REORDER, this.imageMap),
     77      ];
     78 
     79      this.invoke = function appendArea_invoke() {
     80        var areaElm = document.createElement("area");
     81        areaElm.setAttribute("href",
     82                             // eslint-disable-next-line @microsoft/sdl/no-insecure-url
     83                             "http://www.bbc.co.uk/radio4/atoz/index.shtml#c");
     84        areaElm.setAttribute("coords", "34,0,47,14");
     85        areaElm.setAttribute("alt", "c");
     86        areaElm.setAttribute("shape", "rect");
     87 
     88        this.mapNode.appendChild(areaElm);
     89      };
     90 
     91      this.finalCheck = function appendArea_finalCheck() {
     92        var accTree =
     93          { IMAGE_MAP: [
     94            {
     95              role: ROLE_LINK,
     96              name: "a",
     97              children: [ ],
     98            },
     99            {
    100              role: ROLE_LINK,
    101              name: "b",
    102              children: [ ],
    103            },
    104            {
    105              role: ROLE_LINK,
    106              name: "c",
    107              children: [ ],
    108            },
    109          ] };
    110        testAccessibleTree(this.imageMap, accTree);
    111      };
    112 
    113      this.getID = function appendArea_getID() {
    114        return "append area element";
    115      };
    116    }
    117 
    118    function removeArea(aImageMapID, aMapID) {
    119      this.imageMap = getAccessible(aImageMapID);
    120      this.area = null;
    121      this.mapNode = getNode(aMapID);
    122 
    123      function getRemovedArea(aThisObj) {
    124        return aThisObj.area;
    125      }
    126 
    127      this.eventSeq = [
    128        new invokerChecker(EVENT_HIDE, getRemovedArea, this),
    129        new invokerChecker(EVENT_REORDER, this.imageMap),
    130      ];
    131 
    132      this.invoke = function removeArea_invoke() {
    133        this.area = this.imageMap.firstChild;
    134        this.mapNode.removeChild(this.mapNode.firstElementChild);
    135      };
    136 
    137      this.finalCheck = function removeArea_finalCheck() {
    138        var accTree =
    139          { IMAGE_MAP: [
    140            {
    141              role: ROLE_LINK,
    142              name: "b",
    143              children: [ ],
    144            },
    145            {
    146              role: ROLE_LINK,
    147              name: "c",
    148              children: [ ],
    149            },
    150          ] };
    151        testAccessibleTree(this.imageMap, accTree);
    152      };
    153 
    154      this.getID = function removeArea_getID() {
    155        return "remove area element";
    156      };
    157    }
    158 
    159    function removeNameOnMap(aImageMapContainerID, aImageMapID, aMapID) {
    160      this.container = getAccessible(aImageMapContainerID);
    161      this.containerNode = this.container.DOMNode;
    162      this.imageMap = getAccessible(aImageMapID);
    163      this.imgNode = this.imageMap.DOMNode;
    164      this.mapNode = getNode(aMapID);
    165 
    166      this.eventSeq = [
    167        new invokerChecker(EVENT_HIDE, this.imageMap),
    168        new invokerChecker(EVENT_SHOW, this.imgNode),
    169        new invokerChecker(EVENT_REORDER, this.container),
    170      ];
    171 
    172      this.invoke = function removeNameOnMap_invoke() {
    173        this.mapNode.removeAttribute("name");
    174      };
    175 
    176      this.finalCheck = function removeNameOnMap_finalCheck() {
    177        var accTree =
    178          { SECTION: [
    179            { GRAPHIC: [ ] },
    180          ] };
    181        testAccessibleTree(this.container, accTree);
    182      };
    183 
    184      this.getID = function removeNameOnMap_getID() {
    185        return "remove @name on map element";
    186      };
    187    }
    188 
    189    function restoreNameOnMap(aImageMapContainerID, aImageMapID, aMapID) {
    190      this.container = getAccessible(aImageMapContainerID);
    191      this.containerNode = this.container.DOMNode;
    192      this.imageMap = null;
    193      this.imgNode = getNode(aImageMapID);
    194      this.mapNode = getNode(aMapID);
    195 
    196      function getImageMap(aThisObj) {
    197        return aThisObj.imageMap;
    198      }
    199 
    200      this.eventSeq = [
    201        new invokerChecker(EVENT_HIDE, getImageMap, this),
    202        new invokerChecker(EVENT_SHOW, this.imgNode),
    203        new invokerChecker(EVENT_REORDER, this.container),
    204      ];
    205 
    206      this.invoke = function restoreNameOnMap_invoke() {
    207        this.imageMap = getAccessible(aImageMapID);
    208        this.mapNode.setAttribute("name", "atoz_map");
    209 
    210        // XXXhack: force repainting of the image (see bug 745788 for details).
    211        waveOverImageMap(aImageMapID);
    212      };
    213 
    214      this.finalCheck = function removeNameOnMap_finalCheck() {
    215        var accTree =
    216          { SECTION: [
    217            { IMAGE_MAP: [
    218              { LINK: [ ] },
    219              { LINK: [ ] },
    220            ] },
    221          ] };
    222        testAccessibleTree(this.container, accTree);
    223      };
    224 
    225      this.getID = function removeNameOnMap_getID() {
    226        return "restore @name on map element";
    227      };
    228    }
    229 
    230    function removeMap(aImageMapContainerID, aImageMapID, aMapID) {
    231      this.container = getAccessible(aImageMapContainerID);
    232      this.containerNode = this.container.DOMNode;
    233      this.imageMap = null;
    234      this.imgNode = getNode(aImageMapID);
    235      this.mapNode = getNode(aMapID);
    236 
    237      function getImageMap(aThisObj) {
    238        return aThisObj.imageMap;
    239      }
    240 
    241      this.eventSeq = [
    242        new invokerChecker(EVENT_HIDE, getImageMap, this),
    243        new invokerChecker(EVENT_SHOW, this.imgNode),
    244        new invokerChecker(EVENT_REORDER, this.container),
    245      ];
    246 
    247      this.invoke = function removeMap_invoke() {
    248        this.imageMap = getAccessible(aImageMapID);
    249        this.mapNode.remove();
    250      };
    251 
    252      this.finalCheck = function removeMap_finalCheck() {
    253        var accTree =
    254          { SECTION: [
    255            { GRAPHIC: [ ] },
    256          ] };
    257        testAccessibleTree(this.container, accTree);
    258      };
    259 
    260      this.getID = function removeMap_getID() {
    261        return "remove map element";
    262      };
    263    }
    264 
    265    function insertMap(aImageMapContainerID, aImageID) {
    266      this.container = getAccessible(aImageMapContainerID);
    267      this.containerNode = this.container.DOMNode;
    268      this.image = null;
    269      this.imgMapNode = getNode(aImageID);
    270 
    271      function getImage(aThisObj) {
    272        return aThisObj.image;
    273      }
    274 
    275      this.eventSeq = [
    276        new invokerChecker(EVENT_HIDE, getImage, this),
    277        new invokerChecker(EVENT_SHOW, this.imgMapNode),
    278        new invokerChecker(EVENT_REORDER, this.container),
    279      ];
    280 
    281      this.invoke = function insertMap_invoke() {
    282        this.image = getAccessible(aImageID);
    283 
    284        var map = document.createElement("map");
    285        map.setAttribute("name", "atoz_map");
    286        map.setAttribute("id", "map");
    287 
    288        var area = document.createElement("area");
    289        area.setAttribute("href",
    290                          // eslint-disable-next-line @microsoft/sdl/no-insecure-url
    291                          "http://www.bbc.co.uk/radio4/atoz/index.shtml#b");
    292        area.setAttribute("coords", "17,0,30,14");
    293        area.setAttribute("alt", "b");
    294        area.setAttribute("shape", "rect");
    295 
    296        map.appendChild(area);
    297 
    298        this.containerNode.appendChild(map);
    299      };
    300 
    301      this.finalCheck = function insertMap_finalCheck() {
    302        var accTree =
    303          { SECTION: [
    304            { IMAGE_MAP: [
    305              { LINK: [ ] },
    306            ] },
    307          ] };
    308        testAccessibleTree(this.container, accTree);
    309      };
    310 
    311      this.getID = function insertMap_getID() {
    312        return "insert map element";
    313      };
    314    }
    315 
    316    function hideImageMap(aContainerID, aImageID) {
    317      this.container = getAccessible(aContainerID);
    318      this.imageMap = null;
    319      this.imageMapNode = getNode(aImageID);
    320 
    321      function getImageMap(aThisObj) {
    322        return aThisObj.imageMap;
    323      }
    324 
    325      this.eventSeq = [
    326        new invokerChecker(EVENT_HIDE, getImageMap, this),
    327        new invokerChecker(EVENT_REORDER, aContainerID),
    328      ];
    329 
    330      this.invoke = function hideImageMap_invoke() {
    331        this.imageMap = getAccessible(this.imageMapNode);
    332        this.imageMapNode.style.display = "none";
    333      };
    334 
    335      this.finalCheck = function hideImageMap_finalCheck() {
    336        var accTree =
    337          { SECTION: [ ] };
    338        testAccessibleTree(this.container, accTree);
    339      };
    340 
    341      this.getID = function hideImageMap_getID() {
    342        return "display:none image";
    343      };
    344    }
    345 
    346    // gA11yEventDumpToConsole = true; // debug stuff
    347    function doPreTest() {
    348      waitForImageMap("imgmap", doTest);
    349    }
    350 
    351    var gQueue = null;
    352    function doTest() {
    353      gQueue = new eventQueue();
    354 
    355      gQueue.push(new insertArea("imgmap", "map"));
    356      gQueue.push(new appendArea("imgmap", "map"));
    357      gQueue.push(new removeArea("imgmap", "map"));
    358      gQueue.push(new removeNameOnMap("container", "imgmap", "map"));
    359      gQueue.push(new restoreNameOnMap("container", "imgmap", "map"));
    360      gQueue.push(new removeMap("container", "imgmap", "map"));
    361      gQueue.push(new insertMap("container", "imgmap"));
    362      gQueue.push(new hideImageMap("container", "imgmap"));
    363 
    364      // enableLogging("tree"); // debug stuff
    365      // gQueue.onFinish = function() { disableLogging("tree"); }
    366 
    367      gQueue.invoke(); // Will call SimpleTest.finish();
    368    }
    369 
    370    SimpleTest.waitForExplicitFinish();
    371    addA11yLoadEvent(doPreTest);
    372  </script>
    373 
    374 </head>
    375 <body>
    376 
    377  <a target="_blank"
    378     title="Image map accessible tree is not updated when image map is changed"
    379     href="https://bugzilla.mozilla.org/show_bug.cgi?id=732389">
    380    Mozilla Bug 732389
    381  </a>
    382  <p id="display"></p>
    383  <div id="content" style="display: none"></div>
    384  <pre id="test">
    385  </pre>
    386 
    387  <map name="atoz_map" id="map">
    388    <area href="http://www.bbc.co.uk/radio4/atoz/index.shtml#b"
    389          coords="17,0,30,14" alt="b" shape="rect">
    390  </map>
    391 
    392  <div id="container">
    393    <img id="imgmap" width="447" height="15"
    394         usemap="#atoz_map"
    395         src="../letters.gif"><!--
    396    Important: no whitespace between the <img> and the </div>, so we
    397    don't end up with textframes there, because those would be reflected
    398    in our accessible tree in some cases.
    399    --></div>
    400 
    401 </body>
    402 </html>