1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: Wrapping text around multiple floats</title>
5 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
6 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/wrapping/001.html" type="text/html">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats">
8 <meta name="flags" content="ahem animated">
9 <style type="text/css">
10 .control { display: inline; font: 1em/1 Ahem, sans-serif; background: red; color: white; }
11
12 .ahem { font: 1em/1 Ahem; background: yellow; color: navy; }
13 div.ahem { border: solid 1em navy; width: 10em; height: 10em; }
14 pre.ahem { width: 12em; height: 12em; }
15 span { font: 0.75em/1 serif; }
16
17 body.a .ahem, body.b .ahem { position: absolute; margin: 1em; }
18 body.a div.ahem { display: none; }
19 body.b pre.ahem { display: none; }
20
21 .aleft { text-align: left; }
22 .aright { text-align: right; }
23 .acenter { text-align: center; }
24 .ajustify { text-align: justify; }
25
26 .fleft { float: left; }
27 .fright { float: right; }
28 .fleft, .fright { background: navy; }
29
30 .cleft { clear: left; }
31 .cright { clear: right; }
32 .cleft.cright { clear: both; }
33
34 .w1 { width: 1em; } .h1 { height: 1em; }
35 .w2 { width: 2em; } .h2 { height: 2em; }
36 .w3 { width: 3em; } .h3 { height: 3em; }
37 .w4 { width: 4em; } .h4 { height: 4em; }
38 .w5 { width: 5em; } .h5 { height: 5em; }
39
40 </style>
41 </head>
42 <body class="test">
43 <p>If scripting is supported: there should be only a single static jumble below with the word
44 "Control" blinking steadily. If there are two squares, or if the
45 square is animated, then the test has failed.</p>
46
47 <p>If scripting is unsupported: there should be two identical
48 patterned squares below.</p>
49
50 <script type="text/javascript">
51 var body = document.body;
52 var timer;
53 function toggle() {
54 body.className = body.className == 'a' ? 'b' : 'a';
55 timer = window.setTimeout(toggle, 500);
56 }
57 toggle();
58 </script>
59
60 <p><button onclick="clearTimeout(timer); body.className = 'test';"> Examine </button></p>
61
62 <div class="ahem">
63 1
64 <div class="fleft w2 h2"></div>
65 222222222
66 <div class="fleft w1 h2"></div>
67 <div class="fleft w1 h5"></div>
68 <div class="fleft w1 h1"></div>
69 <div class="fleft w2 h2"></div>
70 <div class="fleft w1 h1"></div>
71 3 444 55555555 66666 777777777
72 </div>
73
74 <pre class="ahem">############
75 #AA1 #
76 #AA #
77 #B222222222#
78 #BCDEEF3 #
79 # C EE444 #
80 # C55555555#
81 # C66666 #
82 # C #
83 #777777777 #
84 # #
85 ############ <span>Control</span>
86 </pre>
87
88 </body>
89 </html>