1<!doctype html> 2<!-- 3@license 4Copyright (c) 2014 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> 12WCT = {waitFor: function (cb) {HTMLImports.whenReady(cb)}} 13</script> 14<script src="../../node_modules/wct-browser-legacy/browser.js"></script> 15<script src="../../node_modules/@webcomponents/webcomponents-platform/webcomponents-platform.js"></script> 16<script src="../../node_modules/es6-promise/dist/es6-promise.auto.min.js"></script> 17<script src="../../node_modules/@webcomponents/template/template.js"></script> 18<script src="../../node_modules/@webcomponents/html-imports/html-imports.min.js"></script> 19<script src="../../node_modules/@webcomponents/shadydom/shadydom.min.js"></script> 20<script src="../../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script> 21<script src="../../custom-style-interface.min.js"></script> 22<script src="../module/generated/make-element.js"></script> 23<script src="../module/generated/custom-style-element.js"></script> 24 25<custom-style> 26 <style> 27 html { 28 --foo: rgb(123, 123, 123); 29 } 30 </style> 31</custom-style> 32 33<template id="x-inner"> 34 <style> 35 :host { 36 display: block; 37 height: 100px; 38 width: 100px; 39 border: 4px solid blue; 40 background-color: var(--foo); 41 } 42 </style> 43</template> 44 45<template id="x-outer"> 46 <style> 47 :host { 48 display: block; 49 } 50 </style> 51 <x-inner></x-inner> 52</template> 53 54<x-outer id="target"></x-outer> 55 56<script> 57 suite('Custom Style upgrades', function() { 58 suiteSetup(function() { 59 makeElement('x-inner'); 60 makeElement('x-outer'); 61 }); 62 test('custom-style applies to deeply nested elements', function() { 63 var target = document.querySelector('#target'); 64 var inner = target.shadowRoot.querySelector('x-inner'); 65 assert.equal(getComputedStyle(inner).backgroundColor, 'rgb(123, 123, 123)'); 66 }); 67 }); 68</script>