1<!doctype html>
2<!--
3@license
4Copyright (c) 2018 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<html>
12
13<head>
14
15  <meta charset="utf-8">
16  <script src="./test-flags.js"></script>
17  <script src="../node_modules/wct-browser-legacy/browser.js"></script>
18  <script src="../node_modules/@webcomponents/webcomponents-platform/webcomponents-platform.js"></script>
19  <script src="../node_modules/es6-promise/dist/es6-promise.auto.min.js"></script>
20  <script src="../node_modules/@webcomponents/template/template.js"></script>
21  <script src="../node_modules/@webcomponents/html-imports/html-imports.min.js"></script>
22  <script src="../node_modules/@webcomponents/shadydom/shadydom.min.js"></script>
23  <script src="../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
24  <script src="../scoping-shim.min.js"></script>
25  <script src="../custom-style-interface.min.js"></script>
26  <script src="module/generated/custom-style-element.js"></script>
27  <script src="module/generated/make-element.js"></script>
28  <title>Apply Shim Deferred</title>
29</head>
30<body>
31  <custom-style>
32    <style>
33      html {
34        --foo: {
35          background-color: rgb(0, 0, 255);
36        }
37      }
38    </style>
39  </custom-style>
40  <template id="x-foo">
41    <style>
42      :host {
43        display: block;
44        height: 100px;
45        width: 100px;
46        background-color: rgb(255, 0, 0);
47        @apply --foo;
48      }
49    </style>
50  </template>
51  <x-foo></x-foo>
52  <!-- emulate apply-shim imported into a module context -->
53  <script id="applyScript" src="../apply-shim.min.js" defer></script>
54  <script>
55    suite('Deferred Apply Shim', function() {
56      test('Styling works as expected', function() {
57        let resolveFn = null;
58        const promise = new Promise((resolve) => {resolveFn = resolve}).then(() => {
59          // IE 11 timing issue
60          if (window.HTMLTemplateElement.bootstrap) {
61            HTMLTemplateElement.bootstrap(document);
62          }
63          window.makeElement('x-foo');
64        }).then(() => {
65          const el = document.querySelector('x-foo');
66          assert.equal(getComputedStyle(el).getPropertyValue('background-color').trim(), 'rgb(0, 0, 255)');
67        });
68        if (document.readyState === 'complete') {
69          resolveFn();
70        } else {
71          window.addEventListener('load', resolveFn);
72          window.addEventListener('DOMContentLoaded', () => {
73            window.removeEventListener('load', resolveFn);
74            resolveFn();
75          });
76        }
77        return promise;
78      })
79    });
80  </script>
81</body>
82</html>