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 - Backgrounds</title>
5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
6 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">
8 <meta name="assert" content="When an inline box contains a block box, the inline box is broken around the box and its background is drawn only behind the inline's pieces, not behind the block.">
9 <meta name="flags" content="">
10 <style type="text/css">
11 td { border: solid black; color: black; padding: 0; background: green; }
12 .inline { display: inline; background: lime; }
13 .block { display: block; }
14 .a, .c { background: lime; }
15 .b { background: green; }
16 </style>
17 </head>
18 <body>
19 <p>The following two boxes should look identical.</p>
20 <table>
21 <tr>
22 <td>
23 <span class="inline">Line 1<span class="block">Line 2</span>Line 3</span>
24 </td>
25 <td>
26 <div class="a">Line 1</div>
27 <div class="b">Line 2</div>
28 <div class="c">Line 3</div>
29 </td>
30 </tr>
31 </table>
32 </body>
33 </html>