| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/
DTD/xhtml11.dtd"> |
| 2 <html xmlns="http://www.w3.org/1999/xhtml"> |
| 3 <head> |
| 4 <title>CSS Test: Margin Collapsing with Clearance</title> |
| 5 <link rel="author" title="Microsoft" href="http://microsoft.com/" /> |
| 6 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-cont
rol" /> |
| 7 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-ma
rgins" /> |
| 8 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /
> |
| 9 <meta name="flags" content="may" /> |
| 10 <style type="text/css"> |
| 11 .target1, .target2, .target3, .target4, .target5, .target6, .target7 |
| 12 { |
| 13 position: absolute; |
| 14 width: 0; |
| 15 } |
| 16 .target1, .target2, .target3, .target4 |
| 17 { |
| 18 left: -155px; |
| 19 } |
| 20 .target5, .target6, .target7 |
| 21 { |
| 22 left: 155px; |
| 23 } |
| 24 .target1, .target5 |
| 25 { |
| 26 border-left: 150px solid yellow; |
| 27 height: 50px; |
| 28 top: 0px; |
| 29 } |
| 30 .target2, .target6 |
| 31 { |
| 32 border-left: 20px solid aqua; |
| 33 border-right: 130px solid silver; |
| 34 height: 20px; |
| 35 top: 50px; |
| 36 } |
| 37 .target3, .target7 |
| 38 { |
| 39 border-left: 140px solid orange; |
| 40 border-right: 10px solid silver; |
| 41 height: 50px; |
| 42 top: 100px; |
| 43 } |
| 44 .target4 |
| 45 { |
| 46 border-left: 150px solid silver; |
| 47 height: 30px; |
| 48 top: 70px; |
| 49 } |
| 50 .target7 |
| 51 { |
| 52 top: 70px; |
| 53 } |
| 54 .container |
| 55 { |
| 56 border: solid thin; |
| 57 margin-left: 150px; |
| 58 position: relative; |
| 59 width: 150px; |
| 60 } |
| 61 .box1 |
| 62 { |
| 63 background-color: yellow; |
| 64 height: 50px; |
| 65 } |
| 66 .parentof2and3 |
| 67 { |
| 68 background-color: silver; |
| 69 padding-right: 10px; |
| 70 } |
| 71 .box2 |
| 72 { |
| 73 background-color: aqua; |
| 74 float: left; |
| 75 height: 20px; |
| 76 width: 20px; |
| 77 } |
| 78 .box3 |
| 79 { |
| 80 background-color: orange; |
| 81 clear: left; |
| 82 height: 50px; |
| 83 margin-top: 50px; |
| 84 overflow: hidden; |
| 85 } |
| 86 </style> |
| 87 </head> |
| 88 <body> |
| 89 <p>Test passes if the layout of the boxes within the black box matches e
ither the left or the right reference boxes.</p> |
| 90 <div class="container"> |
| 91 <div class="target1"></div> |
| 92 <div class="target2"></div> |
| 93 <div class="target3"></div> |
| 94 <div class="target4"></div> |
| 95 <div class="target5"></div> |
| 96 <div class="target6"></div> |
| 97 <div class="target7"></div> |
| 98 <div class="box1"></div> |
| 99 <div class="parentof2and3"> |
| 100 <div class="box2"></div> |
| 101 <div class="box3"></div> |
| 102 </div> |
| 103 </div> |
| 104 </body> |
| 105 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2818213003:
Import css21/floats-clear W3C CSS Test Suite (Closed)
