| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/st
rict.dtd"> | |
| 2 <html> | |
| 3 | |
| 4 <head> | |
| 5 | |
| 6 <title>CSS Test: Margin collapsing with clearance - margins of a 'collapsed th
rough' box with clearance do not collapse with parent block's bottom margin</tit
le> | |
| 7 | |
| 8 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"
> | |
| 9 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#normal-block"> | |
| 10 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserB
ugsSection/css21testsuite/"> | |
| 11 <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com"> | |
| 12 <link rel="match" href="margin-collapse-clear-012-ref.htm"> | |
| 13 | |
| 14 <meta content="When an element has had clearance applied to it and its own mar
gins collapse, these margins collapse with the adjoining margins of following si
blings but the resulting margin does not collapse with the bottom margin of the
parent block" name="assert"> | |
| 15 <meta content="" name="flags"> | |
| 16 | |
| 17 <style type="text/css"> | |
| 18 #rel-pos-wrapper {position: relative;} | |
| 19 | |
| 20 #parent-lime | |
| 21 { | |
| 22 background-color: lime; | |
| 23 border-top: black solid 1px; | |
| 24 width: 50%; | |
| 25 } | |
| 26 | |
| 27 #float-left-blue | |
| 28 { | |
| 29 background-color: blue; | |
| 30 float: left; | |
| 31 height: 100px; | |
| 32 width: 100px; | |
| 33 } | |
| 34 | |
| 35 #clear-left | |
| 36 { | |
| 37 clear: left; | |
| 38 margin-bottom: 80px; | |
| 39 margin-top: 40px; | |
| 40 } | |
| 41 | |
| 42 #following-sibling {margin-bottom: 140px;} | |
| 43 | |
| 44 #next-yellow | |
| 45 { | |
| 46 background-color: yellow; | |
| 47 height: 100px; | |
| 48 } | |
| 49 | |
| 50 .ref-overlapped-red | |
| 51 { | |
| 52 background-color: red; | |
| 53 position: absolute; | |
| 54 z-index: -1; | |
| 55 } | |
| 56 | |
| 57 #ref1 | |
| 58 { | |
| 59 height: 200px; | |
| 60 top: 1px; | |
| 61 width: 50%; | |
| 62 } | |
| 63 | |
| 64 #ref2 | |
| 65 { | |
| 66 height: 100px; | |
| 67 top: 201px; | |
| 68 width: 100%; | |
| 69 } | |
| 70 </style> | |
| 71 | |
| 72 </head> | |
| 73 | |
| 74 <body> | |
| 75 | |
| 76 <p>Test passes if there is <strong>no red</strong>.</p> | |
| 77 | |
| 78 <div id="rel-pos-wrapper"> | |
| 79 | |
| 80 <!-- | |
| 81 | |
| 82 #parent-lime should have height 200px, sum of: | |
| 83 | |
| 84 100px : height of #float-left-blue | |
| 85 + | |
| 86 (140px - 40px) : part of #following-sibling's margin-bottom | |
| 87 "exceeding" the amount collapsed with | |
| 88 #clear-left's margin-top (140px - 40px) | |
| 89 ======= | |
| 90 200px | |
| 91 | |
| 92 --> | |
| 93 | |
| 94 <div id="parent-lime"> | |
| 95 <div id="float-left-blue"></div> | |
| 96 <div id="clear-left"></div> | |
| 97 | |
| 98 <!-- | |
| 99 | |
| 100 clearance | |
| 101 + | |
| 102 margin-top of #clear-left (40px) | |
| 103 ==================================== | |
| 104 height of #float-left-blue (100px) | |
| 105 | |
| 106 therefore, clearance is equal to +60px | |
| 107 | |
| 108 --> | |
| 109 | |
| 110 <div id="following-sibling"></div> | |
| 111 </div> | |
| 112 | |
| 113 <div id="next-yellow"></div> | |
| 114 | |
| 115 <!-- | |
| 116 #ref1 and #ref2 boxes create a sort of 'reference rendering' | |
| 117 where #ref1 should be covered, overlapped by #parent-lime | |
| 118 while #ref2 should be covered, overlapped by #next-yellow. | |
| 119 --> | |
| 120 | |
| 121 <div id="ref1" class="ref-overlapped-red"></div> | |
| 122 <div id="ref2" class="ref-overlapped-red"></div> | |
| 123 | |
| 124 </div> | |
| 125 | |
| 126 </body> | |
| 127 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2827713002:
Delete duplicated LayoutTests from css2.1/20110323 (Closed)
