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-green", { extends: "g", prototype: { | 15 document.registerElement("x-green", { extends: "g", prototype: { |
16 __proto__: SVGGElement.prototype, | 16 __proto__: SVGGElement.prototype, |
17 createdCallback: function() { | 17 createdCallback: function() { |
18 var shadow = this.createShadowRoot(); | 18 var shadow = this.createShadowRoot(); |
19 var style = document.createElement('style'); | 19 var style = document.createElement('style'); |
20 style.appendChild(document.createTextNode(':host::shadow * { fill: green;
}')); | 20 style.appendChild(document.createTextNode('* { fill: green; }')); |
21 shadow.appendChild(style); | 21 shadow.appendChild(style); |
22 var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); | 22 var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); |
23 rect.setAttribute('width', '20'); | 23 rect.setAttribute('width', '20'); |
24 rect.setAttribute('height', '20'); | 24 rect.setAttribute('height', '20'); |
25 shadow.appendChild(rect); | 25 shadow.appendChild(rect); |
26 } | 26 } |
27 } | 27 } |
28 }); | 28 }); |
29 | 29 |
30 document.registerElement("x-pass", { extends: "text", prototype: { | 30 document.registerElement("x-pass", { extends: "text", prototype: { |
(...skipping 20 matching lines...) Expand all Loading... |
51 | 51 |
52 <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"> |
53 <g is="x-green"> | 53 <g is="x-green"> |
54 <rect width="100" height="100" fill="red"></rect> | 54 <rect width="100" height="100" fill="red"></rect> |
55 </g> | 55 </g> |
56 </svg><br> | 56 </svg><br> |
57 | 57 |
58 <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"> |
59 <text is="x-pass" font-size="10px" y="20">FAIL</text> | 59 <text is="x-pass" font-size="10px" y="20">FAIL</text> |
60 </svg> | 60 </svg> |
OLD | NEW |