[Webkit-unassigned] [Bug 249100] REGRESSION(STP159) [WPT] css/CSS2/floats/floats-zero-height-wrap-002.xht

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=249100

--- Comment #5 from zalan <zalan at apple.com> ---
let's start with a simple example:

<style>
.float_box {
  float: left;
  width: 50px;
  height: 10px;
}
.first {
  background-color: green;
}
.second {
  float: left;
  background-color: red;
}
</style>
<div class=container>
  <div class="float_box first"></div>
  <div class="float_box second"></div>
  <div class="inline_content">inline content with intrusive float</div>
<div>

this produces the following rendering:
 _____  _____ 
|green|| red | inline content with intrusive float
 -----  -----

let's collapse _second_ float by setting "height: 0px" (and also make it wider, let's say 200px)

as per CSS spec (https://www.w3.org/TR/CSS2/visuren.html#floats)
"
...
Note: this means that floats with zero outer height or negative outer height do not shorten line boxes.
...
"

.second {
  float: left;
  height: 0px;
  width: 200px;
  background-color: red;
}

it should produce a collapsed red float box and we should not shrink the available horizontal space and should not "indent" the line box.
 _____  
|green|[]inline content with intrusive float
 ----- 
        ^ zero height second float is here ([] <- means no horizontal space taken)


now force the second float below the first one by setting "clear: left" on the _second_ float

.second {
  float: left;
  height: 0px;
  width: 200px;
  clear: left;
  background-color: red;
}

since the second float is still collapsed (zero height) this should render the same as before
 _____  
|green|inline content with intrusive float
 ----- 
[]
^ collapsed and cleared float comes here. does not affect line box.

and this is where Safari's previous behavior is different than current trunk behavior where
 _____  
|green|        inline content with intrusive float
 ----- 
[             ]
the inline content is indented by 200px.


After a bit of debugging I noticed that the reason why "clear" changes behavior 
is simply because it pushes the float downward making it not sit at the top of the content box anymore and "force overlap" the inline_content box (vertically) 
(i.e inline_content box starts at 0px and ends at 20px and float box with clear starts (and ends) at 10px (vs 0px before clear)).

So "clear" may not be required if we could push down the float and still overlap it with "inline_content" (vertically)

something like this:

.container {
  padding: 1px;
}
(push down the float -and all other boxes)

.inline_content {
  margin-top: -1px;
}
(and pull up the block container with inline content)

This ensures that the float box "overlaps" the inline_content block container (vertically) just like when it had "clear".

so now we've got no "exotic" clear, just a simple float with 0px height

<style>
.container {
  padding-top: 1px;
}
.float_box {
  float: left;
  width: 50px;
  height: 10px;
}
.first {
  background-color: green;
}
.second {
  float: left;
  height: 0px;
  width: 200px;
  background-color: red;
}

.inline_content {
  margin-top: -1px;
}
</style>
<div class=container>
  <div class="float_box first"></div>
  <div class="float_box second"></div>
  <div class="inline_content">inline content with intrusive float</div>
<div>

since the second float's height is 0px, it should not indent the line box (as we've seen it before ^^^)
should renderer this:
 _____  
|green|[]inline content with intrusive float
 ----- 
       ^ zero height float

and yet shipping Safari renders it like this:

 _____  
|green|[         ]inline content with intrusive float
 ----- 
          ^^ no red is shown (height: 0px;) but it indents the line box.


and if I make the same set of changes to the original test case
(clear is removed on 0px tall float, container gets padding-top: 1px, inline content gets margin-top: -1px)

<div style="padding-top: 1px; width: 500px; height: 500px; float: left; font-size: 12px;">
  <div style="float: left; width: 10px; height: 30px; background-color: black;"></div>
  <div style="float: left; width: 100px; height: 0; background-color: brown;"></div>
  <div style="margin-top: -1px">
    <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: blue;"></span>
    <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: purple;"></span>
    <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: fuchsia"></span>
  </div>
</div>

suddenly the 0px tall float indents the first inline-block

I think this test case has incorrect expectation.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230118/2ab0df19/attachment-0001.htm>