| OLD | NEW |
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <style> | 3 <style> |
| 4 .container { | 4 .container { |
| 5 font: 50px/1 Ahem, sans-serif; | 5 font: 50px/1 Ahem, sans-serif; |
| 6 color: green; | 6 color: green; |
| 7 } | 7 } |
| 8 | 8 |
| 9 .shape-outside { | 9 .shape-outside { |
| 10 width: 100px; | 10 width: 100px; |
| 11 height: 100px; | 11 height: 100px; |
| 12 float: left; | 12 float: left; |
| 13 shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/20
00/svg' width='100px' height='100px'><rect x='0' y='50' width='49' height='49' f
ill='blue'/></svg>"); | 13 shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/20
00/svg' width='100px' height='100px'><rect x='0' y='50' width='50' height='50' f
ill='blue'/></svg>"); |
| 14 } | 14 } |
| 15 </style> | 15 </style> |
| 16 <script> | 16 <script> |
| 17 window.onload = function() { | 17 window.onload = function() { |
| 18 var container = document.querySelector('.container'); | 18 var container = document.querySelector('.container'); |
| 19 var shape = document.createElement('div'); | 19 var shape = document.createElement('div'); |
| 20 shape.className = 'shape-outside'; | 20 shape.className = 'shape-outside'; |
| 21 container.insertBefore(shape, container.firstChild); | 21 container.insertBefore(shape, container.firstChild); |
| 22 } | 22 } |
| 23 </script> | 23 </script> |
| 24 </head> | 24 </head> |
| 25 <body> | 25 <body> |
| 26 <div class='container'> | 26 <div class='container'> |
| 27 <p>X<br>X<br>X</p> | 27 <p>X<br>X<br>X</p> |
| 28 </div> | 28 </div> |
| 29 </body> | 29 </body> |
| 30 </html> | 30 </html> |
| 31 | |
| OLD | NEW |