Re: Issue 101 Resolution

Anton Prowse wrote:
> On 21/10/2010 08:06, Alan Gresley wrote:
[snip]
>> So in dbaron's test for rule 3, the containing block of the left floated
>> box is the aqua box and the containing block of the aqua box is the
>> yellow box. So the change now reflects the concept of nearest
>> block-level ancestor.
> 
> I have no idea what you're getting at here.


I simply stating that in dbaron' test, the left floated box containing 
block is the aqua box and not the yellow box.


[snip]
>>> New rule 3 text (I overcorrected for "outer edge"):
>>> | The right outer edge of a left-floating box may not
>>> | be to the right of the left outer edge of any
>>> | right-floating box that is to the right of it and
>>> | whose left outer edge is to the left of the
>>> | left-floating box's containing block's right edge.
>>> | Analogous rules hold for right-floating elements.
>>>
>>> New rule 7 text (slightly cleaner):
>>> | A left-floating box that has another left-floating
>>> | box to its left, where the latter box's right edge
>>> | is to the right of the former box's containing
>>> | block's left edge, may not have its right outer
>>> | edge to the right of its containing block's right
>>> | edge. (Loosely: a left float may not stick out at
>>> | the right edge, unless it is already as far to the
>>> | left as possible.) An analogous rule holds for
>>> | right-floating elements.
>>>
>>
>> Can the above parts that have "containing block's right edge" be changed
>> to "containing block's right content edge".
>>
>> s/containing block's right edge/containing block's right content edge/
> 
> No, no.  The containing block doesn't have a "content edge"; it's a 
> rectangular region.


If you say this, then you still do not understand what a containing 
block is. I'm only talking about the change to rule 3 at this moment. 
The containing block (rectangular region) is formed by the content 
edge. In 10.1 we have.

   | 2. For other elements, 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.


And referring to this later part of rule 3 with Tab's change.


 >>> | right-floating box that is to the right of it and
 >>> | whose left outer edge is to the left of the
 >>> | left-floating box's containing block's right edge.


The left-floating box's containing block's right edge could be it's 
right margin edge, right border edge, right padding edge or right 
content edge.

One must narrow the viewport for the following test.

Using your most recent test but with a right margin on the containing 
block of the left floating box (green).


<div style="float:right; width:150px; height:50px; background:red;"></div>
<div style="width: 250px; background: blue; margin-right: 1000px;">
  <div style="background: aqua;">width of containing block is this 
aqua box</div>
  <div style="float:left; width:350px; height:150px; background:lime; 
"></div>
</div>
<div style="background:orange;">text text text text</div>


This right margin is rightly ignored by all modern browsers apart from 
IE7.


Using your most recent test but with a right border on the containing 
block of the left floating box (green).


<!DOCTYPE html>
<div style="float:right; width:150px; height:50px; background:red;"></div>
<div style="width: 250px; background: blue; border-right: 300px solid 
yellow;">
  <div style="background: aqua;">width of containing block is this 
aqua box</div>
  <div style="float:left; width:350px; height:150px; background:lime; 
"></div>
</div>
<div style="background:orange;">text text text text</div>


The right floating box only drops when it reaches the content edge of 
the containing block of the left floating box (green). The right 
border is not ignored by IE7 and will cause the right floating box to 
drop.


Using your most recent test but with a right padding on the containing 
block of the left floating box (green).


<!DOCTYPE html>
<div style="float:right; width:150px; height:50px; background:red;"></div>
<div style="width: 250px; background: blue; padding-right: 300px;">
  <div style="background: aqua;">width of containing block is this 
aqua box</div>
  <div style="float:left; width:350px; height:150px; background:lime; 
"></div>
</div>
<div style="background:orange;">text text text text</div>


The right floating box only drops when it reaches the content edge of 
the containing block of the left floating box (green). This is why I 
had requested this.


s/containing block's right edge/containing block's right content edge/


I would like to actually like to change this to.


s/containing block's right edge/containing block's right content edge 
unless the containing block is a float in which case, the right margin 
edge/


A test with the containing block being a float where even IE7 treats 
this case correctly.


<!DOCTYPE html>
<div style="float:right; width:150px; height:50px; background:red;"></div>
<div style="float:left; width: 250px; background: blue; padding-right: 
50px;">
  <div style="background: aqua;">width of containing block is this 
aqua box</div>
  <div style="float:left; width:350px; height:150px; background:lime; 
"></div>
</div>
<div style="background:orange;">text text text text</div>



>> <!DOCTYPE html>
>> <div style="float: right; width: 400px; height: 100px; background:
>> green;">Right</div>
>> <div style="float: left; width: 80px; height: 80px; margin-right:-100px;
>> border: 10px solid blue;">Left</div>
>>
>> Narrowing the viewport, Gecko and IE8 will allow the right floating box
>> (green) to pass under the left floating box (blue border) and go into
>> the hidden overflow. Opera, WebKit and IE9 shows the left floating box
>> (blue border) dropping when the left outer edge of the right floating
>> box passes the left content edge of the 'initial containing block'.
> 
> The dropping is correct, right?


I not sure. I will not say it is right or not right since it's not 
even mentioned in the spec.


> This is simply Rule 3 in its 
> traditional form (and of course in its newly proposed form too, since 
> it's backwards compatible).


This newly propose form doesn't change it. The old form doesn't change 
it. It just how IE8 and Gecko always treated this case since this case 
is following rule 1. For them, the float does not exist.


> The containing block is only tangentially 
> relevant.


Not when we are dealing with rule 1. Let reverse the order of the 
float in the above test.


<!DOCTYPE html>
<div style="float: left; width: 100px; height: 100px; 
margin-right:-100px; background: blue;">Left</div>
<div style="float: right; width: 380px; height: 80px; border: 10px 
solid green;">Right</div>


Narrowing the viewport, Gecko, Opera 9.5, Safari 4 and IE8 will allow 
the right floating box (green border) to pass over the left floating 
box (blue) and go into the hidden overflow. This is any browser that 
observe rule 1 with right floating boxes.

The lone one out is IE9 beta which shows the right floating box 
dropping when the left outer edge of the right floating box passes the 
left content edge of the 'initial containing block'. I presume this is 
because rule 3 for some reason is being observed.


>> I believe that Gecko and IE8 behavior is correct since the left floating
>> box (blue) right outer edge (margin edge) sit on the same vertical axis
>> as it's left outer edge. This means the float takes
>> up no horizontal space in it's containing block as the below test shows.
> 
> Whether it has zero- or negative-width margin area is irrelevant.


Yes it is. It is the same as saying whether zero width box is  irrelevant.


> The 
> only thing that matters is the location of its right outer edge.  (See 
> also the related discussion in [1,2] where we're dealing with line boxes 
> rather than right floats.)
> 
> 
> [1] http://lists.w3.org/Archives/Public/www-style/2010Aug/0182.html
> [2] http://lists.w3.org/Archives/Public/www-style/2010Sep/0129.html
> 
> Cheers,
> Anton Prowse


Anton, the right outer edge can have a negative width. This is why 
line boxes or other elements with a display value of inline-block or 
floats can appear over floats.


<!DOCTYPE html>
<div style="float: left; width: 100px; height: 100px; 
margin-right:-100px; background: blue;"></div>text text text text text


<!DOCTYPE html>
<div style="float: left; width: 100px; height: 100px; 
margin-right:-100px; background: blue;"></div>
<div style="display: inline-block; width: 200px; height: 50px; 
background: orange;"></div>


<!DOCTYPE html>
<div style="float: left; width: 100px; height: 100px; 
margin-right:-100px; background: blue;"></div>
<div style="float: left; width: 200px; height: 50px; background: 
aqua;"></div>


It is also why elements with values that establish a new block 
formatting context can appear under floats.


<!DOCTYPE html>
<div style="float: left; width: 100px; height: 100px; 
margin-right:-100px; background: blue;"></div>
<div style="overflow: hidden; width: 200px; height: 50px; background: 
orange;"></div>



-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Friday, 22 October 2010 07:43:13 UTC