Add more custom-style tests

Fix AsyncRender to allow new tasks for another scheduled run Update README with styling changes Fixes #25
Polymer · Aug 4, 2016 · 576afc2 · 576afc2
1 parent eff0157
commit 576afc2
Show file tree

Hide file tree

Showing 8 changed files with 246 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -69,6 +69,7 @@ Events that are listened to on patched elements are patched. They have the (begi
   * ::shadow, /deep/, :host-context()
 * Replace ::content with ::slotted()
   * Can only style distributed child nodes, must give a compound selector to ::slotted();
+* Imperativly created custom-styles, `document.createElement('style', 'custom-style')`, are no longer supported.
 
 ### Element definitions
 * Extending native elements (`is`): We will not produce `is` elements. Although still included in the v1 custom elements [spec](https://html.spec.whatwg.org/#custom-elements-customized-builtin-example) and scheduled for implementation in Chrome, because Apple [has stated](https://github.com/w3c/webcomponents/issues/509#issuecomment-233419167) it will not implmenent `is`, we will not be encouraging its use. Instead, a wrapper custom element can surround a native element, e.g. `<a is="my-endpoint">...</a>` could become `<my-endpoint><a>...</a></my-endpoint>`. Users will need to change existing `is` elements where necessary.
@@ -88,13 +89,13 @@ Events that are listened to on patched elements are patched. They have the (begi
 
   For the time being, `Polymer()` will automatically wrap template extensions used in Polymer element templates during template processing for backward-compatibility, although we may decide to remove this auto-wrapping in the future.  Templates used in the main document must be manually wrapped.
 * The `custom-style` element has also been changed to a standard custom element that must wrap a style element. In addition, the style element must contain a `type="custom-style"` attribute (so that it does not parse),  e.g.
-  
+
  ```
  <style is="custom-style">...</style>
    ```
- 
+
    should change to
- 
+
    ```
  <custom-style>
      <style type="custom-style">...</style>

diff --git a/src/utils/async-render.html b/src/utils/async-render.html
@@ -41,6 +41,7 @@
       var self = this;
       // before next render
       requestAnimationFrame(function() {
+        self._scheduled = false;
         self._flushQueue(self._beforeRenderQueue);
         // after the render
         setTimeout(function() {

diff --git a/test/runner.html b/test/runner.html
@@ -23,7 +23,10 @@
       'unit/shady-dynamic.html',
       'unit/styling-cross-scope-var.html',
       'unit/styling-cross-scope-apply.html',
-      'unit/custom-style.html'
+      'unit/custom-style.html',
+      'unit/custom-style-late.html',
+      'unit/custom-style-async.html',
+      'unit/custom-style-scope-cache.html'
     ];
 
     // http://eddmann.com/posts/cartesian-product-in-javascript/

diff --git a/test/unit/custom-style-async-import.html b/test/unit/custom-style-async-import.html
@@ -0,0 +1,24 @@
+<style is="custom-style">
+  :root {
+    --cs-blue: {
+      border : 8px solid blue;
+    };
+  }
+</style>
+<dom-module id="x-client">
+  <template>
+    <style>
+      :host {
+        display: inline-block;
+        border : 4px solid red;
+        @apply (--cs-blue);
+      }
+    </style>
+    x-client
+  </template>
+  <script>
+    Polymer({
+      is: 'x-client'
+    });
+  </script>
+</dom-module>
diff --git a/test/unit/custom-style-async.html b/test/unit/custom-style-async.html
@@ -0,0 +1,69 @@
+<!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>
+  <link rel="import" href="../../polymer.html">
+
+</head>
+<body>
+
+  <dom-module id="x-host">
+    <template>
+      <style>
+        :host {
+          display: inline-block;
+          border: 4px solid orange;
+          padding: 4px;
+        }
+        .whatever { color: var(--whatever); }
+      </style>
+      <x-client id="client"></x-client>
+    </template>
+  </dom-module>
+  <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'x-host'
+      })
+    });
+  </script>
+
+  <x-host id="host"></x-host>
+
+  <script>
+  /* global host */
+
+    suite('async global custom-style', function() {
+
+      test('async loaded custom-style applies', function(done) {
+        host.importHref('custom-style-async-import.html', function() {
+          Polymer.RenderStatus.afterNextRender(host.$.client, function() {
+            assertComputed(host.$.client, '8px');
+            done();
+          });
+        });
+      });
+
+    });
+
+    function assertComputed(element, value, property, pseudo) {
+      var computed = getComputedStyle(element, pseudo);
+      property = property || 'border-top-width';
+      assert.equal(computed[property], value, 'computed style incorrect for ' + property);
+    }
+
+  </script>
+
+</body>
+</html>
diff --git a/test/unit/custom-style-late-import.html b/test/unit/custom-style-late-import.html
@@ -0,0 +1,19 @@
+<script>
+  Polymer({
+    is: 'x-input',
+    extends : 'input'
+  });
+</script>
+<style is="custom-style">
+  input[is=x-input] {
+    border : 4px solid red;
+    @apply --cs-blue;
+  }
+</style>
+<style is="custom-style">
+  :root {
+    --cs-blue: {
+      border : 8px solid blue;
+    };
+  }
+</style>
diff --git a/test/unit/custom-style-late.html b/test/unit/custom-style-late.html
@@ -0,0 +1,43 @@
+<!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>
+  <link rel="import" href="../../polymer.html">
+  <link rel="import" href="custom-style-late-import.html">
+
+</head>
+<body>
+  <input id="input" is="x-input">
+
+  <script>
+  /* global input */
+
+    suite('custom-style late property definition', function() {
+
+      test('late defined properties applied to custom-style', function() {
+        assertComputed(input, '8px');
+      });
+
+    });
+
+    function assertComputed(element, value, property, pseudo) {
+      var computed = getComputedStyle(element, pseudo);
+      property = property || 'border-top-width';
+      assert.equal(computed[property], value, 'computed style incorrect for ' + property);
+    }
+
+  </script>
+
+</body>
+</html>
diff --git a/test/unit/custom-style-scope-cache.html b/test/unit/custom-style-scope-cache.html
@@ -0,0 +1,82 @@
+<!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>
+  <link rel="import" href="../../polymer.html">
+
+</head>
+<body>
+  <style is="custom-style">
+    .c {
+      --cache-element-border: 8px solid blue;
+    }
+  </style>
+  <dom-module id="cache-element">
+    <template>
+      <style>
+        :host {
+          display: block;
+          border: var(--cache-element-border, 4px solid orange);
+        }
+      </style>
+      cache-element
+    </template>
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'cache-element'
+      });
+    });
+    </script>
+  </dom-module>
+
+  <cache-element id="cache1" class="c"></cache-element>
+  <cache-element id="cache2"></cache-element>
+
+  <script>
+
+    suite('custom-style scope cache', function() {
+
+      test('elements created declaratively conditionally styled via custom style receive correct properties', function() {
+        var t1 = document.querySelector('#cache1');
+        var t2 = document.querySelector('#cache2');
+        assertComputed(t1, '8px');
+        assertComputed(t2, '4px');
+      });
+
+
+      test('elements created imperatively conditionally styled via custom style receive correct properties', function() {
+        var t1 = document.createElement('cache-element');
+        t1.classList.add('c');
+        var t2 = document.createElement('cache-element');
+        document.body.appendChild(t1);
+        document.body.appendChild(t2);
+        CustomElements.takeRecords();
+        assertComputed(t1, '8px');
+        assertComputed(t2, '4px');
+      });
+
+    });
+
+
+    function assertComputed(element, value, property, pseudo) {
+      var computed = getComputedStyle(element, pseudo);
+      property = property || 'border-top-width';
+      assert.equal(computed[property], value, 'computed style incorrect for ' + property);
+    }
+
+  </script>
+
+</body>
+</html>