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: Blocks within inlines: Simple with dynamic class changes</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/005.html" type="text/html">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop">
8 <meta name="flags" content="dom interact">
9 <style type="text/css">
10 body { color: blue; }
11 .inline { display: inline; }
12 .block { display: block; }
13 </style>
14 <meta http-equiv="Content-Script-Type" content="text/javascript">
15 <script type="text/javascript">
16 function clicked() {
17 document.getElementById('test').className = document.getElementById('test').className == 'inline' ? 'block' : 'inline';
18 }
19 </script>
20 </head>
21 <body onclick="clicked()">
22 <div class="block">
23 <div class="inline">
24 This text should all collapse
25 <div class="block" id="test">
26 into one line of text when
27 </div>
28 you click on the text.
29 </div>
30 </div>
31 </body>
32 </html>