src/third_party/WebKit/LayoutTests/w3c/web-platform-tests/shadow-dom/user-interaction/focus-navigation/test-002.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_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-navigation">
  16 <meta name="assert" content="User Interaction: The navigation order within a shadow tree must be computed as a list of focusable elements in tree order as-rendered  with the exception of any elements, distributed its insertion points, and is 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 order');
  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 order');
  64                 expectations[2] = true;
  65         }), false);
  66         expectations[2] = false;
  67         host.appendChild(chb3);
  68
  69         var s = createSR(host);
  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 order');
 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 not 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 order');
 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 order');
 171                 expectations[2] = true;
 172         }), false);
 173         expectations[2] = false;
 174         host.appendChild(chb3);
 175
 176         var s = createSR(host);
 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 order');
 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 order');
 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 order');
 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 not invoked');
 231                 }
 232         }
 233
 234     A_07_02_02_T02.done();
 235 }));
 236 </script>
 237 </body>
 238 </html>