diff --git a/src/lib/style-util.html b/src/lib/style-util.html
index a9456a88f0..1fd3845f42 100644
--- a/src/lib/style-util.html
+++ b/src/lib/style-util.html
@@ -228,7 +228,7 @@
         for (var i=0, s; i < styles.length; i++) {
           s = styles[i];
           s.parentNode.insertBefore(
-            this._includesToFragment(s.getAttribute('include')), s.nextSibling);
+            this._includesToFragment(s.getAttribute('include')), s);
         }
       },
 
@@ -248,13 +248,14 @@
         var s$ = source.querySelectorAll('style');
         for (var i=0, s; i < s$.length; i++) {
           s = s$[i];
-          if (s.textContent) {
-            frag.appendChild(s.cloneNode(true));
-          }
           var include = s.getAttribute('include');
           if (include) {
             frag.appendChild(this._includesToFragment(include));
           }
+          if (s.textContent) {
+            frag.appendChild(s.cloneNode(true));
+          }
+
         }
       },
 
diff --git a/test/runner.html b/test/runner.html
index f44d0a8c9b..484c778a42 100644
--- a/test/runner.html
+++ b/test/runner.html
@@ -58,6 +58,7 @@
       'unit/resolveurl.html',
       'unit/css-parse.html',
       'unit/styling-scoped.html',
+      'unit/preserve-style-include/styling-scoped.html',
       'unit/styling-extends.html',
       'unit/styling-remote.html',
       'unit/styling-cross-scope-var.html',
diff --git a/test/smoke/preserve-include.html b/test/smoke/preserve-include.html
index 61c42eb563..e74632cb3e 100644
--- a/test/smoke/preserve-include.html
+++ b/test/smoke/preserve-include.html
@@ -16,6 +16,9 @@
         <style>
           :host {
             color: red;
+            --mixin: {
+              border: 2px solid tomato;
+            }
           }
         </style>
         <style></style>
@@ -50,6 +53,7 @@
           :host {
             display: block;
             background: green;
+            @apply --mixin;
           }
 
         </style>
diff --git a/test/unit/preserve-style-include/styling-scoped-elements-built.html b/test/unit/preserve-style-include/styling-scoped-elements-built.html
new file mode 100644
index 0000000000..b0e7840a38
--- /dev/null
+++ b/test/unit/preserve-style-include/styling-scoped-elements-built.html
@@ -0,0 +1,709 @@
+<html><head></head><body><dom-module id="x-keyframes" css-build="shadow">
+  <template>
+    <style scope="x-keyframes">:host {
+  display: block;
+        position: relative;
+        border: 10px solid blue;
+        left: 0px;
+        
+        -webkit-animation-duration: 0.3s;
+        animation-duration: 0.3s;
+        -webkit-animation-fill-mode: forwards;
+        animation-fill-mode: forwards;
+}
+
+:host([animated]) {
+  -webkit-animation-name: x-keyframes-animation;
+        animation-name: x-keyframes-animation;
+}
+
+@-webkit-keyframes x-keyframes-animation {
+0% {
+  left: var(--keyframes0, 0px);
+}
+
+100% {
+  left: var(--keyframes100, 10px);
+}
+
+}
+
+@keyframes x-keyframes-animation {
+0% {
+  left: var(--keyframes0, 0px);
+}
+
+100% {
+  left: var(--keyframes100, 10px);
+}
+
+}
+
+</style>
+    x-keyframes
+  </template>
+  <script>
+    Polymer({
+      is: 'x-keyframes',
+      properties: {
+        animated: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true
+        }
+      }
+    });
+  </script>
+</dom-module>
+<dom-module id="x-gchild" css-build="shadow">
+  <template>
+    <!-- styles can be in templates -->
+    <style scope="x-gchild">:host-context(.wide) #target {
+  border: 10px solid orange;
+}
+
+</style>
+    <div id="target">x-gchild</div>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'x-gchild'
+  });
+</script>
+
+<dom-module id="x-child" css-build="shadow">
+  <template>
+    <div id="simple">simple</div>
+    <div id="complex1" class="scoped">complex1</div>
+    <div id="complex2" selected="">complex2</div>
+    <div id="media">media</div>
+    <div id="shadow" class="shadowTarget">shadowTarget</div>
+    <div id="deep" class="deepTarget">deepTarget</div>
+    <x-gchild id="gchild1"></x-gchild>
+    <x-gchild id="gchild2" class="wide"></x-gchild>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'x-child',
+    hostAttributes: {
+      class: 'nug'
+    }
+  });
+</script>
+
+<dom-module id="x-child2" css-build="shadow">
+  
+  <template><style scope="x-child2">:host(.wide) #target {
+  border: none;
+}
+
+</style>
+    <div id="target">x-child2</div>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'x-child2',
+    _scopeCssViaAttr: true
+  });
+</script>
+
+<dom-module id="x-scope-class" css-build="shadow">
+  <template>
+    <div id="scope">Trivial</div>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'x-scope-class'
+  });
+</script>
+
+
+<dom-module id="x-styled" css-build="shadow">
+  
+  <template><style scope="x-styled">:host {
+  display: block;
+      border: 1px solid orange;
+      --keyframes100: 100px;
+}
+
+:host(.wide) {
+  border-width: 2px;
+}
+
+:host(.wide)::after {
+  content: '-content-';
+}
+
+#keyframes2.special {
+  --keyframes100: 200px;
+}
+
+#simple {
+  border: 3px solid orange;
+}
+
+.scoped, [selected] {
+  border: 4px solid pink;
+}
+
+@media(max-width: 10000px) {
+.media {
+  border: 5px solid brown;
+}
+
+}
+
+.container ::content > * {
+  border: 6px solid navy;
+}
+
+x-child::shadow .shadowTarget {
+  border: 7px solid tomato;
+}
+
+x-child /deep/ .deepTarget {
+  border: 8px solid red;
+}
+
+#priority {
+  border: 9px solid orange;
+}
+
+x-child2.wide::shadow #target {
+  border: 12px solid brown;
+}
+
+.container1 > ::content > .content1 {
+  border: 13px solid navy;
+}
+
+.container2 > ::content .content2 {
+  border: 14px solid navy;
+}
+
+.computed {
+  border: 15px solid orange;
+}
+
+.computeda {
+  border: 20px solid orange;
+}
+
+#child {
+  border: 16px solid tomato;
+      display: block;
+}
+
+svg {
+  margin-top: 20px;
+}
+
+#circle {
+  fill: seagreen;
+      stroke-width: 1px;
+      stroke: tomato;
+}
+
+</style>
+    <content select=".blank"></content>
+    <div id="simple">simple</div>
+    <div id="complex1" class="scoped">complex1</div>
+    <div id="complex2" selected="">complex2</div>
+    <div id="media" class="media">media</div>
+    <div class="container1">
+      <content select=".content1"></content>
+    </div>
+    <div class="container2">
+      <content select=".content2"></content>
+    </div>
+    <div class="container">
+      <content></content>
+    </div>
+    <x-child id="child"></x-child>
+    <div id="priority">priority</div>
+    <x-child2 class="wide" id="child2"></x-child2>
+    <div id="computed" class$="{{computeClass(aClass)}}">Computed</div>
+    <div id="repeatContainer">
+      <template id="repeat" is="dom-repeat" items="{{items}}">
+        <a class$="{{aaClass}}">A Computed</a>
+      </template>
+    </div>
+    <svg height="25" width="25">
+      <circle id="circle" cx="12" cy="12" r="10"></circle>
+    </svg>
+    <x-scope-class id="scopeClass"></x-scope-class>
+    <x-keyframes id="keyframes"></x-keyframes>
+    <x-keyframes id="keyframes2"></x-keyframes>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'x-styled',
+
+    properties: {
+      items: {value: [{}]}
+    },
+
+    computeClass: function(className) {
+      return className;
+    }
+
+  });
+</script>
+
+<dom-module id="x-button" css-build="shadow">
+  
+  <template><style scope="x-button">:host {
+  border: 10px solid beige;
+}
+
+:host(.special) {
+  border: 11px solid beige;
+}
+
+</style>
+    Button!
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'x-button',
+    extends: 'button'
+  });
+</script>
+
+<dom-module id="x-Mixed-Case" css-build="shadow">
+  
+  <template><style scope="x-mixed-case">:host {
+  border: 13px solid beige;
+}
+
+</style>
+    Mixed-Case
+  </template>
+  <script>
+    Polymer({
+      is: 'x-Mixed-Case'
+    });
+  </script>
+</dom-module>
+
+<dom-module id="x-Mixed-Case-Button" css-build="shadow">
+  
+  <template><style scope="x-mixed-case-button">:host {
+  border: 14px solid beige;
+}
+
+</style>
+    Mixed-Case
+  </template>
+  <script>
+    Polymer({
+      is: 'x-Mixed-Case-Button',
+      extends: 'button'
+    });
+  </script>
+</dom-module>
+
+
+<template id="dynamic">
+  <div class="added">
+    Added
+    <div class="sub-added">
+      Sub-added
+    </div>
+    </div>
+  
+</template>
+
+<dom-module id="x-dynamic-scope" css-build="shadow">
+  
+  <template><style scope="x-dynamic-scope">.added {
+  border: 17px solid beige;
+}
+
+.sub-added {
+  border: 18px solid #fafafa;
+}
+
+</style>
+    <div id="container"></div>
+  </template>
+</dom-module>
+<script>
+(function() {
+  var doc = document._currentScript.ownerDocument;
+  var dynamic = doc.querySelector('template#dynamic');
+
+  Polymer({
+    is: 'x-dynamic-scope',
+    ready: function() {
+      // setup node for scope watching
+      this.scopeSubtree(this.$.container, true);
+      // simulate 3rd party action by using normal dom to add to element.
+      var dom = document.importNode(dynamic.content, true);
+      this.$.container.appendChild(dom);
+    }
+  });
+})();
+</script>
+
+<template id="dynamic-style-template">
+  <style>
+    :host {
+      border: 40px solid tomato;
+    }
+  </style>
+  <div>big border</div>
+</template>
+
+<script>
+(function() {
+  var doc = document._currentScript.ownerDocument;
+  var template = doc.querySelector('template#dynamic-style-template');
+
+  Polymer({
+    is: 'x-dynamic-template',
+    beforeRegister: function() {
+      this._template = template;
+    }
+  });
+})();
+</script>
+
+<template id="svg">
+  <svg class="svg" viewBox="0 0 24 24">
+    <circle id="circle" r="12" cx="12" cy="12"></circle>
+  </svg>
+</template>
+
+<dom-module id="x-dynamic-svg" css-build="shadow">
+  <template>
+    <style scope="x-dynamic-svg">.svg {
+  height: 24px;
+        width: 24px;
+}
+
+#circle {
+  fill: red;
+        fill-opacity: 0.5;
+}
+
+</style>
+    <div id="container"></div>
+  </template>
+  <script>
+    (function() {
+      var doc = document._currentScript.ownerDocument;
+      var template = doc.querySelector('template#svg');
+
+      Polymer({
+        is: 'x-dynamic-svg',
+        ready: function() {
+          this.scopeSubtree(this.$.container, true);
+          var dom = document.importNode(template.content, true);
+          this.$.container.appendChild(dom);
+        }
+      });
+    })();
+  </script>
+</dom-module>
+
+<dom-module id="x-specificity" css-build="shadow">
+  <template>
+    <style scope="x-specificity">:host {
+  border-top: 1px solid red;
+}
+
+:host(.bar) {
+  border-top: 2px solid red;
+}
+
+</style>
+    <content></content>
+  </template>
+  <script>
+    Polymer({is: 'x-specificity'});
+  </script>
+</dom-module>
+
+<style is="custom-style" css-build="shadow">html {
+  --x-specificity-parent_-_border:  10px solid blue;;
+    --x-specificity-nested_-_border:  3px solid red;;
+}
+
+</style>
+
+<dom-module id="x-specificity-parent" css-build="shadow">
+  <template>
+    <style scope="x-specificity-parent">::content > :not(template) {
+  border: var(--x-specificity-parent_-_border);
+}
+
+</style>
+    <content></content>
+  </template>
+  <script>
+    Polymer({is: 'x-specificity-parent', extends: 'div'});
+  </script>
+</dom-module>
+
+<dom-module id="x-specificity-nested" css-build="shadow">
+  <template>
+    <style scope="x-specificity-nested">:host {
+  border: var(--x-specificity-nested_-_border);
+}
+
+</style>
+  </template>
+  <script>
+    Polymer({is: 'x-specificity-nested', extends: 'div'});
+  </script>
+</dom-module>
+
+<style is="custom-style" css-build="shadow">html {
+  --x-overriding_-_border-top:  1px solid red;
+}
+
+</style>
+
+<dom-module id="x-overriding" css-build="shadow">
+  <template>
+    <style scope="x-overriding">.red {
+  border-top: var(--x-overriding_-_border-top);
+}
+
+.green {
+  border-top: var(--x-overriding_-_border-top);
+        border-top: 2px solid green;
+}
+
+.red-2 {
+  border-top: 2px solid green;
+        border-top: var(--x-overriding_-_border-top, 2px solid green);
+}
+
+.blue {
+  border-top: var(--x-overriding_-_border-top);
+        border-top: 3px solid blue;
+}
+
+</style>
+
+    <div class="red">red</div>
+    <div class="green">green</div>
+    <div class="red-2">green-2</div>
+    <div class="blue">blue</div>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'x-overriding'
+  });
+</script>
+
+<dom-module id="x-attr-selector" css-build="shadow">
+  <template>
+    <style scope="x-attr-selector">#foo1 ~ #bar1 {
+  border: 2px solid red;
+}
+
+#foo1 ~ #bar1 ~ #foo2[attr~=foo2] ~ #bar2[attr~=bar2] {
+  border: 4px solid red;
+}
+
+#foo1 ~ #bar1 ~ #foo2[attr~=foo2] ~ #bar2[attr~=bar2] ~ #foo3[attr~=foo3][a~=a] ~ #bar3[attr~=bar3][a~=a] {
+  border: 6px solid red;
+}
+
+</style>
+    <div id="foo1"></div>
+    <div id="bar1">bar1</div>
+    <div id="foo2" attr="foo2"></div>
+    <div id="bar2" attr="bar2">bar2</div>
+    <div id="foo3" attr="foo3" a="a"></div>
+    <div id="bar3" attr="bar3" a="a">bar3</div>
+
+  </template>
+  <script>
+    Polymer({is: 'x-attr-selector'});
+  </script>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'x-scope-no-class',
+    ready: function() {
+      this.scopeSubtree(this, true);
+    }
+  });
+</script>
+
+<dom-module id="shared-style" css-build="shadow">
+  <template>
+    <style scope="shared-style">:host(x-shared1) {
+  display: block;
+        border: 2px solid orange;
+}
+
+:host(x-shared2) {
+  display: block;
+        border: 4px solid orange;
+}
+
+:host(.x-shared1) {
+  top: 10px;
+}
+
+</style>
+  </template>
+</dom-module>
+
+<dom-module id="x-shared1" css-build="shadow">
+  <template>
+    <style include="shared-style" scope="x-shared1"></style>
+    x-shared1
+  </template>
+  <script>
+    Polymer({is: 'x-shared1'});
+  </script>
+</dom-module>
+
+<dom-module id="x-shared2" css-build="shadow">
+  <template>
+    <style include="shared-style" scope="x-shared2"></style>
+    x-shared2
+  </template>
+  <script>
+    Polymer({is: 'x-shared2'});
+  </script>
+</dom-module>
+
+<dom-module id="x-content" css-build="shadow">
+  <template>
+    <style scope="x-content">::content > .auto-content {
+  border: 2px solid orange;
+}
+
+.bar, ::content .complex-descendant {
+  border: 4px solid red;
+}
+
+.bar, ::content > .complex-child {
+  border: 6px solid navy;
+}
+
+</style>
+    <content></content>
+  </template>
+  <script>
+    Polymer({is: 'x-content'});
+  </script>
+</dom-module>
+
+<dom-module id="x-slotted" css-build="shadow">
+  <template>
+    <style scope="x-slotted">::slotted(.auto-content) {
+  border: 2px solid orange;
+}
+
+.bar, ::slotted(.complex-child) {
+  border: 6px solid navy;
+}
+
+#container ::slotted(*) {
+  border: 8px solid green;
+}
+
+</style>
+    <div id="container">
+      <slot name="container"></slot>
+    </div>
+    <slot></slot>
+  </template>
+  <script>
+    Polymer({is: 'x-slotted'});
+  </script>
+</dom-module>
+
+<dom-module id="root-styles" css-build="shadow">
+  <template>
+    <style scope="root-styles">:host > * {
+  color: rgb(123, 123, 123);
+      --root-padding: 10px;
+}
+
+:host > * {
+  border: 2px solid black;
+      --host-margin: 10px;
+}
+
+#child {
+  padding: var(--root-padding);
+      margin: var(--host-margin);
+}
+
+</style>
+    <div id="child">Child</div>
+  </template>
+  <script>
+  Polymer({is: 'root-styles'});
+  </script>
+</dom-module>
+
+<dom-module id="include4" css-build="shadow">
+  <template>
+    
+    <style scope="include4">:host {
+  color: red;
+        --mixin_-_border:  2px solid tomato;
+}
+
+</style>
+  </template>
+</dom-module>
+
+<dom-module id="include2" css-build="shadow">
+  <template>
+    
+    <style scope="include2">:host {
+  margin: 10px;
+}
+
+</style>
+  </template>
+</dom-module>
+
+<dom-module id="include1" css-build="shadow">
+  <template>
+    
+    <style include="include4" scope="include1">:host {
+  padding: 10px;
+}
+
+</style>
+  </template>
+</dom-module>
+
+<dom-module id="x-test-includes" css-build="shadow">
+  <template>
+    <style include="include1" scope="x-test-includes">:host {
+  display: block;
+        background: green;
+        border: var(--mixin_-_border);
+}
+
+</style>
+    <div>Hi</div>
+  </template>
+  <script>
+  Polymer({
+    is: 'x-test-includes'
+  });
+  </script>
+</dom-module></body></html>
\ No newline at end of file
diff --git a/test/unit/preserve-style-include/styling-scoped.html b/test/unit/preserve-style-include/styling-scoped.html
new file mode 100644
index 0000000000..a6b5aa9e60
--- /dev/null
+++ b/test/unit/preserve-style-include/styling-scoped.html
@@ -0,0 +1,382 @@
+<!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>
+  <script>
+    Polymer = {
+      lazyRegister: true,
+      useNativeCSSProperties: true,
+      dom: 'shadow',
+      preserveStyleIncludes: true
+    }
+  </script>
+  <link rel="import" href="../../../polymer.html">
+  <link rel="import" href="styling-scoped-elements-built.html">
+  <style>
+    #priority[style-scope=x-styled], #priority.style-scope.x-styled {
+      border: 1px solid black;
+    }
+  </style>
+</head>
+<body>
+
+  <div class="scoped">no margin</div>
+
+  <x-styled>
+    <div class="content1">Foo</div>
+    <div class="content2">Bar</div>
+    <div class="content">Content</div>
+  </x-styled>
+
+  <x-styled class="wide"></x-styled>
+
+  <button is="x-button"></button>
+  <button class="special" is="x-button"></button>
+
+  <x-dynamic-scope></x-dynamic-scope>
+
+  <template id="bind" is="dom-bind">
+    <div id="dom-bind-static" class="static">static</div>
+    <span id="dom-bind-dynamic" class$="[[dynamic]]">[[dynamic]]</span>
+  </template>
+
+  <x-dynamic-svg></x-dynamic-svg>
+  <x-specificity></x-specificity>
+  <x-specificity class="bar"></x-specificity>
+  <div is="x-specificity-parent">
+    <div is="x-specificity-nested"></div>
+  </div>
+  <x-overriding></x-overriding>
+
+  <x-scope-no-class>
+    <div></div>
+  </x-scope-no-class>
+
+  <x-shared1></x-shared1>
+  <x-shared2></x-shared2>
+
+<script>
+
+suite('scoped-styling', function() {
+
+  suiteSetup(function() {
+    if (!Polymer.Settings.useNativeShadow) {
+      this.skip();
+    }
+  });
+
+  function assertComputed(element, value, property, pseudo) {
+    var computed = getComputedStyle(element, pseudo);
+    property = property || 'border-top-width';
+    if (Array.isArray(value)) {
+      assert.oneOf(computed[property], value, 'computed style incorrect for ' + property);
+    } else {
+      assert.equal(computed[property], value, 'computed style incorrect for ' + property);
+    }
+  }
+
+  var styled = document.querySelector('x-styled');
+  var styledWide = document.querySelector('x-styled.wide');
+  var unscoped = document.querySelector('.scoped');
+  var button = document.querySelector('[is=x-button]');
+  var specialButton = document.querySelector('[is=x-button].special');
+
+  test(':host, :host(...)', function() {
+    assertComputed(styled, '1px');
+    assertComputed(styledWide, '2px');
+    assertComputed(styled, ['', 'none'], 'content', '::after');
+    assertComputed(styledWide, ['"-content-"', '-content-'], 'content', '::after');
+  });
+
+  test(':host-context(...)', function() {
+    assertComputed(styled.$.child.$.gchild1.$.target, '0px');
+    assertComputed(styled.$.child.$.gchild2.$.target, '10px');
+    assertComputed(styledWide.$.child.$.gchild1.$.target, '10px');
+    assertComputed(styledWide.$.child.$.gchild2.$.target, '10px');
+  });
+
+  test('scoped selectors, simple and complex', function() {
+    assertComputed(styled.$.simple, '3px');
+    assertComputed(styled.$.complex1, '4px');
+    assertComputed(styled.$.complex2, '4px');
+  });
+
+  test('media query scoped selectors', function() {
+    assertComputed(styled.$.media, '5px');
+  });
+
+  test('upper bound encapsulation', function() {
+    assertComputed(unscoped, '0px');
+  });
+
+  test('lower bound encapsulation', function() {
+    assertComputed(styled.$.child.$.simple, '0px');
+    assertComputed(styled.$.child.$.complex1, '0px');
+    assertComputed(styled.$.child.$.complex2, '0px');
+    assertComputed(styled.$.child.$.media, '0px');
+  });
+
+  test('::content selectors', function() {
+    var content = document.querySelector('.content');
+    var content1 = document.querySelector('.content1');
+    var content2 = document.querySelector('.content2');
+    assertComputed(content, '6px');
+    assertComputed(content1, '13px');
+    assertComputed(content2, '14px');
+  });
+
+  test('auto ::content selector', function() {
+    var x = document.createElement('x-content');
+    var d1 = document.createElement('div');
+    d1.classList.add('auto-content');
+    d1.textContent = 'auto-content';
+    document.body.appendChild(x);
+    Polymer.dom(x).appendChild(d1);
+    Polymer.dom.flush();
+    assertComputed(d1, '2px');
+  });
+
+  test('::content + descendant in complex selector', function() {
+    var x = document.createElement('x-content');
+    var d1 = document.createElement('div');
+    d1.classList.add('complex-descendant');
+    d1.textContent = 'complex-descendant';
+    document.body.appendChild(x);
+    Polymer.dom(x).appendChild(d1);
+    Polymer.dom.flush();
+    assertComputed(d1, '4px');
+  });
+
+  test('::content + descendant in complex selector does not leak', function() {
+    var x = document.createElement('x-content');
+    var d1 = document.createElement('div');
+    d1.classList.add('complex-descendant');
+    d1.textContent = 'complex-descendant';
+    document.body.appendChild(x);
+    document.body.appendChild(d1);
+    assertComputed(d1, '0px');
+  });
+
+  test('::content + child in complex selector', function() {
+    var x = document.createElement('x-content');
+    var d1 = document.createElement('div');
+    d1.classList.add('complex-child');
+    d1.textContent = 'complex-child';
+    document.body.appendChild(x);
+    Polymer.dom(x).appendChild(d1);
+    Polymer.dom.flush();
+    assertComputed(d1, '6px');
+  });
+
+  test.skip('auto ::slotted selector', function() {
+    var x = document.createElement('x-slotted');
+    var d1 = document.createElement('div');
+    d1.classList.add('auto-content');
+    d1.textContent = 'auto-content';
+    document.body.appendChild(x);
+    Polymer.dom(x).appendChild(d1);
+    Polymer.dom.flush();
+    assertComputed(d1, '2px');
+  });
+
+  test.skip('::slotted + child in complex selector', function() {
+    var x = document.createElement('x-slotted');
+    var d1 = document.createElement('div');
+    d1.classList.add('complex-child');
+    d1.textContent = 'complex-child';
+    document.body.appendChild(x);
+    Polymer.dom(x).appendChild(d1);
+    Polymer.dom.flush();
+    assertComputed(d1, '6px');
+  });
+
+  test.skip('::slotted + named slot', function() {
+    var x = document.createElement('x-slotted');
+    var d1 = document.createElement('div');
+    d1.setAttribute('slot', 'container')
+    d1.textContent = 'named slot child';
+    document.body.appendChild(x);
+    Polymer.dom(x).appendChild(d1);
+    Polymer.dom.flush();
+    assertComputed(d1, '8px');
+  });
+
+  test('::shadow selectors', function() {
+    assertComputed(styled.$.child.$.shadow, '7px');
+  });
+
+  test('/deep/ selectors', function() {
+    assertComputed(styled.$.child.$.deep, '8px');
+  });
+
+  test('elements dynamically added/removed from root', function() {
+    var d = document.createElement('div');
+    d.classList.add('scoped');
+    d.textContent = 'Dynamically... Scoped!';
+    Polymer.dom(styled.root).appendChild(d);
+    Polymer.dom.flush();
+    assertComputed(d, '4px');
+    Polymer.dom(document.body).appendChild(d);
+    Polymer.dom.flush();
+    assert.notInclude(d.getAttribute('style-scoped') || '', styled.is, 'scoping attribute not removed when added to other root');
+    assert.notInclude(d.className, styled.is, 'scoping class not removed when added to other root');
+    Polymer.dom(styled.root).appendChild(d);
+    Polymer.dom.flush();
+    assertComputed(d, '4px');
+    Polymer.dom(styled.root).removeChild(d);
+    Polymer.dom.flush();
+    assert.notInclude(d.getAttribute('style-scoped') || '', styled.is, 'scoping attribute not removed when removed from root');
+    assert.notInclude(d.className, styled.is, 'scoping class not removed when removed from root');
+    Polymer.dom(styled.root).appendChild(d);
+    Polymer.dom.flush();
+    assertComputed(d, '4px');
+  });
+
+  test('elements dynamically added/removed from host', function() {
+    var d = document.createElement('div');
+    d.classList.add('scoped');
+    d.classList.add('blank');
+    d.textContent = 'Dynamically... unScoped!';
+    Polymer.dom(styled).appendChild(d);
+    Polymer.dom.flush();
+    assertComputed(d, '0px');
+    Polymer.dom(document.body).appendChild(d);
+    Polymer.dom.flush();
+    assert.notInclude(d.getAttribute('style-scoped') || '', styled.is, 'scoping attribute not removed when added to other root');
+    assert.notInclude(d.className, styled.is, 'scoping class not removed when added to other root');
+    Polymer.dom(styled).appendChild(d);
+    Polymer.dom.flush();
+    assertComputed(d, '0px');
+    Polymer.dom(styled).removeChild(d);
+    Polymer.dom.flush();
+    assert.notInclude(d.getAttribute('style-scoped') || '', styled.is, 'scoping attribute not removed when removed from root');
+    assert.notInclude(d.className, styled.is, 'scoping class not removed when removed from root');
+    Polymer.dom(styled).appendChild(d);
+    Polymer.dom.flush();
+    assertComputed(d, '0px');
+  });
+
+  test('keyframes change scope', function(done) {
+    var xKeyframes = styled.$.keyframes;
+
+    var onAnimationEnd = function() {
+      xKeyframes.removeEventListener('animationend', onAnimationEnd);
+      xKeyframes.removeEventListener('webkitAnimationEnd', onAnimationEnd);
+      assertComputed(xKeyframes, '100px', 'left');
+
+      xKeyframes = styled.$.keyframes2;
+
+      onAnimationEnd = function() {
+        xKeyframes.removeEventListener('animationend', onAnimationEnd);
+        xKeyframes.removeEventListener('webkitAnimationEnd', onAnimationEnd);
+        assertComputed(xKeyframes, '200px', 'left');
+        done();
+      };
+
+      xKeyframes.addEventListener('animationend', onAnimationEnd);
+      xKeyframes.addEventListener('webkitAnimationEnd', onAnimationEnd);
+
+      Polymer.dom(xKeyframes).classList.add('special');
+      xKeyframes.updateStyles();
+      xKeyframes.animated = true;
+    };
+
+    xKeyframes.addEventListener('animationend', onAnimationEnd);
+    xKeyframes.addEventListener('webkitAnimationEnd', onAnimationEnd);
+
+    xKeyframes.animated = true;
+    assertComputed(xKeyframes, '0px', 'left');
+  });
+
+  test('elements with computed classes', function() {
+    assertComputed(styled.$.computed, '0px');
+    styled.aClass = 'computed';
+    assertComputed(styled.$.computed, '15px');
+  });
+
+  test('<a> with computed classes dynamically added', function() {
+    assertComputed(styled.$.repeatContainer.firstElementChild, '0px');
+    styled.aaClass = 'computeda';
+    assertComputed(styled.$.repeatContainer.firstElementChild, '20px');
+  });
+
+  test('elements with hostAttributes: class', function() {
+    assertComputed(styled.$.child, '16px');
+  });
+
+  test('type extension elements', function() {
+    assertComputed(button, '10px');
+    assertComputed(specialButton, '11px');
+  });
+
+  test('element subtree added via dom api', function() {
+    var container = document.querySelector('x-dynamic-scope').$.container;
+    var a = container.querySelector('.added');
+    assertComputed(a, '17px');
+    var b = container.querySelector('.sub-added');
+    assertComputed(b, '18px');
+  });
+
+  test('styles in dynamically selected template', function() {
+    var el = document.createElement('x-dynamic-template');
+    document.body.appendChild(el);
+    if (el.shadyRoot) {
+      // style properly removed
+      assert.notOk(el.querySelector('style'));
+    }
+    assertComputed(el, '40px');
+    document.body.removeChild(el);
+  });
+
+  test('attribute inclusive selector and general sibling selectors', function() {
+    var e = document.createElement('x-attr-selector');
+    document.body.appendChild(e);
+    assertComputed(e.$.bar1, '2px');
+    assertComputed(e.$.bar2, '4px');
+    assertComputed(e.$.bar3, '6px');
+  });
+
+  test('ShadowRoot-wide selectors', function() {
+    var e = document.createElement('root-styles');
+    document.body.appendChild(e);
+    CustomElements.takeRecords();
+    // :root
+    assertComputed(e.$.child, 'rgb(123, 123, 123)', 'color');
+    // :host > *
+    assertComputed(e.$.child, '2px');
+  });
+
+  test('included styles are expanded into separate styles', function() {
+    var s1 = document.createElement('x-shared1');
+    document.body.appendChild(s1);
+    var s2 = document.createElement('x-shared2');
+    document.body.appendChild(s2);
+    CustomElements.takeRecords();
+    assert.equal(s1.shadowRoot.querySelectorAll('style').length, 2);
+    assert.equal(s2.shadowRoot.querySelectorAll('style').length, 2);
+  });
+
+  test('included styles with includes are expanded into separate styles', function() {
+    var el = document.createElement('x-test-includes');
+    document.body.appendChild(el);
+    CustomElements.takeRecords();
+    assert.equal(el.shadowRoot.querySelectorAll('style').length, 3);
+    assertComputed(el, '2px');
+  })
+
+});
+
+</script>
+</body>
+</html>
