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