floats-rule3-outside-left-002

float placement around other float in BFC but outside containing block

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
Test for float placement around other float in BFC but outside containing block

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html><head><link rel="reference" href="floats-rule3-outside-left-002-ref.xht"><title>CSS Test: float placement around other float in BFC but outside containing block</title>
 3     <link rel="author" title="L. David Baron" href="http://dbaron.org/">
 4     <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
 5     <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats">
 6     <meta name="flags" content="">
 7     <meta name="assert" content="Test for float placement around other float in BFC but outside containing block">
 8 
 9 <!--
10   CSS2.1 9.5.1 rule 3 says:
11 
12     The right outer edge of a left-floating box may not be to the right
13     of the left outer edge of any right-floating box that is to the
14     right of it. Analogous rules hold for right-floating elements. 
15 
16  -->
17 
18 <!-- the block formatting context inside which we're testing -->
19 </head><body><div style="float: left; width: 500px; height: 500px">
20 
21   <div style="float: right; width: 50px; height: 300px"></div>
22 
23   <div style="margin-right: 100px"> <!-- 400px wide -->
24 
25     <!-- we're testing the position of this float -->
26     <div style="float: left; width: 475px; height: 10px; background: blue"></div>
27 
28   </div>
29 
30 </div>
31 </body></html>