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