| <!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> |
