Fixes #2118: force element `is` to be lowercase: mixing case causes c…

…onfusion and breaks style shimming for type extensions.
Polymer · c8905f900a2b17bc9cc9c9a5b873763efd2072bf · sorvell committed Jul 23, 2015 · Jul 23, 2015 · c8905f9
1 parent cb32751
commit c8905f900a2b17bc9cc9c9a5b873763efd2072bf
@@ -3,6 +3,7 @@
 (function() {
 
   var modules = {};
+  var lcModules = {};
 
   /**
    * The `dom-module` element registers the dom it contains to the name given
@@ -46,6 +47,7 @@
       if (id) {
         this.id = id;
         modules[id] = this;
+        lcModules[id.toLowerCase()] = this;
       }
     },
 
@@ -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
@@ -21,6 +21,9 @@
           this.is = id;
         }
       }
+      if (this.is) {
+        this.is = this.is.toLowerCase();
+      }
     }
 
   });
@@ -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',
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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
@@ -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'));
@@ -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');
+       
+      });
     });
   
 });