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