9de9a52ba5a78f7b9720cf2349edd7433bb2424c
[WebKit-https.git] / LayoutTests / fast / shapes / shape-inside / shape-inside-empty.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5     #rectangles p {
6         width: 800px;
7         height: 40px;
8         line-height: 20px;
9         margin-top: 50px;
10         background-color: green;
11     }
12
13     #shape-inside-rectangle-width0 {
14         -webkit-shape-inside: rectangle(0px, 0px, 0px, 1em);
15     }
16
17     #shape-inside-rectangle-height0 {
18         -webkit-shape-inside: rectangle(0px, 0px, 1em, 0px);
19     }
20
21     #shape-inside-circle-radius0 {
22         -webkit-shape-inside: circle(0px at 0px 0px);
23     }
24
25     #shape-inside-ellipse-radiusX0 {
26         -webkit-shape-inside: ellipse(0px, 0px, 0px, 1em);
27     }
28
29     #shape-inside-ellipse-radiusY0 {
30         -webkit-shape-inside: ellipse(0px, 0px, 1em, 0px);
31     }
32
33     #shape-inside-polygon-1vertex {
34         -webkit-shape-inside: polygon(0px 0px);
35     }
36
37     #shape-inside-polygon-2vertices {
38         -webkit-shape-inside: polygon(0px 0px, 1em 0px);
39     }
40 </style>
41 </head>
42 <body>
43 <div id="rectangles">
44     <p id="shape-inside-rectangle-width0" style="margin-top: 0px;">
45         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.)
46     </p>
47     <p id="shape-inside-rectangle-height0">
48         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.)
49     </p>
50     <p id="shape-inside-circle-radius0">
51         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.)
52     </p>
53     <p id="shape-inside-ellipse-radiusX0">
54         This text should be pushed down below the green rectangle. (There is an ellipse(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangle.)
55     </p>
56     <p id="shape-inside-ellipse-radiusY0">
57         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.)
58     </p>
59     <p id="shape-inside-polygon-1vertex">
60         This text should be pushed down below the green rectangle. (There is a polygon(0px 0px) shape-inside CSS property on the green rectangle.)
61     </p>
62     <p id="shape-inside-polygon-2vertices">
63        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.)
64     </p>
65 </div>
66 <p style="margin-top: 50px;">
67     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 exclusion areas to the element's wrapping context.
68     This modifies the normal rectangular shape of the content area to a possibly non-rectangular wrapping area. The exclusion areas are defined by subtracting the shape from the element's content area.<br/>
69     Every text on this page should be pushed down below its green rectangle.
70 </p>
71 </body>
72 </html>