-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #78 from PolymerLabs/template-subclass
Template subclass
- Loading branch information
Showing
5 changed files
with
250 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,193 @@ | ||
| <!doctype html> | ||
| <!-- | ||
| @license | ||
| Copyright (c) 2016 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="../../../webcomponentsjs/webcomponents-lite.js"></script> | ||
| <script src="../../../web-component-tester/browser.js"></script> | ||
| <link rel="import" href="../../polymer.html"> | ||
| <body> | ||
|
|
||
| <dom-module id="base-el"> | ||
| <template> | ||
| <style> | ||
| :host { | ||
| display: block; | ||
| color: red; | ||
| } | ||
| code { | ||
| color: black; | ||
| } | ||
| </style> | ||
| <span>base element: <code>foo = [[foo]]</code></span> | ||
| </template> | ||
|
|
||
| <script> | ||
| class BaseEl extends Polymer.Element { | ||
| static get is() { return 'base-el' } | ||
| static get config() { | ||
| return { | ||
| properties: { foo: { type: String, value: 5 } } | ||
| } | ||
| } | ||
| } | ||
| customElements.define(BaseEl.is, BaseEl); | ||
| </script> | ||
| </dom-module> | ||
|
|
||
| <dom-module id="child-el"> | ||
| <script> | ||
| class ChildEl extends BaseEl { | ||
| static get is() { return 'child-el' } | ||
| static get config() { | ||
| return { | ||
| properties: { bar: { type: String, value: 3 } } | ||
| } | ||
| } | ||
| } | ||
| customElements.define(ChildEl.is, ChildEl); | ||
| </script> | ||
| </dom-module> | ||
|
|
||
| <dom-module id="grand-child-el"> | ||
| <script> | ||
| class GrandChildEl extends ChildEl { | ||
| static get is() { return 'grand-child-el' } | ||
| static get config() { | ||
| return { | ||
| properties: { bar: { type: String, value: 3 } } | ||
| } | ||
| } | ||
| } | ||
| customElements.define(GrandChildEl.is, GrandChildEl); | ||
| </script> | ||
| </dom-module> | ||
|
|
||
| <dom-module id="child-el-with-template"> | ||
| <script> | ||
| class ChildElWithTemplate extends GrandChildEl { | ||
| static get is() { return 'child-el-with-template' } | ||
| static get config() { | ||
| return { | ||
| properties: { bar: { type: String, value: 3 } } | ||
| } | ||
| } | ||
| static finalizeTemplate(template) { | ||
| var div = document.createElement('div'); | ||
| div.textContent = 'child'; | ||
| template.content.appendChild(div); | ||
| super.finalizeTemplate(template); | ||
| } | ||
| } | ||
| customElements.define(ChildElWithTemplate.is, ChildElWithTemplate); | ||
| </script> | ||
| </dom-module> | ||
|
|
||
| <test-fixture id="basic"> | ||
| <template> | ||
| <base-el></base-el> | ||
| <child-el></child-el> | ||
| </template> | ||
| </test-fixture> | ||
|
|
||
| <test-fixture id="basic-with-attributes"> | ||
| <template> | ||
| <base-el></base-el> | ||
| <child-el foo="7" bar="7"></child-el> | ||
| </template> | ||
| </test-fixture> | ||
|
|
||
| <test-fixture id="with-template"> | ||
| <template> | ||
| <base-el></base-el> | ||
| <child-el-with-template></child-el-with-template> | ||
| </template> | ||
| </test-fixture> | ||
|
|
||
| <script> | ||
| suite('ChildElement extends BaseElement', function() { | ||
| test('child has base properties', function() { | ||
| var f = fixture('basic'); | ||
| var child = f[1]; | ||
| assert.equal(child.foo, 5); | ||
| assert.equal(child.bar, 3); | ||
| }); | ||
|
|
||
| test('child can change base properties', function() { | ||
| var f = fixture('basic-with-attributes'); | ||
| var child = f[1]; | ||
| assert.equal(child.foo, 7); | ||
| assert.equal(child.bar, 7); | ||
| }); | ||
|
|
||
| test('child has base template and style', function() { | ||
| var f = fixture('basic'); | ||
| var base = f[0]; | ||
| var child = f[1]; | ||
|
|
||
| // Child template is the same as the base template. | ||
| assert.equal(child.shadowRoot.childNodes.length, child.shadowRoot.childNodes.length); | ||
| for (var i=0; i < child.shadowRoot.childNodes.length; i++) { | ||
| var childEl = child.shadowRoot.childNodes[i]; | ||
| var baseEl = child.shadowRoot.childNodes[i]; | ||
| assert.equal(childEl.innerHTML, baseEl.innerHTML); | ||
| } | ||
|
|
||
|
|
||
| // And it's something that we expect. | ||
| var code = child.shadowRoot.querySelector('code'); | ||
| assert.equal(code.innerHTML, 'foo = 5'); | ||
|
|
||
| // And the base style is the same. | ||
| assert.equal(getComputedStyle(base).color, getComputedStyle(child).color); | ||
| }); | ||
|
|
||
| test('child with properties has updated base template', function() { | ||
| var f = fixture('basic-with-attributes'); | ||
| var base = f[0]; | ||
| var child = f[1]; | ||
|
|
||
| // Child template is not the same as the base template. | ||
| assert.notEqual(child.shadowRoot.innerHTML, base.shadowRoot.innerHTML); | ||
|
|
||
| // And it's something that we expect. | ||
| var code = child.shadowRoot.querySelector('code'); | ||
| assert.equal(code.innerHTML, 'foo = 7'); | ||
| }); | ||
| }); | ||
|
|
||
| suite('ChildElement extends BaseElement and the template', function() { | ||
| test('child has base properties', function() { | ||
| var f = fixture('with-template'); | ||
| var child = f[1]; | ||
| assert.equal(child.foo, 5); | ||
| assert.equal(child.bar, 3); | ||
| }); | ||
|
|
||
| test('child has derived template and style', function() { | ||
| var f = fixture('with-template'); | ||
| var base = f[0]; | ||
| var child = f[1]; | ||
|
|
||
| // Child template is not the same as the base template. | ||
| assert.notEqual(child.shadowRoot.innerHTML, base.shadowRoot.innerHTML); | ||
|
|
||
| // And it's something that we expect. | ||
| assert.equal(child.shadowRoot.querySelector('code').innerHTML, 'foo = 5'); | ||
| assert.equal(child.shadowRoot.querySelector('div').innerHTML, 'child'); | ||
|
|
||
| // And the base style is the same. | ||
| assert.equal(getComputedStyle(base).color, getComputedStyle(child).color); | ||
| }); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |