margin-collapse-166.xht (2152B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Margins on cleared blocks that contain floats, with dynamic border 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/block/margin-collapse/066.html" type="text/html"/> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> 8 <link rel="match" href="margin-collapse-165-ref.xht" /> 9 10 <style type="text/css"> 11 td { padding: 0; background: red; } 12 .border { width: 7em; /* border: solid; added by script at bottom of test */ } 13 .box { margin: 0; background: yellow; } 14 .float { margin: 0; width: 4em; height: 1.5em; background: aqua; float: right; } 15 .clear { margin: 2em 0 0 0; background: orange; clear: both; } 16 .control { border: solid; width: 7em; background: yellow; } 17 .control .a { margin: 0 0 0 auto; width: 4em; height: 1.5em; background: aqua; } 18 .control .b { height: 0.5em; } 19 .control .c { background: orange; } 20 </style> 21 </head> 22 <body> 23 <p>Test passes if there are <strong>4 identical rectangles</strong> and no red.</p> 24 <table> 25 <tr> 26 <td> 27 <div class="outer"> 28 <div id="test" class="box border"> 29 <div class="float">TEST</div> 30 <div class="clear">TEST</div> 31 </div> 32 </div> 33 </td> 34 <td> 35 <div class="control"> 36 <div class="a">TEST</div> 37 <div class="b"></div> 38 <div class="c">TEST</div> 39 </div> 40 </td> 41 </tr> 42 <tr> 43 <td> 44 <div class="control"> 45 <div class="a">TEST</div> 46 <div class="b"></div> 47 <div class="c">TEST</div> 48 </div> 49 </td> 50 <td> 51 <div class="control"> 52 <div class="a">TEST</div> 53 <div class="b"></div> 54 <div class="c">TEST</div> 55 </div> 56 </td> 57 </tr> 58 </table> 59 <script type="text/javascript"> 60 var x = document.getElementById('test'); 61 x.clientHeight; // force reflow 62 x.style.border = "solid"; // did reflow happen? 63 </script> 64 65 </body> 66 </html>