OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <script> | 2 <script> |
3 document.registerElement("x-g", { extends: "g", prototype: { | 3 document.registerElement("x-g", { extends: "g", prototype: { |
4 __proto__: SVGGElement.prototype, | 4 __proto__: SVGGElement.prototype, |
5 createdCallback: function() { | 5 createdCallback: function() { |
6 var greenBox = document.createElementNS('http://www.w3.org/2000/svg', 'rec
t'); | 6 var greenBox = document.createElementNS('http://www.w3.org/2000/svg', 'rec
t'); |
7 greenBox.setAttribute('width', '20'); | 7 greenBox.setAttribute('width', '20'); |
8 greenBox.setAttribute('height', '20'); | 8 greenBox.setAttribute('height', '20'); |
9 greenBox.setAttribute('fill', 'green'); | 9 greenBox.setAttribute('fill', 'green'); |
10 this.createShadowRoot().appendChild(greenBox); | 10 this.createShadowRoot().appendChild(greenBox); |
11 } | 11 } |
12 } | 12 } |
13 }); | 13 }); |
14 | 14 |
15 document.registerElement("x-use", { extends: "use", prototype: { | |
16 __proto__: SVGUseElement.prototype, | |
17 createdCallback: function() { | |
18 var greenBox = document.createElementNS('http://www.w3.org/2000/svg', 'rec
t'); | |
19 greenBox.setAttribute('width', '20'); | |
20 greenBox.setAttribute('height', '20'); | |
21 greenBox.setAttribute('fill', 'green'); | |
22 this.createShadowRoot().appendChild(greenBox); | |
23 } | |
24 } | |
25 }); | |
26 | |
27 document.registerElement("x-green", { extends: "g", prototype: { | 15 document.registerElement("x-green", { extends: "g", prototype: { |
28 __proto__: SVGGElement.prototype, | 16 __proto__: SVGGElement.prototype, |
29 createdCallback: function() { | 17 createdCallback: function() { |
30 var shadow = this.createShadowRoot(); | 18 var shadow = this.createShadowRoot(); |
31 var style = document.createElement('style'); | 19 var style = document.createElement('style'); |
32 style.appendChild(document.createTextNode(':host::shadow * { fill: green;
}')); | 20 style.appendChild(document.createTextNode(':host::shadow * { fill: green;
}')); |
33 shadow.appendChild(style); | 21 shadow.appendChild(style); |
34 var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); | 22 var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); |
35 rect.setAttribute('width', '20'); | 23 rect.setAttribute('width', '20'); |
36 rect.setAttribute('height', '20'); | 24 rect.setAttribute('height', '20'); |
(...skipping 11 matching lines...) Expand all Loading... |
48 }); | 36 }); |
49 </script> | 37 </script> |
50 | 38 |
51 <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg"> | 39 <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg"> |
52 <g is="x-g"> | 40 <g is="x-g"> |
53 <rect width="100" height="100" fill="red"></rect> | 41 <rect width="100" height="100" fill="red"></rect> |
54 </g> | 42 </g> |
55 </svg><br> | 43 </svg><br> |
56 | 44 |
57 <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg"> | 45 <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg"> |
58 <use is="x-use"> | |
59 <rect width="100" height="100" fill="red"></rect> | |
60 </use> | |
61 </svg><br> | |
62 | |
63 <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg"> | |
64 <defs> | 46 <defs> |
65 <rect id="use-green" width="20" height="20" fill="green"></rect> | 47 <rect id="use-green" width="20" height="20" fill="green"></rect> |
66 </defs> | 48 </defs> |
67 <use xlink:href="#use-green"></use> | 49 <use xlink:href="#use-green"></use> |
68 </svg><br> | 50 </svg><br> |
69 | 51 |
70 <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg"> | 52 <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg"> |
71 <defs> | |
72 <rect id="use-red" width="100" height="10" fill="red"></rect> | |
73 </defs> | |
74 <use is="x-use" xlink:href="#use-red"></use> | |
75 </svg><br> | |
76 | |
77 <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg"> | |
78 <g is="x-green"> | 53 <g is="x-green"> |
79 <rect width="100" height="100" fill="red"></rect> | 54 <rect width="100" height="100" fill="red"></rect> |
80 </g> | 55 </g> |
81 </svg><br> | 56 </svg><br> |
82 | 57 |
83 <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg"> | 58 <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg"> |
84 <text is="x-pass" font-size="10px" y="20">FAIL</text> | 59 <text is="x-pass" font-size="10px" y="20">FAIL</text> |
85 </svg> | 60 </svg> |
OLD | NEW |