• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!DOCTYPE html>
2<!--
3@license
4Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10-->
11<html>
12<head>
13  <meta charset="utf-8">
14  <title>SVG</title>
15  <script>
16    window.ShadyDOM = {force: true};
17    window.ShadyCSS = {shimshadow: true};
18  </script>
19  <script>
20  WCT = {waitFor: function (cb) {HTMLImports.whenReady(cb)}}
21  </script>
22  <script src="./test-flags.js"></script>
23  <script src="../node_modules/wct-browser-legacy/browser.js"></script>
24  <script src="../node_modules/@webcomponents/webcomponents-platform/webcomponents-platform.js"></script>
25  <script src="../node_modules/es6-promise/dist/es6-promise.auto.min.js"></script>
26  <script src="../node_modules/@webcomponents/template/template.js"></script>
27  <script src="../node_modules/@webcomponents/html-imports/html-imports.min.js"></script>
28  <script src="../node_modules/@webcomponents/shadydom/shadydom.min.js"></script>
29  <script src="../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
30  <script src="../scoping-shim.min.js"></script>
31  <script src="../apply-shim.min.js"></script>
32  <script src="../custom-style-interface.min.js"></script>
33  <script src="module/generated/svg-in-shadow.js"></script>
34</head>
35<body>
36  <template id="svg-in-shadow">
37    <style>
38      :host {
39        display: inline-block;
40        background-color: #ccc;
41      }
42
43      .test-class {
44        border: 3px solid blue;
45      }
46
47      circle {
48        fill: blue;
49      }
50    </style>
51    <svg
52      xmlns="http://www.w3.org/2000/svg" version="1.1"
53      width="100px" height="100px" viewBox="0 0 100 100"
54      class="test-class"
55    ></svg>
56  </template>
57
58  <script>
59    suite('SVG', function() {
60      var STYLE_SCOPE_CLASS = 'style-scope';
61
62      suiteSetup(function() {
63        window.registerSVGElement();
64      });
65
66      function flush() {
67        if (window.ShadyDOM) {
68          window.ShadyDOM.flush();
69        }
70        window.ShadyCSS.ScopingShim.flush();
71      }
72
73      test('SVG elements within a style scope should have style scoping classes.', function() {
74        var elementWithSVG = document.createElement('svg-in-shadow');
75        // Force upgrade.
76        document.body.appendChild(elementWithSVG);
77        flush();
78        var svg = elementWithSVG.svg;
79        // The svg element should have a style scope.
80        assert(svg.getAttribute('class').indexOf(STYLE_SCOPE_CLASS) > -1);
81        var circle = elementWithSVG.addCircle();
82        flush();
83        // The circle should also have a style scope.
84        assert(circle.getAttribute('class').indexOf(STYLE_SCOPE_CLASS) > -1);
85        // Clean up.
86        document.body.removeChild(elementWithSVG);
87      });
88
89      test('SVG elements removed from style scopes should have scoping classes removed.', function() {
90        var elementWithSVG = document.createElement('svg-in-shadow');
91        // Force upgrade.
92        document.body.appendChild(elementWithSVG);
93        flush();
94        // Get references to test elements.
95        var svg = elementWithSVG.svg;
96        var circle = elementWithSVG.addCircle();
97        flush();
98        // Move the SVG element out of the shadow root.
99        svg.parentNode.removeChild(svg);
100        document.body.appendChild(svg);
101        flush();
102        // The svg element should keep the class that was not involved in style scoping.
103        assert.equal(svg.getAttribute('class').trim(), 'test-class');
104        // The svg element and circle should not have style scope classes.
105        if (svg.hasAttribute('class')) {
106          assert(svg.getAttribute('class').indexOf(STYLE_SCOPE_CLASS) === -1);
107        }
108        if (circle.hasAttribute('class')) {
109          assert(circle.getAttribute('class').indexOf(STYLE_SCOPE_CLASS) === -1);
110        }
111        // Clean up.
112        document.body.removeChild(elementWithSVG);
113        document.body.removeChild(svg);
114      });
115    });
116  </script>
117</body>
118</html>
119