OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 #rectangles div { | 5 #rectangles div { |
6 width: 800px; | 6 width: 800px; |
7 height: 0; | 7 height: 0; |
8 line-height: 20px; | 8 line-height: 20px; |
9 margin-top: 50px; | 9 margin-top: 50px; |
10 border-top: 40px solid green; | 10 border-top: 40px solid green; |
11 } | 11 } |
12 #rectangles p { margin-top: 0; } | 12 #rectangles p { margin-top: 0; } |
13 </style> | 13 </style> |
14 </head> | 14 </head> |
15 <body> | 15 <body> |
16 <div id="rectangles"> | 16 <div id="rectangles"> |
17 <div style="margin-top: 0px;"> | 17 <div style="margin-top: 0px;"> |
18 <p>This text should be pushed down below the green rectangle. (There is
a rectangle(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangle
.)</p> | |
19 </div> | |
20 <div> | |
21 <p>This text should be pushed down below the green rectangle. (There is
a rectangle(0px, 0px, 1em, 0px) shape-inside CSS property on the green rectangle
.)</p> | |
22 </div> | |
23 <div> | |
24 <p>This text should be pushed down below the green rectangle. (There is
a circle(0px at 0px 0px) shape-inside CSS property on the green rectangle.)</p> | 18 <p>This text should be pushed down below the green rectangle. (There is
a circle(0px at 0px 0px) shape-inside CSS property on the green rectangle.)</p> |
25 </div> | 19 </div> |
26 <div> | 20 <div> |
27 <p>This text should be pushed down below the green rectangle. (There is
an ellipse(0px 1em at 0px 0px) shape-inside CSS property on the green rectangle.
)</p> | 21 <p>This text should be pushed down below the green rectangle. (There is
an ellipse(0px 1em at 0px 0px) shape-inside CSS property on the green rectangle.
)</p> |
28 </div> | 22 </div> |
29 <div> | 23 <div> |
30 <p>This text should be pushed down below the green rectangle. (There is
an ellipse(1em 0px at 0px 0px) shape-inside CSS property on the green rectangle.
)</p> | 24 <p>This text should be pushed down below the green rectangle. (There is
an ellipse(1em 0px at 0px 0px) shape-inside CSS property on the green rectangle.
)</p> |
31 </div> | 25 </div> |
32 <div> | 26 <div> |
33 <p>This text should be pushed down below the green rectangle. (There is
a polygon(0px 0px) shape-inside CSS property on the green rectangle.)</p> | 27 <p>This text should be pushed down below the green rectangle. (There is
a polygon(0px 0px) shape-inside CSS property on the green rectangle.)</p> |
34 </div> | 28 </div> |
35 <div> | 29 <div> |
36 <p>This text should be pushed down below the green rectangle. (There is a
polygon(0px 0px, 1em 0px) shape-inside CSS property on the green rectangle.)</p
> | 30 <p>This text should be pushed down below the green rectangle. (There is a
polygon(0px 0px, 1em 0px) shape-inside CSS property on the green rectangle.)</p
> |
37 </div> | 31 </div> |
38 </div> | 32 </div> |
39 | 33 |
40 <p style="margin-top: 50px;"> | 34 <p style="margin-top: 50px;"> |
41 A dimension of every shape-inside on this page is defined to 0. Based on the
CSS Exclusions specification: The 'shape-inside' property adds one or more excl
usion areas to the element's wrapping context. | 35 A dimension of every shape-inside on this page is defined to 0. Based on the
CSS Exclusions specification: The 'shape-inside' property adds one or more excl
usion areas to the element's wrapping context. |
42 This modifies the normal rectangular shape of the content area to a possibly
non-rectangular wrapping area. The exclusion areas are defined by subtracting t
he shape from the element's content area.<br/> | 36 This modifies the normal rectangular shape of the content area to a possibly
non-rectangular wrapping area. The exclusion areas are defined by subtracting t
he shape from the element's content area.<br/> |
43 Every text on this page should be pushed down below its green rectangle. | 37 Every text on this page should be pushed down below its green rectangle. |
44 </p> | 38 </p> |
45 </body> | 39 </body> |
46 </html> | 40 </html> |
OLD | NEW |