From 40058aeb782f3ca75695a758c8df7506c92b5860 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Wed, 18 Oct 2017 11:58:12 -0700
Subject: [PATCH 1/4] Skip tests of ::shadow and /deep/ under native Shadow DOM

These features have been removed from the only native implementation of Shadow DOM v0 (Chrome).
---
 test/unit/custom-style.html                          | 6 ++++++
 test/unit/preserve-style-include/styling-scoped.html | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html
index 3e926a51a7..25990dc06f 100644
--- a/test/unit/custom-style.html
+++ b/test/unit/custom-style.html
@@ -404,11 +404,17 @@
       });
 
       test('::shadow styles applied', function() {
+        if (Polymer.Settings.useNativeShadow) {
+          this.skip();
+        }
         assertComputed(xFoo.$.bar2, '2px');
         assertComputed(xFoo.$.bar2.$.baz, '3px');
       });
 
       test('/deep/ styles applied', function() {
+        if (Polymer.Settings.useNativeShadow) {
+          this.skip();
+        }
         assertComputed(xFoo.$.bar3, '4px');
         assertComputed(xFoo.$.bar3.$.baz, '5px');
       });
diff --git a/test/unit/preserve-style-include/styling-scoped.html b/test/unit/preserve-style-include/styling-scoped.html
index a6b5aa9e60..2a4e5fefc8 100644
--- a/test/unit/preserve-style-include/styling-scoped.html
+++ b/test/unit/preserve-style-include/styling-scoped.html
@@ -213,10 +213,16 @@
   });
 
   test('::shadow selectors', function() {
+    if (Polymer.Settings.useNativeShadow) {
+      this.skip();
+    }
     assertComputed(styled.$.child.$.shadow, '7px');
   });
 
   test('/deep/ selectors', function() {
+    if (Polymer.Settings.useNativeShadow) {
+      this.skip();
+    }
     assertComputed(styled.$.child.$.deep, '8px');
   });
 

From 90697bf2da446312ea010dd34cc0600fd16076ae Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Wed, 18 Oct 2017 12:12:48 -0700
Subject: [PATCH 2/4] Add support for styles with a `shady-unscoped` attribute

Since `/deep/` has been removed from Shady DOM v0, users must share styles between elements via style modules (e.g. `<style include="shared-style">`).

Under ShadyDOM, these styles are scoped and duplicated between elements. If these styles are intended to replace global styling done with `html /deep/ ...` this is inefficient since the styles are needlessly copied to each element style.

Therefore, this adds support for a `shady-unscoped` attribute. If this attribute is placed on a style and native Shadow DOM is not in use, then the style is copied once to the document and are left unscoped.

Please note, css custom properties are not supported in `shady-unscoped` styles.
---
 src/lib/style-util.html                       |  28 +++-
 test/runner.html                              |   6 +-
 .../unit/shady-unscoped-style-import-css.html |   3 +
 test/unit/shady-unscoped-style-import.html    |  26 ++++
 test/unit/shady-unscoped-style.html           | 121 ++++++++++++++++++
 5 files changed, 181 insertions(+), 3 deletions(-)
 create mode 100644 test/unit/shady-unscoped-style-import-css.html
 create mode 100644 test/unit/shady-unscoped-style-import.html
 create mode 100644 test/unit/shady-unscoped-style.html

diff --git a/src/lib/style-util.html b/src/lib/style-util.html
index 1fd3845f42..82c6eeec41 100644
--- a/src/lib/style-util.html
+++ b/src/lib/style-util.html
@@ -17,6 +17,8 @@
     var settings = Polymer.Settings;
 
     return {
+      unscopedStyleImports: new WeakMap(),
+      SHADY_UNSCOPED_ATTR: 'shady-unscoped',
       // chrome 49 has semi-working css vars, check if box-shadow works
       // safari 9.1 has a recalc bug: https://bugs.webkit.org/show_bug.cgi?id=155782
       NATIVE_VARIABLES: Polymer.Settings.useNativeCSSProperties,
@@ -211,12 +213,34 @@
               // get style element applied to main doc via HTMLImports polyfill
               e = e.__appliedElement || e;
               e.parentNode.removeChild(e);
-              cssText += this.resolveCss(e.textContent, element.ownerDocument);
+              var css = this.resolveCss(e.textContent, element.ownerDocument);
+              // support: unscoped styles
+              if (!settings.useNativeShadow &&
+                e.hasAttribute(this.SHADY_UNSCOPED_ATTR)) {
+                e.textContent = css;
+                document.head.insertBefore(e, document.head.firstChild);
+              } else {
+                cssText += css;
+              }
             // it's an import, assume this is a text file of css content.
             // TODO(sorvell): plan is to deprecate this way to get styles;
             // remember to add deprecation warning when this is done.
             } else if (e.import && e.import.body) {
-              cssText += this.resolveCss(e.import.body.textContent, e.import);
+              var importCss = this.resolveCss(e.import.body.textContent, e.import);
+              // support: unscoped styles
+              // record imports in a WeakMap so they are de-duped if unscoped > 1x.
+              if (!settings.useNativeShadow &&
+                e.hasAttribute(this.SHADY_UNSCOPED_ATTR)) {
+                if (!this.unscopedStyleImports.has(e.import)) {
+                  this.unscopedStyleImports.set(e.import, true);
+                  var importStyle = document.createElement('style');
+                  importStyle.setAttribute(this.SHADY_UNSCOPED_ATTR, '');
+                  importStyle.textContent = importCss;
+                  document.head.insertBefore(importStyle, document.head.firstChild);
+                }
+              } else {
+                cssText += importCss;
+              }
             }
           }
         }
diff --git a/test/runner.html b/test/runner.html
index d18d6ba6ca..d72fbfcfc7 100644
--- a/test/runner.html
+++ b/test/runner.html
@@ -102,7 +102,11 @@
       'unit/custom-style-transformed.html',
       'unit/custom-style-transformed.html?dom=shadow',
       'unit/custom-style-transformed.html?lazyRegister=true&useNativeCSSProperties=true',
-      'unit/custom-style-transformed.html?lazyRegister=true&useNativeCSSProperties=true&dom=shadow'
+      'unit/custom-style-transformed.html?lazyRegister=true&useNativeCSSProperties=true&dom=shadow',
+      'unit/shady-unscoped-style.html',
+      'unit/shady-unscoped-style.html?dom=shadow',
+      'unit/shady-unscoped-style.html?lazyRegister=true&useNativeCSSProperties=true',
+      'unit/shady-unscoped-style.html?lazyRegister=true&useNativeCSSProperties=true&dom=shadow'
     ];
 
     if ('import' in document.createElement('link') && (window.customElements || document.registerElement)) {
diff --git a/test/unit/shady-unscoped-style-import-css.html b/test/unit/shady-unscoped-style-import-css.html
new file mode 100644
index 0000000000..3e99a3189c
--- /dev/null
+++ b/test/unit/shady-unscoped-style-import-css.html
@@ -0,0 +1,3 @@
+.import {
+  border: 2px solid yellow;
+}
\ No newline at end of file
diff --git a/test/unit/shady-unscoped-style-import.html b/test/unit/shady-unscoped-style-import.html
new file mode 100644
index 0000000000..5fe5c6ae4f
--- /dev/null
+++ b/test/unit/shady-unscoped-style-import.html
@@ -0,0 +1,26 @@
+<dom-module id="global-shared1">
+  <link rel="import" type="css" shady-unscoped href="shady-unscoped-style-import-css.html">
+  <template>
+    <style shady-unscoped>
+      :root {
+        --zug: margin: 10px;
+      }
+
+      .happy {
+        @apply --zug;
+        border: 1px solid green;
+      }
+    </style>
+
+    <style>
+      .normal {
+        border: 3px solid orange;
+      }
+    </style>
+  </template>
+</dom-module>
+
+<dom-module id="global-shared2">
+  <link rel="import" type="css" shady-unscoped href="shady-unscoped-style-import-css.html">
+</dom-module>
+
diff --git a/test/unit/shady-unscoped-style.html b/test/unit/shady-unscoped-style.html
new file mode 100644
index 0000000000..24305987e6
--- /dev/null
+++ b/test/unit/shady-unscoped-style.html
@@ -0,0 +1,121 @@
+<!doctype html>
+<html>
+<head>
+  <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="shady-unscoped-style-import.html">
+</head>
+<body>
+
+<custom-style>
+  <style is="custom-style">
+    html {
+      --foo: {
+        padding: 10px;
+      }
+    }
+  </style>
+</custom-style>
+
+ <dom-module id="my-element">
+
+    <template>
+      <style include="global-shared1 global-shared2">
+        :host {
+          display: block;
+        }
+
+        .happy {
+          @apply --foo;
+        }
+      </style>
+      <div id="fromStyle" class="happy">Happy: green</div>
+      <div id="fromImport" class="import">Happy: yellow</div>
+      <div id="normal" class="normal">Happy: orange</div>
+    </template>
+
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'my-element'
+      });
+    });
+    </script>
+
+  </dom-module>
+
+  <dom-module id="my-element2">
+
+    <template>
+      <style include="global-shared1">
+        :host {
+          display: block;
+        }
+
+      </style>
+      <div id="fromStyle" class="happy">Happy: green</div>
+      <div id="fromImport" class="import">Happy: yellow</div>
+      <div id="normal" class="normal">Happy: orange</div>
+    </template>
+
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({ is: 'my-element2'});
+    });
+    </script>
+
+  </dom-module>
+
+  <my-element></my-element>
+  <my-element2></my-element2>
+
+<script>
+  suite('shady-unscoped styles', function() {
+
+    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 el1 = document.querySelector('my-element');
+    var el2 = document.querySelector('my-element2');
+
+    test('unscoped styles apply', function() {
+      assertComputed(el1.$.fromStyle, '1px');
+      assertComputed(el1.$.fromImport, '2px');
+      assertComputed(el2.$.fromStyle, '1px');
+      assertComputed(el2.$.fromImport, '2px');
+    });
+
+    test('shared and @apply apply when used with unscoped styles', function() {
+      assertComputed(el1.$.fromStyle, '10px', 'padding');
+      assertComputed(el1.$.normal, '3px');
+      assertComputed(el2.$.normal, '3px');
+    })
+
+    test('unscoped styling de-duped in ShadyDOM', function() {
+      if (Polymer.Settings.useNativeShadow) {
+        this.skip();
+      }
+      assert.equal(document.head.querySelectorAll('style[shady-unscoped]').length, 2);
+    });
+
+    test('@apply does not apply under ShadyDOM for shady-unscoped styles', function() {
+      if (Polymer.Settings.useNativeShadow) {
+        this.skip();
+      }
+      assertComputed(el1.$.fromStyle, '0px', 'margin');
+      assertComputed(el2.$.fromStyle, '0px', 'margin');
+    })
+
+
+  });
+</script>
+</body>
+</html>
\ No newline at end of file

From bba3f5ab0eaa1d5e547e730ad76ec0713ec6f232 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Thu, 19 Oct 2017 15:13:10 -0700
Subject: [PATCH 3/4] Fix tests on Firefox.

---
 test/unit/shady-unscoped-style.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/unit/shady-unscoped-style.html b/test/unit/shady-unscoped-style.html
index 24305987e6..2032ae8f71 100644
--- a/test/unit/shady-unscoped-style.html
+++ b/test/unit/shady-unscoped-style.html
@@ -94,7 +94,7 @@
     });
 
     test('shared and @apply apply when used with unscoped styles', function() {
-      assertComputed(el1.$.fromStyle, '10px', 'padding');
+      assertComputed(el1.$.fromStyle, '10px', 'padding-top');
       assertComputed(el1.$.normal, '3px');
       assertComputed(el2.$.normal, '3px');
     })
@@ -110,8 +110,8 @@
       if (Polymer.Settings.useNativeShadow) {
         this.skip();
       }
-      assertComputed(el1.$.fromStyle, '0px', 'margin');
-      assertComputed(el2.$.fromStyle, '0px', 'margin');
+      assertComputed(el1.$.fromStyle, '0px', 'margin-top');
+      assertComputed(el2.$.fromStyle, '0px', 'margin-top');
     })
 
 

From 471dc9aaae074b5189f0787f9d3f5f80064b202e Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Thu, 19 Oct 2017 17:02:32 -0700
Subject: [PATCH 4/4] fix license issues

---
 test/unit/shady-unscoped-style-import-css.html |  3 ---
 test/unit/shady-unscoped-style-import.css      | 12 ++++++++++++
 test/unit/shady-unscoped-style-import.html     | 13 +++++++++++--
 test/unit/shady-unscoped-style.html            |  9 +++++++++
 4 files changed, 32 insertions(+), 5 deletions(-)
 delete mode 100644 test/unit/shady-unscoped-style-import-css.html
 create mode 100644 test/unit/shady-unscoped-style-import.css

diff --git a/test/unit/shady-unscoped-style-import-css.html b/test/unit/shady-unscoped-style-import-css.html
deleted file mode 100644
index 3e99a3189c..0000000000
--- a/test/unit/shady-unscoped-style-import-css.html
+++ /dev/null
@@ -1,3 +0,0 @@
-.import {
-  border: 2px solid yellow;
-}
\ No newline at end of file
diff --git a/test/unit/shady-unscoped-style-import.css b/test/unit/shady-unscoped-style-import.css
new file mode 100644
index 0000000000..ebc79b19e0
--- /dev/null
+++ b/test/unit/shady-unscoped-style-import.css
@@ -0,0 +1,12 @@
+/*
+@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
+*/
+.import {
+  border: 2px solid yellow;
+}
\ No newline at end of file
diff --git a/test/unit/shady-unscoped-style-import.html b/test/unit/shady-unscoped-style-import.html
index 5fe5c6ae4f..808fd49490 100644
--- a/test/unit/shady-unscoped-style-import.html
+++ b/test/unit/shady-unscoped-style-import.html
@@ -1,5 +1,14 @@
+<!--
+@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
+-->
 <dom-module id="global-shared1">
-  <link rel="import" type="css" shady-unscoped href="shady-unscoped-style-import-css.html">
+  <link rel="import" type="css" shady-unscoped href="shady-unscoped-style-import.css">
   <template>
     <style shady-unscoped>
       :root {
@@ -21,6 +30,6 @@
 </dom-module>
 
 <dom-module id="global-shared2">
-  <link rel="import" type="css" shady-unscoped href="shady-unscoped-style-import-css.html">
+  <link rel="import" type="css" shady-unscoped href="shady-unscoped-style-import.css">
 </dom-module>
 
diff --git a/test/unit/shady-unscoped-style.html b/test/unit/shady-unscoped-style.html
index 2032ae8f71..17bac40a17 100644
--- a/test/unit/shady-unscoped-style.html
+++ b/test/unit/shady-unscoped-style.html
@@ -1,4 +1,13 @@
 <!doctype html>
+<!--
+@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
+-->
 <html>
 <head>
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>