OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <title>CSS Test: inset rectangle percentage shape-outside on floats</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://dev.w3.org/csswg/css-shapes-1/#shape-outside-prope
rty"> | |
6 <link rel="match" href="shape-outside-floats-inset-rectangle-000-ref.html"> | |
7 <meta name="flags" content="ahem"> | |
8 <style> | |
9 .test { | |
10 font: 20px/1 Ahem, sans-serif; | |
11 border: 1px solid black; | |
12 line-height: 20px; | |
13 } | |
14 .container { | |
15 width: 60px; | |
16 height: 60px; | |
17 display: inline-block; | |
18 } | |
19 .float { | |
20 width: 40px; | |
21 height: 40px; | |
22 } | |
23 .exclusion-top { | |
24 shape-outside: inset-rectangle(52%, 0, 0, 0); | |
25 } | |
26 .exclusion-right { | |
27 shape-outside: inset-rectangle(0, 50%, 0, 0); | |
28 } | |
29 .exclusion-bottom { | |
30 shape-outside: inset-rectangle(0, 0, 50%, 0); | |
31 } | |
32 .exclusion-left { | |
33 shape-outside: inset-rectangle(0, 0, 0, 50%); | |
34 } | |
35 </style> | |
36 <body> | |
37 <div class="test container"> | |
38 <div style="float: left" class="float exclusion-top"></div> | |
39 XXX | |
40 X | |
41 XXX | |
42 </div> | |
43 <div class="test container"> | |
44 <div style="float: right" class="float exclusion-top"></div> | |
45 XXX | |
46 X | |
47 XXX | |
48 </div> | |
49 <div class="test container"> | |
50 <div style="float: left" class="float exclusion-right"></div> | |
51 XX | |
52 XX | |
53 XXX | |
54 </div> | |
55 <div class="test container"> | |
56 <div style="float: left" class="float exclusion-bottom"></div> | |
57 X | |
58 XXX | |
59 XXX | |
60 </div> | |
61 <div class="test container"> | |
62 <div style="float: right" class="float exclusion-bottom"></div> | |
63 X | |
64 XXX | |
65 XXX | |
66 </div> | |
67 <div class="test container"> | |
68 <div style="float: right" class="float exclusion-left"></div> | |
69 XX | |
70 XX | |
71 XXX | |
72 </div> | |
73 </body> | |
74 | |
OLD | NEW |