Merge branch 'master' into 2.0-binding-api-refactor

Polymer · Apr 13, 2017 · cd321a3 · cd321a3
2 parents b9fafb7 + afa843c
commit cd321a3
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 10 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "polymer",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0-rc.4",
   "main": [
     "polymer.html"
   ],

diff --git a/lib/elements/dom-bind.html b/lib/elements/dom-bind.html
@@ -10,6 +10,7 @@
 
 <link rel="import" href="../utils/boot.html">
 <link rel="import" href="../mixins/property-effects.html">
+<link rel="import" href="../mixins/mutable-data.html">
 
 <script>
 

diff --git a/lib/mixins/element-mixin.html b/lib/mixins/element-mixin.html
@@ -598,7 +598,7 @@
        * @override
        */
       connectedCallback() {
-        if (window.ShadyCSS) {
+        if (window.ShadyCSS && this._template) {
           window.ShadyCSS.styleElement(this);
         }
         if (!this.__dataInitialized) {

diff --git a/lib/utils/debounce.html b/lib/utils/debounce.html
@@ -86,6 +86,9 @@
     }
   }
 
+  /**
+   * @memberof Polymer
+   */
   Polymer.Debouncer = Debouncer;
 })();
 </script>
diff --git a/lib/utils/gestures.html b/lib/utils/gestures.html
@@ -244,7 +244,12 @@
       // if there is not a shadowroot, exit the loop
       while (next && next.shadowRoot && !window.ShadyDOM) {
         // if there is a node at x/y in the shadowroot, look deeper
+        let oldNext = next;
         next = next.shadowRoot.elementFromPoint(x, y);
+        // on Safari, elementFromPoint may return the shadowRoot host
+        if (oldNext === next) {
+          break;
+        }
         if (next) {
           node = next;
         }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@polymer/polymer",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0-rc.4",
   "description": "The Polymer library makes it easy to create your own web components. Give your element some markup and properties, and then use it on a site. Polymer provides features like dynamic templates and data binding to reduce the amount of boilerplate you need to write",
   "main": "polymer.html",
   "directories": {

diff --git a/test/runner.html b/test/runner.html
@@ -37,6 +37,7 @@
       'unit/styling-cross-scope-var.html',
       'unit/styling-cross-scope-apply.html',
       'unit/styling-cross-scope-unknown-host.html',
+      'unit/styling-only-with-template.html',
       'unit/custom-style.html',
       'unit/custom-style-late.html',
       'unit/custom-style-async.html',

diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
@@ -752,6 +752,9 @@
   suite('scoped-styling-var', function() {
 
   function assertComputed(element, value, pseudo, name) {
+    // force a style-recalc for Safari missing updated CSS Custom Properties
+    // https://bugs.webkit.org/show_bug.cgi?id=170708
+    element.offsetWidth;
     name = name || 'border-top-width';
     var computed = element.getComputedStyleValue && !pseudo ?
       element.getComputedStyleValue(name) :
@@ -787,6 +790,11 @@
   });
 
   test('instances of scoped @keyframes', function(done) {
+    if (navigator.userAgent.match(/Safari\/603/) && ShadyCSS.nativeCss && ShadyCSS.nativeShadow) {
+      // `:nth-of-type` is broken in shadow roots on Safari 10.1
+      // https://bugs.webkit.org/show_bug.cgi?id=166748
+      this.skip();
+    }
     var xKeyframes = styled.$.keyframes2;
     var onAnimationEnd = function() {
       assertStylePropertyValue(xKeyframes, 'left', '5px');

diff --git a/test/unit/styling-only-with-template.html b/test/unit/styling-only-with-template.html
@@ -0,0 +1,79 @@
+<!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>
+  <meta charset="utf-8">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../../polymer.html">
+</head>
+
+<body>
+  <custom-style>
+    <style is="custom-style">
+      html {
+        --mixin: {
+          border: 2px solid rgb(255, 0, 0);
+        };
+      }
+    </style>
+  </custom-style>
+
+  <custom-style>
+    <style is="custom-style">
+      #target {
+        @apply --mixin;
+      }
+    </style>
+  </custom-style>
+
+  <div id="target"></div>
+  <dom-if><template></template></dom-if>
+  <dom-repeat><template></template></dom-repeat>
+
+  <script>
+    addEventListener('WebComponentsReady', () => {
+      class XFoo extends Polymer.Element {
+        connectedCallback() {
+          this.spy = sinon.spy(window.ShadyCSS, 'styleElement');
+          super.connectedCallback();
+          this.spy.restore();
+        }
+      }
+      customElements.define('x-foo', XFoo);
+    })
+  </script>
+
+  <script>
+      suite('styling-only-template', function () {
+
+        function assertComputed(element, value, pseudo) {
+          var computed = getComputedStyle(element, pseudo);
+          assert.equal(computed['border-top-width'], value, 'computed style incorrect');
+        }
+
+        test('elements without templates do not call ShadyCSS', () => {
+          let el = document.createElement('x-foo');
+          document.body.appendChild(el);
+          assert.ok(el.spy);
+          assert.isTrue(el.spy.notCalled);
+        });
+
+        test('dom-repeat and dom-if do not break custom-style', () => {
+          // force custom-style flushing
+          let target = document.querySelector('#target');
+          window.ShadyCSS.styleDocument();
+          assertComputed(target, '2px');
+        });
+      });
+  </script>
+</body>
diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
@@ -759,13 +759,7 @@
       Polymer.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.flush();
-      assertComputed(d, '4px');
-      Polymer.dom(styled.root).removeChild(d);
-      Polymer.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');
+      assertComputed(d, '0px');
       Polymer.dom(styled.root).appendChild(d);
       Polymer.flush();
       assertComputed(d, '4px');