Skip to content

Commit c8905f9

Browse files
author
Steven Orvell
committed
Fixes #2118: force element is to be lowercase: mixing case causes confusion and breaks style shimming for type extensions.
1 parent cb32751 commit c8905f9

9 files changed

+149
-3
lines changed

‎src/lib/dom-module.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
(function() {
44

55
var modules = {};
6+
var lcModules = {};
67

78
/**
89
* The `dom-module` element registers the dom it contains to the name given
@@ -46,6 +47,7 @@
4647
if (id) {
4748
this.id = id;
4849
modules[id] = this;
50+
lcModules[id.toLowerCase()] = this;
4951
}
5052
},
5153

@@ -59,7 +61,7 @@
5961
* at the specified `id`.
6062
*/
6163
import: function(id, selector) {
62-
var m = modules[id];
64+
var m = modules[id] || lcModules[id.toLowerCase()];
6365
if (!m) {
6466
// If polyfilling, a script can run before a dom-module element
6567
// is upgraded. We force the containing document to upgrade

‎src/micro/tag.html

+3
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@
2121
this.is = id;
2222
}
2323
}
24+
if (this.is) {
25+
this.is = this.is.toLowerCase();
26+
}
2427
}
2528

2629
});

‎test/runner.html

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
'unit/micro.html',
2121
'unit/unresolved.html',
2222
'unit/attributes.html',
23+
'unit/dom-module.html',
2324
'unit/async.html',
2425
'unit/behaviors.html',
2526
'unit/template.html',

‎test/unit/dom-module-elements.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<dom-module id="import">import</dom-module>
2+
3+
<dom-module id="element"><div>element</div></dom-module>
4+
5+
<dom-module id="case">case</dom-module>
6+
7+
<dom-module id="Case">Case</dom-module>

‎test/unit/dom-module.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
Code distributed by Google as part of the polymer project is also
9+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
-->
11+
<html>
12+
<head>
13+
<meta charset="utf-8">
14+
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
15+
<script src="../../../web-component-tester/browser.js"></script>
16+
<link rel="import" href="../../polymer.html">
17+
<link rel="import" href="dom-module-elements.html">
18+
</head>
19+
<body>
20+
21+
<dom-module id="foo">
22+
<div>foo</div>
23+
</dom-module>
24+
25+
<script>
26+
27+
suite('dom-module', function() {
28+
29+
test('import dom-module', function() {
30+
var i = Polymer.DomModule.import('import');
31+
assert.ok(i);
32+
assert.equal(i.textContent, 'import');
33+
var i2 = document.createElement('dom-module').import('import');
34+
assert.equal(i, i2);
35+
});
36+
37+
test('find elements in dom-module', function() {
38+
var e = Polymer.DomModule.import('element', 'div');
39+
assert.ok(e);
40+
assert.equal(e.textContent, 'element');
41+
});
42+
43+
test('find dom-module in main document', function() {
44+
var e = Polymer.DomModule.import('foo', 'div');
45+
assert.ok(e);
46+
assert.equal(e.textContent, 'foo');
47+
});
48+
49+
test('import mixed case modules', function() {
50+
assert.equal(Polymer.DomModule.import('case').textContent, 'case');
51+
assert.equal(Polymer.DomModule.import('Case').textContent, 'Case');
52+
});
53+
54+
});
55+
56+
</script>
57+
58+
</body>
59+
</html>

‎test/unit/micro-elements.html

+20-1
Original file line numberDiff line numberDiff line change
@@ -75,4 +75,23 @@
7575

7676
document.registerElement('x-extension', XInput);
7777

78-
</script>
78+
</script>
79+
80+
81+
<script>
82+
83+
Polymer({
84+
is: 'x-Mixed-Case'
85+
});
86+
87+
</script>
88+
89+
90+
<script>
91+
92+
Polymer({
93+
is: 'x-Mixed-Case-Button',
94+
extends: 'button'
95+
});
96+
97+
</script>

‎test/unit/micro.html

+8
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,14 @@
117117
assert.equal(lookup.import('my-module', 'div'), c);
118118
});
119119

120+
test('mixed-case is (element type) forced to lowercase', function() {
121+
var a = document.createElement('x-mixed-case');
122+
assert.equal(a.is, 'x-mixed-case');
123+
var b = document.createElement('button', 'x-mixed-case-button');
124+
assert.equal(b.is, 'x-mixed-case-button');
125+
assert.equal(b.getAttribute('is'), 'x-mixed-case-button');
126+
});
127+
120128
});
121129

122130
</script>

‎test/unit/styling-scoped-elements.html

+36
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,42 @@
207207
});
208208
</script>
209209

210+
<dom-module id="x-Mixed-Case">
211+
<style>
212+
:host {
213+
border: 13px solid beige;
214+
}
215+
216+
</style>
217+
<template>
218+
Mixed-Case
219+
</template>
220+
<script>
221+
Polymer({
222+
is: 'x-Mixed-Case'
223+
});
224+
</script>
225+
</dom-module>
226+
227+
<dom-module id="x-Mixed-Case-Button">
228+
<style>
229+
:host {
230+
border: 14px solid beige;
231+
}
232+
233+
</style>
234+
<template>
235+
Mixed-Case
236+
</template>
237+
<script>
238+
Polymer({
239+
is: 'x-Mixed-Case-Button',
240+
extends: 'button'
241+
});
242+
</script>
243+
</dom-module>
244+
245+
210246
<template id="dynamic">
211247
<div class="added">
212248
Added

‎test/unit/styling-scoped.html

+12-1
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,8 @@
199199

200200
test('styles shimmed in registration order', function() {
201201
var s$ = document.head.querySelectorAll('style[scope]');
202-
var expected = ['x-gchild', 'x-child2', 'x-styled', 'x-button', 'x-dynamic-scope'];
202+
var expected = ['x-gchild', 'x-child2', 'x-styled', 'x-button',
203+
'x-mixed-case', 'x-mixed-case-button', 'x-dynamic-scope'];
203204
var actual = [];
204205
for (var i=0; i<s$.length; i++) {
205206
actual.push(s$[i].getAttribute('scope'));
@@ -232,6 +233,16 @@
232233
s.serializeValueToAttribute('foo', 'class', scope);
233234
assert.include(scope.className, 'foo style-scope x-scope-class');
234235
});
236+
237+
test('mixed-case elements', function() {
238+
var x = document.createElement('x-mixed-case');
239+
document.body.appendChild(x);
240+
assertComputed(x, '13px');
241+
x = document.createElement('button', 'x-mixed-case-button');
242+
document.body.appendChild(x);
243+
assertComputed(x, '14px');
244+
245+
});
235246
});
236247

237248
});

0 commit comments

Comments
 (0)