[CSS Shapes] Floats with shape-outside aren't painting in the correct order
[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     color: green;
17 }
18 .float-left {
19     width: 100px;
20     height: 100px;
21     float: left;
22     background-color: green;
23 }
24 .triangle-left {
25    -webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%);
26 }
27 .float-right {
28     position: relative;
29     width: 100px;
30     height: 100px;
31     float: right;
32     background-color: green;
33 }
34 .triangle-right {
35     -webkit-shape-outside: polygon(100% 0, 100% 100%, 0% 100%);
36 }
37 .circle {
38     position: relative;
39     top: -50%;
40     -webkit-shape-outside: circle(50%, 50%, 50%);
41 }
42 </style>
43 <body>
44     <p>You should see two green rectanges. There should be no red.</p>
45     <div class="container">
46         <div class="float-left triangle-left"></div>
47         <div class="float-right triangle-right"></div>
48         X<br/>
49         <div class="float-left circle"></div>
50     </div>
51     <div style="text-align: right" class="container">
52         <div class="float-right triangle-right"></div>
53         <div class="float-left triangle-left"></div>
54         X<br/>
55         <div class="float-right circle"></div>
56     </div>
57 </body>