mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
192 lines
4.5 KiB
HTML
192 lines
4.5 KiB
HTML
<!doctype html>
|
|
<!--
|
|
@license
|
|
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
|
<script src="wct-browser-config.js"></script>
|
|
<script src="../../node_modules/wct-browser-legacy/browser.js"></script>
|
|
<script type="module" src="../../polymer-legacy.js"></script>
|
|
<body>
|
|
|
|
<dom-module id="my-element">
|
|
<template>
|
|
<div id="content"></div>
|
|
</template>
|
|
<script type="module">
|
|
import { LegacyElementMixin } from '../../lib/legacy/legacy-element-mixin.js';
|
|
|
|
class MyElement extends LegacyElementMixin(HTMLElement) {
|
|
|
|
static get is() { return 'my-element'; }
|
|
|
|
static get properties() {
|
|
return {
|
|
prop: {
|
|
value: 'base'
|
|
}
|
|
};
|
|
}
|
|
|
|
created() {
|
|
super.created();
|
|
this._calledCreated++;
|
|
}
|
|
|
|
attached() {
|
|
super.attached();
|
|
this._calledAttached++;
|
|
}
|
|
|
|
attributeChanged() {
|
|
super.attributeChanged.apply(this, arguments);
|
|
this._callAttributeChanged++;
|
|
}
|
|
|
|
ready() {
|
|
super.ready();
|
|
this._calledReady++;
|
|
}
|
|
}
|
|
|
|
MyElement.prototype._calledCreated = 0;
|
|
MyElement.prototype._calledAttached = 0;
|
|
MyElement.prototype._calledReady = 0;
|
|
MyElement.prototype._callAttributeChanged = 0;
|
|
|
|
customElements.define(MyElement.is, MyElement);
|
|
|
|
window.MyElement = MyElement;
|
|
</script>
|
|
</dom-module>
|
|
|
|
|
|
<dom-module id="sub-element">
|
|
<script type="module">
|
|
|
|
class SubElement extends window.MyElement {
|
|
|
|
static get is() { return 'sub-element'; }
|
|
|
|
created() {
|
|
super.created();
|
|
this._calledCreated++;
|
|
}
|
|
|
|
attached() {
|
|
super.attached();
|
|
this._calledAttached++;
|
|
}
|
|
|
|
ready() {
|
|
super.ready();
|
|
this._calledReady++;
|
|
}
|
|
|
|
}
|
|
|
|
customElements.define(SubElement.is, SubElement);
|
|
|
|
window.SubElement = SubElement;
|
|
</script>
|
|
</dom-module>
|
|
|
|
<test-fixture id="my-element-attr">
|
|
<template>
|
|
<my-element prop="attr"></my-element>
|
|
</template>
|
|
</test-fixture>
|
|
|
|
<script type="module">
|
|
import { PolymerElement } from '../../polymer-element.js';
|
|
import { ElementMixin } from '../../lib/mixins/element-mixin.js';
|
|
import { LegacyElementMixin } from '../../lib/legacy/legacy-element-mixin.js';
|
|
suite('class extends Polymer.LegacyElementMixin(HTMLElement)', function() {
|
|
|
|
var el;
|
|
|
|
setup(function() {
|
|
el = document.createElement('my-element');
|
|
document.body.appendChild(el);
|
|
});
|
|
|
|
teardown(function() {
|
|
document.body.removeChild(el);
|
|
});
|
|
|
|
test('instanceof', function() {
|
|
assert.instanceOf(el, HTMLElement);
|
|
assert.instanceOf(el, PolymerElement);
|
|
assert.instanceOf(el, window.MyElement);
|
|
});
|
|
|
|
test('lifecycle', function() {
|
|
assert.equal(el._calledCreated, 1);
|
|
assert.equal(el._calledAttached, 1);
|
|
assert.equal(el._calledReady, 1);
|
|
assert.equal(el._callAttributeChanged, 0);
|
|
});
|
|
|
|
test('attributes', function() {
|
|
var fixtureEl = fixture('my-element-attr');
|
|
assert.equal(fixtureEl.prop, 'attr');
|
|
assert.equal(fixtureEl._callAttributeChanged, 1);
|
|
});
|
|
|
|
});
|
|
|
|
suite('subclass', function() {
|
|
|
|
var el;
|
|
|
|
setup(function() {
|
|
el = document.createElement('sub-element');
|
|
document.body.appendChild(el);
|
|
});
|
|
|
|
teardown(function() {
|
|
document.body.removeChild(el);
|
|
});
|
|
|
|
test('instanceof', function() {
|
|
assert.instanceOf(el, HTMLElement);
|
|
assert.instanceOf(el, PolymerElement);
|
|
assert.instanceOf(el, window.MyElement);
|
|
assert.instanceOf(el, window.SubElement);
|
|
});
|
|
|
|
test('lifecycle', function() {
|
|
assert.equal(el._calledCreated, 2);
|
|
assert.equal(el._calledAttached, 2);
|
|
assert.equal(el._calledReady, 2);
|
|
assert.equal(el._callAttributeChanged, 0);
|
|
});
|
|
|
|
});
|
|
|
|
suite('misc', function() {
|
|
|
|
test('Polymer.ElementMixin caches', function() {
|
|
assert.equal(PolymerElement, ElementMixin(HTMLElement));
|
|
assert.equal(ElementMixin(HTMLElement),
|
|
ElementMixin(HTMLElement));
|
|
});
|
|
|
|
test('Polymer.LegacyElementMixin caches', function() {
|
|
assert.equal(LegacyElementMixin(HTMLElement),
|
|
LegacyElementMixin(HTMLElement));
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|