1<!doctype html>
2<head>
3  <script>
4  WCT = {waitFor: function (cb) {HTMLImports.whenReady(cb)}}
5  </script>
6  <script src="./test-flags.js"></script>
7  <script src="../node_modules/wct-browser-legacy/browser.js"></script>
8  <script src="../node_modules/@webcomponents/webcomponents-platform/webcomponents-platform.js"></script>
9  <script src="../node_modules/es6-promise/dist/es6-promise.auto.min.js"></script>
10  <script src="../node_modules/@webcomponents/template/template.js"></script>
11  <script src="../node_modules/@webcomponents/html-imports/html-imports.min.js"></script>
12  <script src="../node_modules/@webcomponents/shadydom/shadydom.min.js"></script>
13  <script src="../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
14  <script src="../scoping-shim.min.js"></script>
15  <script src="../apply-shim.min.js"></script>
16  <script src="../custom-style-interface.min.js"></script>
17  <script src="module/generated/make-element.js"></script>
18</head>
19<body>
20    <div>
21      <x-item-a>item A</x-item-a>
22      <x-item-b>item B</x-item-b>
23    </div>
24  <x-menu>
25  </x-menu>
26  <x-menu-group>
27  </x-menu-group>
28
29    <template id="x-item-a">
30      <style>
31      :host {
32        display:block;
33        background: rgb(255, 255, 255);
34        @apply --item-mixin;
35      }
36      </style>
37      <slot></slot>
38    </template>
39
40    <template id="x-menu">
41      <style>
42        :host {
43          display:block;
44          border:1px solid black;
45          margin:2px;
46          --item-mixin:{background:rgb(0, 0, 255);};
47        }
48      </style>
49      <x-item-a>menu item A</x-item-a>
50      <x-item-b>menu item B</x-item-b>
51    </template>
52
53    <template id="x-group">
54      <style>
55      :host{
56        display:block;
57        --item-mixin:{background:rgb(255, 0, 0);};
58        }
59      </style>
60      <x-item-a>group item A</x-item-a>
61      <x-item-b>group item B</x-item-b>
62    </template>
63
64    <template id="x-menu-group">
65      <style>
66        :host {
67          display:block;
68          border:1px solid black;
69          margin:2px;
70          --item-mixin:{background:rgb(0, 0, 255);};
71        }
72      </style>
73      <x-group></x-group>
74    </template>
75
76    <template id="x-item-b">
77      <style>
78      :host {
79        display:block;
80        background: rgb(255, 255, 255);
81        @apply --item-mixin;
82      }
83      </style>
84      <slot></slot>
85    </template>
86
87    <template id="x-dynamic">
88      <style>
89        :host {
90          display: block;
91          background: rgb(255, 255, 255);
92          @apply --mixin;
93        }
94      </style>
95      <span>dynamic item</span>
96    </template>
97
98    <template id="x-dynamic-container">
99      <style>
100        :host {
101          --mixin: {
102            background-color: rgb(123, 123, 123);
103          };
104        }
105      </style>
106      <x-dynamic></x-dynamic>
107    </template>
108
109    <script>
110    suite('Mixin Ordering', function() {
111      suiteSetup(function() {
112        makeElement('x-item-a');
113        makeElement('x-menu');
114        makeElement('x-group');
115        makeElement('x-menu-group');
116        makeElement('x-item-b');
117      });
118      test('mixins are re-evaluated with element upgrade', function() {
119        function checkBg(node) {
120          var itemA = node.querySelector('x-item-a');
121          var itemB = node.querySelector('x-item-b');
122          var itemA_BG = getComputedStyle(itemA)['background-color'].trim();
123          var itemB_BG = getComputedStyle(itemB)['background-color'].trim();
124          assert.equal(itemA_BG, itemB_BG, 'x-item-a and x-item-b should have the same background color');
125        }
126        checkBg(document.querySelector('div'));
127        checkBg(document.querySelector('x-menu').shadowRoot);
128        checkBg(document.querySelector('x-menu-group').shadowRoot.querySelector('x-group').shadowRoot);
129      });
130      test('dynamically updates', function() {
131        makeElement('x-dynamic');
132        makeElement('x-dynamic-container');
133        var container = document.createElement('x-dynamic-container');
134        document.body.appendChild(container);
135        if (window.ShadyDOM) {
136          ShadyDOM.flush();
137        }
138        assert.equal(getComputedStyle(container.shadowRoot.querySelector('x-dynamic'))['background-color'].trim(), 'rgb(123, 123, 123)');
139      });
140    });
141    </script>
142</body>
143
144