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