third_party/WebKit/LayoutTests/fast/dom/custom/created-callback.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/testharness.js"></script>
   3 <script src="../../../resources/testharnessreport.js"></script>
   4 <script src="test-harness-utils.js"></script>
   5 <body>
   6 <script>
   7 test(function() {
   8     var createdInvocations = 0;
   9     function created() {
  10         createdInvocations++;
  11     }
  12
  13     var getterInvocations = 0;
  14     function getter() {
  15         getterInvocations++;
  16         return created;
  17     }
  18
  19     function failer() {
  20         assert_unreached('the created callback must not be retrieved after registration');
  21     }
  22
  23     var proto = Object.create(HTMLElement.prototype, {
  24       createdCallback: {
  25         get: getter
  26       }
  27     });
  28     var ctor = document.registerElement('x-a', {prototype: proto});
  29     assert_equals(getterInvocations, 1, 'the created callback must have been retrieved');
  30
  31     proto.createdCallback = failer;
  32     var element = new ctor();
  33     assert_equals(createdInvocations, 1, 'the created callback retrieved at registration must be invoked');
  34 }, 'transfer created callback');
  35
  36 (function() {
  37
  38 t = async_test('__proto__, :unresolved and created callback timing');
  39 t.step(function() {
  40     var createdInvocations = 0;
  41     function created() {
  42         createdInvocations++;
  43
  44         if (this.id != 'u')
  45             return;
  46
  47         t.step(function() {
  48             var t = div.querySelector('#t');
  49             var v = div.querySelector('#v');
  50             var w = div.querySelector('#w');
  51
  52             assert_equals(div.querySelector('x-b:not(:unresolved)'), this, 'the :unresolved pseudoclass should cease to apply when the created callback is invoked');
  53             assert_array_equals(div.querySelectorAll(':unresolved'), [v, w], 'the :unresolved pseudoclass should be processed in order');
  54
  55             assert_true(t instanceof C, 'prototype upgrade should happen in order (#t)');
  56             assert_false(v instanceof C, 'prototype upgrade should happen in order (#v)');
  57         }, this);
  58     }
  59
  60     var protoB = Object.create(HTMLElement.prototype);
  61     var B = document.registerElement('x-b', {prototype: protoB});
  62
  63     var protoC = Object.create(HTMLElement.prototype);
  64     protoC.createdCallback = created;
  65     var C = document.registerElement('x-c', {prototype: protoC});
  66
  67     var div = document.createElement('div');
  68     div.innerHTML = '<x-c id="t"></x-c>' +
  69                     '<x-b id="u"></x-b>' +
  70                     '<x-c id="v"></x-c>' +
  71                     '<x-b id="w"></x-b>';
  72     assert_equals(createdInvocations, 2, 'the created callback should have been invoked once for each x-c element');
  73     assert_true(div.querySelector('#w') instanceof B, '#w\'s prototype should have ultimately been upgraded');
  74     t.done();
  75 });
  76
  77 })();
  78
  79 (function() {
  80
  81 t = async_test('other callbacks for a given element are queued during the ' +
  82                'created callback and dispatched when the created callback ' +
  83                'completes');
  84 withFrame(t.step_func(function(frame) {
  85     var messages = [];
  86     function log(msg) {
  87         messages.push(msg);
  88     }
  89
  90     var proto = Object.create(frame.contentWindow.HTMLElement.prototype);
  91     proto.createdCallback = function() {
  92         log('created started');
  93         this.remove();
  94         this.setAttribute('prey', 'gargoyles');
  95         log('created finished');
  96     };
  97     proto.attachedCallback = function() { log('entered'); };
  98     proto.detachedCallback = function() { log('left'); };
  99     proto.attributeChangedCallback = function() { log('attribute changed'); };
 100     var D = frame.contentDocument.registerElement('x-d', {prototype: proto});
 101
 102     frame.contentDocument.body.innerHTML = '<x-d></x-d>';
 103     log('done');
 104
 105     assert_array_equals(
 106         messages,
 107         ['created started', 'created finished', 'entered', 'left',
 108          'attribute changed', 'done'],
 109         'callbacks should not be dispatched until the created callback has ' +
 110         'finished');
 111     t.done();
 112 }));
 113
 114 })();
 115
 116 (function() {
 117
 118 t = async_test('callback is called even if the element is moved to foreign document');
 119 var callbackInvoked = false;
 120
 121 withFrame(t.step_func(function(originalFrame) {
 122     withFrame(function(destinationFrame) {
 123         var protoA = Object.create(originalFrame.contentWindow.HTMLElement.prototype);
 124         protoA.createdCallback = function() {
 125             var toBeMoved = originalFrame.contentDocument.getElementById('toBeMoved');
 126             destinationFrame.contentDocument.body.appendChild(toBeMoved);
 127         };
 128
 129         var protoB = Object.create(originalFrame.contentWindow.HTMLElement.prototype);
 130         protoB.createdCallback = function() {
 131             callbackInvoked = true;
 132         };
 133
 134         originalFrame.contentDocument.registerElement('x-a', {prototype: protoA});
 135         originalFrame.contentDocument.registerElement('x-b', {prototype: protoB});
 136         originalFrame.contentDocument.body.innerHTML = '<x-a></x-a><x-b id="toBeMoved"></x-b>';
 137         assert_true(callbackInvoked);
 138
 139         t.done();
 140     });
 141 }));
 142
 143 })();
 144 </script>