dynamic-top-change-001-ref.xht (995B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>CSS Reftest Reference</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 10 11 <style type="text/css"><![CDATA[ 12 p 13 { 14 line-height: 1.25; 15 margin: 1em 0; 16 } 17 18 strong {line-height: 1;} 19 20 div 21 { 22 background-color: green; 23 height: 100px; 24 margin-top: 112px; 25 /* 26 The red square appears 96px below the p margin box: 27 2em : grandparent's top (dynamically set) 28 + 29 2em : parent's top (inherited) 30 + 31 2em : #red's top (inherited) 32 ======= 33 96px 34 max(margin-bottom of p, margin-top of div) 35 max(16px, margin-top of div) == 16px + 96px; 36 therefore, margin-top of div == 16px + 96px 37 */ 38 width: 100px; 39 } 40 ]]></style> 41 42 </head> 43 44 <body> 45 46 <p>Test passes if there is <strong>no red</strong>.</p> 47 48 <div></div> 49 50 </body> 51 </html>