Fix custom-style-late tests

The included element was never upgrading because it is an extension element, and CustomStyleInterface boots up async due to webcomponents/shadycss@33512fc and misses the resync. This is solved by making a real element. Also, this test wasn't really "late", so the `<custom-style>` is asynchronous now Fixes #4501
Polymer · Apr 6, 2017 · caafef7 · caafef7
1 parent 7836e6c
commit caafef7
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 37 deletions.
diff --git a/test/unit/custom-style-late-import.html b/test/unit/custom-style-late-import.html
diff --git a/test/unit/custom-style-late.html b/test/unit/custom-style-late.html
@@ -14,19 +14,48 @@
   <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="custom-style-late-import.html">
-
 </head>
 <body>
-  <input id="input" is="x-input">
+
+  <custom-style>
+    <style is="custom-style">
+      x-input {
+        border: 4px solid red;
+        @apply --cs-blue;
+      }
+    </style>
+  </custom-style>
+
+  <template id="late">
+  <custom-style>
+    <style is="custom-style">
+      :root {
+        --cs-blue: {
+          border: 8px solid blue;
+        }
+        ;
+      }
+    </style>
+  </custom-style>
+  </template>
+
+  <x-input id="input"></x-input>
 
   <script>
   /* global input */
 
     suite('custom-style late property definition', function() {
 
-      test('late defined properties applied to custom-style', function() {
-        assertComputed(input, '8px');
+      test('late defined properties applied to custom-style', function(done) {
+        Polymer({
+          is: 'x-input'
+        });
+        var template = document.querySelector('template#late');
+        document.body.appendChild(document.importNode(template.content, true));
+        setTimeout(function() {
+          assertComputed(input, '8px');
+          done();
+        }, 125);
       });
 
     });