| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style id='stylesheet'> | 4 <style id='stylesheet'> |
| 5 div { | 5 div { |
| 6 font: 50px/1 Ahem, sans-serif; | 6 font: 50px/1 Ahem, sans-serif; |
| 7 color: green; | 7 color: green; |
| 8 } | 8 } |
| 9 .shape-inside1 { | 9 .shape-inside1 { |
| 10 width: 200px; | 10 width: 200px; |
| 11 height: 200px; | 11 height: 200px; |
| 12 shape-inside: outside-shape; | 12 shape-inside: outside-shape; |
| 13 border: 1px solid blue; | 13 border: 1px solid blue; |
| 14 } | 14 } |
| 15 </style> | 15 </style> |
| 16 <script src='../resources/simple-rectangle.js'></script> | 16 <script src='../resources/simple-rectangle.js'></script> |
| 17 <script> | 17 <script> |
| 18 window.onload = function() { | 18 window.onload = function() { |
| 19 createRectangleTest('shape-inside2', 'stylesheet', { width: 200, height:
200 }, { x: 50, y: 50, width: 100, height: 100 }, 'px'); | 19 createRectangleTest('shape-inside2', 'stylesheet', { width: 200, height:
200 }, { x: 50, y: 50, width: 100, height: 100 }, 'px'); |
| 20 var inlineStyle = document.getElementById('shape-inside2').style; | 20 var inlineStyle = document.getElementById('shape-inside2').style; |
| 21 inlineStyle.setProperty('shape-inside', 'outside-shape'); | 21 inlineStyle.setProperty('shape-inside', 'outside-shape'); |
| 22 inlineStyle.setProperty('shape-outside', 'rectangle(50px, 50px, 100px, 1
00px)'); | 22 inlineStyle.setProperty('shape-outside', 'polygon(50px 50px, 150px 50px,
150px 150px, 50px 150px)'); |
| 23 }; | 23 }; |
| 24 </script> | 24 </script> |
| 25 </head> | 25 </head> |
| 26 <body> | 26 <body> |
| 27 <p>This test requires the Ahem font. It tests that the value 'outside-shape' cor
rectly propagates the shape-outside value to shape-inside.</p> | 27 <p>This test requires the Ahem font. It tests that the value 'outside-shape' cor
rectly propagates the shape-outside value to shape-inside.</p> |
| 28 <div id='shape-inside1'>xxxx</div> | 28 <div id='shape-inside1'>xxxx</div> |
| 29 <div id='shape-inside2'>xxxx</div> | 29 <div id='shape-inside2'>xxxx</div> |
| 30 </body> | 30 </body> |
| 31 </html> | 31 </html> |
| OLD | NEW |