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