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: CSS: Blocks Within Inlines - Basic</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/ib/001.xml" type="application/xhtml+xml">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">
8 <meta name="flags" content="">
9 <meta name="assert" content="When an inline box contains a block box, the inline box is broken around the block.">
10 <style type="text/css">
11 td { border: solid black; padding: 0; background: red; color: red; }
12 .inline { display: inline; background: lime; color: black; }
13 .block { display: block; background: green; }
14 div { color: black; }
15 .a, .c { background: lime; }
16 .b { background: green; }
17 </style>
18 </head>
19 <body>
20 <p>The following two boxes should look identical.</p>
21 <table>
22 <tr>
23 <td>
24 <span class="inline">Line 1<span class="block">Line 2</span>Line 3</span>
25 </td>
26 <td>
27 <div class="a">Line 1</div>
28 <div class="b">Line 2</div>
29 <div class="c">Line 3</div>
30 </td>
31 </tr>
32 </table>
33 </body>
34 </html>