|
| 1 | +<!DOCTYPE html> |
| 2 | +<!-- |
| 3 | +Copyright 2013 The Polymer Authors. All rights reserved. |
| 4 | +Use of this source code is governed by a BSD-style |
| 5 | +license that can be found in the LICENSE file. |
| 6 | +--> |
| 7 | +<html> |
| 8 | +<head> |
| 9 | + <meta name="viewport" content="initial-scale=1.0"> |
| 10 | + <title>Using combinators styling</title> |
| 11 | + <script src="../../../platform.js"></script> |
| 12 | + <script src="register.js"></script> |
| 13 | + <script src="../../../../tools/test/htmltest.js"></script> |
| 14 | + <script src="../../../node_modules/chai/chai.js"></script> |
| 15 | +</head> |
| 16 | +<body> |
| 17 | + |
| 18 | + <template id="x-foo"> |
| 19 | + <style> |
| 20 | + x-bar ^ .bar { |
| 21 | + background: red; |
| 22 | + } |
| 23 | + |
| 24 | + x-bar ^^ .zot { |
| 25 | + color: white; |
| 26 | + } |
| 27 | + </style> |
| 28 | + <x-bar></x-bar> |
| 29 | + </template> |
| 30 | + <template id="x-bar"> |
| 31 | + <style> |
| 32 | + x-zot ^ .zot { |
| 33 | + background: green; |
| 34 | + } |
| 35 | + </style> |
| 36 | + <div class="bar">Bar</div> |
| 37 | + <x-zot></x-zot> |
| 38 | + </template> |
| 39 | + |
| 40 | + <template id="x-zot"> |
| 41 | + <div class="zot">Zot</div> |
| 42 | + </template> |
| 43 | + |
| 44 | + |
| 45 | + <script> |
| 46 | + XZot = register('x-zot', '', HTMLElement.prototype, ['x-zot']); |
| 47 | + XBar = register('x-bar', '', HTMLElement.prototype, ['x-bar']); |
| 48 | + XFoo = register('x-foo', '', HTMLElement.prototype, ['x-foo']); |
| 49 | + </script> |
| 50 | + |
| 51 | + <x-foo></x-foo> |
| 52 | + |
| 53 | + <script> |
| 54 | + document.addEventListener('WebComponentsReady', function() { |
| 55 | + var foo = document.querySelector('x-foo'); |
| 56 | + var bar = foo.shadowRoot.querySelector('x-bar').shadowRoot |
| 57 | + .querySelector('.bar'); |
| 58 | + |
| 59 | + chai.assert.equal(getComputedStyle(bar).backgroundColor, 'rgb(255, 0, 0)', |
| 60 | + '^ styles are applied (backgroundColor)'); |
| 61 | + |
| 62 | + var zot = foo.shadowRoot.querySelector('x-bar').shadowRoot |
| 63 | + .querySelector('x-zot').shadowRoot.querySelector('.zot'); |
| 64 | + |
| 65 | + chai.assert.equal(getComputedStyle(zot).backgroundColor, 'rgb(0, 128, 0)', |
| 66 | + '^ styles are applied (backgroundColor)'); |
| 67 | + chai.assert.equal(getComputedStyle(zot).color, 'rgb(255, 255, 255)', |
| 68 | + '^^ styles are applied (color)'); |
| 69 | + done(); |
| 70 | + |
| 71 | + |
| 72 | + }); |
| 73 | + </script> |
| 74 | +</body> |
| 75 | +</html> |
0 commit comments