Merge pull request #35 from Polymer/master

8/15 master -> stable

Author: dfreedm

conf/karma.conf.js

@@ -20,11 +20,14 @@ module.exports = function(karma) {
       {pattern: 'CustomElements/src/*.js', included: false},
       {pattern: 'HTMLImports/html-imports.js', included: false},
       {pattern: 'HTMLImports/src/*', included: false},
-      {pattern: 'mdv/mdv.js', included: false},
-      {pattern: 'mdv/src/*', included: false},
-      {pattern: 'mdv/third_party/**/*.js', included: false},
-      {pattern: 'mdv/util/*.js', included: false},
-      {pattern: 'mdv/tests/*.js', included: false},
+      {pattern: 'observe-js/src/observe.js', included: false},
+      {pattern: 'observe-js/tests/*.js', included: false},
+      {pattern: 'NodeBind/src/NodeBind.js', included: false},
+      {pattern: 'NodeBind/tests/*.js', included: false},
+      {pattern: 'TemplateInstances/src/TemplateInstances.js', included: false},
+      {pattern: 'TemplateInstances/tests/*.js', included: false},
+      {pattern: 'polymer-expressions/src/*', included: false},
+      {pattern: 'polymer-expressions/tests/*.js', included: false},
       {pattern: 'ShadowDOM/shadowdom.js', included: false},
       {pattern: 'ShadowDOM/src/**/*.js', included: false},
       {pattern: 'PointerEvents/pointerevents.js', included: false},

gruntfile.js

@@ -27,9 +27,11 @@ module.exports = function(grunt) {
     'wrappers/generic.js',
     'wrappers/ShadowRoot.js',
     'ShadowRenderer.js',
+    'wrappers/elements-with-form-property.js',
     'wrappers/Document.js',
     'wrappers/Window.js',
     'wrappers/MutationObserver.js',
+    'wrappers/Range.js',
     'wrappers/override-constructors.js'
   ];
   ShadowDOMPolyfill = ShadowDOMPolyfill.map(function(p) {
@@ -48,18 +50,13 @@ module.exports = function(grunt) {
   ];
 
   MDV = [
-    'third_party/ChangeSummary/change_summary.js',
-    'src/template_element.js',
-    'third_party/esprima/esprima.js',
-    'util/expression_syntax.js'
-  ];
-  MDV = MDV.map(function(p) {
-    return '../mdv/' + p;
-  });
-
-  MDV.push(
+    '../observe-js/src/observe.js',
+    '../NodeBind/src/NodeBind.js',
+    '../TemplateBinding/src/TemplateBinding.js',
+    '../polymer-expressions/third_party/esprima/esprima.js',
+    '../polymer-expressions/src/polymer-expressions.js',
     'src/patches-mdv.js'
-  );
+  ];
 
   PointerEvents = [
     'boot.js',
@@ -108,7 +105,8 @@ module.exports = function(grunt) {
     '../CustomElements/src/HTMLElementElement.js',
     '../CustomElements/src/Parser.js',
     '../CustomElements/src/boot.js',
-    'src/patches-custom-elements.js'
+    'src/patches-custom-elements.js',
+    'src/microtask.js'
   ];
 
   Main = [].concat(

platform.js

@@ -14,10 +14,10 @@ function processFlags(flags) {
     // use the minified build
     this.modules = ['platform.min.js'];
   } else {
-    // truthy value for any of these flags or failure to detect native
-    // shadowDOM results in polyfill
+    // truthy value for any of these flags, or failure to detect native
+    // ShadowDOM, results in polyfill
     flags.shadow = (flags.shadowdom || flags.shadow || flags.polyfill ||
-                    !HTMLElement.prototype.webkitCreateShadowRoot) && 'polyfill';
+      !HTMLElement.prototype.webkitCreateShadowRoot) && 'polyfill';
 
     var ShadowDOMNative = [
       'src/patches-shadowdom-native.js'
@@ -33,11 +33,15 @@ function processFlags(flags) {
       'src/lang.js',
       'src/dom.js',
       'src/template.js',
-      'src/inspector.js',
+      'src/inspector.js'
     ];
 
     var MDV = [
-      '../mdv/mdv.js',
+      '../observe-js/src/observe.js',
+      '../NodeBind/src/NodeBind.js',
+      '../TemplateBinding/src/TemplateBinding.js',
+      '../polymer-expressions/third_party/esprima/esprima.js',
+      '../polymer-expressions/src/polymer-expressions.js',
       'src/patches-mdv.js'
     ];
 
@@ -48,7 +52,8 @@ function processFlags(flags) {
     var WebElements = [
       '../HTMLImports/html-imports.js',
       '../CustomElements/custom-elements.js',
-      'src/patches-custom-elements.js'
+      'src/patches-custom-elements.js',
+      'src/microtask.js'
     ];
 
     // select ShadowDOM impl
@@ -78,10 +83,10 @@ var script = document.querySelector('script[src*="' + thisFile + '"]');
 var src = script.attributes.src.value;
 var basePath = src.slice(0, src.indexOf(thisFile));
 
-if (!window.Loader) {
+if (!window.PolymerLoader) {
   var path = basePath + 'tools/loader/loader.js';
   document.write('<script src="' + path + '"></script>');
 }
-document.write('<script>Loader.load("' + scopeName + '")</script>');
+document.write('<script>PolymerLoader.load("' + scopeName + '")</script>');
 
 })();

src/ShadowCSS.js

@@ -174,8 +174,8 @@ var ShadowCSS = {
     def.rootStyles = styles;
     def.scopeStyles = def.rootStyles;
     var extendee = this.registry[def.extendsName];
-    if (extendee) {
-      def.scopeStyles = def.scopeStyles.concat(extendee.scopeStyles);
+    if (extendee && root.querySelector('shadow')) {
+      def.scopeStyles = extendee.scopeStyles.concat(def.scopeStyles);
     }
     return def;
   },

src/microtask.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2013 The Polymer Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+(function(scope) {
+
+var iterations = 0;
+var callbacks = [];
+var twiddle = document.createTextNode('');
+function eomt(callback) {
+  twiddle.textContent = iterations++;
+  callbacks.push(callback);
+}
+var MO = window.MutationObserver || window.JsMutationObserver;
+new MO(function() {
+  while (callbacks.length) {
+    callbacks.shift()();
+  }
+}).observe(twiddle, {characterData: true});
+
+// exports
+scope.endOfMicrotask = eomt;
+
+})(window.Platform);
+

src/patches-mdv.js

@@ -20,7 +20,7 @@ function dirtyCheck() {
 
 // call notifyChanges in Model scope
 function check() {
-  Platform.performMicrotaskCheckpoint();
+  scope.endOfMicrotask(Platform.performMicrotaskCheckpoint);
 };
 
 var dirtyCheckPollInterval = 125;
@@ -41,7 +41,6 @@ window.addEventListener('WebComponentsReady', function() {
 });
 
 // exports
-
 scope.flush = dirtyCheck;
 
 // deprecated

test/html/includes/import-file.html

@@ -1,16 +1,3 @@
-<!DOCTYPE html>
-<!--
-Copyright 2013 The Polymer Authors. All rights reserved.
-Use of this source code is governed by a BSD-style
-license that can be found in the LICENSE file.
--->
-<element name='import-test'>
-  <script>
-    this.register({prototype: {
-      ready: true
-    }})
-  </script>
-</element>
 <script>
   window.importTest = true;
 </script>

test/html/mdv-shadow.html

@@ -10,11 +10,24 @@
   <title>MDV + ShadowDOM Polyfill Integration Tests</title>
   <link rel="stylesheet" href="../../node_modules/mocha/mocha.css">
   <script src="../../../ShadowDOM/shadowdom.js"></script>
+  <script>
+    var parserHasNativeTemplate = function() {
+      var div = document.createElement('div');
+      div.innerHTML = '<table><template>';
+      return div.firstChild.firstChild &&
+             div.firstChild.firstChild.tagName == 'TEMPLATE';
+    }();
+
+    var forceCollectObservers = true;
+  </script>
   <script src="../../node_modules/mocha/mocha.js"></script>
   <script src="../../node_modules/chai/chai.js"></script>
   <script src="../../tools/test/htmltest.js"></script>
-  <script src="../../../mdv/tests/setup.js"></script>
-  <script src="../../../mdv/mdv.js"></script>
+  <script src="../../../observe-js/src/observe.js"></script>
+  <script src="../../../NodeBind/src/NodeBind.js"></script>
+  <script src="../../../polymer-expressions/src/polymer-expressions.js"></script>
+  <script src="../../../polymer-expressions/third_party/esprima/esprima.js"></script>
+  <script src="../../../TemplateInstances/src/TemplateInstances.js"></script>
 </head>
 <body>
   <script>
@@ -27,9 +40,8 @@
     var assert = chai.assert;
 
   </script>
-  <!-- <script src="../../../mdv/tests/node_bindings.js"></script> -->
-  <script src="../../../mdv/tests/template_element.js"></script>
-  <script src="../../../mdv/tests/expression_syntax.js"></script>
+  <script src="../../../polymer-expressions/tests/tests.js"></script>
+  <script src="../../../TemplateInstances/tests/tests.js"></script>
   <div id="mocha"></div>
   <script>
     var unwrap = ShadowDOMPolyfill.unwrap;

test/html/smoke.html

@@ -19,25 +19,25 @@
       var assert = chai.assert;
       window.addEventListener('WebComponentsReady', function() {
         var p = Object.create(HTMLElement.prototype);
-        p.readyCallback = function() {
+        p.createdCallback = function() {
           this.textContent = 'custom!';
         }
         document.register('x-foo', {prototype: p});
         //
         var p = Object.create(HTMLButtonElement.prototype);
-        p.readyCallback = function() {
+        p.createdCallback = function() {
           this.textContent = 'custom!';
         }
         document.register('x-baz', {prototype: p, extends: 'button'});
-        document.body.appendChild(document.createElement('x-baz')).id = 'baz2';
+        document.body.appendChild(document.createElement('button', 'x-baz')).id = 'baz2';
         //
         assert.equal(document.querySelector('x-foo').textContent, 'custom!',
           'x-foo must have custom text');
         //
         assert.equal(document.querySelector('[is=x-baz]').textContent,
           'custom!', 'button is="x-baz" must have custom text');
         assert.equal(document.querySelector('#baz2').textContent, 'custom!',
-          'x-baz must have custom text');
+          'button is=x-baz can be created via document.createElement(button, x-baz)');
         //
         done();
       });

test/html/styling/host.html

@@ -88,19 +88,31 @@
       @host {
         * {
           padding: 20px;
+          border-top-color: brown;
         }
       }
     </style>
     <shadow></shadow>
     <div>padding: 20px</div>
   </template>
 
+  <template id="x-zim2">
+    <style>
+      @host {
+        * {
+          padding: 20px;
+        }
+      }
+    </style>
+    <div>padding: 20px</div>
+  </template>
 
   <script>
     XFoo = register('x-foo', '', HTMLElement.prototype, ['x-foo']);
     XBar = register('x-bar', 'x-foo', XFoo.prototype, ['x-foo', 'x-bar']);
     XZot = register('x-zot', 'x-bar', XBar.prototype, ['x-foo', 'x-bar', 'x-zot']);
     XZim = register('x-zim', 'x-zot', XZot.prototype, ['x-foo', 'x-bar', 'x-zot', 'x-zim']);
+    XZim2 = register('x-zim2', 'x-zot', XZot.prototype, ['x-foo', 'x-bar', 'x-zot', 'x-zim2']);
     register('x-scope', '', HTMLElement.prototype, ['x-scope']);
     register('x-button', '', HTMLButtonElement.prototype, ['x-button']);
   </script>
@@ -128,6 +140,9 @@ <h4>Expected: red background with black text and orange border</h4>
 
   <h4>Expected: red background with black text and orange border and 20px padding</h4>
   <x-zim></x-zim>
+
+  <h4>Expected: 20px padding</h4>
+  <x-zim2></x-zim2>
 
   <script>
     document.addEventListener('WebComponentsReady', function() {
@@ -168,18 +183,32 @@ <h4>Expected: red background with black text and orange border and 20px padding<
       chai.assert.equal(zimStyle.backgroundColor, 'rgb(255, 0, 0)', 
         '@host styles are inherited (backgroundColor)');
 
-      chai.assert.equal(zimStyle.borderTopColor, 'rgb(255, 165, 0)', 
+      chai.assert.equal(zimStyle.borderTopColor, 'rgb(165, 42, 42)', 
         '@host styles are combined with inherited @host styles (borderTopColor)');
       chai.assert.equal(zimStyle.borderBottomColor, 'rgb(255, 165, 0)', 
         '@host styles are combined with inherited @host styles (borderBottomColor)');
       chai.assert.equal(zimStyle.color, 'rgb(0, 0, 0)',
         '@host styles are applied to given selector (color)');
       chai.assert.equal(zimStyle.paddingTop, '20px',
         '@host styles are loaded via external sheet in import (paddingTop)');
-        chai.assert.equal(zimStyle.paddingLeft, '20px',
+      chai.assert.equal(zimStyle.paddingLeft, '20px',
         '@host styles are loaded via external sheet in import (paddingLeft)');
       zim.offsetHeight;
+
+      var zim2 = document.querySelector('x-zim2');
+      var zimStyle2 = getComputedStyle(zim2);
+      chai.assert.equal(zimStyle2.borderTopColor, 'rgb(0, 0, 0)', 
+        '@host styles are not combined without <shadow> (borderTopColor)');
+      chai.assert.equal(zimStyle2.borderBottomColor, 'rgb(0, 0, 0)', 
+        '@host styles are not combined without <shadow> (borderBottomColor)');
+      chai.assert.equal(zimStyle2.paddingTop, '20px',
+        '@host styles are loaded via external sheet in import (paddingTop)');
+      chai.assert.equal(zimStyle2.paddingLeft, '20px',
+        '@host styles are loaded via external sheet in import (paddingLeft)');
+
       done();
+
+
     });
   </script>
 </body>

test/html/styling/register.js

@@ -6,7 +6,7 @@
     }
     var ctor = document.register(name, {
       prototype: Object.create(proto, {
-        readyCallback: {
+        createdCallback: {
           value: function() {
             if (templates) {
               templates.forEach(function(t) {
@@ -24,12 +24,13 @@
   }
 
   function shim(templates, name, extnds) {
-    templates.forEach(function(templateName) {
-      var template = document.querySelector('#' + templateName);
+    if (templates) {
+      var id = templates[templates.length - 1];
+      var template = document.querySelector('#' + id);
       if (template) {
-        Platform.ShadowCSS.shimStyling(template.content, name, extnds);
-      }
-    });
+          Platform.ShadowCSS.shimStyling(template.content, name, extnds);
+        }
+    }
   }
 
   scope.register = register;

test/html/web-components.html

@@ -21,8 +21,6 @@
       window.addEventListener('WebComponentsReady', function() {
         chai.assert.ok(window.importsOk, 'WebComponentsReady without HTMLImportsLoaded');
         chai.assert.ok(window.importTest, 'import failed to set global value');
-        var elt = document.createElement('import-test');
-        chai.assert.ok(elt.ready, 'import failed to register custom element');
         done();
       });
     </script>

test/js/tests.js

@@ -15,8 +15,8 @@ htmlSuite('integration', function() {
   htmlTest('html/web-components.html');
   htmlTest('html/smoke.html');
   htmlTest('html/smoke.html?shadow=polyfill');
-  htmlTest('html/strawkit.html');
-  htmlTest('html/strawkit.html?shadow=polyfill');
+  //htmlTest('html/strawkit.html');
+  //htmlTest('html/strawkit.html?shadow=polyfill');
   htmlTest('html/mdv-shadow.html');
 	//htmlTest('html/html-import-sandbox.html');
 });