[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-rounded-rectangle-004.html
1 <!DOCTYPE html>
2 <title>CSS Test: rounded rectangle shape-outside on floats with clamped radii values</title>
3 <link rel="author" title="Adobe" href="http://html.adobe.com/">
4 <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
5 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
6 <link rel="match" href="shape-outside-floats-rounded-rectangle-004-ref.html">
7 <meta name="flags" content="ahem">
8 <style>
9 .container {
10     font: 20px/1 Ahem, sans-serif;
11     line-height: 20px;
12     width: 160px;
13     height: 80px;
14     margin: 5px;
15 }
16 .float {
17     float: left;
18     width: 80px;
19     height: 80px;
20     border: 1px solid blue;
21     border-radius: 50%;
22 }
23 .fixed-units {
24     -webkit-shape-outside: rectangle(0px, 0px, 80px, 80px, 80px, 80px);
25 }
26 .different-units {
27     -webkit-shape-outside: rectangle(0px, 0px, 80px, 80px, 100%, 100%);
28 }
29 .relative-units {
30     -webkit-shape-outside: rectangle(0px, 0px, 100%, 100%, 700em, 700em);
31 }
32 .edge-case {
33     -webkit-shape-outside: rectangle(0px, 0px, 100%, 100%, 50%, 50%);
34 }
35 </style>
36 <body>
37     <div class="container">
38         <div class="float fixed-units"></div>
39         X<br/>
40         X<br/>
41         X<br/>
42         X
43     </div>
44     <div class="container">
45         <div class="float relative-units"></div>
46         X<br/>
47         X<br/>
48         X<br/>
49         X
50     </div>
51     <div class="container">
52         <div class="float different-units"></div>
53         X<br/>
54         X<br/>
55         X<br/>
56         X
57     </div>
58     <div class="container">
59         <div class="float edge-case"></div>
60         X<br/>
61         X<br/>
62         X<br/>
63         X
64     </div>
65 </body>