Skip to content
This repository was archived by the owner on Oct 26, 2021. It is now read-only.

Commit 1d0c47f

Browse files
TimvdLippeTimvdLippe
committed
Merge branch 'master' into reenable-typescript
2 parents a9ec393 + 7f4b0c9 commit 1d0c47f

File tree

7 files changed

+155
-15
lines changed

7 files changed

+155
-15
lines changed

‎custom-elements.min.js‎

Lines changed: 11 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎custom-elements.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@webcomponents/custom-elements",
3-
"version": "1.0.9",
3+
"version": "1.1.1",
44
"description": "HTML Custom Elements Polyfill",
55
"main": "custom-elements.min.js",
66
"keywords": [

‎src/Patch/Element.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,8 @@ export default function(internals) {
100100
const content = isTemplate ? (/** @type {!HTMLTemplateElement} */
101101
(this)).content : this;
102102
/** @type {!Node} */
103-
const rawElement = Native.Document_createElement.call(document,
104-
this.localName);
103+
const rawElement = Native.Document_createElementNS.call(document,
104+
this.namespaceURI, this.localName);
105105
rawElement.innerHTML = assignedValue;
106106

107107
while (content.childNodes.length > 0) {

‎tests/html/Element/innerHTML.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,15 @@
44
<title>Element#innerHTML</title>
55
<script>
66
(window.customElements = window.customElements || {}).forcePolyfill = true;
7+
// Capture these before loading the custom elements polyfill so that their
8+
// behavior can be checked before running tests for `svg.innerHTML`.
9+
NATIVE = {
10+
createElementNS:
11+
Document.prototype.createElementNS,
12+
innerHTML:
13+
(Object.getOwnPropertyDescriptor(window.Element.prototype, 'innerHTML') ||
14+
Object.getOwnPropertyDescriptor(window.HTMLElement.prototype, 'innerHTML')).set
15+
};
716
</script>
817
<script src="../../../../es6-promise/dist/es6-promise.auto.min.js"></script>
918
<script src="../../../../web-component-tester/browser.js"></script>
@@ -163,6 +172,26 @@
163172

164173
document.body.removeChild(div);
165174
});
175+
176+
const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
177+
const circleText = '<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />';
178+
179+
const canSVGInnerHTML = (function() {
180+
// Edge 14 svg.innerHTML is broken even without the polyfill
181+
const svg = NATIVE.createElementNS.call(document, SVG_NAMESPACE, 'svg');
182+
NATIVE.innerHTML.call(svg, circleText);
183+
return svg.querySelector('circle') instanceof SVGCircleElement;
184+
})();
185+
186+
test('svg innerHTML', function() {
187+
if (!canSVGInnerHTML) {
188+
this.skip();
189+
}
190+
const svg = document.createElementNS(SVG_NAMESPACE, 'svg');
191+
svg.innerHTML = circleText;
192+
const circle = svg.querySelector('circle');
193+
assert.isTrue(circle instanceof SVGCircleElement, `Expected ${circle} to be a circle, but was "${typeof circle}" instead`);
194+
});
166195
});
167196
</script>
168197
</body>

‎tests/html/Node/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,6 @@
77
'./cloneNode.html',
88
'./removeChild.html',
99
'./replaceChild.html',
10+
'./textContent.html',
1011
]);
1112
</script>

‎tests/html/Node/textContent.html‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Node#textContent</title>
5+
<script>
6+
(window.customElements = window.customElements || {}).forcePolyfill = true;
7+
</script>
8+
<script src="../../../../es6-promise/dist/es6-promise.auto.min.js"></script>
9+
<script src="../../../../web-component-tester/browser.js"></script>
10+
<script src="../../../custom-elements.min.js"></script>
11+
</head>
12+
<body>
13+
<script>
14+
function generateLocalName() {
15+
return 'test-element-' + Math.random().toString(32).substring(2);
16+
}
17+
18+
function defineWithLocalName(localName) {
19+
customElements.define(localName, class extends HTMLElement {
20+
constructor() {
21+
super();
22+
this.constructed = true;
23+
this.connectedCallbackCount = 0;
24+
this.disconnectedCallbackCount = 0;
25+
}
26+
27+
connectedCallback() {
28+
this.connectedCallbackCount++;
29+
}
30+
31+
disconnectedCallback() {
32+
this.disconnectedCallbackCount++;
33+
}
34+
});
35+
}
36+
37+
suite('Custom element descendants of the context element are disconnected when setting `textContent`.', function() {
38+
let localName1;
39+
let localName2;
40+
let div;
41+
let element1;
42+
let element2;
43+
44+
setup(function() {
45+
localName1 = generateLocalName();
46+
localName2 = generateLocalName();
47+
defineWithLocalName(localName1);
48+
defineWithLocalName(localName2);
49+
50+
div = document.createElement('div');
51+
element1 = document.createElement(localName1);
52+
element2 = document.createElement(localName2);
53+
div.appendChild(element1);
54+
element1.appendChild(element2);
55+
56+
assert.equal(div.childNodes.length, 1);
57+
58+
assert.equal(element1.connectedCallbackCount, 0);
59+
assert.equal(element1.disconnectedCallbackCount, 0);
60+
assert.equal(element1.childNodes.length, 1);
61+
62+
assert.equal(element2.connectedCallbackCount, 0);
63+
assert.equal(element2.disconnectedCallbackCount, 0);
64+
assert.equal(element2.childNodes.length, 0);
65+
});
66+
67+
test('Disconnected context element', function() {
68+
div.textContent = "Replaced";
69+
70+
// `div` only has one childNode, the textNodes
71+
assert.equal(div.childNodes.length, 1);
72+
assert.notEqual(element1.parentNode, div);
73+
74+
// `div` was disconnected, no callbacks were called.
75+
assert.equal(element1.connectedCallbackCount, 0);
76+
assert.equal(element1.disconnectedCallbackCount, 0);
77+
78+
assert.equal(element2.connectedCallbackCount, 0);
79+
assert.equal(element2.disconnectedCallbackCount, 0);
80+
});
81+
82+
test('Connected context element', function() {
83+
document.body.appendChild(div);
84+
85+
assert.equal(div.childNodes.length, 1);
86+
// `element1` was connected.
87+
assert.equal(element1.connectedCallbackCount, 1);
88+
assert.equal(element1.disconnectedCallbackCount, 0);
89+
// `element2` was connected.
90+
assert.equal(element2.connectedCallbackCount, 1);
91+
assert.equal(element2.disconnectedCallbackCount, 0);
92+
93+
div.textContent = "Replaced";
94+
95+
// `div` only has one childNode, the textNodes
96+
assert.equal(div.childNodes.length, 1);
97+
assert.notEqual(element1.parentNode, div);
98+
// `element1` was disconnected.
99+
assert.equal(element1.connectedCallbackCount, 1);
100+
assert.equal(element1.disconnectedCallbackCount, 1);
101+
// `element2` was disconnected.
102+
assert.equal(element2.connectedCallbackCount, 1);
103+
assert.equal(element2.disconnectedCallbackCount, 1);
104+
105+
document.body.removeChild(div);
106+
});
107+
});
108+
</script>
109+
</body>
110+
</html>

0 commit comments

Comments
 (0)