Position: relative; top: 50%;

Expected results: There should be a rectangle with a green background right under, immediately below this sentence.

This green rectangle is a relatively positioned <div>. The CSS code applying to it is

position: relative; top: 50%;

and its nearest block-level ancestor is <body> and its height is 'auto'.

Filing

Expected results: when the height of the containing block of a relatively positioned element is auto, then top: <percentage>; must be resolved as top: auto;.

References:

"Percentages: refer to height of containing block" CSS 2.1, Section 9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'
Percentage values for the 'top' property are relative to the containing block.
"if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block-level, table cell or inline-block ancestor box." coming from CSS 2.1, Section 10.1 Definition of "containing block"
"If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, [then] the [height] value computes to 'auto'." CSS 2.1, Section 10.5 Content height: the 'height' property