| OLD | NEW |
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <script src="../../../resources/ahem.js"></script> |
| 3 <style> | 4 <style> |
| 4 .container { | 5 .container { |
| 5 font: 50px/1 Ahem, sans-serif; | 6 font: 50px/1 Ahem, sans-serif; |
| 6 color: green; | 7 color: green; |
| 7 } | 8 } |
| 8 | 9 |
| 9 .shape-outside { | 10 .shape-outside { |
| 10 width: 100px; | 11 width: 100px; |
| 11 height: 100px; | 12 height: 100px; |
| 12 float: left; | 13 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='50' height='50' f
ill='blue'/></svg>"); | 14 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 } | 15 } |
| 15 </style> | 16 </style> |
| 16 <script> | 17 <script> |
| 17 window.onload = function() { | 18 window.onload = function() { |
| 18 var container = document.querySelector('.container'); | 19 var container = document.querySelector('.container'); |
| 19 var shape = document.createElement('div'); | 20 var shape = document.createElement('div'); |
| 20 shape.className = 'shape-outside'; | 21 shape.className = 'shape-outside'; |
| 21 container.insertBefore(shape, container.firstChild); | 22 container.insertBefore(shape, container.firstChild); |
| 22 } | 23 } |
| 23 </script> | 24 </script> |
| 24 </head> | 25 </head> |
| 25 <body> | 26 <body> |
| 26 <div class='container'> | 27 <div class='container'> |
| 27 <p>X<br>X<br>X</p> | 28 <p>X<br>X<br>X</p> |
| 28 </div> | 29 </div> |
| 29 </body> | 30 </body> |
| 30 </html> | 31 </html> |
| OLD | NEW |