OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <title>CSS Test: rounded rectangle shape-outside on floats with clamped radii va
lues</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 width: 160px; | |
12 height: 80px; | |
13 margin: 5px; | |
14 } | |
15 .float { | |
16 float: left; | |
17 width: 80px; | |
18 height: 80px; | |
19 background-color: blue; | |
20 overflow: hidden; | |
21 border-radius: 50%; | |
22 } | |
23 .fixed-units { | |
24 shape-outside: rectangle(0px, 0px, 80px, 80px, 80px, 80px); | |
25 } | |
26 .different-units { | |
27 shape-outside: rectangle(0px, 0px, 80px, 80px, 100%, 100%); | |
28 } | |
29 .relative-units { | |
30 shape-outside: rectangle(0px, 0px, 100%, 100%, 700em, 700em); | |
31 } | |
32 .edge-case { | |
33 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> | |
OLD | NEW |