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