Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Fixes #2118: force element is to be lowercase: mixing case causes c…
…onfusion and breaks style shimming for type extensions.
  • Loading branch information
Steven Orvell committed Jul 24, 2015
1 parent cb32751 commit c8905f9
Show file tree
Hide file tree
Showing 9 changed files with 149 additions and 3 deletions.
4 changes: 3 additions & 1 deletion src/lib/dom-module.html
Expand Up @@ -3,6 +3,7 @@
(function() {

var modules = {};
var lcModules = {};

/**
* The `dom-module` element registers the dom it contains to the name given
Expand Down Expand Up @@ -46,6 +47,7 @@
if (id) {
this.id = id;
modules[id] = this;
lcModules[id.toLowerCase()] = this;
}
},

Expand All @@ -59,7 +61,7 @@
* at the specified `id`.
*/
import: function(id, selector) {
var m = modules[id];
var m = modules[id] || lcModules[id.toLowerCase()];
if (!m) {
// If polyfilling, a script can run before a dom-module element
// is upgraded. We force the containing document to upgrade
Expand Down
3 changes: 3 additions & 0 deletions src/micro/tag.html
Expand Up @@ -21,6 +21,9 @@
this.is = id;
}
}
if (this.is) {
this.is = this.is.toLowerCase();
}
}

});
Expand Down
1 change: 1 addition & 0 deletions test/runner.html
Expand Up @@ -20,6 +20,7 @@
'unit/micro.html',
'unit/unresolved.html',
'unit/attributes.html',
'unit/dom-module.html',
'unit/async.html',
'unit/behaviors.html',
'unit/template.html',
Expand Down
7 changes: 7 additions & 0 deletions test/unit/dom-module-elements.html
@@ -0,0 +1,7 @@
<dom-module id="import">import</dom-module>

<dom-module id="element"><div>element</div></dom-module>

<dom-module id="case">case</dom-module>

<dom-module id="Case">Case</dom-module>
59 changes: 59 additions & 0 deletions test/unit/dom-module.html
@@ -0,0 +1,59 @@
<!doctype html>
<!--
@license
Copyright (c) 2014 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">
<link rel="import" href="dom-module-elements.html">
</head>
<body>

<dom-module id="foo">
<div>foo</div>
</dom-module>

<script>

suite('dom-module', function() {

test('import dom-module', function() {
var i = Polymer.DomModule.import('import');
assert.ok(i);
assert.equal(i.textContent, 'import');
var i2 = document.createElement('dom-module').import('import');
assert.equal(i, i2);
});

test('find elements in dom-module', function() {
var e = Polymer.DomModule.import('element', 'div');
assert.ok(e);
assert.equal(e.textContent, 'element');
});

test('find dom-module in main document', function() {
var e = Polymer.DomModule.import('foo', 'div');
assert.ok(e);
assert.equal(e.textContent, 'foo');
});

test('import mixed case modules', function() {
assert.equal(Polymer.DomModule.import('case').textContent, 'case');
assert.equal(Polymer.DomModule.import('Case').textContent, 'Case');
});

});

</script>

</body>
</html>
21 changes: 20 additions & 1 deletion test/unit/micro-elements.html
Expand Up @@ -75,4 +75,23 @@

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

</script>
</script>


<script>

Polymer({
is: 'x-Mixed-Case'
});

</script>


<script>

Polymer({
is: 'x-Mixed-Case-Button',
extends: 'button'
});

</script>
8 changes: 8 additions & 0 deletions test/unit/micro.html
Expand Up @@ -117,6 +117,14 @@
assert.equal(lookup.import('my-module', 'div'), c);
});

test('mixed-case is (element type) forced to lowercase', function() {
var a = document.createElement('x-mixed-case');
assert.equal(a.is, 'x-mixed-case');
var b = document.createElement('button', 'x-mixed-case-button');
assert.equal(b.is, 'x-mixed-case-button');
assert.equal(b.getAttribute('is'), 'x-mixed-case-button');
});

});

</script>
Expand Down
36 changes: 36 additions & 0 deletions test/unit/styling-scoped-elements.html
Expand Up @@ -207,6 +207,42 @@
});
</script>

<dom-module id="x-Mixed-Case">
<style>
:host {
border: 13px solid beige;
}

</style>
<template>
Mixed-Case
</template>
<script>
Polymer({
is: 'x-Mixed-Case'
});
</script>
</dom-module>

<dom-module id="x-Mixed-Case-Button">
<style>
:host {
border: 14px solid beige;
}

</style>
<template>
Mixed-Case
</template>
<script>
Polymer({
is: 'x-Mixed-Case-Button',
extends: 'button'
});
</script>
</dom-module>


<template id="dynamic">
<div class="added">
Added
Expand Down
13 changes: 12 additions & 1 deletion test/unit/styling-scoped.html
Expand Up @@ -199,7 +199,8 @@

test('styles shimmed in registration order', function() {
var s$ = document.head.querySelectorAll('style[scope]');
var expected = ['x-gchild', 'x-child2', 'x-styled', 'x-button', 'x-dynamic-scope'];
var expected = ['x-gchild', 'x-child2', 'x-styled', 'x-button',
'x-mixed-case', 'x-mixed-case-button', 'x-dynamic-scope'];
var actual = [];
for (var i=0; i<s$.length; i++) {
actual.push(s$[i].getAttribute('scope'));
Expand Down Expand Up @@ -232,6 +233,16 @@
s.serializeValueToAttribute('foo', 'class', scope);
assert.include(scope.className, 'foo style-scope x-scope-class');
});

test('mixed-case elements', function() {
var x = document.createElement('x-mixed-case');
document.body.appendChild(x);
assertComputed(x, '13px');
x = document.createElement('button', 'x-mixed-case-button');
document.body.appendChild(x);
assertComputed(x, '14px');

});
});

});
Expand Down

0 comments on commit c8905f9

Please sign in to comment.