[CSS Shapes] New positioning model: support for stacked floats with shape-outside
[WebKit-https.git] / LayoutTests / csswg / submitted / shapes / shape-outside / shape-outside-floats-stacked-000.html
1 <!DOCTYPE html>
2 <title>CSS Test: stacked floats with shape-outside</title>
3 <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
4 <link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-model-and-float-behavior">
5 <link rel="match" href="shape-outside-floats-stacked-000-ref.html">
6 <meta name="flags" content="ahem">
7 <style>
8 .container {
9     width: 300px;
10     height: 100px;
11     font: 50px/1 Ahem, sans-serif;
12     line-height: 50px;
13     background-color: red;
14     margin-bottom: 50px;
15     overflow: hidden;
16 }
17 .float-left {
18     width: 100px;
19     height: 100px;
20     float: left;
21     background-color: green;
22 }
23 .triangle-left {
24    -webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%);
25 }
26 .float-right {
27     position: relative;
28     width: 100px;
29     height: 100px;
30     float: right;
31     background-color: green;
32 }
33 .triangle-right {
34     -webkit-shape-outside: polygon(100% 0, 100% 100%, 0% 100%);
35 }
36 .circle {
37     position: relative;
38     top: -50%;
39     -webkit-shape-outside: circle(50%, 50%, 50%);
40 }
41 </style>
42 <body>
43     <p>You should see two green rectanges. There should be no red.</p>
44     <div class="container">
45         <div class="float-left triangle-left"></div>
46         <div class="float-right triangle-right"></div>
47         X<br/>
48         <div class="float-left circle"></div>
49     </div>
50     <div style="text-align: right" class="container">
51         <div class="float-right triangle-right"></div>
52         <div class="float-left triangle-left"></div>
53         X<br/>
54         <div class="float-right circle"></div>
55     </div>
56 </body>