max-height-applies-to-017.html (793B)
1 <!DOCTYPE html> 2 <title>CSS Test: Max-Height applied to element with 'display' set to 'inline-block'</title> 3 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 4 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights"> 5 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 6 <meta name="assert" content="The percentage in #child should resolve against the 100px maximum of #parent, not against 200px."> 7 8 <style> 9 #parent { 10 display: inline-block; 11 height: 200px; 12 max-height: 100px; 13 background: red; 14 } 15 #child { 16 display: inline-block; 17 width: 100px; 18 height: 100%; 19 background: green; 20 } 21 </style> 22 23 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 24 <div id="parent"> 25 <span id="child"></span> 26 </div>