anonymous-boxes-001

Percent heights inside anonymous blocks

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
Anonymous block boxes are ignored when resolving percentage values that would refer to it: the closest non-anonymous ancestor box is used instead.

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3  <head>
 4   <link rel="reference" href="support/ref-green-box-100x100.xht">
 5   <title>CSS Test: Percent heights inside anonymous blocks</title>
 6   <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu">
 7   <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">
 8   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">
 9   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">
10   <meta name="assert" content="Anonymous block boxes are ignored when resolving         percentage values that would refer to it: the closest non-anonymous         ancestor box is used instead.">
11   <style type="text/css">
12     #parent { height: 200px; position: relative; }
13     #child { float: left; height: 50%; width: 100px; background: green; position: relative }
14     #background { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: red }
15   </style>
16  </head>
17  <body>
18    <p>There must be a green square below and no red.</p>
19    <div id="parent">
20      <div id="background"></div>
21      <div id="child"></div>&nbsp;<div></div>
22    </div>
23  </body>
24 </html>