systrace/catapult/third_party/polymer/components/shadycss/tests/lazy-init.html - platform/prebuilts/fullsdk-darwin/platform-tools - Git at Google

 <!doctype html>
 <!--
 @license
 Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <script>WCT = { waitFor(cb) { addEventListener('DOMContentLoaded', cb) } };</script>
 <script src="test-flags.js"></script>
 <script src="../node_modules/wct-browser-legacy/browser.js"></script>
 <script src="../node_modules/@webcomponents/webcomponents-platform/webcomponents-platform.js"></script>
 <script src="../node_modules/es6-promise/dist/es6-promise.auto.min.js"></script>
 <script src="../node_modules/@webcomponents/template/template.js"></script>
 <script src="../node_modules/@webcomponents/html-imports/html-imports.min.js"></script>
 <script src="../node_modules/@webcomponents/shadydom/shadydom.min.js"></script>
 <script src="../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
 <script src="../scoping-shim.min.js"></script>
 <script src="../apply-shim.min.js"></script>
 <script src="../custom-style-interface.min.js"></script>
 <template id="eager-host">
   <style>
     :host {
       display: block;
       height: 100px;
       background-color: blue;
     }

     :host > late-client {
       --foo: rgb(255, 0, 0);
     }
   </style>
   <late-client></late-client>
 </template>
 <template id="late-client">
   <style>
     :host {
       display: block;
       color: var(--foo);
     }

     div {
       border: 2px solid rgb(0, 255, 0);
       border-color: var(--foo);
     }
   </style>
   <div>Hello!</div>
 </template>

 <template id="x-parent">
   <style>
     :host {
       --property: 10px solid black;
     }
   </style>
   <x-child></x-child>
 </template>
 <template id="x-child">
   <style>
     div {
       border: var(--property);
     }
   </style>
   <div></div>
 </template>

 <script>
   class LateClient extends HTMLElement {
     constructor() {
       super();
       this.initialized = false;
       this.attachShadow({mode: 'open'});
     }
     init() {
       if (this.initialized) {
         return;
       }
       this.initialized = true;
       const template = document.querySelector(`template#${this.localName}`);
       if (!template.initialized) {
         template.initialized = true;
         window.ShadyCSS.prepareTemplate(template, this.localName);
       }
       this.shadowRoot.appendChild(template.content.cloneNode(true));
       window.ShadyCSS.styleElement(this);
     }
     connectedCallback() {
       if (this.initialized) {
         window.ShadyCSS.styleElement(this);
       }
     }
   }

   class EagerHost extends HTMLElement {
     constructor() {
       super();
       this.template = document.querySelector(`template#${this.localName}`);
       if (!this.template.initialized) {
         this.template.initialized = true;
         window.ShadyCSS.prepareTemplate(this.template, this.localName);
       }
     }
     connectedCallback() {
       window.ShadyCSS.styleElement(this);
       if (this.template && !this.shadowRoot) {
         this.attachShadow({mode: 'open'});
         this.shadowRoot.appendChild(this.template.content.cloneNode(true));
       }
     }
   }

   class StampBeforeStyle extends HTMLElement {
     constructor() {
       super();
       this.template = document.querySelector(`template#${this.localName}`);
       if (!this.template.initialized) {
         this.template.initialized = true;
         window.ShadyCSS.prepareTemplate(this.template, this.localName);
       }
     }
     connectedCallback() {
       if (this.template && !this.shadowRoot) {
         this.attachShadow({ mode: 'open' });
         this.shadowRoot.appendChild(this.template.content.cloneNode(true));
       }
       window.ShadyCSS.styleElement(this);
     }
   }

   suite('Lazy Initialization', function() {
     test('Late child element is eventually correct', function() {
       customElements.define('late-client', class extends LateClient{});
       customElements.define('eager-host', class extends EagerHost{});
       const host = document.createElement('eager-host');
       document.body.appendChild(host);
       window.ShadyCSS.styleDocument();
       const inner = host.shadowRoot.querySelector('late-client');
       if (inner.init) {
         inner.init();
       }
       const div = inner.shadowRoot.querySelector('div');
       assert.equal(getComputedStyle(div).getPropertyValue('border-color').trim(), 'rgb(255, 0, 0)');
     });

     test('Custom Property Shim can force unprepared parent to evaluate', function() {
       customElements.define('x-child', class extends StampBeforeStyle {});
       customElements.define('x-parent', class extends StampBeforeStyle {});
       const host = document.createElement('x-parent');
       document.body.appendChild(host);
       const inner = host.shadowRoot.querySelector('x-child');
       const div = inner.shadowRoot.querySelector('div');
       assert.equal(getComputedStyle(div).getPropertyValue('border-top-width').trim(), '10px');
     });
   });
 </script>
	<!doctype html>
	<!--
	@license
	Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
	This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
	The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
	The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
	Code distributed by Google as part of the polymer project is also
	subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
	-->
	<script>WCT = { waitFor(cb) { addEventListener('DOMContentLoaded', cb) } };</script>
	<script src="test-flags.js"></script>
	<script src="../node_modules/wct-browser-legacy/browser.js"></script>
	<script src="../node_modules/@webcomponents/webcomponents-platform/webcomponents-platform.js"></script>
	<script src="../node_modules/es6-promise/dist/es6-promise.auto.min.js"></script>
	<script src="../node_modules/@webcomponents/template/template.js"></script>
	<script src="../node_modules/@webcomponents/html-imports/html-imports.min.js"></script>
	<script src="../node_modules/@webcomponents/shadydom/shadydom.min.js"></script>
	<script src="../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
	<script src="../scoping-shim.min.js"></script>
	<script src="../apply-shim.min.js"></script>
	<script src="../custom-style-interface.min.js"></script>
	<template id="eager-host">
	<style>
	:host {
	display: block;
	height: 100px;
	background-color: blue;
	}

	:host > late-client {
	--foo: rgb(255, 0, 0);
	}
	</style>
	<late-client></late-client>
	</template>
	<template id="late-client">
	<style>
	:host {
	display: block;
	color: var(--foo);
	}

	div {
	border: 2px solid rgb(0, 255, 0);
	border-color: var(--foo);
	}
	</style>
	<div>Hello!</div>
	</template>

	<template id="x-parent">
	<style>
	:host {
	--property: 10px solid black;
	}
	</style>
	<x-child></x-child>
	</template>
	<template id="x-child">
	<style>
	div {
	border: var(--property);
	}
	</style>
	<div></div>
	</template>

	<script>
	class LateClient extends HTMLElement {
	constructor() {
	super();
	this.initialized = false;
	this.attachShadow({mode: 'open'});
	}
	init() {
	if (this.initialized) {
	return;
	}
	this.initialized = true;
	const template = document.querySelector(`template#${this.localName}`);
	if (!template.initialized) {
	template.initialized = true;
	window.ShadyCSS.prepareTemplate(template, this.localName);
	}
	this.shadowRoot.appendChild(template.content.cloneNode(true));
	window.ShadyCSS.styleElement(this);
	}
	connectedCallback() {
	if (this.initialized) {
	window.ShadyCSS.styleElement(this);
	}
	}
	}

	class EagerHost extends HTMLElement {
	constructor() {
	super();
	this.template = document.querySelector(`template#${this.localName}`);
	if (!this.template.initialized) {
	this.template.initialized = true;
	window.ShadyCSS.prepareTemplate(this.template, this.localName);
	}
	}
	connectedCallback() {
	window.ShadyCSS.styleElement(this);
	if (this.template && !this.shadowRoot) {
	this.attachShadow({mode: 'open'});
	this.shadowRoot.appendChild(this.template.content.cloneNode(true));
	}
	}
	}

	class StampBeforeStyle extends HTMLElement {
	constructor() {
	super();
	this.template = document.querySelector(`template#${this.localName}`);
	if (!this.template.initialized) {
	this.template.initialized = true;
	window.ShadyCSS.prepareTemplate(this.template, this.localName);
	}
	}
	connectedCallback() {
	if (this.template && !this.shadowRoot) {
	this.attachShadow({ mode: 'open' });
	this.shadowRoot.appendChild(this.template.content.cloneNode(true));
	}
	window.ShadyCSS.styleElement(this);
	}
	}

	suite('Lazy Initialization', function() {
	test('Late child element is eventually correct', function() {
	customElements.define('late-client', class extends LateClient{});
	customElements.define('eager-host', class extends EagerHost{});
	const host = document.createElement('eager-host');
	document.body.appendChild(host);
	window.ShadyCSS.styleDocument();
	const inner = host.shadowRoot.querySelector('late-client');
	if (inner.init) {
	inner.init();
	}
	const div = inner.shadowRoot.querySelector('div');
	assert.equal(getComputedStyle(div).getPropertyValue('border-color').trim(), 'rgb(255, 0, 0)');
	});

	test('Custom Property Shim can force unprepared parent to evaluate', function() {
	customElements.define('x-child', class extends StampBeforeStyle {});
	customElements.define('x-parent', class extends StampBeforeStyle {});
	const host = document.createElement('x-parent');
	document.body.appendChild(host);
	const inner = host.shadowRoot.querySelector('x-child');
	const div = inner.shadowRoot.querySelector('div');
	assert.equal(getComputedStyle(div).getPropertyValue('border-top-width').trim(), '10px');
	});
	});
	</script>