Re: [CSS21] Floats, overflow: hidden, BFCs and margins

WebKit bug that tracks this issue:

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

Feel free to add more tests if needed. I've incorporated the two pages of tests I've seen in the thread so far.

dave
(hyatt@apple.com)

On Feb 20, 2012, at 2:23 PM, Gérard Talbot wrote:

> 
> Le Lun 20 février 2012 7:59, Alan Gresley a écrit :
>> On 20/02/2012 10:27 PM, Alan Gresley wrote:
>>> On 20/02/2012 11:14 AM, "Gérard Talbot" wrote:
>>>> Hello all,
>>>> 
>>>> Margins and block formating contexts
>>>> http://www.gtalbot.org/BrowserBugsSection/css21testsuite/marges-contexte-formatage.html
>>>> 
>>>> 
>>>> Are the 6 tests in that page correct? The question is important as
>>>> there
>>>> are diverging implementations. If they are not, please quote the
>>>> relevant
>>>> excerpts of the spec.
>>>> 
>>>> Thank you for your feedback, Gérard
>>> 
>>> The test seem to be correct and WebKit (can't check Konqueror) is
>>> rendering Test 1, 2, 4 and 5 incorrectly.
> 
> That's not entirely clear according to Anton Prowse. "Tests 1 and 2 as
> regards the left margin of the
> non-floated BFC, and Tests 4 and 5 as regards the right margin of the
> non-floated BFC, is undefined in CSS21"
> 
> 
>> The below test just focuses on test 1. I have added additional set of
>> test for right floating boxes. There is some weird symmetry in buggy
>> behavior.
>> 
>> 
>> <!doctype html>
>> 
>> <style type="text/css">
>> div.container {width: 500px; border: 5px solid silver; margin: 1em }
>> div.floatL { background-color: lime; float: left; height: 1em; }
>> div.floatR { background-color: lime; float: right; height: 1em; }
>> div.overflow { background-color: orange; overflow: auto; margin-left:
>> 100px; margin-right: 100px; }
>> 
>> #test1 { width: 0 }
>> #test2 { width: 50px }
>> #test3 { width: 100px }
>> #test4 { width: 150px }
>> 
>> </style>
>> 
>> <div class="container"><div id="test1" class="floatL">float</div><div
>> class="overflow">box</div></div>
>> 
>> <div class="container"><div id="test2" class="floatL">float</div><div
>> class="overflow">box</div></div>
>> 
>> <div class="container"><div id="test3" class="floatL">float</div><div
>> class="overflow">box</div></div>
>> 
>> <div class="container"><div id="test4" class="floatL">float</div><div
>> class="overflow">box</div></div>
>> 
>> <div class="container"><div id="test1" class="floatR">float</div><div
>> class="overflow">box</div></div>
>> 
>> <div class="container"><div id="test2" class="floatR">float</div><div
>> class="overflow">box</div></div>
>> 
>> <div class="container"><div id="test3" class="floatR">float</div><div
>> class="overflow">box</div></div>
>> 
>> <div class="container"><div id="test4" class="floatR">float</div><div
>> class="overflow">box</div></div>
> 
> Alan,
> 
> I created your tests and made various adjustments:
> 
> http://www.gtalbot.org/BrowserBugsSection/css21testsuite/Floats-And-BFCs-With-Margins-AG.html
> 
> Gérard
> -- 
> CSS 2.1 Test suite RC6, March 23rd 2011
> http://test.csswg.org/suites/css2.1/20110323/html4/toc.html
> 
> Contributions to CSS 2.1 test suite
> http://www.gtalbot.org/BrowserBugsSection/css21testsuite/
> 
> Web authors' contributions to CSS 2.1 test suite
> http://www.gtalbot.org/BrowserBugsSection/css21testsuite/web-authors-contributions-css21-testsuite.html
> 
>

Received on Monday, 20 February 2012 22:59:48 UTC