src/third_party/WebKit/LayoutTests/imported/web-platform-tests/shadow-dom/user-interaction/focus-navigation/test-003.html

   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-navigation">
  16 <meta name="assert" content="User Interaction: For sequential focus navigation, the shadow DOM navigation order sequence must be inserted into the document navigation 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 order');
  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 order');
  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 order');
  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 order');
  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 order');
  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 not 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 order');
 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 order');
 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 order');
 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 order');
 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 order');
 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 order');
 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 not invoked');
 230                 }
 231         }
 232
 233         A_07_02_03_T02.done();
 234 }));
 235 </script>
 236 </body>
 237 </html>