| 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_03</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: For sequential focus navigation, 
     the shadow DOM navigation order sequence must be inserted into the document navi
     gation order in place of the shadow host as if the shadow host were assigned the
      value of auto for determining its position and shadow host is not focusable"> | 
 |   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_03_T01 = async_test('A_07_02_03_T01'); | 
 |   26  | 
 |   27 A_07_02_03_T01.step(unit(function (ctx) { | 
 |   28  | 
 |   29         var counter = 0; | 
 |   30  | 
 |   31         var invoked = []; | 
 |   32  | 
 |   33         var d = newRenderedHTMLDocument(ctx); | 
 |   34  | 
 |   35         var chb1 = d.createElement('input'); | 
 |   36         chb1.setAttribute('type', 'checkbox'); | 
 |   37         // TODO according CSS3 nav-index is a replacement for tabindex | 
 |   38         //chb1.setAttribute('nav-index', '4'); | 
 |   39         chb1.setAttribute('tabindex', '4'); | 
 |   40         chb1.setAttribute('id', 'chb1'); | 
 |   41         chb1.addEventListener('focus', A_07_02_03_T01.step_func(function(event) 
     { | 
 |   42                 assert_equals(counter++, 1, 'Point 1: wrong focus navigation ord
     er'); | 
 |   43                 invoked[1] = true; | 
 |   44         }), false); | 
 |   45         invoked[1] = false; | 
 |   46         d.body.appendChild(chb1); | 
 |   47  | 
 |   48         var host = d.createElement('div'); | 
 |   49         d.body.appendChild(host); | 
 |   50         var s = host.createShadowRoot(); | 
 |   51  | 
 |   52         var inp1 = d.createElement('input'); | 
 |   53         inp1.setAttribute('type', 'text'); | 
 |   54         inp1.setAttribute('id', 'shInp1'); | 
 |   55         //inp1.setAttribute('nav-index', '3'); | 
 |   56         inp1.setAttribute('tabindex', '3'); | 
 |   57         inp1.setAttribute('value', 'Input 1'); | 
 |   58         inp1.addEventListener('focus', A_07_02_03_T01.step_func(function(event) 
     { | 
 |   59                 assert_equals(counter++, 4, 'Point 2: wrong focus navigation ord
     er'); | 
 |   60                 invoked[2] = true; | 
 |   61         }), false); | 
 |   62         invoked[2] = false; | 
 |   63         s.appendChild(inp1); | 
 |   64  | 
 |   65         var inp2 = d.createElement('input'); | 
 |   66         inp2.setAttribute('type', 'text'); | 
 |   67         inp2.setAttribute('id', 'shInp2'); | 
 |   68         //inp2.setAttribute('nav-index', '2'); | 
 |   69         inp2.setAttribute('tabindex', '2'); | 
 |   70         inp2.setAttribute('value', 'Input 2'); | 
 |   71         inp2.addEventListener('focus', A_07_02_03_T01.step_func(function(event) 
     { | 
 |   72                 assert_equals(counter++, 3, 'Point 3: wrong focus navigation ord
     er'); | 
 |   73                 invoked[3] = true; | 
 |   74         }), false); | 
 |   75         invoked[3] = false; | 
 |   76         s.appendChild(inp2); | 
 |   77  | 
 |   78         var chb2 = d.createElement('input'); | 
 |   79         chb2.setAttribute('type', 'checkbox'); | 
 |   80         chb2.setAttribute('id', 'chb2'); | 
 |   81         //chb2.setAttribute('nav-index', '1'); | 
 |   82         chb2.setAttribute('tabindex', '1'); | 
 |   83         chb2.addEventListener('focus', A_07_02_03_T01.step_func(function(event) 
     { | 
 |   84                 assert_equals(counter++, 0, 'Point 4: wrong focus navigation ord
     er'); | 
 |   85                 invoked[4] = true; | 
 |   86         }), false); | 
 |   87         invoked[4] = false; | 
 |   88         d.body.appendChild(chb2); | 
 |   89  | 
 |   90         var chb3 = d.createElement('input'); | 
 |   91         chb3.setAttribute('type', 'checkbox'); | 
 |   92         chb3.setAttribute('id', 'chb3'); | 
 |   93         //chb3.setAttribute('nav-index', '5'); | 
 |   94         chb3.setAttribute('tabindex', '5'); | 
 |   95         chb3.addEventListener('focus', A_07_02_03_T01.step_func(function(event) 
     { | 
 |   96                 assert_equals(counter++, 2, 'Point 5: wrong focus navigation ord
     er'); | 
 |   97                 invoked[5] = true; | 
 |   98         }), false); | 
 |   99         invoked[5] = false; | 
 |  100         d.body.appendChild(chb3); | 
 |  101  | 
 |  102         chb2.focus(); | 
 |  103  | 
 |  104         //simulate TAB clicks. Expected order: chb2, chb1, chb3, inp2, inp1 | 
 |  105         fireKeyboardEvent(d, chb2, 'U+0009'); | 
 |  106  | 
 |  107         fireKeyboardEvent(d, chb1, 'U+0009'); | 
 |  108  | 
 |  109         fireKeyboardEvent(d, chb3, 'U+0009'); | 
 |  110  | 
 |  111         fireKeyboardEvent(d, inp2, 'U+0009'); | 
 |  112  | 
 |  113         fireKeyboardEvent(d, inp1, 'U+0009'); | 
 |  114  | 
 |  115         for (var i = 1; i < invoked.length; i++) { | 
 |  116                 if (!invoked[i]) { | 
 |  117                         assert_true(false, 'Piont ' + i + ' event listener was n
     ot invoked'); | 
 |  118                 } | 
 |  119         } | 
 |  120  | 
 |  121         A_07_02_03_T01.done(); | 
 |  122 })); | 
 |  123  | 
 |  124 // test nodes, distributed into insertion points | 
 |  125 var A_07_02_03_T02 = async_test('A_07_02_03_T02'); | 
 |  126  | 
 |  127 A_07_02_03_T02.step(unit(function (ctx) { | 
 |  128  | 
 |  129         var counter = 0; | 
 |  130  | 
 |  131         var invoked = []; | 
 |  132  | 
 |  133         var d = newRenderedHTMLDocument(ctx); | 
 |  134  | 
 |  135         var host = d.createElement('div'); | 
 |  136         d.body.appendChild(host); | 
 |  137  | 
 |  138         var chb1 = d.createElement('input'); | 
 |  139         chb1.setAttribute('type', 'checkbox'); | 
 |  140         chb1.setAttribute('id', 'chb1'); | 
 |  141         chb1.setAttribute('tabindex', '1'); | 
 |  142         chb1.addEventListener('focus', A_07_02_03_T02.step_func(function(event) 
     { | 
 |  143                 assert_equals(counter++, 0, 'Point 1: wrong focus navigation ord
     er'); | 
 |  144                 invoked[1] = true; | 
 |  145         }), false); | 
 |  146         invoked[1] = false; | 
 |  147         d.body.appendChild(chb1); | 
 |  148  | 
 |  149         var chb2 = d.createElement('input'); | 
 |  150         chb2.setAttribute('type', 'checkbox'); | 
 |  151         chb2.setAttribute('id', 'chb2'); | 
 |  152         chb2.setAttribute('class', 'shadow'); | 
 |  153         chb2.setAttribute('tabindex', '3'); | 
 |  154         chb2.addEventListener('focus', A_07_02_03_T02.step_func(function(event) 
     { | 
 |  155                 assert_equals(counter++, 2, 'Point 2: wrong focus navigation ord
     er'); | 
 |  156                 invoked[2] = true; | 
 |  157         }), false); | 
 |  158         invoked[2] = false; | 
 |  159         host.appendChild(chb2); | 
 |  160  | 
 |  161         var chb3 = d.createElement('input'); | 
 |  162         chb3.setAttribute('type', 'checkbox'); | 
 |  163         chb3.setAttribute('id', 'chb3'); | 
 |  164         chb3.setAttribute('class', 'shadow'); | 
 |  165         chb3.setAttribute('tabindex', '2'); | 
 |  166         chb3.addEventListener('focus', A_07_02_03_T02.step_func(function(event) 
     { | 
 |  167                 assert_equals(counter++, 1, 'Point 3: wrong focus navigation ord
     er'); | 
 |  168                 invoked[3] = true; | 
 |  169         }), false); | 
 |  170         invoked[3] = false; | 
 |  171         host.appendChild(chb3); | 
 |  172  | 
 |  173         var s = host.createShadowRoot(); | 
 |  174  | 
 |  175         var div = d.createElement('div'); | 
 |  176         div.innerHTML = '<content select=".shadow"></content>'; | 
 |  177         s.appendChild(div); | 
 |  178  | 
 |  179         var inp1 = d.createElement('input'); | 
 |  180         inp1.setAttribute('type', 'text'); | 
 |  181         inp1.setAttribute('id', 'shInp1'); | 
 |  182         inp1.setAttribute('value', 'Input 1'); | 
 |  183         inp1.setAttribute('tabindex', '4'); | 
 |  184         inp1.addEventListener('focus', A_07_02_03_T02.step_func(function(event) 
     { | 
 |  185                 assert_equals(counter++, 4, 'Point 4: wrong focus navigation ord
     er'); | 
 |  186                 invoked[4] = true; | 
 |  187         }), false); | 
 |  188         invoked[4] = false; | 
 |  189         s.appendChild(inp1); | 
 |  190  | 
 |  191         var inp2 = d.createElement('input'); | 
 |  192         inp2.setAttribute('type', 'text'); | 
 |  193         inp2.setAttribute('id', 'shInp2'); | 
 |  194         inp2.setAttribute('value', 'Input 2'); | 
 |  195         inp2.setAttribute('tabindex', '5'); | 
 |  196         inp2.addEventListener('focus', A_07_02_03_T02.step_func(function(event) 
     { | 
 |  197                 assert_equals(counter++, 5, 'Point 5: wrong focus navigation ord
     er'); | 
 |  198                 invoked[5] = true; | 
 |  199         }), false); | 
 |  200         invoked[5] = false; | 
 |  201         s.appendChild(inp2); | 
 |  202  | 
 |  203         var chb4 = d.createElement('input'); | 
 |  204         chb4.setAttribute('type', 'checkbox'); | 
 |  205         chb4.setAttribute('id', 'chb4'); | 
 |  206         chb4.setAttribute('tabindex', '6'); | 
 |  207         chb4.addEventListener('focus', A_07_02_03_T02.step_func(function(event) 
     { | 
 |  208                 assert_equals(counter++, 3, 'Point 6: wrong focus navigation ord
     er'); | 
 |  209                 invoked[6] = true; | 
 |  210         }), false); | 
 |  211         invoked[6] = false; | 
 |  212         d.body.appendChild(chb4); | 
 |  213  | 
 |  214         chb1.focus(); | 
 |  215  | 
 |  216         //simulate TAB clicks | 
 |  217         //Expected order: chb1, chb3, chb2, chb4, inp1, inp2 | 
 |  218         fireKeyboardEvent(d, chb1, 'U+0009'); | 
 |  219         fireKeyboardEvent(d, chb3, 'U+0009'); | 
 |  220         fireKeyboardEvent(d, chb2, 'U+0009'); | 
 |  221         fireKeyboardEvent(d, chb4, 'U+0009'); | 
 |  222         fireKeyboardEvent(d, inp1, 'U+0009'); | 
 |  223         fireKeyboardEvent(d, inp2, 'U+0009'); | 
 |  224  | 
 |  225  | 
 |  226  | 
 |  227         for (var i = 1; i < invoked.length; i++) { | 
 |  228                 if (!invoked[i]) { | 
 |  229                         assert_true(false, 'Piont ' + i + ' event listener was n
     ot invoked'); | 
 |  230                 } | 
 |  231         } | 
 |  232  | 
 |  233         A_07_02_03_T02.done(); | 
 |  234 })); | 
 |  235 </script> | 
 |  236 </body> | 
 |  237 </html> | 
| OLD | NEW |