diff --git a/test/unit/custom-style-late-import.html b/test/unit/custom-style-late-import.html
deleted file mode 100644
index 161e8aa8c8..0000000000
--- a/test/unit/custom-style-late-import.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!--
-@license
-Copyright (c) 2017 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
--->
-<script>
-  Polymer({
-    is: 'x-input',
-    extends : 'input'
-  });
-</script>
-<custom-style>
-<style is="custom-style">
-  input[is=x-input] {
-    border : 4px solid red;
-    @apply --cs-blue;
-  }
-</style>
-</custom-style>
-<custom-style>
-<style is="custom-style">
-  :root {
-    --cs-blue: {
-      border : 8px solid blue;
-    };
-  }
-</style>
-</custom-style>
diff --git a/test/unit/custom-style-late.html b/test/unit/custom-style-late.html
index 0456a265f8..aab52da785 100644
--- a/test/unit/custom-style-late.html
+++ b/test/unit/custom-style-late.html
@@ -14,19 +14,50 @@
   <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">
+      html {
+        --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));
+        // wait 2 rounds of `afterNextRender` as `<custom-style>` boots asynchronously
+        Polymer.RenderStatus.afterNextRender(null, function() {
+          Polymer.RenderStatus.afterNextRender(null, function() {
+            assertComputed(input, '8px');
+            done();
+          });
+        });
       });
 
     });
