Skip to content

Commit

Permalink
Rename html-fn to html-tag
Browse files Browse the repository at this point in the history
Add tests
Add a `Polymer.html = Polymer.html` line to `polymer.html` and
`polymer-element.html` for modulizer exporting in Polymer 3.
  • Loading branch information
dfreedm committed Dec 7, 2017
1 parent 5c91985 commit 02c06aa
Show file tree
Hide file tree
Showing 7 changed files with 128 additions and 4 deletions.
1 change: 0 additions & 1 deletion lib/mixins/element-mixin.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
<link rel="import" href="../utils/case-map.html">
<link rel="import" href="../utils/style-gather.html">
<link rel="import" href="../utils/resolve-url.html">
<link rel="import" href="../utils/html-fn.html">
<link rel="import" href="../elements/dom-module.html">
<link rel="import" href="property-effects.html">

Expand Down
File renamed without changes.
5 changes: 5 additions & 0 deletions polymer-element.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="lib/mixins/element-mixin.html">
<!-- import html-tag to export html -->
<link rel="import" href="lib/utils/html-tag.html">
<script>
(function() {
'use strict';
Expand Down Expand Up @@ -35,5 +37,8 @@
* @extends {HTMLElement}
*/
Polymer.Element = Element;

// NOTE: this is here for modulizer to export `html` for the module version of this file
Polymer.html = Polymer.html;
})();
</script>
5 changes: 5 additions & 0 deletions polymer.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,12 @@
<link rel="import" href="lib/elements/custom-style.html">
<!-- bc behaviors -->
<link rel="import" href="lib/legacy/mutable-data-behavior.html">
<!-- import html-tag to export html -->
<link rel="import" href="lib/util/html-tag.html">
<script>
// bc
Polymer.Base = Polymer.LegacyElementMixin(HTMLElement).prototype;

// NOTE: this is here for modulizer to export `html` for the module version of this file
Polymer.html = Polymer.html;
</script>
3 changes: 2 additions & 1 deletion test/runner.html
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@
'unit/render-status.html',
'unit/dir.html',
'unit/shady-unscoped-style.html',
'unit/html-tag.html'
// 'unit/multi-style.html'
];

Expand Down Expand Up @@ -115,7 +116,7 @@
// ce + sd becomes a single test iteration.
matrix.push('wc-ce=true&wc-shadydom=true');
}

// economize testing by testing css shimming
// only against 1 environment (native or polyfill).
if (window.CSS && CSS.supports && CSS.supports('box-shadow', '0 0 0 var(--foo)')) {
Expand Down
4 changes: 2 additions & 2 deletions test/smoke/html-fn.html → test/smoke/html-tag.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<!--
<!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
Expand All @@ -7,7 +8,6 @@
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
-->
<!DOCTYPE html>
<html>
<head>
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
Expand Down
114 changes: 114 additions & 0 deletions test/unit/html-tag.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<!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="../../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../../web-component-tester/browser.js"></script>
<link rel="import" href="../../polymer.html">
</head>
<body>
<script>
suite('html function', function() {
test('html makes an HTML template', function() {
let t = Polymer.html``;
assert.instanceOf(t, HTMLTemplateElement);
});
test('template output has elements', function() {
let t = Polymer.html`<div><span></span></div><!-- hi -->`;
assert(t.content.querySelector('div'));
assert(t.content.querySelector('span'));
assert.instanceOf(t.content.lastChild, Comment);
});
test('escaping works as expected', function() {
let t = Polymer.html`<span>\f\o\o</span>`;
assert.equal(t.innerHTML, '<span>\\f\\o\\o</span>');
});
test('variables work', function() {
let a = 3;
let b = 'foo';
let t = Polymer.html`<div>${a} ${b}</div>`;
let inst = document.createElement('div');
inst.appendChild(t.content.cloneNode(true));
assert.equal(inst.textContent, `${a} ${b}`);
});
test('template variables only include the template contents', function() {
let t1 = Polymer.html`<div></div>`;
let t2 = Polymer.html`<span>${t1}</span>`;
assert.equal(t2.innerHTML, '<span><div></div></span>');
});
});
suite('Polymer + html fn', function() {
suiteSetup(function() {

class HtmlFn extends Polymer.Element {
static get is() {return 'html-fn';}
static get template() {
return Polymer.html`
<style>
:host {
display: block;
}
</style>
<div id="child">
[[databoundProperty]]
</div>
`;
}
static get properties() {
return {
databoundProperty: String
};
}
ready() {
super.ready();
this.databoundProperty = 'first';
}
}

customElements.define(HtmlFn.is, HtmlFn);

class HtmlFnSub extends HtmlFn {
static get is() {return 'html-fn-sub';}
static get template() {
return Polymer.html`
<div id="super">
${super.template}
</div>
`;
}
ready() {
super.ready();
this.databoundProperty = 'second';
}
}

customElements.define(HtmlFnSub.is, HtmlFnSub);
});

test('Polymer elements can use html fn', function () {
let el = document.createElement('html-fn');
document.body.appendChild(el);
assert(el.shadowRoot);
assert.equal(el.$.child.textContent.trim(), 'first');
});

test('subclass elements can embed the superclass template', function() {
let el = document.createElement('html-fn-sub');
document.body.appendChild(el);
assert(el.$.super);
assert(el.$.child);
assert.equal(el.$.child.textContent.trim(), 'second');
});
});
</script>
</body>
</html>

0 comments on commit 02c06aa

Please sign in to comment.