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