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 |