OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script> | |
5 if (window.internals) | |
6 window.internals.settings.setCSSExclusionsEnabled(true); | |
7 </script> | |
8 <style> | 4 <style> |
9 .shape-inside { | 5 #rectangles div { |
10 width: 800px; | 6 width: 800px; |
11 height: 2em; | 7 height: 40px; |
| 8 line-height: 20px; |
| 9 margin-top: 50px; |
12 border: solid green; | 10 border: solid green; |
13 box-sizing: border-box; | 11 box-sizing: border-box; |
14 } | 12 } |
15 .padded { | 13 #rectangles p { margin-top: 34px; } |
16 padding-top: 1em; | |
17 } | |
18 </style> | 14 </style> |
19 </head> | 15 </head> |
20 <body> | 16 <body> |
21 <p class="shape-inside padded"> | 17 <div id="rectangles"> |
22 This text should be shifted down 1em by the rectangle(0px, 0px, 0px, 1em
) shape-inside CSS property. | 18 <div style="margin-top: 0px;"> |
23 </p> | 19 <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> |
24 <p class="shape-inside"> | 20 </div> |
25 This text should be unconstrained by the rectangle(0px, 0px, 1em, 0px) s
hape-inside CSS property. | 21 <div> |
26 </p> | 22 <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> |
27 <p class="shape-inside"> | 23 </div> |
28 This text should be unconstrained by the circle(0px, 0px, 0px) shape-ins
ide CSS property. | 24 <div> |
29 </p> | 25 <p>This text should be pushed down below the green rectangle. (There is
a circle(0px, 0px, 0px) shape-inside CSS property on the green rectangle.)</p> |
30 <p class="shape-inside padded"> | 26 </div> |
31 This text should be shifted down 1em by the ellipseX0(0px, 0px, 0px, 1em
) shape-inside CSS property. | 27 <div> |
32 </p> | 28 <p>This text should be pushed down below the green rectangle. (There is
an ellipseX0(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangl
e.)</p> |
33 <p class="shape-inside"> | 29 </div> |
34 This text should be unconstrained by the ellipse(0px, 0px, 1em, 0px) sha
pe-inside CSS property. | 30 <div> |
35 </p> | 31 <p>This text should be pushed down below the green rectangle. (There is
an ellipse(0px, 0px, 1em, 0px) shape-inside CSS property on the green rectangle.
)</p> |
36 <p class="shape-inside"> | 32 </div> |
37 This text should be unconstrained by the polygon(0px 0px) shape-inside C
SS property. | 33 <div> |
38 </p> | 34 <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> |
39 <p class="shape-inside"> | 35 </div> |
40 This text should be unconstrained by the polygon(0px 0px, 1em 0px) shape
-inside CSS property. | 36 <div> |
41 </p> | 37 <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
> |
| 38 </div> |
| 39 </div> |
| 40 |
| 41 <p style="margin-top: 50px;"> |
| 42 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. |
| 43 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/> |
| 44 Every text on this page should be pushed down below its green rectangle. |
| 45 </p> |
42 </body> | 46 </body> |
43 </html> | 47 </html> |
OLD | NEW |