1<!doctype html>
2<!--
3@license
4Copyright (c) 2017 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>WCT = {waitFor(cb){addEventListener('DOMContentLoaded', cb)}};</script>
12<script src="test-flags.js"></script>
13<script src="../node_modules/wct-browser-legacy/browser.js"></script>
14<script src="../node_modules/@webcomponents/webcomponents-platform/webcomponents-platform.js"></script>
15<script src="../node_modules/es6-promise/dist/es6-promise.auto.min.js"></script>
16<script src="../node_modules/@webcomponents/template/template.js"></script>
17<script src="../node_modules/@webcomponents/html-imports/html-imports.min.js"></script>
18<script src="../node_modules/@webcomponents/shadydom/shadydom.min.js"></script>
19<script src="../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
20<script src="module/generated/make-element.js"></script>
21
22<custom-style>
23  <style>
24    html {
25      --coloring: {
26        color: rgb(0, 0, 255);
27        background-color: rgb(255, 0, 0);
28      }
29    }
30  </style>
31</custom-style>
32
33<custom-style>
34  <style>
35    html {
36      --border: 2px solid black;
37    }
38  </style>
39</custom-style>
40
41<template id="x-inner">
42  <style>
43    :host {
44      @apply --inner;
45      @apply --coloring;
46    }
47  </style>
48<slot></slot>
49</template>
50
51<template id="x-element">
52  <style>
53    :host {
54      display: block;
55      border: var(--border);
56      @apply --coloring;
57    }
58    x-inner {
59      --inner: {
60        border: 10px solid black;
61      }
62    }
63  </style>
64  <div>What color?</div>
65  <x-inner>Inner</x-inner>
66</template>
67
68<template id="x-early">
69  <style>
70    :host {
71      display: block;
72      background: rgb(123, 123, 123);
73      color: rgb(255, 165, 0);
74      border: var(--border, 10px dotted blue);
75      @apply --coloring;
76    }
77  </style>
78  <div>Early!</div>
79</template>
80
81<x-early></x-early>
82
83<script>
84  function loadScript(src) {
85    console.log(`loading ${src}`);
86    let script = document.createElement('script')
87    script.src = src;
88    let p = new Promise((resolve, reject) => {
89      script.onload = () => {console.log(`loaded ${src}`); resolve()};
90      script.onerror = () => {console.error(`error ${src}`); reject()};
91    });
92    document.head.appendChild(script);
93    return p;
94  }
95
96  function registerEarly() {
97    makeElement('x-early');
98  }
99
100  function loadScopingShim() {
101    return loadScript('../scoping-shim.min.js');
102  }
103
104  function loadCustomStyle() {
105    return loadScript('../custom-style-interface.min.js').then(() => {
106      return loadScript('module/generated/custom-style-element.js')
107    });
108  }
109
110  function loadApplyShim() {
111    return loadScript('../apply-shim.min.js');
112  }
113
114  function register() {
115    makeElement('x-inner');
116    makeElement('x-element');
117  }
118
119  function assertComputed(element, property, expected) {
120    let value = (getComputedStyle(element).getPropertyValue(property) || '').trim();
121    assert.equal(expected, value, `${property} on ${element.localName} incorrect`);
122  }
123
124  function chain(arr) {
125    let out = Promise.resolve();
126    for (let i = 0; i < arr.length; i++) {
127      out = out.then(arr[i]);
128    }
129    return out;
130  }
131
132  let orderSteps = {
133    scoping: loadScopingShim,
134    early: registerEarly,
135    apply: loadApplyShim,
136    custom: loadCustomStyle,
137  };
138
139  /**
140   * Support the following permutations of loading via url query params:
141   *
142   * Apply Shim, CustomStyle
143   * Scoping Shim, Apply Shim, Custom Style
144   * Apply Shim, Element, CustomStyle
145   * Scoping Shim, Element, Apply Shim, Custom Style
146   * Scoping Shim, Apply Shim, Element, Custom Style
147   */
148
149  suite('Dynamic ordering of components', () => {
150    let flags = window.WebComponents.flags;
151    let order = decodeURIComponent(flags.order || 'scoping,apply,custom').split(',');
152    let steps = chain(order.map(o => orderSteps[o]));
153    let otherFlags = `${flags.ce ? 'ce' : ''} ${flags.shadydom ? 'shadydom' : ''} ${flags.shimcssproperties ? 'shimcssproperties' : ''}`;
154    let needsScopingShim = window.ShadyDOM && window.ShadyDOM.inUse || flags.shimcssproperties;
155
156    test(`${order.join(', ')} with ${otherFlags}`, function() {
157      console.log(order, flags);
158      if (order.indexOf('scoping') === -1 && needsScopingShim) {
159        this.skip();
160      }
161      return steps.then(
162        register
163      ).then(() => {
164        let el = document.createElement('x-element');
165        document.body.appendChild(el);
166        assertComputed(el, 'background-color', 'rgb(255, 0, 0)');
167        assertComputed(el, 'border-top-width', '2px');
168        assertComputed(el.shadowRoot.querySelector('div'), 'color', 'rgb(0, 0, 255)');
169        assertComputed(el.shadowRoot.querySelector('x-inner'), 'border-top-width', '10px');
170      });
171    })
172  })
173</script>