Re: Issue 101 Resolution

On Tue, Oct 5, 2010 at 5:08 PM, L. David Baron <dbaron@dbaron.org> wrote:
> On Tuesday 2010-10-05 16:48 -0700, Tab Atkins Jr. wrote:
>> Suggested Change
>> ================
>>
>> Current text:
>>
>> # 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.
>> # Analogous rules hold for right-floating elements.
>>
>> Suggested text:
>>
>> | 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
>> | that intersects the left-floating box's parent box.
>> | Analogous rules hold for right-floating elements.
>
> I agree you want to check intersection of horizontal coordinates,
> but I don't think you want to check intersection of vertical
> coordinates.

Ah, correct you are.  Testcase to demonstrate the problem (for rule 7
instead, because that's what I'm writing up right now, but it applies
to 3 as well):

Good behavior, per spec:

<!doctype html>
<div id=container>
  <div id=leftfloat1></div>
  <div id=parent>
    <div id=leftfloat2></div>
  </div>
</div>
<style>
#container {
  width: 400px;
  height: 400px;
  background: yellow;
  border: 1px solid yellow;
}
#leftfloat1 {
  width: 100px;
  height: 100px;
  margin-top: 150px;
  background: green;
  float: left;
}

#leftfloat2 {
  width: 350px;
  height: 100px;
  background: blue;
  float: left;
}
#parent {
  width: 280px;
  height: 120px;
  margin-left: auto;
  border: 3px dotted black;
}
</style>

Bad behavior, which ignores the other float in the BFC:

<!doctype html>
<div id=container>
  <div id=leftfloat1></div>
  <div id=parent>
    <div id=leftfloat2></div>
  </div>
</div>
<style>
#container {
  width: 400px;
  height: 400px;
  background: yellow;
  border: 1px solid yellow;
}
#leftfloat1 {
  width: 100px;
  height: 100px;
  margin-top: 150px;
  background: green;
  float: left;
}

#leftfloat2 {
  width: 350px;
  height: 100px;
  background: blue;
  float: left;
}
#parent {
  width: 320px;
  height: 120px;
  margin-left: auto;
  border: 3px dotted black;
}
</style>

So, amended text:

| 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 whos left outer edge is to the left of the left-floating
box's parent box's right edge. Analogous rules hold for right-floating
elements.

~TJ

Received on Wednesday, 6 October 2010 00:16:06 UTC