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<html>
12
13<head>
14
15  <meta charset="utf-8">
16  <script>
17    WCT = { waitFor: function (cb) { HTMLImports.whenReady(cb) } }
18  </script>
19  <script src="./test-flags.js"></script>
20  <script src="../node_modules/@webcomponents/webcomponents-platform/webcomponents-platform.js"></script>
21  <script src="../node_modules/es6-promise/dist/es6-promise.auto.min.js"></script>
22  <script src="../node_modules/@webcomponents/template/template.js"></script>
23  <script src="../node_modules/@webcomponents/html-imports/html-imports.min.js"></script>
24  <script src="../node_modules/@webcomponents/shadydom/shadydom.min.js"></script>
25  <script src="../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
26  <script src="../scoping-shim.min.js"></script>
27  <script src="../apply-shim.min.js"></script>
28  <script>
29    if (customElements.polyfillWrapFlushCallback) {
30      // delay definition of custom-style until after template polyfill loads
31      customElements.polyfillWrapFlushCallback(function (cb) {
32        HTMLImports.whenReady(cb);
33      });
34    }
35  </script>
36  <script src="../custom-style-interface.min.js"></script>
37  <script src="module/generated/custom-style-element.js"></script>
38  <script src="module/generated/make-element.js"></script>
39  <script src="../node_modules/wct-browser-legacy/browser.js"></script>
40  <title>Complicated Order</title>
41
42</head>
43
44<body>
45  <template id="child-element">
46    <style>
47      p {
48        @apply --my-mixin;
49      }
50    </style>
51    <p>I'm a DOM element. This is my local DOM!</p>
52  </template>
53
54  <template id="container-element">
55    <style>
56      child-element {
57        --my-mixin: {
58          background-color: rgb(255, 0, 0);
59        }
60      }
61    </style>
62    <child-element></child-element>
63  </template>
64
65  <template id="other-container-element">
66    <style>
67      child-element {
68        --my-mixin: {
69          font-size: 40px;
70          background-color: rgb(0, 255, 0);
71        }
72      }
73    </style>
74    <child-element></child-element>
75  </template>
76
77  <container-element></container-element>
78  <other-container-element></other-container-element>
79
80  <script>
81    suite('Complicated Order', () => {
82      function assertComputed(node, property, expectedValue, msg) {
83        assert.equal(getComputedStyle(node).getPropertyValue(property).trim(), expectedValue, msg);
84      }
85      suiteSetup(() => {
86        makeElement('child-element');
87        makeElement('container-element');
88        makeElement('other-container-element');
89      });
90      test('complicated ordering works as expected', () => {
91        let initialFontSize = getComputedStyle(document.head).getPropertyValue('font-size').trim();
92        let con = document.querySelector('container-element');
93        let oth = document.querySelector('other-container-element');
94        assertComputed(con.shadowRoot.querySelector('child-element').shadowRoot.querySelector('p'), 'background-color', 'rgb(255, 0, 0)');
95        assertComputed(con.shadowRoot.querySelector('child-element').shadowRoot.querySelector('p'), 'font-size', initialFontSize);
96        assertComputed(oth.shadowRoot.querySelector('child-element').shadowRoot.querySelector('p'), 'background-color', 'rgb(0, 255, 0)');
97        assertComputed(oth.shadowRoot.querySelector('child-element').shadowRoot.querySelector('p'), 'font-size', '40px');
98        con.parentNode.removeChild(con);
99        oth.parentNode.removeChild(oth);
100      })
101    })
102  </script>
103</body>
104</html>
105