| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <script> |
| 3 document.registerElement("x-g", { extends: "g", prototype: { |
| 4 __proto__: SVGGElement.prototype, |
| 5 createdCallback: function() { |
| 6 var greenBox = document.createElementNS('http://www.w3.org/2000/svg', 'rec
t'); |
| 7 greenBox.setAttribute('width', '20'); |
| 8 greenBox.setAttribute('height', '20'); |
| 9 greenBox.setAttribute('fill', 'green'); |
| 10 this.createShadowRoot().appendChild(greenBox); |
| 11 } |
| 12 } |
| 13 }); |
| 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: { |
| 28 __proto__: SVGGElement.prototype, |
| 29 createdCallback: function() { |
| 30 var shadow = this.createShadowRoot(); |
| 31 var style = document.createElement('style'); |
| 32 style.appendChild(document.createTextNode(':host::shadow * { fill: green;
}')); |
| 33 shadow.appendChild(style); |
| 34 var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); |
| 35 rect.setAttribute('width', '20'); |
| 36 rect.setAttribute('height', '20'); |
| 37 shadow.appendChild(rect); |
| 38 } |
| 39 } |
| 40 }); |
| 41 |
| 42 document.registerElement("x-pass", { extends: "text", prototype: { |
| 43 __proto__: SVGTextElement.prototype, |
| 44 createdCallback: function() { |
| 45 this.innerHTML = this.innerHTML.replace('FAIL', 'PASS'); |
| 46 } |
| 47 } |
| 48 }); |
| 49 </script> |
| 50 |
| 51 <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg"> |
| 52 <g is="x-g"> |
| 53 <rect width="100" height="100" fill="red"></rect> |
| 54 </g> |
| 55 </svg><br> |
| 56 |
| 57 <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> |
| 65 <rect id="use-green" width="20" height="20" fill="green"></rect> |
| 66 </defs> |
| 67 <use xlink:href="#use-green"></use> |
| 68 </svg><br> |
| 69 |
| 70 <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"> |
| 79 <rect width="100" height="100" fill="red"></rect> |
| 80 </g> |
| 81 </svg><br> |
| 82 |
| 83 <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg"> |
| 84 <text is="x-pass" font-size="10px" y="20">FAIL</text> |
| 85 </svg> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 585183004:
Enable author shadows for SVG elements (Closed)
Base URL: svn://svn.chromium.org/blink/trunk