diff options
Diffstat (limited to 'catapult/third_party/polymer/components/shadycss/tests/no-scopingshim')
6 files changed, 779 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/apply-shim.html b/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/apply-shim.html new file mode 100644 index 00000000..bac2b38c --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/apply-shim.html @@ -0,0 +1,309 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2014 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 +--> +<html> +<head> + + <meta charset="utf-8"> + <script> + WCT = {waitFor: function (cb) {HTMLImports.whenReady(cb)}} + </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="../../apply-shim.min.js"></script> + <script src="../../custom-style-interface.min.js"></script> + <script src="../module/generated/make-element.js"></script> + <script src="../module/generated/custom-style-element.js"></script> + <script src="../module/generated/style-util.js"></script> + <title>Apply Shim</title> + +</head> +<body> + <template id="basic"> + <style> + :host { + --mixin: { + border: 2px solid black; + }; + } + div { + @apply --mixin; + } + </style> + </template> + + <template id="defaults"> + <style> + :host { + --mixin: { + border: 2px solid black; + } + } + div { + border: 1px dotted orange; + @apply --mixin; + } + span { + border: inherit; + @apply --mixin; + } + span { + border: initial; + @apply --mixin; + } + </style> + </template> + + <template id="override"> + <style> + :host { + --override: { + padding: 2px; + }; + } + :host([override]) { + --override: { + border: 2px solid black; + }; + } + div { + @apply --override; + } + </style> + </template> + + <template id="override-with-property"> + <style> + :root { + --prop-mixin: { + border: 2px solid black; + }; + } + x-foo { + --prop-mixin: blue; + color: var(--prop-mixin); + } + div { + @apply --prop-mixin; + } + </style> + </template> + + <template id="define-with-var"> + <style> + :root { + --mixin-var: { + border: 2px solid black; + }; + } + div { + --mixin-var2: var(--mixin-var); + } + span { + --mixin-var: 20px; + --variable: var(--mixin-var); + } + </style> + </template> + + <template id="x-element"> + <style> + :host { + @apply --my-mixin; + } + </style> + </template> + + <template id="x-element2"> + <custom-style> + <style> + html { + --my-mixin: { + border: 2px solid black; + }; + } + </style> + </custom-style> + </template> + + <template id="css-build" css-build="shadow"> + <style>:host{@apply --fake;}</style> + </template> + + <template id="css-build-comment"><!--css-build:shadow--> + <style>:host{@apply --fake;}</style> + </template> + + <script> + suite('Apply Shim', function() { + function copy(name) { + var template = document.querySelector('template#' + name); + return template.content.cloneNode(true); + } + + function prep(templateName, elementName) { + var style = copy(templateName).querySelector('style'); + var ast = window.ShadyCSS.ApplyShim.transformStyle(style, elementName); + return {style: style, ast: ast}; + } + + suite('Basic', function() { + var style, ast; + suiteSetup(function() { + var info = prep('basic'); + style = info.style; + ast = info.ast; + style.textContent = window.StyleUtil.toCssText(ast); + }); + + test('style is transformed', function() { + var orig = copy('basic').querySelector('style'); + assert.notEqual(style.textContent, orig.textContent); + }); + + test('mixin became custom properties', function() { + var definition = ast.rules[0]; + var application = ast.rules[1]; + assert.match(definition.cssText, /--mixin_-_border:\s*2px solid black/); + assert.match(application.cssText, /border:\s*var\(--mixin_-_border\)/); + }); + }); + suite('Defaults', function() { + var style, ast; // eslint-disable-line no-unused-vars + suiteSetup(function() { + var info = prep('defaults'); + style = info.style; + ast = info.ast; + }); + + test('properties defined before mixin are used as defaults', function() { + var application = ast.rules[1]; + assert.match(application.cssText, /border:\s*var\(--mixin_-_border,\s*1px dotted orange\)/); + }); + + test('inherit and initial default values are preserved', function () { + var application = ast.rules[2]; + assert.match(application.cssText, /border:\s*var\(--mixin_-_border,\s*inherit\)/); + application = ast.rules[3]; + assert.match(application.cssText, /border:\s*var\(--mixin_-_border,\s*initial\)/); + }); + }); + + suite('override', function() { + var style, ast; // eslint-disable-line no-unused-vars + suiteSetup(function() { + var info = prep('override'); + style = info.style; + ast = info.ast; + }); + + test('mixin redefinition sets unused properties to initial', function() { + var def1 = ast.rules[0]; + assert.match(def1.cssText, /--override_-_padding:\s*2px/); + var def2 = ast.rules[1]; + assert.match(def2.cssText, /--override_-_padding:\s*initial/); + assert.match(def2.cssText, /--override_-_border:\s*2px solid black/); + }); + + test('mixin application includes all values', function() { + var application = ast.rules[2]; + assert.match(application.cssText, /padding:\s*var\(--override_-_padding\)/); + assert.match(application.cssText, /border:\s*var\(--override_-_border\)/); + }); + }); + + suite('override with property', function() { + var style, ast; // eslint-disable-line no-unused-vars + suiteSetup(function() { + var info = prep('override-with-property'); + style = info.style; + ast = info.ast; + }); + + test('mixin definition defers to property definition', function() { + var def = ast.rules[1]; + assert.notMatch(def.cssText, /border:\s*var\(--prop-mixin_-_border\)/); + }); + + test('mixin can still be used by other parts of the page', function() { + var def = ast.rules[2]; + assert.match(def.cssText, /border:\s*var\(--prop-mixin_-_border\)/); + }); + }); + + suite('define with var()', function() { + var style, ast; // eslint-disable-line no-unused-vars + suiteSetup(function() { + var info = prep('define-with-var'); + style = info.style; + ast = info.ast; + }); + + test('mixin-var2 is defined with mixin-var\'s values', function() { + var def = ast.rules[1]; + assert.match(def.cssText, /--mixin-var2_-_border:\s*var\(--mixin-var_-_border\)/); + }); + + test('var usage of mixin is not removed, preserving override functionality', function() { + var def = ast.rules[2]; + assert.match(def.cssText, /--variable:\s*var\(--mixin-var\)/); + }); + }); + + suite('invalidation on new definitions', function() { + var style, ast, element; + suiteSetup(function() { + makeElement('x-element'); + element = document.createElement('x-element'); + document.body.appendChild(element); + style = element.shadowRoot ? element.shadowRoot.querySelector('style') : document.head.querySelector('style[scope=x-element]'); + }); + + test('element initially has no definition', function() { + var ast = window.StyleUtil.rulesForStyle(style); + assert.equal(ast.rules[0].cssText, ';'); + }); + + test('Revalidating Apply Shim on element template fills in properties', function() { + var nodes = copy('x-element2'); + document.body.appendChild(nodes); + window.ShadyCSS.styleDocument(); + var ast = window.StyleUtil.rulesForStyle(style); + assert.match(ast.rules[0].cssText, /border:\s*var\(--my-mixin_-_border\)/); + }); + }); + + test('templates with "css-build" will not be processed by ApplyShim', function() { + makeElement('css-build'); + const template = document.querySelector('template#css-build'); + assert.equal(template._styleAst, undefined); + const style = template.content.querySelector('style'); + assert.match(style.textContent.trim(), /:host\s*{\s*@apply --fake;\s*}/); + }); + + test('templates with "css-build" comment will not be processed by ApplyShim', function () { + const template = document.querySelector('template#css-build-comment'); + const buildComment = template.content.firstChild; + assert.instanceOf(buildComment, Comment, 'first node in template content should be a Comment'); + makeElement('css-build-comment'); + assert.equal(template._styleAst, undefined); + const style = template.content.querySelector('style'); + assert.match(style.textContent.trim(), /:host\s*{\s*@apply --fake;\s*}/); + assert.equal(buildComment.parentNode, null, 'build comment should be removed'); + }); + }); + </script> +</body> +</html> diff --git a/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/complicated-mixin-ordering.html b/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/complicated-mixin-ordering.html new file mode 100644 index 00000000..7fb84257 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/complicated-mixin-ordering.html @@ -0,0 +1,94 @@ +<!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 +--> +<html> + +<head> + + <meta charset="utf-8"> + <script> + WCT = { waitFor: function (cb) { HTMLImports.whenReady(cb) } } + </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/custom-elements/custom-elements.min.js"></script> + <script src="../../apply-shim.min.js"></script> + <script src="../../custom-style-interface.min.js"></script> + <script src="../module/generated/make-element.js"></script> + <script src="../module/generated/custom-style-element.js"></script> + <script src="../module/generated/style-util.js"></script> + <title>Complicated Order</title> + +</head> + +<body> + <template id="child-element"> + <style> + p { + @apply --my-mixin; + } + </style> + <p>I'm a DOM element. This is my local DOM!</p> + </template> + + <template id="container-element"> + <style> + child-element { + --my-mixin: { + background-color: rgb(255, 0, 0); + } + } + </style> + <child-element></child-element> + </template> + + <template id="other-container-element"> + <style> + child-element { + --my-mixin: { + font-size: 40px; + background-color: rgb(0, 255, 0); + } + } + </style> + <child-element></child-element> + </template> + + <container-element></container-element> + <other-container-element></other-container-element> + + <script> + suite('Complicated Order', () => { + function assertComputed(node, property, expectedValue, msg) { + assert.equal(getComputedStyle(node).getPropertyValue(property).trim(), expectedValue, msg); + } + suiteSetup(() => { + makeElement('child-element'); + makeElement('container-element'); + makeElement('other-container-element'); + }); + test('complicated ordering works as expected', () => { + let initialFontSize = getComputedStyle(document.head).getPropertyValue('font-size').trim(); + let con = document.querySelector('container-element'); + let oth = document.querySelector('other-container-element'); + assertComputed(con.shadowRoot.querySelector('child-element').shadowRoot.querySelector('p'), 'background-color', 'rgb(255, 0, 0)'); + assertComputed(con.shadowRoot.querySelector('child-element').shadowRoot.querySelector('p'), 'font-size', initialFontSize); + assertComputed(oth.shadowRoot.querySelector('child-element').shadowRoot.querySelector('p'), 'background-color', 'rgb(0, 255, 0)'); + assertComputed(oth.shadowRoot.querySelector('child-element').shadowRoot.querySelector('p'), 'font-size', '40px'); + con.parentNode.removeChild(con); + oth.parentNode.removeChild(oth); + }) + }) + </script> +</body> +</html>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/custom-style-late.html b/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/custom-style-late.html new file mode 100644 index 00000000..c2a548f3 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/custom-style-late.html @@ -0,0 +1,79 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2014 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: function (cb) {HTMLImports.whenReady(cb)}} +</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="../../apply-shim.min.js"></script> +<script src="../../custom-style-interface.min.js"></script> +<script src="../module/generated/make-element.js"></script> +<script src="../module/generated/custom-style-element.js"></script> +<script src="../../node_modules/wct-browser-legacy/browser.js"></script> + +<template id="late"> + <custom-style class="late-style"> + <style> + html { + --late: { + border: 2px solid red; + }; + } + </style> + </custom-style> +</template> + +<template id="x-late"> + <style> + :host { + display: block; + @apply --late; + } + </style> + <div>late</div> +</template> + +<template id="x-host"> + <style> + :host { + display: block; + padding: 4px; + } + </style> + <x-late></x-late> +</template> + +<x-host></x-host> + +<script> +suite('Async custom-style', function() { + suiteSetup(function() { + makeElement('x-host'); + }); + test('late custom-style updates elements', function(done) { + var lateTemplate = document.querySelector('template#late'); + var host = document.querySelector('x-host'); + var inner = host.shadowRoot.querySelector('x-late'); + requestAnimationFrame(function() { + document.body.appendChild(document.importNode(lateTemplate.content, true)); + makeElement('x-late'); + requestAnimationFrame(function() { + assert.equal(getComputedStyle(inner).borderTopWidth.trim(), '2px'); + done(); + }); + }); + }) +}) +</script>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/custom-style-only.html b/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/custom-style-only.html new file mode 100644 index 00000000..28b59eed --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/custom-style-only.html @@ -0,0 +1,76 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2014 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 src=".././test-flags.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> + WCT = { waitFor: function (cb) { HTMLImports.whenReady(cb) } } +</script> +<script src="../../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script> +<script src="../../apply-shim.min.js"></script> +<script> + if (window.customElements && customElements.polyfillWrapFlushCallback) { + // delay definition of custom-style until after template polyfill loads + customElements.polyfillWrapFlushCallback(function (cb) { + HTMLImports.whenReady(cb); + }); + } +</script> +<script src="../../custom-style-interface.min.js"></script> +<script src="../module/generated/make-element.js"></script> +<script src="../module/generated/custom-style-element.js"></script> +<script src="../../node_modules/wct-browser-legacy/browser.js"></script> + + +<custom-style> + <style> + #target { + display: block; + @apply --late; + } + </style> +</custom-style> + +<template id="late"> + <custom-style class="late-style"> + <style> + html { + --late: { + border: 2px solid red; + }; + } + </style> + </custom-style> +</template> + +<div id="target"></div> + +<script> +suite('custom-style only', function() { + var host = document.querySelector('#target'); + test('custom-style by itself works as expected', function() { + assert.equal(getComputedStyle(host).getPropertyValue('display').trim(), 'block'); + }); + test('late custom-style updates styling', function(done) { + var lateTemplate = document.querySelector('template#late'); + document.body.appendChild(document.importNode(lateTemplate.content, true)); + // two rAF to wait for after custom-style-interface's batching + requestAnimationFrame(function() { + requestAnimationFrame(function() { + assert.equal(getComputedStyle(host).borderTopWidth.trim(), '2px'); + done(); + }); + }); + }) +}) +</script>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/custom-style.html b/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/custom-style.html new file mode 100644 index 00000000..8f8dfc7e --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/custom-style.html @@ -0,0 +1,80 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2014 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: function (cb) {HTMLImports.whenReady(cb)}} +</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="../../apply-shim.min.js"></script> +<script src="../../custom-style-interface.min.js"></script> +<script src="../module/generated/make-element.js"></script> +<script src="../module/generated/custom-style-element.js"></script> + +<custom-style> + <style> + html { + --foo: rgb(123, 123, 123); + --bar: { + border: 2px solid red; + } + } + </style> +</custom-style> + +<template id="x-inner"> + <style> + :host { + display: block; + height: 100px; + width: 100px; + border: 4px solid blue; + background-color: var(--foo); + @apply --bar; + } + </style> +</template> + +<template id="x-outer"> + <style> + :host { + display: block; + @apply --bar; + } + </style> + <x-inner></x-inner> +</template> + +<x-outer id="target"></x-outer> + +<script> + suite('Custom Style upgrades', function() { + suiteSetup(function() { + makeElement('x-inner'); + makeElement('x-outer'); + }); + test('custom-style applies to deeply nested elements', function() { + var target = document.querySelector('#target'); + var inner = target.shadowRoot.querySelector('x-inner'); + assert.equal(getComputedStyle(inner).backgroundColor, 'rgb(123, 123, 123)'); + }); + test('custom-style applied mixins update', function() { + var target = document.querySelector('#target'); + var inner = target.shadowRoot.querySelector('x-inner'); + assert.equal(getComputedStyle(target).borderTopWidth.trim(), '2px'); + assert.equal(getComputedStyle(inner).borderTopWidth.trim(), '2px'); + }); + }); +</script>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/mixin-ordering.html b/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/mixin-ordering.html new file mode 100644 index 00000000..8914f026 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/no-scopingshim/mixin-ordering.html @@ -0,0 +1,141 @@ +<!doctype html> +<head> + <script> + WCT = {waitFor: function (cb) {HTMLImports.whenReady(cb)}} + </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="../../apply-shim.min.js"></script> + <script src="../../custom-style-interface.min.js"></script> + <script src="../module/generated/make-element.js"></script> +</head> +<body> + <div> + <x-item-a>item A</x-item-a> + <x-item-b>item B</x-item-b> + </div> + <x-menu> + </x-menu> + <x-menu-group> + </x-menu-group> + + <template id="x-item-a"> + <style> + :host { + display:block; + background: rgb(255, 255, 255); + @apply --item-mixin; + } + </style> + <slot></slot> + </template> + + <template id="x-menu"> + <style> + :host { + display:block; + border:1px solid black; + margin:2px; + --item-mixin:{background:rgb(0, 0, 255);}; + } + </style> + <x-item-a>menu item A</x-item-a> + <x-item-b>menu item B</x-item-b> + </template> + + <template id="x-group"> + <style> + :host{ + display:block; + --item-mixin:{background:rgb(255, 0, 0);}; + } + </style> + <x-item-a>group item A</x-item-a> + <x-item-b>group item B</x-item-b> + </template> + + <template id="x-menu-group"> + <style> + :host { + display:block; + border:1px solid black; + margin:2px; + --item-mixin:{background:rgb(0, 0, 255);}; + } + </style> + <x-group></x-group> + </template> + + <template id="x-item-b"> + <style> + :host { + display:block; + background: rgb(255, 255, 255); + @apply --item-mixin; + } + </style> + <slot></slot> + </template> + + <template id="x-dynamic"> + <style> + :host { + display: block; + background: rgb(255, 255, 255); + @apply --mixin; + } + </style> + <span>dynamic item</span> + </template> + + <template id="x-dynamic-container"> + <style> + :host { + --mixin: { + background-color: rgb(123, 123, 123); + }; + } + </style> + <x-dynamic></x-dynamic> + </template> + + <script> + suite('Mixin Ordering', function() { + suiteSetup(function() { + makeElement('x-item-a'); + makeElement('x-menu'); + makeElement('x-group'); + makeElement('x-menu-group'); + makeElement('x-item-b'); + }); + test('mixins are re-evaluated with element upgrade', function() { + function checkBg(node) { + var itemA = node.querySelector('x-item-a'); + var itemB = node.querySelector('x-item-b'); + var itemA_BG = getComputedStyle(itemA)['background-color'].trim(); + var itemB_BG = getComputedStyle(itemB)['background-color'].trim(); + assert.equal(itemA_BG, itemB_BG, 'x-item-a and x-item-b should have the same background color'); + } + checkBg(document.querySelector('div')); + checkBg(document.querySelector('x-menu').shadowRoot); + checkBg(document.querySelector('x-menu-group').shadowRoot.querySelector('x-group').shadowRoot); + }); + test('dynamically updates', function() { + makeElement('x-dynamic'); + makeElement('x-dynamic-container'); + var container = document.createElement('x-dynamic-container'); + document.body.appendChild(container); + if (window.ShadyDOM) { + ShadyDOM.flush(); + } + assert.equal(getComputedStyle(container.shadowRoot.querySelector('x-dynamic'))['background-color'].trim(), 'rgb(123, 123, 123)'); + }); + }); + </script> +</body> + |