src/third_party/WebKit/LayoutTests/imported/web-platform-tests/shadow-dom/events/event-dispatch/test-001.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_05_05_01</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/#event-dispatch">
  16 <meta name="assert" content="Event Dispatch: At the time of event dispatch:The Event target and currentTarget attributes must return the relative target for the node on which event listeners are invoked">
  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_05_05_01_T01 = async_test('A_05_05_01_T01');
  26
  27 A_05_05_01_T01.step(unit(function (ctx) {
  28
  29     var d = newRenderedHTMLDocument(ctx);
  30
  31     var invoked = false;
  32
  33     roots = createTestMediaPlayer(d);
  34
  35     //expected result of what relative target should be see
  36     //see at http://www.w3.org/TR/shadow-dom/#event-retargeting-example
  37
  38     //For #volume-slider-thumb relative target  #volume-slider-thumb
  39     roots.volumeShadowRoot.querySelector('#volume-slider-thumb').addEventListener('click',
  40             A_05_05_01_T01.step_func(function(event) {
  41                 invoked = true;
  42                 assert_equals(event.target.getAttribute('id'), 'volume-slider-thumb',
  43                                 'Point 1: Wrong target');
  44                 assert_equals(event.currentTarget.getAttribute('id'), 'volume-slider-thumb',
  45                                 'Point 1: Wrong currentTarget');
  46             }), false);
  47
  48     var event = d.createEvent('HTMLEvents');
  49     event.initEvent ('click', true, false);
  50     roots.volumeShadowRoot.querySelector('#volume-slider-thumb').dispatchEvent(event);
  51
  52     assert_true(invoked, 'Event listener was not invoked');
  53
  54     A_05_05_01_T01.done();
  55 }));
  56
  57
  58 var A_05_05_01_T02 = async_test('A_05_05_01_T02');
  59
  60 A_05_05_01_T02.step(unit(function (ctx) {
  61
  62     var d = newRenderedHTMLDocument(ctx);
  63
  64     var invoked = false;
  65
  66     roots = createTestMediaPlayer(d);
  67
  68     //expected result of what relative target should be see
  69     //see at http://www.w3.org/TR/shadow-dom/#event-retargeting-example
  70
  71     //For #volume-shadow-root relative target   #volume-slider-thumb
  72     roots.volumeShadowRoot.addEventListener('click',
  73                 A_05_05_01_T02.step_func(function(event) {
  74                         invoked = true;
  75                         assert_equals(event.target.getAttribute('id'), 'volume-slider-thumb',
  76                                         'Wrong target');
  77                         assert_true(event.currentTarget == roots.volumeShadowRoot,
  78                                         'Wrong currentTarget');
  79             }), false);
  80
  81     var event = d.createEvent('HTMLEvents');
  82     event.initEvent ('click', true, false);
  83     roots.volumeShadowRoot.querySelector('#volume-slider-thumb').dispatchEvent(event);
  84
  85     assert_true(invoked, 'Event listener was not invoked');
  86
  87     A_05_05_01_T02.done();
  88 }));
  89
  90
  91 var A_05_05_01_T03 = async_test('A_05_05_01_T03');
  92
  93 A_05_05_01_T03.step(unit(function (ctx) {
  94
  95     var d = newRenderedHTMLDocument(ctx);
  96
  97     var invoked = false;
  98
  99     roots = createTestMediaPlayer(d);
 100
 101     //expected result of what relative target should be see
 102     //see at http://www.w3.org/TR/shadow-dom/#event-retargeting-example
 103
 104     //For #volume-slider relative target #volume-slider
 105     roots.playerShadowRoot.querySelector('#volume-slider').addEventListener('click',
 106                 A_05_05_01_T03.step_func(function(event) {
 107                         invoked = true;
 108                         assert_equals(event.target.getAttribute('id'), 'volume-slider',
 109                                         'Wrong target');
 110                         assert_true(event.currentTarget.getAttribute('id'), 'volume-slider',
 111                                         'Wrong currentTarget');
 112             }), false);
 113
 114     var event = d.createEvent('HTMLEvents');
 115     event.initEvent ('click', true, false);
 116     roots.volumeShadowRoot.querySelector('#volume-slider-thumb').dispatchEvent(event);
 117
 118         assert_true(invoked, 'Event listener was not invoked');
 119
 120     A_05_05_01_T03.done();
 121 }));
 122
 123
 124
 125 var A_05_05_01_T04 = async_test('A_05_05_01_T04');
 126
 127 A_05_05_01_T04.step(unit(function (ctx) {
 128
 129     var d = newRenderedHTMLDocument(ctx);
 130
 131     var invoked = false;
 132
 133     roots = createTestMediaPlayer(d);
 134
 135     //expected result of what relative target should be see
 136     //see at http://www.w3.org/TR/shadow-dom/#event-retargeting-example
 137
 138     //For #volume-slider-container relative target #volume-slider
 139     roots.playerShadowRoot.querySelector('#volume-slider-container').addEventListener('click',
 140                 A_05_05_01_T04.step_func(function(event) {
 141                         invoked = true;
 142                         assert_equals(event.target.getAttribute('id'), 'volume-slider',
 143                                         'Wrong target');
 144                         assert_true(event.currentTarget.getAttribute('id'), 'volume-slider',
 145                                         'Wrong currentTarget');
 146             }), false);
 147
 148     var event = d.createEvent('HTMLEvents');
 149     event.initEvent ('click', true, false);
 150     roots.volumeShadowRoot.querySelector('#volume-slider-thumb').dispatchEvent(event);
 151
 152         assert_true(invoked, 'Event listener was not invoked');
 153
 154         A_05_05_01_T04.done();
 155 }));
 156
 157
 158 var A_05_05_01_T05 = async_test('A_05_05_01_T05');
 159
 160 A_05_05_01_T05.step(unit(function (ctx) {
 161
 162     var d = newRenderedHTMLDocument(ctx);
 163
 164     var invoked = false;
 165
 166     roots = createTestMediaPlayer(d);
 167
 168     //expected result of what relative target should be see
 169     //see at http://www.w3.org/TR/shadow-dom/#event-retargeting-example
 170
 171     //For #controls relative target #volume-slider
 172     roots.playerShadowRoot.querySelector('#controls').addEventListener('click',
 173                 A_05_05_01_T05.step_func(function(event) {
 174                         invoked = true;
 175                         assert_equals(event.target.getAttribute('id'), 'volume-slider',
 176                                         'Wrong target');
 177                         assert_true(event.currentTarget.getAttribute('id'), 'volume-slider',
 178                                         'Wrong currentTarget');
 179             }), false);
 180
 181     var event = d.createEvent('HTMLEvents');
 182     event.initEvent ('click', true, false);
 183     roots.volumeShadowRoot.querySelector('#volume-slider-thumb').dispatchEvent(event);
 184
 185         assert_true(invoked, 'Event listener was not invoked');
 186
 187         A_05_05_01_T05.done();
 188 }));
 189
 190
 191 var A_05_05_01_T06 = async_test('A_05_05_01_T06');
 192
 193 A_05_05_01_T06.step(unit(function (ctx) {
 194
 195     var d = newRenderedHTMLDocument(ctx);
 196
 197     var invoked = false;
 198
 199     roots = createTestMediaPlayer(d);
 200
 201     //expected result of what relative target should be see
 202     //see at http://www.w3.org/TR/shadow-dom/#event-retargeting-example
 203
 204     //For #player-shadow-root relative target #volume-slider
 205     roots.playerShadowRoot.addEventListener('click',
 206                 A_05_05_01_T06.step_func(function(event) {
 207                         invoked = true;
 208                         assert_equals(event.target.getAttribute('id'), 'volume-slider',
 209                                         'Wrong target');
 210                         assert_true(event.currentTarget.getAttribute('id'), 'volume-slider',
 211                                         'Wrong currentTarget');
 212             }), false);
 213
 214     var event = d.createEvent('HTMLEvents');
 215     event.initEvent ('click', true, false);
 216     roots.volumeShadowRoot.querySelector('#volume-slider-thumb').dispatchEvent(event);
 217
 218         assert_true(invoked, 'Event listener was not invoked');
 219
 220         A_05_05_01_T06.done();
 221 }));
 222
 223
 224
 225 var A_05_05_01_T07 = async_test('A_05_05_01_T07');
 226
 227 A_05_05_01_T07.step(unit(function (ctx) {
 228
 229     var d = newRenderedHTMLDocument(ctx);
 230
 231     var invoked = false;
 232
 233     roots = createTestMediaPlayer(d);
 234
 235     //expected result of what relative target should be see
 236     //see at http://www.w3.org/TR/shadow-dom/#event-retargeting-example
 237
 238     //For #player relative target #player
 239     d.querySelector('#player').addEventListener('click',
 240                 A_05_05_01_T07.step_func(function(event) {
 241                         invoked = true;
 242                         assert_equals(event.target.getAttribute('id'), 'player',
 243                                         'Wrong target');
 244                         assert_true(event.currentTarget.getAttribute('id'), 'player',
 245                                         'Wrong currentTarget');
 246             }), false);
 247
 248     var event = d.createEvent('HTMLEvents');
 249     event.initEvent ('click', true, false);
 250     roots.volumeShadowRoot.querySelector('#volume-slider-thumb').dispatchEvent(event);
 251
 252         assert_true(invoked, 'Event listener was not invoked');
 253
 254         A_05_05_01_T07.done();
 255 }));
 256 </script>
 257 </body>
 258 </html>