diff options
Diffstat (limited to 'catapult/third_party/polymer/components/shadycss/tests')
48 files changed, 5231 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/shadycss/tests/.eslintrc.json b/catapult/third_party/polymer/components/shadycss/tests/.eslintrc.json new file mode 100644 index 00000000..f6ee2a64 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/.eslintrc.json @@ -0,0 +1,11 @@ +{ + "env": { + "mocha": true + }, + "globals": { + "assert": true, + "sinon": true, + "WCT": true, + "fixture": true + } +} diff --git a/catapult/third_party/polymer/components/shadycss/tests/apply-shim.html b/catapult/third_party/polymer/components/shadycss/tests/apply-shim.html new file mode 100644 index 00000000..dd221367 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/apply-shim.html @@ -0,0 +1,343 @@ +<!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> + if (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/custom-style-element.js"></script> + <script src="module/generated/make-element.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="important"> + <style> + :host { + --mixin-important: { + background-color: white; + border: 2px solid black !important; + color: white !important; + }; + --mixin: { + background-color: red; + border: 1px dotted orange; + color: black !important; + }; + } + div { + @apply --mixin-important; + @apply --mixin; + } + </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.ShadyCSS.ScopingShim.styleAstToString(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.ShadyCSS.ScopingShim._styleInfoForNode(element)._getStyleRules(); + 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.ShadyCSS.ScopingShim._styleInfoForNode(element)._getStyleRules(); + if (window.ShadyCSS.nativeCss) { + assert.match(ast.rules[0].cssText, /border:\s*var\(--my-mixin_-_border\)/); + } else { + assert.match(ast.rules[0].cssText, /border:\s*2px solid black/); + } + }); + }); + suite('!important', function() { + var ast; + suiteSetup(function() { + var info = prep('important'); + ast = info.ast; + }); + + test('!important in mixin correctly translates to !important in resulting custom property', function() { + var application = ast.rules[1]; + assert.match(application.cssText, /border:\s*var\(--mixin-important_-_border\)\s*!important/); + }); + test("Fallback of related property without !important is kept without !important in resulting custom property", function() { + var application = ast.rules[1]; + assert.match(application.cssText, /border:\s*var\(--mixin_-_border,\s*var\(--mixin-important_-_border\)\)/); + }); + test('Two mixins with both !important are treated in correct order while also preserving !important in resulting custom property', function () { + var application = ast.rules[1]; + assert.match(application.cssText, /color:\s*var\(--mixin-important_-_color\)\s*!important/); + assert.match(application.cssText, /color:\s*var\(--mixin_-_color,\s*var\(--mixin-important_-_color\)\)\s*!important/); + }) + test('Properties without !important in a mixin with !important are treated independently', function() { + var application = ast.rules[1]; + assert.match(application.cssText, /background-color:\s*var\(--mixin_-_background-color,\s*var\(--mixin-important_-_background-color\)\)/); + assert.notMatch(application.cssText, /background-color:\s*var\(--mixin_-_background-color,\s*var\(--mixin-important_-_background-color\)\)\s*!important/); + + assert.match(application.cssText, /background-color:\s*var\(--mixin-important_-_background-color\)/); + assert.notMatch(application.cssText, /background-color:\s*var\(--mixin-important_-_background-color\)\s*!important/); + }); + }); + }); + </script> +</body> +</html> diff --git a/catapult/third_party/polymer/components/shadycss/tests/async-loading.html b/catapult/third_party/polymer/components/shadycss/tests/async-loading.html new file mode 100644 index 00000000..c285ce31 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/async-loading.html @@ -0,0 +1,16 @@ +<!doctype html> +<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/html-imports/html-imports.min.js" defer></script> +<script src="../scoping-shim.min.js" defer></script> +<script> + suite('defered loading', () => { + test('Loading works as expected', () => { + }); + }) +</script>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/chrome-devtools.html b/catapult/third_party/polymer/components/shadycss/tests/chrome-devtools.html new file mode 100644 index 00000000..602c207b --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/chrome-devtools.html @@ -0,0 +1,28 @@ +<!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 +--> +<title>Chrome Dev Tools emulation</title> +<script> + // define user agent to be Safari 9 + Object.defineProperty(navigator, 'userAgent', { value: 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1' }); +</script> +<script src="test-flags.js"></script> +<script src="../node_modules/wct-browser-legacy/browser.js"></script> +<script src="../node_modules/@webcomponents/shadydom/shadydom.min.js"></script> +<script src="module/generated/style-settings.js"></script> +<script> + suite('Chrome Devtools', () => { + test('Emaulating iOS, native css variables are tied to native shadowdom support', () => { + if (!window.ShadyDOM || !window.ShadyDOM.inUse) { + assert.isTrue(window.StyleSettings.nativeCssVariables); + } + }); + }) +</script>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/complicated-mixin-ordering.html b/catapult/third_party/polymer/components/shadycss/tests/complicated-mixin-ordering.html new file mode 100644 index 00000000..552a1e61 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/complicated-mixin-ordering.html @@ -0,0 +1,104 @@ +<!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="./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 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> + if (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/custom-style-element.js"></script> + <script src="module/generated/make-element.js"></script> + <script src="../node_modules/wct-browser-legacy/browser.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> diff --git a/catapult/third_party/polymer/components/shadycss/tests/css-parse.html b/catapult/third_party/polymer/components/shadycss/tests/css-parse.html new file mode 100644 index 00000000..6fb98465 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/css-parse.html @@ -0,0 +1,188 @@ +<!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 src="./test-flags.js"></script> + <script src="../node_modules/wct-browser-legacy/browser.js"></script> + <script src="module/generated/css-parse.js"></script> + + <title>css-parse</title> + +</head> +<body> + + <style id="test"> + :host { + background: red; + } + + .foo .bar .baz, zonk[happy]:focus { + font-family: sans-serif; + font-size: 15px; + } + + @-webkit-keyframes fill-unfill-rotate { + 12.5% { transform: rotate(135deg); } + 25% { transform: rotate(270deg); } + 37.5% { transform: rotate(405deg); } + 50% { transform: rotate(540deg); } + 62.5% { transform: rotate(675deg); } + 75% { transform: rotate(810deg); } + 87.5% { transform: rotate(945deg); } + to { transform: rotate(1080deg); } + } + + @media (max-width: 400px) { + div { + margin-left: 0 !important; + } + } + </style> + + <style id="test-ignore"> + @import ''; + + /* comment */ + .stuff { + background: red; + } + /* comment */ + + /* + This is a multi-line comment + */ + + /*.aclassThatShouldBeIgnored { + someProperty: thatMustNotShowUp + }*/ + </style> + + <style id="short-escape-sequence"> + .\33 d-model { + border-top: 3px solid red; + } + .\a33 d-model { + border-top: 3px solid red; + } + .\b333 d-model { + border-top: 3px solid red; + } + .\c3333 d-model { + border-top: 3px solid red; + } + .\d33333 d-model { + border-top: 3px solid red; + } + .\e33333d-model { + border-top: 3px solid red; + } + </style> + + <style id="multiple-spaces"> + .foo .bar {} + .foo .bar {} + .foo + + + .bar {} + </style> + + <style id="empty"></style> +<script> + + function sanitizeCss(text) { + return text.replace(/[\s]+/g, ' ').trim(); + } + + suite('css-parse', function() { + var s, tree; + + setup(function() { + s = document.querySelector('style#test'); + tree = window.CssParse.parse(s.textContent); + }); + + test('window.CssParse rules parse', function() { + assert.equal(tree.rules.length, 4, 'unexpected number of rules'); + assert.equal(tree.rules[2].rules.length, 8, 'unexpected number of rules in keyframes'); + assert.equal(tree.rules[3].rules.length, 1, 'unexpected number of rules in @media'); + }); + + test('rule selectors parse', function() { + assert.equal(tree.rules[0].selector, ':host', 'unexpected selector'); + assert.equal(tree.rules[2].selector, '@-webkit-keyframes fill-unfill-rotate', 'unexpected selector in keyframes'); + assert.equal(tree.rules[3].selector, '@media (max-width: 400px)', 'unexpected selector in @media'); + }); + + test('rule cssText parse', function() { + assert.equal(tree.rules[0].cssText, 'background: red;', 'unexpected cssText'); + assert.match(tree.rules[2].cssText, /^12.5%/, 'unexpected cssText in keyframes'); + assert.equal(tree.rules[2].rules[2].cssText, 'transform: rotate(405deg);', 'unexpected cssText in keyframes'); + assert.match(tree.rules[3].cssText, /^div/, 'unexpected cssText in @media'); + assert.equal(tree.rules[3].rules[0].cssText, 'margin-left: 0 !important;', 'unexpected cssText in @media'); + }); + + test('rule types', function() { + assert.equal(tree.rules[0].type, window.CssParse.types.STYLE_RULE); + assert.equal(tree.rules[1].type, window.CssParse.types.STYLE_RULE); + assert.equal(tree.rules[2].type, window.CssParse.types.KEYFRAMES_RULE); + assert.equal(tree.rules[3].type, window.CssParse.types.MEDIA_RULE); + assert.equal(tree.rules[3].rules[0].type, window.CssParse.types.STYLE_RULE); + + }); + + test('rules stringify', function() { + var orig = sanitizeCss(s.textContent); + var result = sanitizeCss(window.CssParse.stringify(tree)); + assert.equal(result, orig, 'unexpected stringified output'); + }); + + test('parse correctly ignores @import and comments', function() { + var s2 = document.querySelector('#test-ignore'); + var t = window.CssParse.parse(s2.textContent); + assert.equal(t.rules[0].selector, '.stuff', 'unexpected rule selector'); + assert.equal(t.rules[0].cssText, 'background: red;', 'unexpected rule cssText'); + var result = sanitizeCss(window.CssParse.stringify(t)); + assert.equal(result, '.stuff { background: red; }', 'unexpected stringified output'); + }); + + test('short escape sequences', function() { + var s3 = document.querySelector('#short-escape-sequence'); + var t = window.CssParse.parse(s3.textContent); + assert.equal(t.rules[0].selector, '.\\000033d-model'); + assert.equal(t.rules[1].selector, '.\\000a33d-model'); + assert.equal(t.rules[2].selector, '.\\00b333d-model'); + assert.equal(t.rules[3].selector, '.\\0c3333d-model'); + assert.equal(t.rules[4].selector, '.\\d33333d-model'); + assert.equal(t.rules[5].selector, '.\\e33333d-model'); + }); + + test('multiple consequent spaces in CSS selector', function() { + var s4 = document.querySelector('#multiple-spaces'); + var t = window.CssParse.parse(s4.textContent); + assert.equal(t.rules[0].selector, '.foo .bar'); + assert.equal(t.rules[1].selector, '.foo .bar'); + assert.equal(t.rules[2].selector, '.foo .bar'); + }); + + test('empty styles are are handled', function() { + var s = document.querySelector('#empty'); + var t = window.CssParse.parse(s.textContent); + window.CssParse.stringify(t); + }); + + }); +</script> + +</body> +</html> diff --git a/catapult/third_party/polymer/components/shadycss/tests/custom-style-import.html b/catapult/third_party/polymer/components/shadycss/tests/custom-style-import.html new file mode 100644 index 00000000..15e34143 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/custom-style-import.html @@ -0,0 +1,49 @@ +<!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="./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> +<script src="module/generated/custom-style-element.js"></script> +<link rel="import" href="html-imports/custom-style-import.html"> + +<template id="x-import"> + <style> + :host { + border: 2px solid var(--color, black); + } + </style> +</template> + +<x-import id="target"></x-import> + +<script> + suite('Custom Style upgrades', function() { + suiteSetup(function() { + makeElement('x-import'); + }); + test('custom-style in import provides styling', function() { + var target = document.querySelector('#target'); + assert.equal(getComputedStyle(target).borderColor, 'rgb(0, 0, 255)'); + }); + }); +</script>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/custom-style-late.html b/catapult/third_party/polymer/components/shadycss/tests/custom-style-late.html new file mode 100644 index 00000000..3aac557f --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/custom-style-late.html @@ -0,0 +1,89 @@ +<!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="./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 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> + if (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> + +<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/custom-style-only.html b/catapult/third_party/polymer/components/shadycss/tests/custom-style-only.html new file mode 100644 index 00000000..016469bb --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/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/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> +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/custom-style-element.js"></script> +<script src="../node_modules/wct-browser-legacy/browser.js"></script> + +<custom-style id="indoc"> + <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/custom-style.html b/catapult/third_party/polymer/components/shadycss/tests/custom-style.html new file mode 100644 index 00000000..8faa10fc --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/custom-style.html @@ -0,0 +1,100 @@ +<!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="./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> +<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> +<custom-style> + <style> + :root { + --svg-icon: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); + --svg-icon-2: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); + } + .base64 { + background-image: var(--svg-icon); + } + </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> + +<div class="base64">base64</div> + +<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'); + }); + test('custom-style with base64 in variable', function() { + var target = document.querySelector('.base64'); + assert.match(getComputedStyle(target).backgroundImage, /url\("?data\:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"?\)/); + }); + }); +</script> diff --git a/catapult/third_party/polymer/components/shadycss/tests/deferred-apply.html b/catapult/third_party/polymer/components/shadycss/tests/deferred-apply.html new file mode 100644 index 00000000..1b3af210 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/deferred-apply.html @@ -0,0 +1,82 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2018 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 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="../custom-style-interface.min.js"></script> + <script src="module/generated/custom-style-element.js"></script> + <script src="module/generated/make-element.js"></script> + <title>Apply Shim Deferred</title> +</head> +<body> + <custom-style> + <style> + html { + --foo: { + background-color: rgb(0, 0, 255); + } + } + </style> + </custom-style> + <template id="x-foo"> + <style> + :host { + display: block; + height: 100px; + width: 100px; + background-color: rgb(255, 0, 0); + @apply --foo; + } + </style> + </template> + <x-foo></x-foo> + <!-- emulate apply-shim imported into a module context --> + <script id="applyScript" src="../apply-shim.min.js" defer></script> + <script> + suite('Deferred Apply Shim', function() { + test('Styling works as expected', function() { + let resolveFn = null; + const promise = new Promise((resolve) => {resolveFn = resolve}).then(() => { + // IE 11 timing issue + if (window.HTMLTemplateElement.bootstrap) { + HTMLTemplateElement.bootstrap(document); + } + window.makeElement('x-foo'); + }).then(() => { + const el = document.querySelector('x-foo'); + assert.equal(getComputedStyle(el).getPropertyValue('background-color').trim(), 'rgb(0, 0, 255)'); + }); + if (document.readyState === 'complete') { + resolveFn(); + } else { + window.addEventListener('load', resolveFn); + window.addEventListener('DOMContentLoaded', () => { + window.removeEventListener('load', resolveFn); + resolveFn(); + }); + } + return promise; + }) + }); + </script> +</body> +</html>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/dynamic-scoping.html b/catapult/third_party/polymer/components/shadycss/tests/dynamic-scoping.html new file mode 100644 index 00000000..e94fc2b3 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/dynamic-scoping.html @@ -0,0 +1,296 @@ +<!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"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> + <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> + <script src="module/generated/custom-style-element.js"></script> +</head> +<body> + + <custom-style> + <style> + x-container, x-sample, x-sample-dynamic, x-container-dynamic { + display: block; + padding: 10px; + margin: 10px; + border: 1px solid black; + } + + .target { + background-color: rgb(0, 255, 0); + } + </style> + </custom-style> + + <template id="x-sample"> + <style> + .target { + background-color: rgb(255, 0, 0); + } + </style> + <h2></h2> + <p>here .target elements are red</p> + <div class="target">I'm red</div> + <template id="renderer"> + <div class="target"></div> + </template> + </template> + + <template id="x-container"> + <style> + .target { + background-color: rgb(123, 123, 123); + } + </style> + <h1>x-container</h1> + <p>here .target elements are gray</p> + <div class="target">I'm gray</div> + <slot></slot> + </template> + + <h2>body</h2> + <p>here .target elements are green</p> + + <div class="target">I'm green</div> + + <x-sample id="inBody"></x-sample> + + <x-sample id="inContainer"></x-sample> + + <x-container></x-container> + + <template id="x-dynamic"> + <style> + span { + background-color: rgb(123, 123, 123); + } + </style> + <div id="container"> + </div> + </template> + + <x-dynamic></x-dynamic> + + <template id="out-of-band"> + <style> + div { + color: var(--foo); + } + </style> + <div>oob shadowed</div> + </template> + + <template id="oob-parent"> + <style> + out-of-band { + --foo: rgb(0, 0, 255); + } + </style> + <out-of-band></out-of-band> + </template> + + <template id="oob-other-parent"> + <style> + out-of-band { + --foo: rgb(255, 0, 0); + } + </style> + </template> + + <oob-parent></oob-parent> + <oob-other-parent></oob-other-parent> + + <template id="x-sample-dynamic"> + <style> + .target { + background-color: rgb(255, 0, 0); + } + </style> + <h2></h2> + <p>here .target elements are red</p> + <div class="target">I'm red</div> + <template id="renderer"> + <div class="target"></div> + </template> + </template> + + <template id="x-container-dynamic"> + <style> + .target { + background-color: rgb(123, 123, 123); + } + </style> + <h1>x-container</h1> + <p>here .target elements are gray</p> + <div class="target">I'm gray</div> + <slot></slot> + </template> + + <x-container-dynamic></x-container-dynamic> + + <template id="css-build" css-build="shady"> + <style>:host{@apply --fake;}</style> + <div class="style-scope css-build"></div> + </template> + + <template id="css-build-comment"><!--css-build:shady--> + <style>:host{@apply --fake;}</style> + <div class="style-scope css-build-comment"></div> + </template> + + <script> + suite('Dynamic Scoping', () => { + function stamp(parent, host) { + let template = host.shadowRoot.querySelector('template#renderer') + let el = template.content.cloneNode(true).querySelector('div.target'); + el.textContent = `stamped by ${host.id}`; + parent.appendChild(el); + return el; + } + test('DOM is scoped correctly when stamped from an element into document', (done) => { + let inBody = document.querySelector('x-sample#inBody'); + let inContainer = document.querySelector('x-sample#inContainer'); + makeElement('x-sample', function() { + this.shadowRoot.querySelector('h2').textContent = `${this.id}`; + }); + makeElement('x-container'); + setTimeout(() => { + let body = stamp(document.body, inBody); + let container = stamp(document.querySelector('x-container').shadowRoot, inContainer); + requestAnimationFrame(() => { + assert.equal(getComputedStyle(body).backgroundColor, 'rgb(0, 255, 0)'); + assert.equal(getComputedStyle(container).backgroundColor, 'rgb(123, 123, 123)') + done(); + }); + }, 300); + }); + test('DOM is scoped correctly when created dynamically inside a scoped container', (done) => { + makeElement('x-dynamic', function() { + let div = this.shadowRoot.querySelector('#container'); + let newDiv = div.cloneNode(true); + let span = document.createElement('span'); + span.textContent = 'created dynamically'; + newDiv.appendChild(span); + this.shadowRoot.appendChild(newDiv); + requestAnimationFrame(() => { + assert.equal(getComputedStyle(span).backgroundColor, 'rgb(123, 123, 123)'); + done(); + }) + }); + }); + test('moving a custom element between scopes recalculates correctly', function(done) { + makeElement('out-of-band'); + makeElement('oob-parent'); + makeElement('oob-other-parent'); + let parent = document.querySelector('oob-parent'); + let newParent = document.querySelector('oob-other-parent'); + let oob = parent.shadowRoot.querySelector('out-of-band'); + let shadowDiv = oob.shadowRoot.querySelector('div'); + newParent.shadowRoot.appendChild(oob); + requestAnimationFrame(() => { + assert.equal(getComputedStyle(shadowDiv).getPropertyValue('color').trim(), 'rgb(255, 0, 0)'); + done(); + }); + }) + function makeDynamicElement(name, connectedCallback) { + let template = document.querySelector(`template#${name}`); + if (template && window.ShadyCSS) { + window.ShadyCSS.prepareTemplate(template, name); + } + window.customElements.define(name, class extends window.HTMLElement { + constructor() { + super(); + if (template && !this.shadowRoot) { + this.attachShadow({mode: 'open'}); + this.shadowRoot.appendChild(document.importNode(template.content, true)); + } + } + connectedCallback() { + window.ShadyCSS && window.ShadyCSS.styleElement(this); + if (connectedCallback) { + connectedCallback.call(this); + } + } + }); + } + test('Nested DOM is scoped correctly when created dynamically inside a dynamic container', function(done) { + if (!window.customElements.polyfillWrapFlushCallback && window.ShadyDOM && window.ShadyDOM.inUse) { + /* + * This test is flaky if running with native custom elements and polyfill shadowdom, + * as the shadowdom polyfill may render inside of the constructor and create children, + * which is not allowed in the CE spec. + */ + this.skip(); + } + makeDynamicElement('x-container-dynamic'); + makeDynamicElement('x-sample-dynamic'); + const dynamicDiv = document.createElement('div'); + dynamicDiv.classList.add('target'); + dynamicDiv.innerText = 'I was created dynamically'; + const dynamicSample = document.createElement('x-sample-dynamic'); + const dynamicContainer = document.createElement('x-container-dynamic'); + dynamicSample.shadowRoot.appendChild(dynamicDiv); + dynamicContainer.shadowRoot.appendChild(dynamicSample); + document.querySelector('x-container-dynamic').shadowRoot.appendChild(dynamicContainer); + requestAnimationFrame(() => { + dynamicSample.shadowRoot.querySelectorAll('div.target').forEach((target) => + assert.equal(getComputedStyle(target).backgroundColor,'rgb(255, 0, 0)')); + done(); + }); + }); + + test('templates marked with "css-build" will be left alone', function() { + makeElement('css-build'); + const template = document.querySelector('template#css-build'); + const div = template.content.querySelector('div'); + const divClasses = Array.from(div.classList); + assert.includeMembers(divClasses, ['style-scope', 'css-build']); + const style = template.content.querySelector('style'); + if (style) { + assert.match(style.textContent.trim(), /:host\s*{\s*@apply --fake;\s*}/); + } + }); + + test('templates with css-build comments will be left alone', function() { + const template = document.querySelector('template#css-build-comment'); + const buildComment = template.content.firstChild; + assert.instanceOf(buildComment, Comment, 'first child of template content should be a Comment'); + makeElement('css-build-comment'); + const div = template.content.querySelector('div'); + const divClasses = Array.from(div.classList); + assert.includeMembers(divClasses, ['style-scope', 'css-build-comment']); + const style = template.content.querySelector('style'); + if (style) { + assert.match(style.textContent.trim(), /:host\s*{\s*@apply --fake;\s*}/); + } + assert.equal(buildComment.parentNode, null, 'build commment should have been removed'); + }); + }); + </script> +</body> +</html> diff --git a/catapult/third_party/polymer/components/shadycss/tests/html-imports/custom-style-import.html b/catapult/third_party/polymer/components/shadycss/tests/html-imports/custom-style-import.html new file mode 100644 index 00000000..3f9991e8 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/html-imports/custom-style-import.html @@ -0,0 +1,16 @@ +<!-- +@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 +--> +<custom-style> + <style> + html { + --color: rgb(0, 0, 255); + } + </style> +</custom-style>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/lazy-init.html b/catapult/third_party/polymer/components/shadycss/tests/lazy-init.html new file mode 100644 index 00000000..42273b32 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/lazy-init.html @@ -0,0 +1,157 @@ +<!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>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/media-query.html b/catapult/third_party/polymer/components/shadycss/tests/media-query.html new file mode 100644 index 00000000..6cf20ef1 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/media-query.html @@ -0,0 +1,69 @@ +<!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> + if (customElements.polyfillWrapFlushCallback) { + // delay definition of custom-style until after template polyfill loads + customElements.polyfillWrapFlushCallback(function (cb) { + HTMLImports.whenReady(cb); + }); + } + </script> + <script src="module/generated/make-element.js"></script> + <title>Media Querty</title> + +</head> + +<body> + <template id="simple-element"> + <style> + :host { + height: 100px; + width: 100px; + display: block; + background-color: var(--color, rgb(0, 0, 0)); + } + @media (min-width: 1px) and (max-width: 1px) { + :host { + --color: rgb(128, 128, 128); + } + } + </style> + </template> + <script> + suite('Media Query correctness', function() { + makeElement('simple-element'); + test('test against whole @media rule', function() { + var el = document.createElement('simple-element'); + document.body.appendChild(el); + let bg = getComputedStyle(el).getPropertyValue('background-color').trim(); + assert.equal(bg, 'rgb(0, 0, 0)', 'background-color did not match'); + }); + }); + </script> +</body> +</html>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/mixin-fallbacks.html b/catapult/third_party/polymer/components/shadycss/tests/mixin-fallbacks.html new file mode 100644 index 00000000..746caa30 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/mixin-fallbacks.html @@ -0,0 +1,72 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2018 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="./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> + +<template id="mixin-element"> + <style> + :host { + background-color: rgb(0, 0, 255); + height: 100px; + display: block; + } + :host { + @apply --mixin; + } + </style> +</template> + +<template id="outer-element"> + <style> + :host > * { + --mixin: { + background-color: rgb(255, 0, 0); + } + } + </style> + <mixin-element></mixin-element> +</template> + +<script> + suite('Mixin Fallbacks', function() { + suiteSetup(function() { + makeElement('mixin-element'); + makeElement('outer-element'); + }); + + test('outer-element sets mixin color', function() { + const el = document.createElement('outer-element'); + document.body.appendChild(el); + const inner = el.shadowRoot.querySelector('mixin-element'); + const color = getComputedStyle(inner).getPropertyValue('background-color').trim(); + assert.equal(color, 'rgb(255, 0, 0)'); + }); + test('mixin-element by itself falls back correctly', function() { + const mixinOnly = document.createElement('mixin-element'); + document.body.appendChild(mixinOnly); + const color = getComputedStyle(mixinOnly).getPropertyValue('background-color').trim(); + assert.equal(color, 'rgb(0, 0, 255)'); + }); + }); +</script>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/mixin-ordering.html b/catapult/third_party/polymer/components/shadycss/tests/mixin-ordering.html new file mode 100644 index 00000000..2191b25e --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/mixin-ordering.html @@ -0,0 +1,143 @@ +<!doctype html> +<head> + <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> +</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> + diff --git a/catapult/third_party/polymer/components/shadycss/tests/module/css-parse.js b/catapult/third_party/polymer/components/shadycss/tests/module/css-parse.js new file mode 100644 index 00000000..386ff297 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/module/css-parse.js @@ -0,0 +1,17 @@ +/** +@license +Copyright (c) 2016 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 +*/ + +/* +A simple shim to generate a testable module +*/ + +import * as CssParse from '../../src/css-parse' + +window['CssParse'] = CssParse; diff --git a/catapult/third_party/polymer/components/shadycss/tests/module/custom-style-element.js b/catapult/third_party/polymer/components/shadycss/tests/module/custom-style-element.js new file mode 100644 index 00000000..b306989c --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/module/custom-style-element.js @@ -0,0 +1,15 @@ +/** +@license +Copyright (c) 2016 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 +*/ + +/* +A simple shim to generate a testable module +*/ + +import '../../examples/custom-style-element' diff --git a/catapult/third_party/polymer/components/shadycss/tests/module/make-element.js b/catapult/third_party/polymer/components/shadycss/tests/module/make-element.js new file mode 100644 index 00000000..45eb3b3e --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/module/make-element.js @@ -0,0 +1,35 @@ +/** +@license +Copyright (c) 2016 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 +*/ + +/* +A simple webcomponents helper +*/ +'use strict'; + +window.makeElement = (name, connectedCallback) => { + let template = document.querySelector(`template#${name}`); + if (template && window.ShadyCSS) { + window.ShadyCSS.prepareTemplate(template, name); + } + window.customElements.define(name, class extends window.HTMLElement { + connectedCallback() { + window.ShadyCSS && window.ShadyCSS.styleElement(this); + if (!this.shadowRoot) { + this.attachShadow({mode: 'open'}); + if (template) { + this.shadowRoot.appendChild(template.content.cloneNode(true)); + } + } + if (connectedCallback) { + connectedCallback.call(this); + } + } + }); +}; diff --git a/catapult/third_party/polymer/components/shadycss/tests/module/style-cache.js b/catapult/third_party/polymer/components/shadycss/tests/module/style-cache.js new file mode 100644 index 00000000..cb5a46cf --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/module/style-cache.js @@ -0,0 +1,16 @@ +/** +@license +Copyright (c) 2016 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 +*/ + +/* +A simple shim to generate a testable module +*/ + +import StyleCache from '../../src/style-cache' +window['StyleCache'] = StyleCache; diff --git a/catapult/third_party/polymer/components/shadycss/tests/module/style-info.js b/catapult/third_party/polymer/components/shadycss/tests/module/style-info.js new file mode 100644 index 00000000..31e31843 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/module/style-info.js @@ -0,0 +1,16 @@ +/** +@license +Copyright (c) 2016 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 +*/ + +/* +A simple shim to generate a testable module +*/ + +import StyleInfo from '../../src/style-info' +window['StyleInfo'] = StyleInfo; diff --git a/catapult/third_party/polymer/components/shadycss/tests/module/style-placeholder.js b/catapult/third_party/polymer/components/shadycss/tests/module/style-placeholder.js new file mode 100644 index 00000000..0c01f4b0 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/module/style-placeholder.js @@ -0,0 +1,15 @@ +/** +@license +Copyright (c) 2016 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 +*/ + +/* +A simple shim to generate a testable module +*/ + +import '../../src/style-placeholder' diff --git a/catapult/third_party/polymer/components/shadycss/tests/module/style-properties.js b/catapult/third_party/polymer/components/shadycss/tests/module/style-properties.js new file mode 100644 index 00000000..054c4e73 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/module/style-properties.js @@ -0,0 +1,16 @@ +/** +@license +Copyright (c) 2016 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 +*/ + +/* +A simple shim to generate a testable module +*/ + +import StyleProperties from '../../src/style-properties' +window['StyleProperties'] = StyleProperties; diff --git a/catapult/third_party/polymer/components/shadycss/tests/module/style-settings.js b/catapult/third_party/polymer/components/shadycss/tests/module/style-settings.js new file mode 100644 index 00000000..b73830b7 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/module/style-settings.js @@ -0,0 +1,16 @@ +/** +@license +Copyright (c) 2016 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 +*/ + +/* +A simple shim to generate a testable module +*/ + +import * as StyleSettings from '../../src/style-settings' +window['StyleSettings'] = StyleSettings; diff --git a/catapult/third_party/polymer/components/shadycss/tests/module/style-transformer.js b/catapult/third_party/polymer/components/shadycss/tests/module/style-transformer.js new file mode 100644 index 00000000..77a4097a --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/module/style-transformer.js @@ -0,0 +1,16 @@ +/** +@license +Copyright (c) 2016 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 +*/ + +/* +A simple shim to generate a testable module +*/ + +import StyleTransformer from '../../src/style-transformer' +window['StyleTransformer'] = StyleTransformer; diff --git a/catapult/third_party/polymer/components/shadycss/tests/module/style-util.js b/catapult/third_party/polymer/components/shadycss/tests/module/style-util.js new file mode 100644 index 00000000..6b59a18c --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/module/style-util.js @@ -0,0 +1,16 @@ +/** +@license +Copyright (c) 2016 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 +*/ + +/* +A simple shim to generate a testable module +*/ + +import * as StyleUtil from '../../src/style-util' +window['StyleUtil'] = StyleUtil; diff --git a/catapult/third_party/polymer/components/shadycss/tests/module/svg-in-shadow.js b/catapult/third_party/polymer/components/shadycss/tests/module/svg-in-shadow.js new file mode 100644 index 00000000..502cd702 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/module/svg-in-shadow.js @@ -0,0 +1,43 @@ +/** +@license +Copyright (c) 2016 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 +*/ + +'use strict'; + +const ShadyCSS = window.ShadyCSS; + +window.registerSVGElement = () => { + const LOCAL_NAME = 'svg-in-shadow'; + const TEMPLATE = document.querySelector(`template#${LOCAL_NAME}`); + ShadyCSS.prepareTemplate(TEMPLATE, LOCAL_NAME); + + class SVGInShadow extends window.HTMLElement { + connectedCallback() { + ShadyCSS.styleElement(this); + this.attachShadow({mode: 'open'}); + this.shadowRoot.appendChild(document.importNode(TEMPLATE.content, true)); + } + + get svg() { + return this.shadowRoot.querySelector('svg'); + } + + addCircle() { + const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); + const x = 10 + Math.floor(80 * Math.random()); + const y = 10 + Math.floor(80 * Math.random()); + circle.setAttribute('cx', String(x)); + circle.setAttribute('cy', String(y)); + circle.setAttribute('r', '10'); + this.svg.appendChild(circle); + return circle; + } + } + window.customElements.define(LOCAL_NAME, SVGInShadow); +};
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/no-applyshim/custom-style-late.html b/catapult/third_party/polymer/components/shadycss/tests/no-applyshim/custom-style-late.html new file mode 100644 index 00000000..7011498d --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/no-applyshim/custom-style-late.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> +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="../../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: 2px solid red; + } + </style> + </custom-style> +</template> + +<template id="x-late"> + <style> + :host { + display: block; + border: var(--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-applyshim/custom-style-only.html b/catapult/third_party/polymer/components/shadycss/tests/no-applyshim/custom-style-only.html new file mode 100644 index 00000000..59cf219b --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/no-applyshim/custom-style-only.html @@ -0,0 +1,75 @@ +<!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/shadydom/shadydom.min.js"></script> +<script src="../../node_modules/@webcomponents/custom-elements/custom-elements.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="../../scoping-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> + +<custom-style> + <style> + #target { + display: block; + border: var(--late); + } + </style> +</custom-style> + +<template id="late"> + <custom-style class="late-style"> + <style> + html { + --late: 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-applyshim/custom-style.html b/catapult/third_party/polymer/components/shadycss/tests/no-applyshim/custom-style.html new file mode 100644 index 00000000..0794a41a --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/no-applyshim/custom-style.html @@ -0,0 +1,68 @@ +<!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="../../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); + } + </style> +</custom-style> + +<template id="x-inner"> + <style> + :host { + display: block; + height: 100px; + width: 100px; + border: 4px solid blue; + background-color: var(--foo); + } + </style> +</template> + +<template id="x-outer"> + <style> + :host { + display: block; + } + </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)'); + }); + }); +</script>
\ No newline at end of file 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> + diff --git a/catapult/third_party/polymer/components/shadycss/tests/ordering.html b/catapult/third_party/polymer/components/shadycss/tests/ordering.html new file mode 100644 index 00000000..392897c4 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/ordering.html @@ -0,0 +1,173 @@ +<!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="module/generated/make-element.js"></script> + +<custom-style> + <style> + html { + --coloring: { + color: rgb(0, 0, 255); + background-color: rgb(255, 0, 0); + } + } + </style> +</custom-style> + +<custom-style> + <style> + html { + --border: 2px solid black; + } + </style> +</custom-style> + +<template id="x-inner"> + <style> + :host { + @apply --inner; + @apply --coloring; + } + </style> +<slot></slot> +</template> + +<template id="x-element"> + <style> + :host { + display: block; + border: var(--border); + @apply --coloring; + } + x-inner { + --inner: { + border: 10px solid black; + } + } + </style> + <div>What color?</div> + <x-inner>Inner</x-inner> +</template> + +<template id="x-early"> + <style> + :host { + display: block; + background: rgb(123, 123, 123); + color: rgb(255, 165, 0); + border: var(--border, 10px dotted blue); + @apply --coloring; + } + </style> + <div>Early!</div> +</template> + +<x-early></x-early> + +<script> + function loadScript(src) { + console.log(`loading ${src}`); + let script = document.createElement('script') + script.src = src; + let p = new Promise((resolve, reject) => { + script.onload = () => {console.log(`loaded ${src}`); resolve()}; + script.onerror = () => {console.error(`error ${src}`); reject()}; + }); + document.head.appendChild(script); + return p; + } + + function registerEarly() { + makeElement('x-early'); + } + + function loadScopingShim() { + return loadScript('../scoping-shim.min.js'); + } + + function loadCustomStyle() { + return loadScript('../custom-style-interface.min.js').then(() => { + return loadScript('module/generated/custom-style-element.js') + }); + } + + function loadApplyShim() { + return loadScript('../apply-shim.min.js'); + } + + function register() { + makeElement('x-inner'); + makeElement('x-element'); + } + + function assertComputed(element, property, expected) { + let value = (getComputedStyle(element).getPropertyValue(property) || '').trim(); + assert.equal(expected, value, `${property} on ${element.localName} incorrect`); + } + + function chain(arr) { + let out = Promise.resolve(); + for (let i = 0; i < arr.length; i++) { + out = out.then(arr[i]); + } + return out; + } + + let orderSteps = { + scoping: loadScopingShim, + early: registerEarly, + apply: loadApplyShim, + custom: loadCustomStyle, + }; + + /** + * Support the following permutations of loading via url query params: + * + * Apply Shim, CustomStyle + * Scoping Shim, Apply Shim, Custom Style + * Apply Shim, Element, CustomStyle + * Scoping Shim, Element, Apply Shim, Custom Style + * Scoping Shim, Apply Shim, Element, Custom Style + */ + + suite('Dynamic ordering of components', () => { + let flags = window.WebComponents.flags; + let order = decodeURIComponent(flags.order || 'scoping,apply,custom').split(','); + let steps = chain(order.map(o => orderSteps[o])); + let otherFlags = `${flags.ce ? 'ce' : ''} ${flags.shadydom ? 'shadydom' : ''} ${flags.shimcssproperties ? 'shimcssproperties' : ''}`; + let needsScopingShim = window.ShadyDOM && window.ShadyDOM.inUse || flags.shimcssproperties; + + test(`${order.join(', ')} with ${otherFlags}`, function() { + console.log(order, flags); + if (order.indexOf('scoping') === -1 && needsScopingShim) { + this.skip(); + } + return steps.then( + register + ).then(() => { + let el = document.createElement('x-element'); + document.body.appendChild(el); + assertComputed(el, 'background-color', 'rgb(255, 0, 0)'); + assertComputed(el, 'border-top-width', '2px'); + assertComputed(el.shadowRoot.querySelector('div'), 'color', 'rgb(0, 0, 255)'); + assertComputed(el.shadowRoot.querySelector('x-inner'), 'border-top-width', '10px'); + }); + }) + }) +</script>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/placeholder-ordering.html b/catapult/third_party/polymer/components/shadycss/tests/placeholder-ordering.html new file mode 100644 index 00000000..33eecdbb --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/placeholder-ordering.html @@ -0,0 +1,66 @@ +<!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="./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="module/generated/make-element.js"></script> +</head> +<body> + <template id="x-a"> + <style> + :host { + display: block; + } + </style> + </template> + <template id="x-b"> + <style> + :host { + display: block; + } + </style> + </template> + <template id="x-c"> + <style> + :host { + display: block; + } + </style> + </template> + <script> + suite('placeholder ordering', function() { + test.skip('placeholders are in order', function() { + makeElement('x-a'); + makeElement('x-b'); + var el = document.createElement('x-a'); + document.body.appendChild(el); + makeElement('x-c'); + var styles = Array.from(document.querySelectorAll('style[scope]')).map(function(style) { + return style.getAttribute('scope'); + }); + assert.deepEqual(styles, ['x-a', 'x-b', 'x-c'], 'styles are not in order'); + }) + }); + </script> +</body> +</html>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/runner.html b/catapult/third_party/polymer/components/shadycss/tests/runner.html new file mode 100644 index 00000000..5eaf3784 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/runner.html @@ -0,0 +1,113 @@ +<!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 +--> +<title>ScopingShim Tests</title> +<meta charset="utf-8"> + +<script src="../node_modules/wct-browser-legacy/browser.js"></script> + +<script> +(function(){ + var suites = [ + 'css-parse.html', + 'apply-shim.html', + 'async-loading.html', + 'placeholder-ordering.html', + 'scoping.html', + 'mixin-ordering.html', + 'svg.html', + 'style-transformer.html', + 'custom-style.html', + 'custom-style-late.html', + 'custom-style-only.html', + 'complicated-mixin-ordering.html', + 'dynamic-scoping.html', + 'settings.html', + 'chrome-devtools.html', + 'workarounds.html', + 'deferred-apply.html', + 'no-applyshim/custom-style-only.html', + 'wc-1.html', + 'scoping-api.html', + 'mixin-fallbacks.html' + ]; + + // http://eddmann.com/posts/cartesian-product-in-javascript/ + function flatten(arr) { return [].concat.apply([], arr) } + function product(sets) { + return sets.reduce(function(acc, set) { + return flatten(acc.map(function(x) { + return set.map(function(y) { return x.concat(y); }); + })); + }, [[]]); + } + function combinations(suites, flags) { + return product(flags).reduce(function(list, f) { + f = f.filter(function(i) { return i; }).join('&'); + return list.concat(suites.map(function(s) { return s + (f ? '?' + f : '') })) + }, []); + } + + function addUrlOption(previous, next) { + previous = previous || ''; + next = next || ''; + return previous + (previous ? '&' : '') + next; + } + + // test shadowdom/custom elements polyfills together + // prefering both if possible. + var matrix = ['']; + var webcomponents = ''; + if (window.customElements) { + webcomponents = 'wc-register=true'; + } + // if native is available, make sure to test polyfill + if (Element.prototype.attachShadow && document.documentElement.getRootNode) { + webcomponents = addUrlOption(webcomponents, 'wc-shadydom=true'); + } + // ce + sd becomes a single test iteration. + if (webcomponents) { + matrix.push(webcomponents); + } + // economize testing by testing css shimming + // only against 1 environment (native or polyfill). + if (window.CSS && CSS.supports && CSS.supports('box-shadow', '0 0 0 var(--foo)')) { + var last = matrix[matrix.length-1]; + matrix.push(addUrlOption(last, 'wc-shimcssproperties=true')); + } + suites = combinations(suites, [matrix]); + + var orderingScenarios = [ + 'wc-order=apply,custom', + 'wc-order=scoping,apply,custom', + 'wc-order=apply,early,custom', + 'wc-order=scoping,early,apply,custom', + 'wc-order=scoping,apply,early,custom' + ]; + + suites = suites.concat(combinations(['ordering.html'], [matrix, orderingScenarios])); + + if (matrix.length > 2) { + suites = suites.concat([ + 'no-scopingshim/apply-shim.html', + 'no-scopingshim/mixin-ordering.html', + 'no-scopingshim/custom-style.html', + 'no-scopingshim/custom-style-late.html', + 'no-scopingshim/complicated-mixin-ordering.html', + 'no-scopingshim/custom-style-only.html', + 'no-applyshim/custom-style.html', + 'no-applyshim/custom-style-late.html' + ]); + } + + console.log(suites); + WCT.loadSuites(suites); +})(); +</script> diff --git a/catapult/third_party/polymer/components/shadycss/tests/scoping-api.html b/catapult/third_party/polymer/components/shadycss/tests/scoping-api.html new file mode 100644 index 00000000..d537ed7c --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/scoping-api.html @@ -0,0 +1,131 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2018 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(cb) { window.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> + window.ShadyDOM = {force: true} + </script> + <script src="../node_modules/@webcomponents/shadydom/shadydom.min.js"></script> + <script> + // disable document watcher + window.ShadyDOM.handlesDynamicScoping = true; + </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> +</head> +<body> + <template id="sync-element"> + <style> + div { + background: rgb(255, 0, 0); + border: 10px solid black; + } + </style> + <div id="inner">Test</div> + </template> + <div id="arena"></div> + <script> + function assertComputedStyle(node, expectedValue, property = 'border-top-width') { + const actualValue = getComputedStyle(node).getPropertyValue(property).trim(); + assert.equal(actualValue, expectedValue, `${property} does not have the expected value`); + } + suite('Synchronous Scoping API', function() { + const arena = document.querySelector('#arena'); + const csfn = (node) => { + return window.ShadyCSS.ScopingShim.currentScopeForNode(node); + }; + const sfn = (node) => { + return window.ShadyCSS.ScopingShim.scopeForNode(node); + }; + const scopeNode = (node, scope) => { + window.ShadyCSS.ScopingShim.scopeNode(node, scope); + } + const unscopeNode = (node, scope) => { + window.ShadyCSS.ScopingShim.unscopeNode(node, scope); + } + let el; + + suiteSetup(function() { + makeElement('sync-element'); + }); + + setup(function() { + el = document.createElement('sync-element'); + arena.appendChild(el); + }); + + teardown(function() { + arena.innerHTML = ''; + }); + + test('mutation observer is disabled', function(done) { + const inner = el.shadowRoot.querySelector('#inner'); + arena.appendChild(inner); + setTimeout(() => { + assertComputedStyle(inner, 'rgb(255, 0, 0)', 'background-color'); + done(); + }, 100); + }); + + test('currentScopeForNode', function() { + assert.equal(csfn(el), '', 'sync-scoping should be document scope'); + const inner = el.shadowRoot.querySelector('#inner'); + assert.equal(csfn(inner), 'sync-element', 'inner div should have sync-element scope'); + const disconnected = document.createElement('sync-element'); + assert.equal(csfn(disconnected), '', 'disconnected element should have a blank scope') + const dynamic = document.createElement('div'); + el.shadowRoot.appendChild(dynamic); + assert.equal(csfn(dynamic), '', 'dynamically appended node will not be scoped yet'); + }); + + test('scopeForNode', function() { + assert.equal(sfn(el), '', 'sync-scoping should be document scope'); + const inner = el.shadowRoot.querySelector('#inner'); + assert.equal(sfn(inner), 'sync-element', 'inner div should have sync-element scope'); + const disconnected = document.createElement('sync-element'); + assert.equal(sfn(disconnected), '', 'disconnected element should have a blank scope'); + const dynamic = document.createElement('div'); + el.shadowRoot.appendChild(dynamic); + assert.equal(sfn(dynamic), 'sync-element', 'dynamically created node should have sync-element scope'); + }); + + test('scopeNode', function() { + const div = document.createElement('div'); + el.shadowRoot.appendChild(div); + scopeNode(div, sfn(div)); + assertComputedStyle(div, '10px'); + assertComputedStyle(div, 'rgb(255, 0, 0)', 'background-color'); + }); + + test('unscopeNode', function() { + const inner = el.shadowRoot.querySelector('#inner'); + arena.appendChild(inner); + unscopeNode(inner, csfn(inner)); + assertComputedStyle(inner, '0px'); + }); + }); + </script> +</body> +</html>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/scoping.html b/catapult/third_party/polymer/components/shadycss/tests/scoping.html new file mode 100644 index 00000000..eaab8e04 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/scoping.html @@ -0,0 +1,1058 @@ +<!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> diff --git a/catapult/third_party/polymer/components/shadycss/tests/settings.html b/catapult/third_party/polymer/components/shadycss/tests/settings.html new file mode 100644 index 00000000..ccf773e6 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/settings.html @@ -0,0 +1,61 @@ +<!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 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/shadydom/shadydom.min.js"></script> +<script> + suite('Settings', () => { + window.ShadyCSS = { cssBuild: 'shady' } + let origCss; + let origShady; + let origCssBuild; + test(`settings remain correct no matter the order of components loaded ${JSON.stringify(window.WebComponents.flags)}`, (done) => { + let script = document.createElement('script'); + script.src = '../custom-style-interface.min.js'; + script.onerror = (err) => done(err); + script.onload = () => { + origCss = window.ShadyCSS.nativeCss; + origShady = window.ShadyCSS.nativeShadow; + origCssBuild = window.ShadyCSS.cssBuild; + assert.notEqual(origCss, undefined, 'nativeCss should be defined'); + assert.notEqual(origShady, undefined, 'nativeShadow should be defined'); + assert.equal(origCssBuild, 'shady', 'cssBuild should be defined'); + let script = document.createElement('script'); + script.src = '../apply-shim.min.js'; + script.onerror = (err) => done(err); + script.onload = () => { + assert.equal(origCss, window.ShadyCSS.nativeCss); + assert.equal(origShady, window.ShadyCSS.nativeShadow); + assert.equal(origCssBuild, window.ShadyCSS.cssBuild); + let script = document.createElement('script'); + script.src = '../scoping-shim.min.js'; + script.onerrer = (err) => done(err); + script.onload = () => { + assert.equal(origCss, window.ShadyCSS.nativeCss); + assert.equal(origShady, window.ShadyCSS.nativeShadow); + assert.equal(origCssBuild, window.ShadyCSS.cssBuild); + done(); + }; + document.head.appendChild(script); + } + document.head.appendChild(script); + } + document.head.appendChild(script); + }); + test('Native CSS Custom Properties disabled if ShadyDOM is in use', () => { + if (!window.ShadyDOM || !window.ShadyDOM.inUse) { + assert.isTrue(window.ShadyCSS.nativeCss, 'nativeCss should be enabled if not using ShadyDOM'); + } + }) + }); +</script>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/style-transformer.html b/catapult/third_party/polymer/components/shadycss/tests/style-transformer.html new file mode 100644 index 00000000..cf457f3d --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/style-transformer.html @@ -0,0 +1,299 @@ +<!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="./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="module/generated/style-transformer.js"></script> +<title>Style Transformer</title> + +<template id="host"> + <style> + :host { + color: blue; + } + :host([red]) { + color: red; + } + :host > * { + color: green; + } + :host(.bar) :-webkit-any(.foo, .bar) { + color: purple; + }; + :-webkit-any([baz], [zot="foo"]) :matches(foo, bar) > :-moz-any(:not(:defined), :unresolved) { + color: rgb(123, 123, 123); + } + :matches(a, b) { + color: black; + } + </style> +</template> + +<template id="slotted"> + <style> + div::slotted(.foo) { + color: gray; + } + ::slotted(.bar) { + color: lightgray; + } + :host > ::slotted(*:nth-of-type(2n - 1)) { + color: red; + } + </style> +</template> + +<template id="dir"> + <style> + div:dir(rtl) { + color: blue; + } + :host(:dir(rtl)) { + color: blue; + } + </style> +</template> + +<template id="custom-style"> + <style> + :root { + color: black; + } + </style> +</template> + +<template id="shared-style"> + <style> + html, :host { + color: gray; + } + </style> +</template> + +<template id="attribute-style"> + <style> + [foo="foo:bar"] { + background-color: blue; + } + </style> +</template> + +<template id="nested-attribute-style"> + <style> + [foo="foo:bar"] [foo="foo:bar"] { + background-color: blue; + } + </style> +</template> + +<template id="prepended-attribute-style"> + <style> + foo[foo="foo:bar"] { + background-color: blue; + } + </style> +</template> + +<script> +function processTemplate(templateName, elementName) { + var template = document.querySelector('template#' + templateName); + window.ShadyCSS.prepareTemplate(template, elementName); + return template._styleAst; +} +suite('Style Transformer', function() { + setup(function() { + if (window.ShadyCSS.nativeShadow) { + this.skip(); + } + }) + suite(':host transforms', function() { + var ast; + suiteSetup(function() { + ast = processTemplate('host', 'x-foo'); + }); + + test(':host{}', function() { + assert.equal(ast.rules[0].selector, 'x-foo'); + }); + + test(':host([red]){}', function() { + assert.equal(ast.rules[1].selector, 'x-foo[red]'); + }); + + test(':host > *{}', function() { + assert.equal(ast.rules[2].selector, 'x-foo > *.x-foo'); + }); + + test(':host() :-webkit-any()', function() { + assert.equal(ast.rules[3].selector, 'x-foo.bar :-webkit-any(.foo, .bar).x-foo'); + }); + + test('lots of :matches()', function() { + assert.equal(ast.rules[4].selector, ':-webkit-any([baz], [zot="foo"]).x-foo :matches(foo, bar).x-foo > :-moz-any(:not(:defined), :unresolved).x-foo'); + }); + + test('only match', function() { + assert.equal(ast.rules[5].selector, ':matches(a, b).x-foo'); + }); + }); + + suite('::slotted transforms', function() { + var ast; + suiteSetup(function() { + ast = processTemplate('slotted', 'x-slot'); + }); + + test('div::slotted(.foo)', function() { + assert.equal(ast.rules[0].selector, 'div.x-slot > .foo'); + }); + + test('::slotted(.bar)', function() { + assert.equal(ast.rules[1].selector, 'x-slot > .bar'); + }); + + test(':host > ::slotted(*:nth-of-type(2n - 1))', function() { + assert.equal(ast.rules[2].selector, 'x-slot > *:nth-of-type(2n-1)'); + }); + }); + + suite('dir transforms', function() { + var ast; + suiteSetup(function() { + ast = processTemplate('dir', 'x-dir'); + }); + + test('div:dir(rtl)', function() { + assert.equal(ast.rules[0].selector, '[dir="rtl"] div.x-dir, div.x-dir[dir="rtl"]'); + }); + + test('host(:dir(rtl))', function() { + assert.equal(ast.rules[1].selector, '[dir="rtl"] x-dir, x-dir[dir="rtl"]'); + }); + + }); + + suite('custom-style transforms', function() { + var rule; + setup(function() { + var template = document.querySelector('template#custom-style'); + var style = template.content.querySelector('style').cloneNode(true); + var ast = window.ShadyCSS.ScopingShim.getStyleAst(style); + rule = ast.rules[0]; + }); + + test('native ShadowDOM', function() { + window.StyleTransformer.normalizeRootSelector(rule); + assert.equal(rule.selector, 'html'); + }); + + test('ShadyDOM', function() { + window.StyleTransformer.documentRule(rule); + assert.equal(rule.selector, 'html:not(.style-scope)'); + }); + }); + + suite('shared style (light or shadow dom) transforms', function() { + let rule; + + setup(function() { + const template = document.querySelector('template#shared-style'); + const style = template.content.querySelector('style').cloneNode(true); + const ast = window.ShadyCSS.ScopingShim.getStyleAst(style); + rule = ast.rules[0]; + }); + + test('native ShadowDOM', function() { + window.StyleTransformer.normalizeRootSelector(rule); + assert.equal(rule.selector, 'html, :host'); + }); + + test('ShadyDOM', function() { + window.StyleTransformer.documentRule(rule); + assert.equal(rule.selector, 'html:not(.style-scope)'); + }); + }); + + suite('attribute selectors', function() { + + suite('simple', function() { + let rule; + + setup(function() { + const template = document.querySelector('template#attribute-style'); + const style = template.content.querySelector('style').cloneNode(true); + const ast = window.ShadyCSS.ScopingShim.getStyleAst(style); + rule = ast.rules[0]; + }); + + test('native ShadowDOM', function() { + window.StyleTransformer.normalizeRootSelector(rule); + assert.equal(rule.selector, '[foo="foo:bar"]'); + }); + + test('ShadyDOM', function() { + window.StyleTransformer.documentRule(rule); + assert.equal(rule.selector, ':not(.style-scope)[foo="foo:bar"]'); + }); + }); + + suite('nested', function() { + let rule; + + setup(function() { + const template = document.querySelector('template#nested-attribute-style'); + const style = template.content.querySelector('style').cloneNode(true); + const ast = window.ShadyCSS.ScopingShim.getStyleAst(style); + rule = ast.rules[0]; + }); + + test('native ShadowDOM', function() { + window.StyleTransformer.normalizeRootSelector(rule); + assert.equal(rule.selector, '[foo="foo:bar"] [foo="foo:bar"]'); + }); + + test('ShadyDOM', function() { + window.StyleTransformer.documentRule(rule); + assert.equal(rule.selector, ':not(.style-scope)[foo="foo:bar"] :not(.style-scope)[foo="foo:bar"]'); + }); + }); + + suite('prepended', function() { + let rule; + + setup(function() { + const template = document.querySelector('template#prepended-attribute-style'); + const style = template.content.querySelector('style').cloneNode(true); + const ast = window.ShadyCSS.ScopingShim.getStyleAst(style); + rule = ast.rules[0]; + }); + + test('native ShadowDOM', function() { + window.StyleTransformer.normalizeRootSelector(rule); + assert.equal(rule.selector, 'foo[foo="foo:bar"]'); + }); + + test('ShadyDOM', function() { + window.StyleTransformer.documentRule(rule); + assert.equal(rule.selector, 'foo:not(.style-scope)[foo="foo:bar"]'); + }); + }); + }); +}); +</script> diff --git a/catapult/third_party/polymer/components/shadycss/tests/svg.html b/catapult/third_party/polymer/components/shadycss/tests/svg.html new file mode 100644 index 00000000..a613f467 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/svg.html @@ -0,0 +1,118 @@ +<!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"> + <title>SVG</title> + <script> + window.ShadyDOM = {force: true}; + window.ShadyCSS = {shimshadow: true}; + </script> + <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/svg-in-shadow.js"></script> +</head> +<body> + <template id="svg-in-shadow"> + <style> + :host { + display: inline-block; + background-color: #ccc; + } + + .test-class { + border: 3px solid blue; + } + + circle { + fill: blue; + } + </style> + <svg + xmlns="http://www.w3.org/2000/svg" version="1.1" + width="100px" height="100px" viewBox="0 0 100 100" + class="test-class" + ></svg> + </template> + + <script> + suite('SVG', function() { + var STYLE_SCOPE_CLASS = 'style-scope'; + + suiteSetup(function() { + window.registerSVGElement(); + }); + + function flush() { + if (window.ShadyDOM) { + window.ShadyDOM.flush(); + } + window.ShadyCSS.ScopingShim.flush(); + } + + test('SVG elements within a style scope should have style scoping classes.', function() { + var elementWithSVG = document.createElement('svg-in-shadow'); + // Force upgrade. + document.body.appendChild(elementWithSVG); + flush(); + var svg = elementWithSVG.svg; + // The svg element should have a style scope. + assert(svg.getAttribute('class').indexOf(STYLE_SCOPE_CLASS) > -1); + var circle = elementWithSVG.addCircle(); + flush(); + // The circle should also have a style scope. + assert(circle.getAttribute('class').indexOf(STYLE_SCOPE_CLASS) > -1); + // Clean up. + document.body.removeChild(elementWithSVG); + }); + + test('SVG elements removed from style scopes should have scoping classes removed.', function() { + var elementWithSVG = document.createElement('svg-in-shadow'); + // Force upgrade. + document.body.appendChild(elementWithSVG); + flush(); + // Get references to test elements. + var svg = elementWithSVG.svg; + var circle = elementWithSVG.addCircle(); + flush(); + // Move the SVG element out of the shadow root. + svg.parentNode.removeChild(svg); + document.body.appendChild(svg); + flush(); + // The svg element should keep the class that was not involved in style scoping. + assert.equal(svg.getAttribute('class').trim(), 'test-class'); + // The svg element and circle should not have style scope classes. + if (svg.hasAttribute('class')) { + assert(svg.getAttribute('class').indexOf(STYLE_SCOPE_CLASS) === -1); + } + if (circle.hasAttribute('class')) { + assert(circle.getAttribute('class').indexOf(STYLE_SCOPE_CLASS) === -1); + } + // Clean up. + document.body.removeChild(elementWithSVG); + document.body.removeChild(svg); + }); + }); + </script> +</body> +</html> diff --git a/catapult/third_party/polymer/components/shadycss/tests/test-flags.js b/catapult/third_party/polymer/components/shadycss/tests/test-flags.js new file mode 100644 index 00000000..a734044f --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/test-flags.js @@ -0,0 +1,54 @@ +/** + * @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 + */ + +(function () { + + 'use strict'; + + // Establish scope. + window['WebComponents'] = window['WebComponents'] || { 'flags': {} }; + + var flagMatcher = /wc-(.+)/; + + // Flags. Convert url arguments to flags + var flags = {}; + if (!flags['noOpts']) { + // from url + location.search.slice(1).split('&').forEach(function (option) { + var parts = option.split('='); + var match; + if (parts[0] && (match = parts[0].match(flagMatcher))) { + flags[match[1]] = parts[1] || true; + } + }); + } + + // exports + window['WebComponents']['flags'] = flags; + var forceShady = flags['shadydom']; + if (forceShady) { + window['ShadyDOM'] = window['ShadyDOM'] || {}; + window['ShadyDOM']['force'] = forceShady; + } + + var forceCE = flags['register'] || flags['ce']; + if (forceCE && window['customElements']) { + window['customElements']['forcePolyfill'] = forceCE; + } + + var forceShimCss = flags['shimcssproperties']; + if (forceShimCss) { + window['ShadyCSS'] = window['ShadyCSS'] || {}; + window['ShadyCSS']['shimcssproperties'] = true; + } + + window['WebComponents']['ready'] = true; + +})();
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/wc-1.html b/catapult/third_party/polymer/components/shadycss/tests/wc-1.html new file mode 100644 index 00000000..fbe410bd --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/wc-1.html @@ -0,0 +1,42 @@ +<!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="https://unpkg.com/@webcomponents/webcomponentsjs@1/webcomponents-lite.js"></script> +<script src="../custom-style-interface.min.js"></script> +<script src="../node_modules/wct-browser-legacy/browser.js"></script> +<script src="module/generated/make-element.js"></script> +<script src="module/generated/custom-style-element.js"></script> +<template id="my-element"> + <style> + :host { + display: block; + --foo: rgb(255, 0, 0); + } + div { + color: var(--foo); + } + </style> + <div>Hi!</div> +</template> +<script> + suite('WC v1 compat', function() { + suiteSetup(function() { + makeElement('my-element'); + }); + test('element renders correctly', function() { + const el = document.createElement('my-element'); + document.body.appendChild(el); + const color = getComputedStyle(el.shadowRoot.querySelector('div')).getPropertyValue('color').trim(); + assert.equal(color, 'rgb(255, 0, 0)'); + document.body.removeChild(el); + }); + }); +</script>
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/shadycss/tests/workarounds.html b/catapult/third_party/polymer/components/shadycss/tests/workarounds.html new file mode 100644 index 00000000..5b67af94 --- /dev/null +++ b/catapult/third_party/polymer/components/shadycss/tests/workarounds.html @@ -0,0 +1,58 @@ +<!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"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> + <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> +</head> +<body> + <template id="x-bug"> + <style> + :host { + --bg: rgb(255, 0, 0); + } + div::after { + content: 'test'; + background-color: var(--bg); + } + </style> + <div></div> + </template> + <script> + suite('Workarounds', function() { + test('Edge 15', function() { + makeElement('x-bug'); + let el = document.createElement('x-bug'); + document.body.appendChild(el); + let div = el.shadowRoot.querySelector('div'); + assert.notEqual(getComputedStyle(div).getPropertyValue('background-color').trim(), 'rgb(255, 0, 0)'); + }) + }); + </script> +</body> +</html>
\ No newline at end of file |