| <!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="./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> |
| <script src="module/generated/make-element.js"></script> |
| |
| <custom-style> |
| <style> |
| div#priority { |
| border: 1px solid black; |
| } |
| </style> |
| </custom-style> |
| </head> |
| <body> |
| |
| <template id="x-gchild"> |
| <style> |
| </style> |
| <div id="target">x-gchild</div> |
| </template> |
| |
| <template id="x-child"> |
| <div id="simple">simple</div> |
| <div id="complex1" class="scoped">complex1</div> |
| <div id="complex2" selected>complex2</div> |
| <div id="media">media</div> |
| <div id="shadow" class="shadowTarget">shadowTarget</div> |
| <div id="deep" class="deepTarget">deepTarget</div> |
| <x-gchild id="gchild1"></x-gchild> |
| <x-gchild id="gchild2" class="wide"></x-gchild> |
| </template> |
| |
| <template id="x-child2"> |
| <style> |
| :host(.wide) #target{ |
| border: none; |
| } |
| </style> |
| <div id="target">x-child2</div> |
| </template> |
| |
| <template id="x-scope-class"> |
| <div id="scope">Trivial</div> |
| </template> |
| |
| <template id="x-scoped"> |
| <style> |
| :host { |
| display: block; |
| border: 1px solid orange; |
| --keyframes100: 100px; |
| } |
| |
| :host(.wide) { |
| border-width: 2px; |
| } |
| |
| :host(.wide)::after { |
| content: '-content-'; |
| }; |
| |
| #keyframes2.special { |
| --keyframes100: 200px; |
| } |
| |
| #simple { |
| border: 3px solid orange; |
| } |
| |
| .scoped, [selected] { |
| border: 4px solid pink; |
| } |
| |
| @media(max-width: 10000px) { |
| .media { |
| border: 5px solid brown; |
| } |
| } |
| |
| .container ::slotted(*) { |
| border: 6px solid navy; |
| } |
| |
| #priority { |
| border: 9px solid orange; |
| } |
| |
| .container1 > ::slotted([slot=content1]) { |
| border: 13px solid navy; |
| } |
| |
| .container2 > ::slotted([slot=content2]) { |
| border: 14px solid navy; |
| } |
| |
| .computed { |
| border: 15px solid orange; |
| } |
| |
| .computeda { |
| border: 20px solid orange; |
| } |
| |
| #child { |
| border: 16px solid tomato; |
| display: block; |
| } |
| |
| svg { |
| margin-top: 20px; |
| } |
| |
| #circle { |
| fill: seagreen; |
| stroke-width: 1px; |
| stroke: tomato; |
| } |
| </style> |
| <slot name="blank"></slot> |
| <div id="simple">simple</div> |
| <div id="complex1" class="scoped">complex1</div> |
| <div id="complex2" selected>complex2</div> |
| <div id="media" class="media">media</div> |
| <div class="container1"> |
| <slot name="content1"></slot> |
| </div> |
| <div class="container2"> |
| <slot name="content2"></slot> |
| </div> |
| <div class="container"> |
| <slot></slot> |
| </div> |
| <x-child id="child"></x-child> |
| <div id="priority">priority</div> |
| <x-child2 class="wide" id="child2"></x-child2> |
| <div id="computed">Computed</div> |
| <svg height="25" width="25"> |
| <circle id="circle" cx="12" cy="12" r="10"></circle> |
| </svg> |
| <x-scope-class id="scopeClass"></x-scope-class> |
| <x-keyframes id="keyframes"></x-keyframes> |
| <x-keyframes id="keyframes2"></x-keyframes> |
| </template> |
| |
| <template id="x-slotted"> |
| <style> |
| ::slotted(.auto-content) { |
| border: 2px solid orange; |
| } |
| .bar, ::slotted(.complex-child) { |
| border: 6px solid navy; |
| } |
| #container ::slotted(*) { |
| border: 8px solid green; |
| } |
| </style> |
| <slot></slot> |
| <div id="container"> |
| <slot name="container"></slot> |
| </div> |
| </template> |
| |
| <template id="dynamic"> |
| <div class="added"> |
| Added |
| <div class="sub-added"> |
| Sub-added |
| </div> |
| </div> |
| </div> |
| </template> |
| |
| <template id="x-dynamic-scope"> |
| <style> |
| .added { |
| border: 17px solid beige; |
| } |
| .sub-added { |
| border: 18px solid #fafafa; |
| } |
| </style> |
| <div id="container"></div> |
| </template> |
| |
| <template id="x-keyframes"> |
| <style> |
| :host { |
| display: block; |
| position: relative; |
| border: 10px solid blue; |
| left: 0px; |
| /* Prefix required by Safari <= 8 */ |
| -webkit-animation-duration: 0.3s; |
| animation-duration: 0.3s; |
| -webkit-animation-fill-mode: forwards; |
| animation-fill-mode: forwards; |
| } |
| |
| :host([animated]) { |
| /* Prefix required by Safari <= 8 */ |
| -webkit-animation-name: x-keyframes-animation; |
| animation-name: x-keyframes-animation; |
| } |
| |
| /* Prefix required by Safari <= 8 */ |
| @-webkit-keyframes x-keyframes-animation { |
| 0% { |
| left: var(--keyframes0, 0px); |
| } |
| |
| 100% { |
| left: var(--keyframes100, 10px); |
| } |
| } |
| @keyframes x-keyframes-animation { |
| 0% { |
| left: var(--keyframes0, 0px); |
| } |
| |
| 100% { |
| left: var(--keyframes100, 10px); |
| } |
| } |
| </style> |
| x-keyframes |
| </template> |
| |
| <template id="x-attr-selector"> |
| <style> |
| #foo1 ~ #bar1 { |
| border: 2px solid red; |
| } |
| |
| #foo1 ~ #bar1 ~ #foo2[attr~=foo2] ~ #bar2[attr~=bar2] { |
| border: 4px solid red; |
| } |
| |
| #foo1 ~ #bar1 ~ #foo2[attr~=foo2] ~ #bar2[attr~=bar2] ~ #foo3[attr~=foo3][a~=a] ~ #bar3[attr~=bar3][a~=a] { |
| border: 6px solid red; |
| } |
| </style> |
| <div id="foo1"></div> |
| <div id="bar1">bar1</div> |
| <div id="foo2" attr="foo2"></div> |
| <div id="bar2" attr="bar2">bar2</div> |
| <div id="foo3" attr="foo3" a="a"></div> |
| <div id="bar3" attr="bar3" a="a">bar3</div> |
| </template> |
| |
| <template id="x-adjacent-sibling"> |
| <style> |
| div { |
| border: 20px solid black; |
| } |
| #foo2 + #foo1 { |
| border: 2px solid black; |
| } |
| #foo1 + #foo2 { |
| border: 4px solid black; |
| } |
| #foo2 + #foo3 { |
| border: 6px solid black; |
| } |
| </style> |
| <div id="foo1"></div> |
| <div id="foo2"></div> |
| <div id="foo3"></div> |
| </template> |
| |
| <template id="svg"> |
| <svg class="svg" viewBox="0 0 24 24"> |
| <circle id="circle" r="12" cx="12" cy="12" /> |
| </svg> |
| </template> |
| |
| <template id="x-dynamic-svg"> |
| <style> |
| .svg { |
| height: 24px; |
| width: 24px; |
| } |
| #circle { |
| fill: red; |
| fill-opacity: 0.5; |
| } |
| </style> |
| <div id="container"></div> |
| </template> |
| |
| <template id="x-specificity"> |
| <style> |
| :host { |
| border-top: 1px solid red; |
| } |
| :host(.bar) { |
| border-top: 2px solid red; |
| } |
| </style> |
| <slot></slot> |
| </template> |
| |
| <template id="self-test"> |
| <style> |
| :host { |
| --border: 10px solid rgb(123, 123, 123); |
| } |
| |
| a { |
| border: var(--border); |
| } |
| </style> |
| <a>I should be red.</a> |
| </template> |
| |
| <template id="nth-plus-one"> |
| <style> |
| .foo.bar { |
| color: rgb(255, 0, 0); |
| } |
| div:nth-child(n+1) { |
| color: rgb(0, 255, 0); |
| } |
| </style> |
| <div>1</div> |
| <div class="foo bar">2</div> |
| </template> |
| |
| <template id="shady-unscoped"> |
| <style shady-unscoped> |
| .unscoped { |
| color: rgb(255, 0, 0); |
| } |
| </style> |
| <div class="unscoped"></div> |
| </template> |
| |
| <template id="shady-unscoped-2"> |
| <style shady-unscoped> |
| .unscoped { |
| color: rgb(255, 0, 0); |
| } |
| </style> |
| <span class="unscoped"></span> |
| </template> |
| |
| <template id="unscoped-apply-user"> |
| <style> |
| div { |
| @apply --unscoped-foo; |
| } |
| </style> |
| <div></div> |
| </template> |
| |
| <template id="unscoped-apply"> |
| <style shady-unscoped> |
| html, :host > * { |
| --unscoped-foo: {border: 10px solid black}; |
| } |
| </style> |
| <unscoped-apply-user></unscoped-apply-user> |
| </template> |
| |
| <template id="any-selector"> |
| <style> |
| :-webkit-any(div, span) { |
| color: rgb(123, 123, 123); |
| } |
| :-moz-any(div, span) { |
| color: rgb(123, 123, 123); |
| } |
| </style> |
| <div>a</div> |
| <span>b</span> |
| </template> |
| |
| <template id="scoped-keyframes"> |
| <style> |
| :host { |
| --time: 0.1s; |
| } |
| |
| div { |
| /* prefix for older chrome and safari */ |
| -webkit-animation-duration: var(--time); |
| animation-duration: var(--time); |
| -webkit-animation-fill-mode: forwards; |
| animation-fill-mode: forwards; |
| border: 0px solid black; |
| } |
| |
| :host([animate]) div { |
| /* prefix for older chrome and safari */ |
| -webkit-animation-name: border-grow; |
| animation-name: border-grow; |
| } |
| |
| /* prefix for older chrome and safari */ |
| @-webkit-keyframes border {} |
| @-webkit-keyframes border-grow { |
| to { |
| border-top-width: 10px; |
| } |
| } |
| @keyframes border {} |
| @keyframes border-grow { |
| to { |
| border-top-width: 10px; |
| } |
| } |
| </style> |
| |
| <div id="target">Hello world</div> |
| </template> |
| |
| <template id="nested-templates"> |
| <style> |
| * { |
| opacity: 0.5; |
| } |
| </style> |
| <div id="a"></div> |
| <template id="t1"> |
| <div id="b"> |
| <div id="c"> |
| <template id="t2"> |
| <div id="d"></div> |
| </template> |
| </div> |
| </div> |
| </template> |
| <svg> |
| <template id="t3"> |
| <g id="g"> |
| <circle id="circle"></circle> |
| </g> |
| </template> |
| </svg> |
| </template> |
| |
| <template id="bad-mixin"> |
| <style> |
| :host(.nomatch) { |
| --div-border: { |
| border: 2px solid black; |
| } |
| } |
| div { |
| @apply --div-border; |
| } |
| </style> |
| <div></div> |
| </template> |
| |
| <template id="x-parent-skip"> |
| <style> |
| :host { |
| --foo: 10px solid black; |
| } |
| </style> |
| <x-skip></x-skip> |
| </template> |
| |
| <template id="x-skip"> |
| <x-child-skip></x-child-skip> |
| </template> |
| |
| <template id="x-child-skip"> |
| <style> |
| div { |
| border: var(--foo); |
| } |
| </style> |
| <div></div> |
| </template> |
| |
| <script> |
| (function() { |
| function assertComputed(element, value, property, pseudo) { |
| var computed = getComputedStyle(element, pseudo); |
| property = property || 'border-top-width'; |
| if (Array.isArray(value)) { |
| assert.oneOf(computed[property], value, 'computed style incorrect for ' + property); |
| } else { |
| assert.equal(computed[property], value, 'computed style incorrect for ' + property); |
| } |
| } |
| |
| function findNode(desc) { |
| var parts = desc.split('.'); |
| var root = document; |
| var node; |
| for (var i=0, p; i < parts.length; i++) { |
| p = parts[i]; |
| if (p == '$') { |
| root = node.shadowRoot; |
| } else { |
| node = root.querySelector('#' + p); |
| } |
| } |
| return node; |
| } |
| |
| function flush() { |
| if (window.ShadyDOM) { |
| window.ShadyDOM.flush(); |
| } |
| window.ShadyCSS.ScopingShim.flush(); |
| } |
| |
| suite('scoped-styling', function() { |
| |
| suiteSetup(function() { |
| makeElement('x-gchild'); |
| makeElement('x-child', function() { |
| this.classList.add('nug'); |
| }); |
| makeElement('x-child2'); |
| makeElement('x-scope-class'); |
| makeElement('x-scoped'); |
| makeElement('x-slotted'); |
| (function() { |
| var dynamic = document.querySelector('template#dynamic'); |
| |
| makeElement('x-dynamic-scope', |
| function() { |
| // simulate 3rd party action by using normal dom to add to element. |
| var dom = document.importNode(dynamic.content, true); |
| this.shadowRoot.querySelector('#container').appendChild(dom); |
| }); |
| })(); |
| makeElement('x-keyframes'); |
| makeElement('x-attr-selector'); |
| (function() { |
| var template = document.querySelector('template#svg'); |
| |
| makeElement('x-dynamic-svg', function() { |
| var dom = document.importNode(template.content, true); |
| this.shadowRoot.querySelector('#container').appendChild(dom); |
| }); |
| })(); |
| makeElement('x-specificity'); |
| makeElement('nested-templates'); |
| }); |
| |
| var el; |
| setup(function() { |
| el = document.createElement('x-scoped'); |
| el.id = 'el'; |
| document.body.appendChild(el); |
| flush(); |
| }); |
| |
| teardown(function() { |
| document.body.removeChild(el); |
| }); |
| |
| test(':host', function() { |
| assertComputed(el, '1px'); |
| assertComputed(el, ['', 'none'], 'content', '::after'); |
| }); |
| |
| test(':host(...)', function() { |
| var el2 = document.createElement('x-scoped'); |
| el2.classList.add('wide'); |
| document.body.appendChild(el2); |
| flush(); |
| assertComputed(el2, '2px'); |
| assertComputed(el2, ['"-content-"', '-content-'], 'content', '::after'); |
| document.body.removeChild(el2); |
| }); |
| |
| test('scoped selectors, simple and complex', function() { |
| assertComputed(findNode('el.$.simple'), '3px'); |
| assertComputed(findNode('el.$.complex1'), '4px'); |
| assertComputed(findNode('el.$.complex2'), '4px'); |
| }); |
| |
| test('media query scoped selectors', function() { |
| assertComputed(findNode('el.$.media'), '5px'); |
| }); |
| |
| test('upper bound encapsulation', function() { |
| var d = document.createElement('div'); |
| d.classList.add('scoped'); |
| document.body.appendChild(d); |
| assertComputed(d, '0px'); |
| document.body.removeChild(d); |
| }); |
| |
| test('lower bound encapsulation', function() { |
| assertComputed(findNode('el.$.child.$.simple'), '0px'); |
| assertComputed(findNode('el.$.child.$.complex1'), '0px'); |
| assertComputed(findNode('el.$.child.$.complex2'), '0px'); |
| assertComputed(findNode('el.$.child.$.media'), '0px'); |
| }); |
| |
| test('nested templates', function() { |
| var el = document.createElement('nested-templates'); |
| document.body.appendChild(el); |
| // Append nested template content. Note the <template> in <svg> is not |
| // an HTML template with .content at this point; it is just an unknown |
| // SVGElement so we don't have to stamp it |
| var t1 = el.shadowRoot.querySelector('#t1'); |
| el.shadowRoot.appendChild(t1.content.cloneNode(true)); |
| var t2 = el.shadowRoot.querySelector('#t2'); |
| el.shadowRoot.appendChild(t2.content.cloneNode(true)); |
| // Everything should now have 'opacity: 0.5' |
| var els = Array.from(el.shadowRoot.querySelectorAll('[id]')); |
| assert.deepEqual(els.map(e => e.getAttribute('id')), ['a', 't1', 't3', 'g', 'circle', 'b', 'c', 't2', 'd']); |
| els.forEach(e => { |
| assert.equal(getComputedStyle(e).opacity, '0.5', `Element with id "${e.id}" does not have the correct opacity`); |
| }); |
| document.body.removeChild(el); |
| }); |
| |
| }); |
| |
| suite('slotted', function() { |
| |
| test('::slotted selectors', function() { |
| var el = document.createElement('x-scoped'); |
| document.body.appendChild(el); |
| var content1 = document.createElement('div'); |
| content1.slot = 'content1'; |
| var content2 = document.createElement('div'); |
| content2.slot = 'content2'; |
| var content = document.createElement('div'); |
| content.className = 'content'; |
| el.appendChild(content1); |
| el.appendChild(content2); |
| el.appendChild(content); |
| flush(); |
| |
| assertComputed(content, '6px'); |
| assertComputed(content1, '13px'); |
| assertComputed(content2, '14px'); |
| document.body.removeChild(el); |
| }); |
| |
| test('auto ::slotted selector', function() { |
| var x = document.createElement('x-slotted'); |
| var d1 = document.createElement('div'); |
| d1.classList.add('auto-content'); |
| d1.textContent = 'auto-content'; |
| document.body.appendChild(x); |
| x.appendChild(d1); |
| flush(); |
| assertComputed(d1, '2px'); |
| document.body.removeChild(x); |
| }); |
| |
| test('::slotted + child in complex selector', function() { |
| var x = document.createElement('x-slotted'); |
| var d1 = document.createElement('div'); |
| d1.classList.add('complex-child'); |
| d1.textContent = 'complex-child'; |
| document.body.appendChild(x); |
| x.appendChild(d1); |
| flush(); |
| assertComputed(d1, '6px'); |
| document.body.removeChild(x); |
| }); |
| |
| test('::slotted + named slot', function() { |
| var x = document.createElement('x-slotted'); |
| var d1 = document.createElement('div'); |
| d1.setAttribute('slot', 'container') |
| d1.textContent = 'named slot child'; |
| document.body.appendChild(x); |
| x.appendChild(d1); |
| flush(); |
| assertComputed(d1, '8px'); |
| document.body.removeChild(x); |
| }); |
| |
| }); |
| |
| suite('dynamic changes', function() { |
| |
| test('elements dynamically added/removed from root', function() { |
| var el = document.createElement('x-scoped'); |
| document.body.appendChild(el); |
| flush(); |
| var d = document.createElement('div'); |
| d.classList.add('scoped'); |
| d.textContent = 'Dynamically... Scoped!'; |
| el.shadowRoot.appendChild(d); |
| flush(); |
| assertComputed(d, '4px'); |
| document.body.appendChild(d); |
| flush(); |
| assert.notInclude(d.getAttribute('style-scoped') || '', el.is, 'scoping attribute not removed when added to other root'); |
| assert.notInclude(d.className, el.is, 'scoping class not removed when added to other root'); |
| el.shadowRoot.appendChild(d); |
| flush(); |
| assertComputed(d, '4px'); |
| el.shadowRoot.removeChild(d); |
| flush(); |
| assert.notInclude(d.getAttribute('style-scoped') || '', el.is, 'scoping attribute not removed when removed from root'); |
| assert.notInclude(d.className, el.is, 'scoping class not removed when removed from root'); |
| el.shadowRoot.appendChild(d); |
| flush(); |
| assertComputed(d, '4px'); |
| document.body.removeChild(el); |
| }); |
| |
| test('elements dynamically added/removed from host', function() { |
| var el = document.createElement('x-scoped'); |
| document.body.appendChild(el); |
| var d = document.createElement('div'); |
| d.classList.add('scoped'); |
| d.slot = 'blank'; |
| d.textContent = 'Dynamically... unScoped!'; |
| el.appendChild(d); |
| flush(); |
| assertComputed(d, '0px'); |
| el.removeChild(d); |
| flush(); |
| assert.notInclude(d.getAttribute('style-scoped') || '', el.is, 'scoping attribute not removed when added to other root'); |
| assert.notInclude(d.className, el.is, 'scoping class not removed when added to other root'); |
| el.appendChild(d); |
| flush(); |
| assertComputed(d, '0px'); |
| el.removeChild(d); |
| flush(); |
| assert.notInclude(d.getAttribute('style-scoped') || '', el.is, 'scoping attribute not removed when removed from root'); |
| assert.notInclude(d.className, el.is, 'scoping class not removed when removed from root'); |
| el.appendChild(d); |
| flush(); |
| assertComputed(d, '0px'); |
| document.body.removeChild(el); |
| }); |
| |
| test('element subtree added via dom api', function() { |
| var el = document.createElement('x-dynamic-scope'); |
| document.body.appendChild(el); |
| flush(); |
| var container = el.shadowRoot.querySelector('#container'); |
| var a = container.querySelector('.added'); |
| assertComputed(a, '17px'); |
| var b = container.querySelector('.sub-added'); |
| assertComputed(b, '18px'); |
| document.body.removeChild(el); |
| }); |
| |
| test('changes to class attribute', function() { |
| var el = document.createElement('x-scoped'); |
| el.id = 'el' |
| document.body.appendChild(el); |
| flush(); |
| var d = findNode('el.$.computed'); |
| assertComputed(d, '0px'); |
| d.setAttribute('class', 'computed'); |
| assertComputed(d, '15px'); |
| d.setAttribute('class', '', 'empty class attr does not remove class'); |
| assertComputed(d, '0px'); |
| d.setAttribute('class', 'computed ', 'class attr with space does not apply'); |
| assertComputed(d, '15px'); |
| document.body.removeChild(el); |
| }); |
| |
| }); |
| |
| suite('misc', function() { |
| |
| var el; |
| setup(function() { |
| el = document.createElement('x-scoped'); |
| el.id = 'el'; |
| document.body.appendChild(el); |
| flush(); |
| }); |
| |
| teardown(function() { |
| document.body.removeChild(el); |
| }); |
| |
| test('keyframes change scope', function(done) { |
| var xKeyframes = findNode('el.$.keyframes'); |
| // Edge 16 does not support CSS Custom Properties in keyframes |
| if (window.ShadyCSS.nativeCss && navigator.userAgent.match(/Edge/)) { |
| this.skip(); |
| } |
| var onAnimationEnd = function() { |
| xKeyframes.removeEventListener('animationend', onAnimationEnd); |
| xKeyframes.removeEventListener('webkitAnimationEnd', onAnimationEnd); |
| assertComputed(xKeyframes, '100px', 'left'); |
| |
| xKeyframes = findNode('el.$.keyframes2'); |
| |
| onAnimationEnd = function() { |
| xKeyframes.removeEventListener('animationend', onAnimationEnd); |
| xKeyframes.removeEventListener('webkitAnimationEnd', onAnimationEnd); |
| assertComputed(xKeyframes, '200px', 'left'); |
| done(); |
| }; |
| |
| xKeyframes.addEventListener('animationend', onAnimationEnd); |
| xKeyframes.addEventListener('webkitAnimationEnd', onAnimationEnd); |
| |
| xKeyframes.classList.add('special'); |
| xKeyframes.setAttribute('animated', ''); |
| window.ShadyCSS.ScopingShim.styleElement(xKeyframes); |
| }; |
| xKeyframes.addEventListener('animationend', onAnimationEnd); |
| xKeyframes.addEventListener('webkitAnimationEnd', onAnimationEnd); |
| xKeyframes.setAttribute('animated', ''); |
| assertComputed(xKeyframes, '0px', 'left'); |
| }); |
| |
| test('keyframe names are transformed correctly', function(done) { |
| makeElement('scoped-keyframes'); |
| var e = document.createElement('scoped-keyframes'); |
| document.body.appendChild(e); |
| flush(); |
| var target = e.shadowRoot.querySelector('#target'); |
| var onAnimationEnd = function() { |
| assertComputed(target, '10px'); |
| target.removeEventListener('animationend', onAnimationEnd); |
| target.removeEventListener('webkitAnimationEnd', onAnimationEnd); |
| document.body.removeChild(e); |
| done(); |
| }; |
| target.addEventListener('animationend', onAnimationEnd); |
| target.addEventListener('webkitAnimationEnd', onAnimationEnd); |
| e.setAttribute('animate', ''); |
| assertComputed(target, '0px'); |
| }); |
| |
| test('attribute inclusive selector and general sibling selectors', function() { |
| var x = document.createElement('x-attr-selector'); |
| x.id = 'x'; |
| document.body.appendChild(x); |
| flush(); |
| assertComputed(findNode('x.$.bar1'), '2px'); |
| assertComputed(findNode('x.$.bar2'), '4px'); |
| assertComputed(findNode('x.$.bar3'), '6px'); |
| document.body.removeChild(x); |
| }); |
| |
| test('adjacent sibling selectors', function() { |
| makeElement('x-adjacent-sibling'); |
| var x = document.createElement('x-adjacent-sibling'); |
| x.id = 'x'; |
| document.body.appendChild(x); |
| flush(); |
| assertComputed(findNode('x.$.foo1'), '20px'); |
| assertComputed(findNode('x.$.foo2'), '4px'); |
| assertComputed(findNode('x.$.foo3'), '6px'); |
| document.body.removeChild(x); |
| }) |
| |
| test('svg classes are dynamically scoped correctly', function() { |
| var x = document.createElement('x-dynamic-svg'); |
| x.id = 'x'; |
| document.body.appendChild(x); |
| flush(); |
| var container = findNode('x.$.container'); |
| var svg = container.querySelector('.svg'); |
| var computed = getComputedStyle(svg); |
| assert.equal(computed.height, '24px'); |
| assert.equal(computed.width, '24px'); |
| var circle = container.querySelector('#circle'); |
| computed = getComputedStyle(circle); |
| assert.equal(computed['fill-opacity'], '0.5'); |
| document.body.removeChild(x); |
| }); |
| |
| test(':host selectors always lowest priority', function() { |
| var priority = findNode('el.$.priority'); |
| assertComputed(priority, '9px'); |
| el.setAttribute('class', 'wide'); |
| assertComputed(priority, '9px'); |
| }); |
| |
| test('svg elements properly scoped', function() { |
| if (window.ShadyCSS.nativeShadow) { |
| this.skip(); |
| } |
| var circle = findNode('el.$.circle'); |
| var classes = (circle.getAttribute('class') || '').split(/\s+/); |
| assert.include(classes, 'x-scoped'); |
| assert.include(classes, 'style-scope'); |
| assert.notInclude(classes, 'null'); |
| assertComputed(circle, '1px', 'strokeWidth'); |
| }); |
| |
| test('set attribute class has style scoping selectors', function() { |
| if (window.ShadyCSS.nativeShadow) { |
| this.skip(); |
| } |
| var s = findNode('el.$.scopeClass'); |
| var scope = findNode('el.$.scopeClass.$.scope'); |
| assert.isTrue(s.classList.contains('style-scope')); |
| assert.isTrue(s.classList.contains('x-scoped')); |
| s.setAttribute('class', 'foo'); |
| assert.isTrue(s.classList.contains('foo')); |
| assert.isTrue(s.classList.contains('style-scope')); |
| assert.isTrue(s.classList.contains('x-scoped')); |
| // |
| assert.isTrue(scope.classList.contains('style-scope')); |
| assert.isTrue(scope.classList.contains('x-scope-class')); |
| scope.setAttribute('class', 'foo'); |
| assert.isTrue(scope.classList.contains('foo')); |
| assert.isTrue(scope.classList.contains('style-scope')); |
| assert.isTrue(scope.classList.contains('x-scope-class')); |
| }); |
| |
| test('specificity of :host selector with class', function() { |
| var e1 = document.createElement('x-specificity'); |
| document.body.appendChild(e1); |
| flush(); |
| assertComputed(e1, '1px'); |
| document.body.removeChild(e1); |
| var e2 = document.createElement('x-specificity'); |
| e2.setAttribute('class', 'bar'); |
| document.body.appendChild(e2); |
| flush(); |
| assertComputed(e2, '2px'); |
| document.body.removeChild(e2); |
| }); |
| |
| test('self-use is supported', function() { |
| makeElement('self-test'); |
| var e = document.createElement('self-test'); |
| document.body.appendChild(e); |
| flush(); |
| assertComputed(e.shadowRoot.querySelector('a'), '10px'); |
| document.body.removeChild(e); |
| }); |
| |
| test('nth-child selectors work correctly with plusses', function() { |
| makeElement('nth-plus-one'); |
| var e = document.createElement('nth-plus-one'); |
| document.body.appendChild(e); |
| flush(); |
| assertComputed(e.shadowRoot.querySelector('.foo'), 'rgb(255, 0, 0)', 'color'); |
| document.body.removeChild(e); |
| }); |
| |
| test(':-webkit-any and :-moz-any selectors are supported', function() { |
| if (navigator.userAgent.match(/Trident|Edge/)) { |
| this.skip(); |
| } |
| makeElement('any-selector'); |
| var e = document.createElement('any-selector'); |
| document.body.appendChild(e); |
| flush(); |
| assertComputed(e.shadowRoot.querySelector('div'), 'rgb(123, 123, 123)', 'color'); |
| assertComputed(e.shadowRoot.querySelector('span'), 'rgb(123, 123, 123)', 'color'); |
| document.body.removeChild(e); |
| }); |
| |
| test(':host() sets mixin definitions correctly', function() { |
| makeElement('bad-mixin'); |
| var e = document.createElement('bad-mixin'); |
| document.body.appendChild(e); |
| flush(); |
| assertComputed(e.shadowRoot.querySelector('div'), '0px'); |
| document.body.removeChild(e); |
| }); |
| |
| test('trees with elements missing styles render correctly', function() { |
| makeElement('x-parent-skip'); |
| makeElement('x-skip'); |
| makeElement('x-child-skip'); |
| const p = document.createElement('x-parent-skip'); |
| document.body.appendChild(p); |
| flush(); |
| const inner = p.shadowRoot.querySelector('x-skip').shadowRoot.querySelector('x-child-skip').shadowRoot.querySelector('div'); |
| assertComputed(inner, '10px'); |
| document.body.removeChild(p); |
| }); |
| |
| test('trees with elements missing templates render correctly', function() { |
| makeElement('no-shadow'); |
| const p = document.createElement('x-parent-skip'); |
| const n = document.createElement('no-shadow'); |
| const c = document.createElement('x-child-skip'); |
| document.body.appendChild(p); |
| p.shadowRoot.appendChild(n); |
| n.shadowRoot.appendChild(c); |
| flush(); |
| const inner = c.shadowRoot.querySelector('div'); |
| assertComputed(inner, '10px'); |
| document.body.removeChild(p); |
| }) |
| |
| }); |
| |
| suite('unscoping', function() { |
| suiteSetup(function() { |
| makeElement('shady-unscoped'); |
| }); |
| test('styles with "shady-unscoped" attr work in Shady and Shadow', function() { |
| var el = document.createElement('shady-unscoped'); |
| document.body.appendChild(el); |
| flush(); |
| var div = el.shadowRoot.querySelector('div'); |
| assertComputed(div, 'rgb(255, 0, 0)', 'color'); |
| document.body.removeChild(el); |
| }); |
| test('styles with "shady-unscoped" attr deduplicate', function(){ |
| if (window.ShadyCSS.nativeShadow) { |
| this.skip(); |
| } |
| makeElement('shady-unscoped-2'); |
| var el1 = document.createElement('shady-unscoped'); |
| var el2 = document.createElement('shady-unscoped-2'); |
| document.body.appendChild(el1); |
| document.body.appendChild(el2); |
| flush(); |
| assert.equal(document.querySelectorAll('style[shady-unscoped]').length, 1); |
| document.body.removeChild(el1); |
| document.body.removeChild(el2); |
| }); |
| test('@apply does not work in shady-unscoped', function() { |
| makeElement('unscoped-apply-user'); |
| makeElement('unscoped-apply'); |
| var el = document.createElement('unscoped-apply'); |
| document.body.appendChild(el); |
| flush(); |
| var inner = el.shadowRoot.querySelector('unscoped-apply-user'); |
| var target = inner.shadowRoot.querySelector('div'); |
| assertComputed(target, '0px'); |
| document.body.removeChild(el); |
| }); |
| }); |
| |
| })(); |
| </script> |
| </body> |
| </html> |
