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/@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="../../apply-shim.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<script src="../../node_modules/wct-browser-legacy/browser.js"></script> 25 26<template id="late"> 27 <custom-style class="late-style"> 28 <style> 29 html { 30 --late: { 31 border: 2px solid red; 32 }; 33 } 34 </style> 35 </custom-style> 36</template> 37 38<template id="x-late"> 39 <style> 40 :host { 41 display: block; 42 @apply --late; 43 } 44 </style> 45 <div>late</div> 46</template> 47 48<template id="x-host"> 49 <style> 50 :host { 51 display: block; 52 padding: 4px; 53 } 54 </style> 55 <x-late></x-late> 56</template> 57 58<x-host></x-host> 59 60<script> 61suite('Async custom-style', function() { 62 suiteSetup(function() { 63 makeElement('x-host'); 64 }); 65 test('late custom-style updates elements', function(done) { 66 var lateTemplate = document.querySelector('template#late'); 67 var host = document.querySelector('x-host'); 68 var inner = host.shadowRoot.querySelector('x-late'); 69 requestAnimationFrame(function() { 70 document.body.appendChild(document.importNode(lateTemplate.content, true)); 71 makeElement('x-late'); 72 requestAnimationFrame(function() { 73 assert.equal(getComputedStyle(inner).borderTopWidth.trim(), '2px'); 74 done(); 75 }); 76 }); 77 }) 78}) 79</script>