Fix some tests on Safari/FF.

custom-style hook: do not wait for whenDefined because it's a race condition when used with HTMLImports polypill.

src/styling/custom-style.html

@@ -12,12 +12,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 <script>
 (function() {
   'use strict';
-  var ce = window.customElements;
-  var tag = 'custom-style';
-  var attr = 'include';
-
-  ce.whenDefined(tag).then(function() {
-    var CustomStyle = ce.get(tag);
+  // NOTE: CustomStyle must be loaded prior to loading Polymer.
+  // To support asynchronous loading of custom-style, an async import
+  // can be made that loads custom-style and then polymer.
+  if (window.CustomStyle) {
+    var attr = 'include';
     CustomStyle.processHook = function(style) {
       var include = style.getAttribute(attr);
       if (!include) {
@@ -26,6 +25,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       style.removeAttribute(attr);
       style.textContent = Polymer.StyleGather.cssFromModules(include) + style.textContent;
     };
-  });
+  }
+
 })();
 </script>

test/unit/custom-style-async-import.html

@@ -1,11 +1,11 @@
 <custom-style>
-<style is="custom-style">
-  :root {
-    --cs-blue: {
-      border : 8px solid blue;
-    };
-  }
-</style>
+  <style is="custom-style">
+    html {
+      --cs-blue: {
+        border : 8px solid blue;
+      };
+    }
+  </style>
 </custom-style>
 <dom-module id="x-client">
   <template>

test/unit/custom-style-import.html

@@ -1,7 +1,7 @@
 <dom-module id="shared-style">
   <template>
     <style>
-      :root {
+      html {
         --import-var: 3px solid orange;
       }
     </style>
@@ -22,7 +22,7 @@
 
 <custom-style>
 <style is="custom-style" include="shared-style style-import">
-  :root {
+  html {
 
     --import-mixin: {
       border: 4px solid blue;

test/unit/custom-style.html

@@ -24,42 +24,22 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       display: block;
     }
 
-    x-foo::shadow #bar2 {
-      border: 2px solid orange;
-      display: block;
-    }
-
-    x-foo::shadow #bar2::shadow #baz {
-      border: 3px solid navy;
-      display: block;
-    }
-
-    x-foo /deep/ #bar3 {
-      border: 4px solid orange;
-      display: block;
-    }
-
-    x-foo /deep/ #bar3 /deep/ #baz {
-      border: 5px solid navy;
-      display: block;
-    }
-
-    :root {
+    html {
       --bag2: {
         border: 12px solid beige;
       };
     }
 
-    :root {
+    html {
       --red-text : {
         color : red;
       };
     }
 
-    :root{--blue-text:{color:#0000ff};--dummy-mixin:{};--bold-text:{font-weight:700}}
+    html{--blue-text:{color:#0000ff};--dummy-mixin:{};--bold-text:{font-weight:700}}
 
 
-    :root {
+    html {
 
       --italic: italic;
 
@@ -338,16 +318,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         assertComputed(xFoo.$.bar1, '0px');
       });
 
-      test.skip('::shadow styles applied', function() {
-        assertComputed(xFoo.$.bar2, '2px');
-        assertComputed(xFoo.$.bar2.$.baz, '3px');
-      });
-
-      test.skip('/deep/ styles applied', function() {
-        assertComputed(xFoo.$.bar3, '4px');
-        assertComputed(xFoo.$.bar3.$.baz, '5px');
-      });
-
       test('custom properties registered as defaults', function() {
         var propsToCheck = ['--italic'];
         if (ShadyCSS.nativeCss || stylesBuilt) {
@@ -432,10 +402,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         assert.include(url, 'sub/google.png');
       });
 
-      test('property in /deep/ rule applied via document scope inheritance', function() {
-        assertComputed(xFoo.$.deep, '6px');
-      });
-
       test.skip('imperative custom style', function() {
         var style = document.createElement('style', 'custom-style');
         style.textContent = '.zonk { border: 13px solid tomato;}';

test/unit/inheritance.html

@@ -31,6 +31,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     </template>
 
     <script>
+    HTMLImports.whenReady(function() {
       class BaseEl extends Polymer.Element {
         static get is() { return 'base-el' }
         static get config() {
@@ -40,11 +41,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         }
       }
       customElements.define(BaseEl.is, BaseEl);
+      window.BaseEl = BaseEl;
+    });
     </script>
   </dom-module>
 
   <dom-module id="child-el">
     <script>
+    HTMLImports.whenReady(function() {
       class ChildEl extends BaseEl {
         static get is() { return 'child-el' }
         static get config() {
@@ -54,11 +58,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         }
       }
       customElements.define(ChildEl.is, ChildEl);
+      window.ChildEl = ChildEl;
+    });
     </script>
   </dom-module>
 
   <dom-module id="grand-child-el">
     <script>
+    HTMLImports.whenReady(function() {
       class GrandChildEl extends ChildEl {
         static get is() { return 'grand-child-el' }
         static get config() {
@@ -68,11 +75,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         }
       }
       customElements.define(GrandChildEl.is, GrandChildEl);
+      window.GrandChildEl = GrandChildEl;
+    });
     </script>
   </dom-module>
 
   <dom-module id="child-el-with-template">
     <script>
+    HTMLImports.whenReady(function() {
       class ChildElWithTemplate extends GrandChildEl {
         static get is() { return 'child-el-with-template' }
         static get config() {
@@ -92,6 +102,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         }
       }
       customElements.define(ChildElWithTemplate.is, ChildElWithTemplate);
+      window.ChildElWithTemplate = ChildElWithTemplate;
+    });
     </script>
   </dom-module>