OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script> | 4 <script> |
5 if (window.internals) | 5 if (window.internals) |
6 window.internals.settings.setCSSExclusionsEnabled(true); | 6 window.internals.settings.setCSSExclusionsEnabled(true); |
7 </script> | 7 </script> |
8 <style> | 8 <style> |
9 .shape-inside { | 9 #rectangles p { |
10 width: 800px; | 10 width: 800px; |
11 height: 2em; | 11 height: 40px; |
| 12 line-height: 20px; |
| 13 margin-top: 50px; |
12 border: solid green; | 14 border: solid green; |
13 box-sizing: border-box; | 15 box-sizing: border-box; |
14 } | 16 } |
15 | 17 |
16 #shape-inside-rectangle-width0 { | 18 #shape-inside-rectangle-width0 { |
17 -webkit-shape-inside: rectangle(0px, 0px, 0px, 1em); | 19 -webkit-shape-inside: rectangle(0px, 0px, 0px, 1em); |
18 padding-top: 1em; | |
19 } | 20 } |
20 | 21 |
21 #shape-inside-rectangle-height0 { | 22 #shape-inside-rectangle-height0 { |
22 -webkit-shape-inside: rectangle(0px, 0px, 1em, 0px); | 23 -webkit-shape-inside: rectangle(0px, 0px, 1em, 0px); |
23 } | 24 } |
24 | 25 |
25 #shape-inside-circle-radius0 { | 26 #shape-inside-circle-radius0 { |
26 -webkit-shape-inside: circle(0px, 0px, 0px); | 27 -webkit-shape-inside: circle(0px, 0px, 0px); |
27 } | 28 } |
28 | 29 |
29 #shape-inside-ellipse-radiusX0 { | 30 #shape-inside-ellipse-radiusX0 { |
30 -webkit-shape-inside: ellipse(0px, 0px, 0px, 1em); | 31 -webkit-shape-inside: ellipse(0px, 0px, 0px, 1em); |
31 padding-top: 1em; | |
32 } | 32 } |
33 | 33 |
34 #shape-inside-ellipse-radiusY0 { | 34 #shape-inside-ellipse-radiusY0 { |
35 -webkit-shape-inside: ellipse(0px, 0px, 1em, 0px); | 35 -webkit-shape-inside: ellipse(0px, 0px, 1em, 0px); |
36 } | 36 } |
37 | 37 |
38 #shape-inside-polygon-1vertex { | 38 #shape-inside-polygon-1vertex { |
39 -webkit-shape-inside: polygon(0px 0px); | 39 -webkit-shape-inside: polygon(0px 0px); |
40 } | 40 } |
41 | 41 |
42 #shape-inside-polygon-2vertices { | 42 #shape-inside-polygon-2vertices { |
43 -webkit-shape-inside: polygon(0px 0px, 1em 0px); | 43 -webkit-shape-inside: polygon(0px 0px, 1em 0px); |
44 } | 44 } |
45 </style> | 45 </style> |
46 </head> | 46 </head> |
47 <body> | 47 <body> |
48 <p class="shape-inside" id="shape-inside-rectangle-width0"> | 48 <div id="rectangles"> |
49 This text should be shifted down 1em by the rectangle(0px, 0px, 0px, 1em
) shape-inside CSS property. | 49 <p id="shape-inside-rectangle-width0" style="margin-top: 0px;"> |
| 50 This text should be pushed down below the green rectangle. (There is a r
ectangle(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangle.) |
50 </p> | 51 </p> |
51 <p class="shape-inside" id="shape-inside-rectangle-height0"> | 52 <p id="shape-inside-rectangle-height0"> |
52 This text should be unconstrained by the rectangle(0px, 0px, 1em, 0px) s
hape-inside CSS property. | 53 This text should be pushed down below the green rectangle. (There is a r
ectangle(0px, 0px, 1em, 0px) shape-inside CSS property on the green rectangle.) |
53 </p> | 54 </p> |
54 <p class="shape-inside" id="shape-inside-circle-radius0"> | 55 <p id="shape-inside-circle-radius0"> |
55 This text should be unconstrained by the circle(0px, 0px, 0px) shape-ins
ide CSS property. | 56 This text should be pushed down below the green rectangle. (There is a c
ircle(0px, 0px, 0px) shape-inside CSS property on the green rectangle.) |
56 </p> | 57 </p> |
57 <p class="shape-inside" id="shape-inside-ellipse-radiusX0"> | 58 <p id="shape-inside-ellipse-radiusX0"> |
58 This text should be shifted down 1em by the ellipseX0(0px, 0px, 0px, 1em
) shape-inside CSS property. | 59 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 rectangle.) |
59 </p> | 60 </p> |
60 <p class="shape-inside" id="shape-inside-ellipse-radiusY0"> | 61 <p id="shape-inside-ellipse-radiusY0"> |
61 This text should be unconstrained by the ellipse(0px, 0px, 1em, 0px) sha
pe-inside CSS property. | 62 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.) |
62 </p> | 63 </p> |
63 <p class="shape-inside" id="shape-inside-polygon-1vertex"> | 64 <p id="shape-inside-polygon-1vertex"> |
64 This text should be unconstrained by the polygon(0px 0px) shape-inside C
SS property. | 65 This text should be pushed down below the green rectangle. (There is a p
olygon(0px 0px) shape-inside CSS property on the green rectangle.) |
65 </p> | 66 </p> |
66 <p class="shape-inside" id="shape-inside-polygon-2vertices"> | 67 <p id="shape-inside-polygon-2vertices"> |
67 This text should be unconstrained by the polygon(0px 0px, 1em 0px) shape
-inside CSS property. | 68 This text should be pushed down below the green rectangle. (There is a po
lygon(0px 0px, 1em 0px) shape-inside CSS property on the green rectangle.) |
68 </p> | 69 </p> |
| 70 </div> |
| 71 <p style="margin-top: 50px;"> |
| 72 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. |
| 73 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/> |
| 74 Every text on this page should be pushed down below its green rectangle. |
| 75 </p> |
69 </body> | 76 </body> |
70 </html> | 77 </html> |
OLD | NEW |