upgrade-element.html | Explore in Territory

<!DOCTYPE html>
<title>Custom Elements: upgrade element</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#concept-upgrade-an-element">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/custom-elements-helpers.js"></script>
<body>
<script>

'use strict'

setup({
  allow_uncaught_exception: true,
});

// 6. If C non-conformantly uses an API decorated with the [CEReactions] extended attribute,
// then the reactions enqueued at the beginning of upgrade will execute during this step,
// before C finishes and control returns to this algorithm.
test_with_window((w) => {
  let invocations = [];
  let changedCallbackArgs = [];
  let a = w.document.createElement('a-a');
  w.document.body.appendChild(a);
  a.setAttribute('x', '1');
  class X extends w.HTMLElement {
    constructor() {
      super();
      this.setAttribute('y', '2');
      invocations.push(['constructor', this]);
    }
    connectedCallback() { invocations.push(['connected', this]); }
    static get observedAttributes() { return ['x', 'y']; }
    attributeChangedCallback() {
      invocations.push(['attributeChanged', this]);
      changedCallbackArgs.push(arguments);
    }
  }
  w.customElements.define('a-a', X);
  // Unlike calling new, upgrading element with createElement does not set element's state
  // to "custom" during HTMLConstructor. Thus, appending attribute after super()
  // does not enqueue a callback reaction.
  assert_equals(invocations.length, 3);
  assert_equals(changedCallbackArgs.length, 1, 'attributeChangedCallback should only be invoked once');
  assert_array_equals(invocations[0], ['constructor', a], 'constructor should execute first');
  assert_array_equals(invocations[1], ['attributeChanged', a], 'attributeChangedCallback should execute after constructor');
  assert_array_equals(changedCallbackArgs[0], ['x', null, '1', null], 'attributeChangedCallback should execute for setAttribute outside of the constructor');
  assert_array_equals(invocations[2], ['connected', a], 'connectedCallback should execute after the constrcutor');
}, 'The constructor non-conformatly uses API decorated with the [CEReactions] when constuctor is invoked during upgrade');

// Step 6 case when constructor is invoked with new
test_with_window((w) => {
  let invocations = [];
  let changedCallbackArgs = [];
  class X extends w.HTMLElement {
    constructor() {
      super();
      this.setAttribute('y', '2');
      invocations.push(['constructor', this]);
    }
    connectedCallback() { invocations.push(['connected', this]); }
    static get observedAttributes() { return ['x', 'y']; }
    attributeChangedCallback() {
      invocations.push(['attributeChanged', this]);
      changedCallbackArgs.push(arguments);
    }
  }
  w.customElements.define('a-a', X);
  let a = new X();
  a.setAttribute('x','1');
  assert_equals(invocations.length, 3);
  assert_equals(changedCallbackArgs.length, 2, 'attributeChangedCallback should be invoked twice');
  assert_array_equals(invocations[0], ['attributeChanged', a], 'attributeChangedCallback for "a" should execute before the constructor is finished');
  assert_array_equals(invocations[1], ['constructor', a], 'constructor executes second');
  assert_array_equals(invocations[2], ['attributeChanged', a], 'setAttribute outside of the constructorshould be invoked');
  assert_array_equals(changedCallbackArgs[0], ['y', null, '2', null]);
  assert_array_equals(changedCallbackArgs[1], ['x', null, '1', null]);
}, 'The constructor non-conformatly uses API decorated with the [CEReactions] when constructor is invoked with new');


// 8. If constructResult is an abrupt completion, then return constructResult
// (i.e., rethrow the exception).
test_with_window((w) => {
  let error_log = [];
  let doc = w.document;
  doc.body.appendChild(doc.createElement('a-a'));
  window.onerror = function (msg, url, lineNo, columnNo, error) {
    error_log.push(error.name);
    return true;
  };
  class X extends w.HTMLElement {
    constructor() {
      super();
      assert_false(this.matches(':defined'), 'calling super() with non-empty construction stack should not define the element');
      throw { name: 'constructor throws' };
    }
  }
  w.customElements.define('a-a', X);
  assert_array_equals(error_log, ['constructor throws'], 'rethrow any exception thrown from constructor');
}, 'Upgrading an element with a throwing constructor should rethrow that exception');

// 9. If SameValue(constructResult.[[value]], element) is false, then throw an
// "InvalidStateError" DOMException and terminate these steps.
test_with_window((w) => {
  let error_log = [];
  w.onerror = function (msg, url, lineNo, columnNo, error) {
    error_log.push(error.name);
    return true;
  };
  let a = w.document.createElement('a-a');
  w.document.body.appendChild(a);
  class X extends w.HTMLElement {
    constructor() {
      super();
      return ['aaaa'];
    }
  }
  w.customElements.define('a-a', X);
  assert_array_equals(error_log, ['TypeError'], 'returning object that is different from element should throw "TypeError"');
}, 'Upgrading an element with constructor that returns different object');
</script>
</body>
chromium/third_party/blink/web_tests/custom-elements/spec/upgrade-element.html
