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

     1 <!DOCTYPE html>

     2 <html>

     4 <head>

     5   <title>Style visibility tree update test</title>

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

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

    10   <script type="application/javascript"

    11           src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.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">

    22     ////////////////////////////////////////////////////////////////////////////

    23     // Invokers

    25     /**

    26      * Hide parent while child stays visible.

    27      */

    28     function test1(aContainerID, aParentID, aChildID)

    29     {

    30       this.eventSeq = [

    31         new invokerChecker(EVENT_HIDE, getNode(aParentID)),

    32         new invokerChecker(EVENT_SHOW, getNode(aChildID)),

    33         new invokerChecker(EVENT_REORDER, getNode(aContainerID))

    34       ];

    36       this.invoke = function invoke()

    37       {

    38         var tree =

    39           { SECTION: [

    40             { SECTION: [

    41               { SECTION: [

    42                 { TEXT_LEAF: [] }

    43               ] }

    44             ] }

    45           ] };

    46         testAccessibleTree(aContainerID, tree);

    48         getNode(aParentID).style.visibility = "hidden";

    49       }

    51       this.finalCheck = function finalCheck()

    52       {

    53         var tree =

    54           { SECTION: [

    55             { SECTION: [

    56               { TEXT_LEAF: [] }

    57             ] }

    58           ] };

    59         testAccessibleTree(aContainerID, tree);

    60       }

    62       this.getID = function getID()

    63       {

    64         return "hide parent while child stays visible";

    65       }

    66     }

    68     /**

    69      * Hide grand parent while its children stay visible.

    70      */

    71     function test2(aContainerID, aGrandParentID, aChildID, aChild2ID)

    72     {

    73       this.eventSeq = [

    74         new invokerChecker(EVENT_HIDE, getNode(aGrandParentID)),

    75         new invokerChecker(EVENT_SHOW, getNode(aChildID)),

    76         new invokerChecker(EVENT_SHOW, getNode(aChild2ID)),

    77         new invokerChecker(EVENT_REORDER, getNode(aContainerID))

    78       ];

    80       this.invoke = function invoke()

    81       {

    82         var tree =

    83           { SECTION: [ // container

    84             { SECTION: [ // grand parent

    85               { SECTION: [

    86                 { SECTION: [ // child

    87                   { TEXT_LEAF: [] }

    88                 ] },

    89                 { SECTION: [ // child2

    90                   { TEXT_LEAF: [] }

    91                 ] }

    92               ] }

    93             ] }

    94           ] };

    95         testAccessibleTree(aContainerID, tree);

    97         getNode(aGrandParentID).style.visibility = "hidden";

    98       }

   100       this.finalCheck = function finalCheck()

   101       {

   102         var tree =

   103           { SECTION: [ // container

   104             { SECTION: [ // child

   105               { TEXT_LEAF: [] }

   106             ] },

   107             { SECTION: [ // child2

   108               { TEXT_LEAF: [] }

   109             ] }

   110           ] };

   111         testAccessibleTree(aContainerID, tree);

   112       }

   114       this.getID = function getID()

   115       {

   116         return "hide grand parent while its children stay visible";

   117       }

   118     }

   120     /**

   121      * Change container style, hide parents while their children stay visible.

   122      */

   123     function test3(aContainerID, aParentID, aParent2ID, aChildID, aChild2ID)

   124     {

   125       this.eventSeq = [

   126         new invokerChecker(EVENT_HIDE, getNode(aParentID)),

   127         new invokerChecker(EVENT_HIDE, getNode(aParent2ID)),

   128         new invokerChecker(EVENT_SHOW, getNode(aChildID)),

   129         new invokerChecker(EVENT_SHOW, getNode(aChild2ID)),

   130         new invokerChecker(EVENT_REORDER, getNode(aContainerID))

   131       ];

   133       this.invoke = function invoke()

   134       {

   135         var tree =

   136           { SECTION: [ // container

   137             { SECTION: [ // parent

   138               { SECTION: [ // child

   139                 { TEXT_LEAF: [] }

   140               ] }

   141             ] },

   142             { SECTION: [ // parent2

   143               { SECTION: [ // child2

   144                 { TEXT_LEAF: [] }

   145               ] },

   146             ] }

   147           ] };

   148         testAccessibleTree(aContainerID, tree);

   150         getNode(aContainerID).style.color = "red";

   151         getNode(aParentID).style.visibility = "hidden";

   152         getNode(aParent2ID).style.visibility = "hidden";

   153       }

   155       this.finalCheck = function finalCheck()

   156       {

   157         var tree =

   158           { SECTION: [ // container

   159             { SECTION: [ // child

   160               { TEXT_LEAF: [] }

   161             ] },

   162             { SECTION: [ // child2

   163               { TEXT_LEAF: [] }

   164             ] }

   165           ] };

   166         testAccessibleTree(aContainerID, tree);

   167       }

   169       this.getID = function getID()

   170       {

   171         return "change container style, hide parents while their children stay visible";

   172       }

   173     }

   175     /**

   176      * Change container style and make visible child inside the table.

   177      */

   178     function test4(aContainerID, aChildID)

   179     {

   180       this.eventSeq = [

   181         new invokerChecker(EVENT_SHOW, getNode(aChildID)),

   182         new invokerChecker(EVENT_REORDER, getNode(aChildID).parentNode)

   183       ];

   185       this.invoke = function invoke()

   186       {

   187         var tree =

   188           { SECTION: [

   189             { TABLE: [

   190               { ROW: [

   191                 { CELL: [ ] }

   192               ] }

   193             ] }

   194           ] };

   195         testAccessibleTree(aContainerID, tree);

   197         getNode(aContainerID).style.color = "red";

   198         getNode(aChildID).style.visibility = "visible";

   199       }

   201       this.finalCheck = function finalCheck()

   202       {

   203         var tree =

   204           { SECTION: [

   205             { TABLE: [

   206               { ROW: [

   207                 { CELL: [

   208                   { SECTION: [

   209                     { TEXT_LEAF: [] }

   210                   ] }

   211               ] }

   212             ] }

   213           ] }

   214         ] };

   215         testAccessibleTree(aContainerID, tree);

   216       }

   218       this.getID = function getID()

   219       {

   220         return "change container style, make visible child insdie the table";

   221       }

   222     }

   224     /**

   225      * Hide subcontainer while child inside the table stays visible.

   226      */

   227     function test5(aContainerID, aSubContainerID, aChildID)

   228     {

   229       this.eventSeq = [

   230         new invokerChecker(EVENT_HIDE, getNode(aSubContainerID)),

   231         new invokerChecker(EVENT_SHOW, getNode(aChildID)),

   232         new invokerChecker(EVENT_REORDER, getNode(aContainerID))

   233       ];

   235       this.invoke = function invoke()

   236       {

   237         var tree =

   238           { SECTION: [ // container

   239             { SECTION: [ // subcontainer

   240               { TABLE: [

   241                 { ROW: [

   242                   { CELL: [

   243                     { SECTION: [ // child

   244                       { TEXT_LEAF: [] }

   245                     ] }

   246                   ] }

   247                 ] }

   248               ] }

   249             ] }

   250           ] };

   251         testAccessibleTree(aContainerID, tree);

   253         getNode(aSubContainerID).style.visibility = "hidden";

   254       }

   256       this.finalCheck = function finalCheck()

   257       {

   258         var tree =

   259           { SECTION: [ // container

   260             { SECTION: [ // child

   261               { TEXT_LEAF: [] }

   262             ] }

   263           ] };

   264         testAccessibleTree(aContainerID, tree);

   265       }

   267       this.getID = function getID()

   268       {

   269         return "hide subcontainer while child inside the table stays visible";

   270       }

   271     }

   273     /**

   274      * Hide subcontainer while its child and child inside the nested table stays visible.

   275      */

   276     function test6(aContainerID, aSubContainerID, aChildID, aChild2ID)

   277     {

   278       this.eventSeq = [

   279         new invokerChecker(EVENT_HIDE, getNode(aSubContainerID)),

   280         new invokerChecker(EVENT_SHOW, getNode(aChildID)),

   281         new invokerChecker(EVENT_SHOW, getNode(aChild2ID)),

   282         new invokerChecker(EVENT_REORDER, getNode(aContainerID))

   283       ];

   285       this.invoke = function invoke()

   286       {

   287         var tree =

   288           { SECTION: [ // container

   289             { SECTION: [ // subcontainer

   290               { TABLE: [

   291                 { ROW: [

   292                   { CELL: [

   293                     { TABLE: [ // nested table

   294                       { ROW: [

   295                         { CELL: [

   296                           { SECTION: [ // child

   297                             { TEXT_LEAF: [] } ]} ]} ]} ]} ]} ]} ]},

   298               { SECTION: [ // child2

   299                 { TEXT_LEAF: [] } ]} ]} ]};

   301         testAccessibleTree(aContainerID, tree);

   303         // invoke

   304         getNode(aSubContainerID).style.visibility = "hidden";

   305       }

   307       this.finalCheck = function finalCheck()

   308       {

   309         var tree =

   310           { SECTION: [ // container

   311             { SECTION: [ // child

   312               { TEXT_LEAF: [] } ]},

   313             { SECTION: [ // child2

   314               { TEXT_LEAF: [] } ]} ]};

   316         testAccessibleTree(aContainerID, tree);

   317       }

   319       this.getID = function getID()

   320       {

   321         return "hide subcontainer while its child and child inside the nested table stays visible";

   322       }

   323     }

   325     ////////////////////////////////////////////////////////////////////////////

   326     // Test

   328     //gA11yEventDumpID = "eventdump"; // debug stuff

   329     //gA11yEventDumpToConsole = true;

   331     var gQueue = null;

   333     function doTest()

   334     {

   335       gQueue = new eventQueue();

   337       gQueue.push(new test1("t1_container", "t1_parent", "t1_child"));

   338       gQueue.push(new test2("t2_container", "t2_grandparent", "t2_child", "t2_child2"));

   339       gQueue.push(new test3("t3_container", "t3_parent", "t3_parent2", "t3_child", "t3_child2"));

   340       gQueue.push(new test4("t4_container", "t4_child"));

   341       gQueue.push(new test5("t5_container", "t5_subcontainer", "t5_child"));

   342       gQueue.push(new test6("t6_container", "t6_subcontainer", "t6_child", "t6_child2"));

   344       gQueue.invoke(); // SimpleTest.finish() will be called in the end

   345     }

   347     SimpleTest.waitForExplicitFinish();

   348     addA11yLoadEvent(doTest);

   349   </script>

   350 </head>

   351 <body>

   353   <a target="_blank"

   354      title="Develop a way to handle visibility style"

   355      href="https://bugzilla.mozilla.org/show_bug.cgi?id=606125">

   356     Mozilla Bug 606125

   357   </a>

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

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

   361   <pre id="test">

   362   </pre>

   364   <!-- hide parent while child stays visible -->

   365   <div id="t1_container">

   366     <div id="t1_parent">

   367       <div id="t1_child" style="visibility: visible">text</div>

   368     </div>

   369   </div>

   371   <!-- hide grandparent while its children stay visible -->

   372   <div id="t2_container">

   373     <div id="t2_grandparent">

   374       <div>

   375         <div id="t2_child" style="visibility: visible">text</div>

   376         <div id="t2_child2" style="visibility: visible">text</div>

   377       </div>

   378     </div>

   379   </div>

   381   <!-- change container style, hide parents while their children stay visible -->

   382   <div id="t3_container">

   383     <div id="t3_parent">

   384       <div id="t3_child" style="visibility: visible">text</div>

   385     </div>

   386     <div id="t3_parent2">

   387       <div id="t3_child2" style="visibility: visible">text</div>

   388     </div>

   389   </div>

   391   <!-- change container style, show child inside the table -->

   392   <div id="t4_container">

   393     <table>

   394       <tr>

   395         <td>

   396           <div id="t4_child" style="visibility: hidden;">text</div>

   397         </td>

   398       </tr>

   399     </table>

   400   </div>

   402   <!-- hide subcontainer while child inside the table stays visible -->

   403   <div id="t5_container">

   404     <div id="t5_subcontainer">

   405       <table>

   406         <tr>

   407           <td>

   408             <div id="t5_child" style="visibility: visible;">text</div>

   409           </td>

   410         </tr>

   411       </table>

   412     </div>

   413   </div>

   415   <!-- hide subcontainer while its child and child inside the nested table stays visible -->

   416   <div id="t6_container">

   417     <div id="t6_subcontainer">

   418       <table>

   419         <tr>

   420           <td>

   421             <table>

   422               <tr>

   423                 <td>

   424                   <div id="t6_child" style="visibility: visible;">text</div>

   425                 </td>

   426               </tr>

   427             </table>

   428           </td>

   429         </tr>

   430       </table>

   431       <div id="t6_child2" style="visibility: visible">text</div>

   432     </div>

   433   </div>

   435   <div id="eventdump"></div>

   436 </body>

   437 </html>

The Tor Browser / file revision

accessible/tests/mochitest/treeupdate/test_visibility.html@925c144e1f1f

accessible/tests/mochitest/treeupdate/test_visibility.html