intrinsic-size-with-anonymous-block.html (1172B)
1 <!DOCTYPE html> 2 <title>Intrinsic size of an atomic inline with an anonymous block</title> 3 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 4 <link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#inlineblock-width"> 5 <link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#inline-replaced-width"> 6 <link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level"> 7 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 8 <meta name="assert" content=" 9 #test contains both inline-level contents (the canvas) and block-level (the <p>). 10 Then the canvas is wrapped inside an anonymous block, but it still resolves its percentage against #test. 11 So the canvas is 100px tall, and thus 100px wide because of its aspect ratio. 12 Therefore #test is 100px wide too. 13 "> 14 <style> 15 #test { 16 display: inline-block; 17 height: 100px; 18 background: green; 19 } 20 #test > canvas { 21 height: 100%; 22 background: red; 23 position: relative; 24 z-index: -1; 25 } 26 </style> 27 28 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 29 <div id="test"> 30 <canvas width="10" height="10"></canvas> 31 <p></p> 32 </div>