OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <title>shape-outside-floats-inset-rectangle-000-reference.html</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 <meta name="flags" content="ahem"> | |
6 <head> | |
7 <style> | |
8 .test { | |
9 font: 20px/1 Ahem, sans-serif; | |
10 border: 1px solid black; | |
11 line-height: 20px; | |
12 } | |
13 .vertical-lr { | |
14 -webkit-writing-mode: vertical-lr; | |
15 } | |
16 .vertical-rl { | |
17 -webkit-writing-mode: vertical-rl; | |
18 } | |
19 .container { | |
20 width: 60px; | |
21 height: 60px; | |
22 display: inline-block; | |
23 } | |
24 .float { | |
25 width: 40px; | |
26 height: 40px; | |
27 } | |
28 .exclusion-top { | |
29 height: 20px; | |
30 } | |
31 .exclusion-right { | |
32 width: 20px; | |
33 } | |
34 .exclusion-bottom { | |
35 height: 20px; | |
36 } | |
37 .exclusion-left { | |
38 width: 20px; | |
39 } | |
40 </style> | |
41 </head> | |
42 <body> | |
43 <div class="test container"> | |
44 XXX | |
45 <div style="float: left" class="float exclusion-top"></div> | |
46 X | |
47 XXX | |
48 </div> | |
49 <div class="test container"> | |
50 XXX | |
51 <div style="float: right" class="float exclusion-top"></div> | |
52 X | |
53 XXX | |
54 </div> | |
55 <div class="test container"> | |
56 <div style="float: left" class="float exclusion-right"></div> | |
57 XX | |
58 XX | |
59 XXX | |
60 </div> | |
61 <div class="test container"> | |
62 <div style="float: left" 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-bottom"></div> | |
69 X | |
70 XXX | |
71 XXX | |
72 </div> | |
73 <div class="test container"> | |
74 <div style="float: right" class="float exclusion-left"></div> | |
75 XX | |
76 XX | |
77 XXX | |
78 </div> | |
79 </body> | |
OLD | NEW |