| OLD | NEW | 
| (Empty) |  | 
 |    1 <!DOCTYPE html> | 
 |    2 <!--  | 
 |    3 Distributed under both the W3C Test Suite License [1] and the W3C | 
 |    4 3-clause BSD License [2]. To contribute to a W3C Test Suite, see the | 
 |    5 policies and contribution forms [3]. | 
 |    6  | 
 |    7 [1] http://www.w3.org/Consortium/Legal/2008/04-testsuite-license | 
 |    8 [2] http://www.w3.org/Consortium/Legal/2008/03-bsd-license | 
 |    9 [3] http://www.w3.org/2004/10/27-testcases | 
 |   10  --> | 
 |   11 <html> | 
 |   12 <head> | 
 |   13 <title>Shadow DOM Test: A_07_02_02</title> | 
 |   14 <link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> | 
 |   15 <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#focus-n
     avigation"> | 
 |   16 <meta name="assert" content="User Interaction: The navigation order within a sha
     dow tree must be computed as a list of focusable elements in tree order as-rende
     red  with the exception of any elements, distributed its insertion points, and i
     s called shadow DOM navigation order."> | 
 |   17 <script src="../../../../../resources/testharness.js"></script> | 
 |   18 <script src="../../../../../resources/testharnessreport.js"></script> | 
 |   19 <script src="../../testcommon.js"></script> | 
 |   20 <link rel="stylesheet" href="../../../../../resources/testharness.css"> | 
 |   21 </head> | 
 |   22 <body> | 
 |   23 <div id="log"></div> | 
 |   24 <script> | 
 |   25 var A_07_02_02_T01 = async_test('A_07_02_02_T01'); | 
 |   26 var A_07_02_02_T02 = async_test('A_07_02_02_T02'); | 
 |   27  | 
 |   28 A_07_02_02_T01.step(unit(function (ctx) { | 
 |   29  | 
 |   30         var counter = 0; | 
 |   31  | 
 |   32         var expectations = []; | 
 |   33  | 
 |   34         var d = newRenderedHTMLDocument(ctx); | 
 |   35  | 
 |   36         var host = d.createElement('div'); | 
 |   37         d.body.appendChild(host); | 
 |   38  | 
 |   39         var chb1 = d.createElement('input'); | 
 |   40         chb1.setAttribute('type', 'checkbox'); | 
 |   41         chb1.setAttribute('id', 'chb1'); | 
 |   42         chb1.addEventListener('focus', A_07_02_02_T01.step_func(function(event) 
     { | 
 |   43                 assert_true(false, 'Element shouldn\'t be rendered'); | 
 |   44         }), false); | 
 |   45         host.appendChild(chb1); | 
 |   46  | 
 |   47         var chb2 = d.createElement('input'); | 
 |   48         chb2.setAttribute('type', 'checkbox'); | 
 |   49         chb2.setAttribute('id', 'chb2'); | 
 |   50         chb2.setAttribute('class', 'shadow'); | 
 |   51         chb2.addEventListener('focus', A_07_02_02_T01.step_func(function(event) 
     { | 
 |   52                 assert_equals(counter++, 0, 'Point 1: wrong focus navigation ord
     er'); | 
 |   53                 expectations[1] = true; | 
 |   54         }), false); | 
 |   55         expectations[1] = false; | 
 |   56         host.appendChild(chb2); | 
 |   57  | 
 |   58         var chb3 = d.createElement('input'); | 
 |   59         chb3.setAttribute('type', 'checkbox'); | 
 |   60         chb3.setAttribute('id', 'chb3'); | 
 |   61         chb3.setAttribute('class', 'shadow'); | 
 |   62         chb3.addEventListener('focus', A_07_02_02_T01.step_func(function(event) 
     { | 
 |   63                 assert_equals(counter++, 1, 'Point 2: wrong focus navigation ord
     er'); | 
 |   64                 expectations[2] = true; | 
 |   65         }), false); | 
 |   66         expectations[2] = false; | 
 |   67         host.appendChild(chb3); | 
 |   68  | 
 |   69         var s = host.createShadowRoot(); | 
 |   70  | 
 |   71         var div = d.createElement('div'); | 
 |   72         div.innerHTML = '<content select=".shadow"></content>'; | 
 |   73         s.appendChild(div); | 
 |   74  | 
 |   75         var inp1 = d.createElement('input'); | 
 |   76         inp1.setAttribute('type', 'text'); | 
 |   77         inp1.setAttribute('id', 'shInp1'); | 
 |   78         inp1.setAttribute('value', 'Input 1'); | 
 |   79         inp1.addEventListener('focus', A_07_02_02_T01.step_func(function(event) 
     { | 
 |   80                 expectations[3] = false; | 
 |   81         }), false); | 
 |   82         expectations[3] = true; | 
 |   83         s.appendChild(inp1); | 
 |   84  | 
 |   85         var inp2 = d.createElement('input'); | 
 |   86         inp2.setAttribute('type', 'text'); | 
 |   87         inp2.setAttribute('id', 'shInp2'); | 
 |   88         inp2.setAttribute('value', 'Input 2'); | 
 |   89         inp2.addEventListener('focus', A_07_02_02_T01.step_func(function(event) 
     { | 
 |   90                 expectations[4] = false; | 
 |   91         }), false); | 
 |   92         expectations[4] = true; | 
 |   93         s.appendChild(inp2); | 
 |   94  | 
 |   95         var chb4 = d.createElement('input'); | 
 |   96         chb4.setAttribute('type', 'checkbox'); | 
 |   97         chb4.setAttribute('id', 'chb4'); | 
 |   98         chb4.addEventListener('focus', A_07_02_02_T01.step_func(function(event) 
     { | 
 |   99                 assert_equals(counter++, 2, 'Point 5: wrong focus navigation ord
     er'); | 
 |  100                 expectations[5] = true; | 
 |  101         }), false); | 
 |  102         expectations[5] = false; | 
 |  103         d.body.appendChild(chb4); | 
 |  104  | 
 |  105         chb2.focus(); | 
 |  106  | 
 |  107         //simulate TAB clicks | 
 |  108         fireKeyboardEvent(d, chb2, 'U+0009'); | 
 |  109  | 
 |  110         fireKeyboardEvent(d, chb3, 'U+0009'); | 
 |  111  | 
 |  112         fireKeyboardEvent(d, inp1, 'U+0009'); | 
 |  113  | 
 |  114         fireKeyboardEvent(d, inp2, 'U+0009'); | 
 |  115  | 
 |  116         fireKeyboardEvent(d, chb4, 'U+0009'); | 
 |  117  | 
 |  118         for (var i = 1; i < expectations.length; i++) { | 
 |  119                 if (!expectations[i]) { | 
 |  120                         assert_true(false, 'Point ' + i + ' event listener was n
     ot invoked'); | 
 |  121                 } | 
 |  122         } | 
 |  123  | 
 |  124     A_07_02_02_T01.done(); | 
 |  125 })); | 
 |  126  | 
 |  127  | 
 |  128  | 
 |  129 A_07_02_02_T02.step(unit(function (ctx) { | 
 |  130  | 
 |  131         var counter = 0; | 
 |  132  | 
 |  133         var expectations = []; | 
 |  134  | 
 |  135         var d = newRenderedHTMLDocument(ctx); | 
 |  136  | 
 |  137         var chb0 = d.createElement('input'); | 
 |  138         chb0.setAttribute('type', 'checkbox'); | 
 |  139         chb0.setAttribute('id', 'chb0'); | 
 |  140         d.body.appendChild(chb0); | 
 |  141  | 
 |  142  | 
 |  143         var host = d.createElement('div'); | 
 |  144         d.body.appendChild(host); | 
 |  145  | 
 |  146         var chb1 = d.createElement('input'); | 
 |  147         chb1.setAttribute('type', 'checkbox'); | 
 |  148         chb1.setAttribute('id', 'chb1'); | 
 |  149         chb1.addEventListener('focus', A_07_02_02_T02.step_func(function(event) 
     { | 
 |  150                 assert_true(false, 'Element shouldn\'t be rendered'); | 
 |  151         }), false); | 
 |  152         host.appendChild(chb1); | 
 |  153  | 
 |  154         var chb2 = d.createElement('input'); | 
 |  155         chb2.setAttribute('type', 'checkbox'); | 
 |  156         chb2.setAttribute('id', 'chb2'); | 
 |  157         chb2.setAttribute('class', 'shadow'); | 
 |  158         chb2.addEventListener('focus', A_07_02_02_T02.step_func(function(event) 
     { | 
 |  159                 assert_equals(counter++, 2, 'Point 3: wrong focus navigation ord
     er'); | 
 |  160                 expectations[1] = true; | 
 |  161         }), false); | 
 |  162         expectations[1] = false; | 
 |  163         host.appendChild(chb2); | 
 |  164  | 
 |  165         var chb3 = d.createElement('input'); | 
 |  166         chb3.setAttribute('type', 'checkbox'); | 
 |  167         chb3.setAttribute('id', 'chb3'); | 
 |  168         chb3.setAttribute('class', 'shadow'); | 
 |  169         chb3.addEventListener('focus', A_07_02_02_T02.step_func(function(event) 
     { | 
 |  170                 assert_equals(counter++, 3, 'Point 4: wrong focus navigation ord
     er'); | 
 |  171                 expectations[2] = true; | 
 |  172         }), false); | 
 |  173         expectations[2] = false; | 
 |  174         host.appendChild(chb3); | 
 |  175  | 
 |  176         var s = host.createShadowRoot(); | 
 |  177  | 
 |  178         var div = d.createElement('div'); | 
 |  179         div.innerHTML = '<content select=".shadow"></content>'; | 
 |  180         s.appendChild(div); | 
 |  181  | 
 |  182         var inp1 = d.createElement('input'); | 
 |  183         inp1.setAttribute('type', 'text'); | 
 |  184         inp1.setAttribute('id', 'shInp1'); | 
 |  185         inp1.setAttribute('value', 'Input 1'); | 
 |  186         inp1.addEventListener('focus', A_07_02_02_T02.step_func(function(event) 
     { | 
 |  187                 assert_equals(counter++, 0, 'Point 1: wrong focus navigation ord
     er'); | 
 |  188  | 
 |  189                 expectations[3] = true; | 
 |  190         }), false); | 
 |  191         expectations[3] = false; | 
 |  192         s.appendChild(inp1); | 
 |  193  | 
 |  194         var inp2 = d.createElement('input'); | 
 |  195         inp2.setAttribute('type', 'text'); | 
 |  196         inp2.setAttribute('id', 'shInp2'); | 
 |  197         inp2.setAttribute('value', 'Input 2'); | 
 |  198         inp2.addEventListener('focus', A_07_02_02_T02.step_func(function(event) 
     { | 
 |  199                 assert_equals(counter++, 1, 'Point 2: wrong focus navigation ord
     er'); | 
 |  200                 expectations[4] = true; | 
 |  201         }), false); | 
 |  202         expectations[4] = false; | 
 |  203         s.appendChild(inp2); | 
 |  204  | 
 |  205         var chb4 = d.createElement('input'); | 
 |  206         chb4.setAttribute('type', 'checkbox'); | 
 |  207         chb4.setAttribute('id', 'chb4'); | 
 |  208         chb4.addEventListener('focus', A_07_02_02_T02.step_func(function(event) 
     { | 
 |  209                 assert_equals(counter++, 4, 'Point 5: wrong focus navigation ord
     er'); | 
 |  210                 expectations[5] = true; | 
 |  211         }), false); | 
 |  212         expectations[5] = false; | 
 |  213         d.body.appendChild(chb4); | 
 |  214  | 
 |  215         chb0.focus(); | 
 |  216  | 
 |  217         //simulate TAB clicks | 
 |  218         fireKeyboardEvent(d, inp1, 'U+0009'); | 
 |  219  | 
 |  220         fireKeyboardEvent(d, inp2, 'U+0009'); | 
 |  221  | 
 |  222         fireKeyboardEvent(d, chb2, 'U+0009'); | 
 |  223  | 
 |  224         fireKeyboardEvent(d, chb3, 'U+0009'); | 
 |  225  | 
 |  226         fireKeyboardEvent(d, chb4, 'U+0009'); | 
 |  227  | 
 |  228         for (var i = 1; i < expectations.length; i++) { | 
 |  229                 if (!expectations[i]) { | 
 |  230                         assert_true(false, 'Point ' + i + ' event listener was n
     ot invoked'); | 
 |  231                 } | 
 |  232         } | 
 |  233  | 
 |  234     A_07_02_02_T02.done(); | 
 |  235 })); | 
 |  236 </script> | 
 |  237 </body> | 
 |  238 </html> | 
| OLD | NEW |