1<!doctype html>
2<!--
3@license
4Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10-->
11<script src=".././test-flags.js"></script>
12<script src="../../node_modules/@webcomponents/webcomponents-platform/webcomponents-platform.js"></script>
13<script src="../../node_modules/es6-promise/dist/es6-promise.auto.min.js"></script>
14<script src="../../node_modules/@webcomponents/template/template.js"></script>
15<script src="../../node_modules/@webcomponents/html-imports/html-imports.min.js"></script>
16<script>
17  WCT = { waitFor: function (cb) { HTMLImports.whenReady(cb) } }
18</script>
19<script src="../../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
20<script src="../../apply-shim.min.js"></script>
21<script>
22  if (window.customElements && customElements.polyfillWrapFlushCallback) {
23    // delay definition of custom-style until after template polyfill loads
24    customElements.polyfillWrapFlushCallback(function (cb) {
25      HTMLImports.whenReady(cb);
26    });
27  }
28</script>
29<script src="../../custom-style-interface.min.js"></script>
30<script src="../module/generated/make-element.js"></script>
31<script src="../module/generated/custom-style-element.js"></script>
32<script src="../../node_modules/wct-browser-legacy/browser.js"></script>
33
34
35<custom-style>
36  <style>
37    #target {
38      display: block;
39      @apply --late;
40    }
41  </style>
42</custom-style>
43
44<template id="late">
45  <custom-style class="late-style">
46    <style>
47    html {
48      --late: {
49        border: 2px solid red;
50      };
51    }
52    </style>
53  </custom-style>
54</template>
55
56<div id="target"></div>
57
58<script>
59suite('custom-style only', function() {
60  var host = document.querySelector('#target');
61  test('custom-style by itself works as expected', function() {
62    assert.equal(getComputedStyle(host).getPropertyValue('display').trim(), 'block');
63  });
64  test('late custom-style updates styling', function(done) {
65    var lateTemplate = document.querySelector('template#late');
66    document.body.appendChild(document.importNode(lateTemplate.content, true));
67    // two rAF to wait for after custom-style-interface's batching
68    requestAnimationFrame(function() {
69      requestAnimationFrame(function() {
70        assert.equal(getComputedStyle(host).borderTopWidth.trim(), '2px');
71        done();
72      });
73    });
74  })
75})
76</script>