W3C home > Mailing lists > Public > www-style@w3.org > February 2012

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

From: Gérard Talbot <www-style@gtalbot.org>
Date: Mon, 20 Feb 2012 15:23:47 -0500
Message-ID: <241bbc85abbd2a479b8bce713b89a744.squirrel@ed-sh-cp3.entirelydigital.com>
To: "Alan Gresley" <alan@css-class.com>
Cc: "W3C www-style mailing list" <www-style@w3.org>

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 20:24:25 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:50 GMT