395751 - wrong positioning of <div> when floating next to few other floating <div>s

Status: VERIFIED INVALID

(Firefox :: General, defect)

Description

[Gai]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.4) Gecko/20070508 Iceweasel/2.0.0.4 (Debian-2.0.0.4-1)
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.4) Gecko/20070508 Iceweasel/2.0.0.4 (Debian-2.0.0.4-1)

I a page where there are few <div> floating on one side (using style="float:right; clear:right" for example) trying to add another <div> that will float next to them (without the "clear") the new <div> appears in the same vertical position as the last <div> instead being placed in the same level with the top one.

See in the example page - why does the gray box so low? why doesn't it in the same height as the text to the left or the red box to the right... 

Reproducible: Always

Steps to Reproduce:
create a page like this one -
<div style="width:200px; height:200px; background:red; float:right; clear:right;"></div>
<div style="width:200px; height:200px; background:blue; float:right; clear:right;"></div>
<div style="width:200px; height:200px; background:green; float:right; clear:right;"></div>
<div style="width:200px; height:200px; background:yellow; float:right; clear:right;"></div>
<div style="width:200px; height:300px; background:#cccccc; float:right;"></div>

Actual Results:  
the gray <div> appears in the same vertical position as the yellow one

Expected Results:  
the gray <div> should appears in the same vertical position as the red one - on top

Comment 1

[Erik Fabert]

See http://www.w3.org/TR/CSS21/visuren.html#float-rules :

5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

=> invalid.