anonymous-boxes-001b.xht (2409B)
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 Test: Percent height inside anonymous block</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 10 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" /> 11 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" /> 12 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" /> 13 <link rel="match" href="anonymous-boxes-001b-ref.xht" /> 14 15 <meta content="ahem" name="flags" /> 16 <meta content="Anonymous block boxes are ignored when resolving percentage values that would refer to it: the closest non-anonymous ancestor box is used instead." name="assert" /> 17 18 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 19 <style type="text/css"><![CDATA[ 20 body 21 { 22 font: 1em/1.25 serif; 23 margin: 8px; 24 } 25 26 p {margin: 1em 0;} 27 28 strong {line-height: 1;} 29 30 div#overlapped-red 31 { 32 background-color: red; 33 height: 100px; 34 left: 8px; 35 position: absolute; 36 top: 122px; 37 /* 38 16px : max(body's margin-top, p's margin-top) 39 + 40 20px : p's 1st line box height 41 + 42 20px : p's 2nd line box height 43 + 44 16px : p's margin-bottom 45 + 46 50px : div#closest-non-anonymous-ancestor line box height 47 ----------------------------------------------------------- 48 122px 49 */ 50 right: 8px; 51 z-index: -1; 52 } 53 54 div#closest-non-anonymous-ancestor 55 { 56 color: white; 57 font: 2.5em/1.25 Ahem; /* equivalent to 40px/50px in absolute units */ 58 height: 200px; 59 } 60 61 div#child-of-anonymous-block-box 62 { 63 background-color: green; 64 height: 50%; 65 } 66 ]]></style> 67 68 </head> 69 70 <body> 71 72 <p>Test passes if there is a filled green<br /> 73 rectangle across the page and <strong>no red</strong>.</p> 74 75 <div id="overlapped-red"></div> 76 77 <div id="closest-non-anonymous-ancestor">Some <div id="child-of-anonymous-block-box"></div> text 78 <p>More text</p> 79 </div> 80 81 <!-- 82 For example, if the child of the anonymous block box inside the DIV 83 above needs to know the height of its containing block to resolve a 84 percentage height, then it will use the height of the containing 85 block formed by the DIV, not of the anonymous block box. 86 --> 87 88 </body> 89 </html>