W3C home > Mailing lists > Public > www-style@w3.org > December 2014

Re: [css-writing-modes] Margin Collapsing Orthogonal Flows

From: Gérard Talbot <www-style@gtalbot.org>
Date: Sun, 21 Dec 2014 00:28:47 -0500
To: fantasai <fantasai.lists@inkedblade.net>, MURAKAMI Shinyu <murakami@antenna.co.jp>
Cc: W3C www-style mailing list <www-style@w3.org>
Message-ID: <a0a20bf8c391b7b8b2e4064125926882@gtalbot.org>
Le 2014-12-19 20:16, Gérard Talbot a écrit :
> Le 2014-12-19 19:32, fantasai a écrit :
>> Gérard has been testing Writing Modes and found an interesting
>> discrepency between Webkit/Blink and Gecko:
>> <horizontal-tb>
>>   <vertical-lr>
>>     <p>I have margins</p>
>>   </vertical-lr>
>> </horizontal-tb>
>> In Firefox, the left and right margins of the <p> collapse out
>> through the content edge of <vertical-lr>.
>> In Webkit, they are contained by <vertical-lr>'s content box.
>> I am wondering what is the preferred behavior in such a case:
>> should these margins collapse?
>> ~fantasai
> Reduced test:
> http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/child-margins-orthogonal-flow-collapsing.xht
> No presence of orange square in Firefox 37.0a1 build 20141215.
> Computed width of div in Firefox 37.0a1: 100px
> Presence of orange square in IE11 (I don't know its minor version) and
> Chrome 39.0.2171.95.
> Computed width of div in Chrome 39: 200px
> Gérard

Spec quotes
The margin collapsing rules apply exactly with the block-start margin 
substituted for the top margin and the block-end margin substituted for 
the bottom margin.
7.4 Flow-Relative Mappings

because the containing block is in a horizontal writing mode, the 
vertical margins on the child participate in margin-collapsing, even 
though they are in the inline-axis of the child
Section 7.3 Orthogonal Flows, Example 14

This seems to suggests that margin collapsing should occur and that 
Chrome and IE11 are correct.

Two margins are adjoining if and only if:

     both belong to in-flow block-level boxes that participate in the 
same block formatting context
     no line boxes, no clearance, no padding and no border separate them 
(Note that certain zero-height line boxes (see 9.4.2) are ignored for 
this purpose.)
     both belong to vertically-adjacent box edges, i.e. form one of the 
following pairs:
         top margin of a box and top margin of its first in-flow child
         bottom margin of a last in-flow child and bottom margin of its 
parent if the parent has 'auto' computed height
CSS2.1, section 8.3.1 Collapsing margins

Additional test

I believe the latest IE11.0.15 renders this test exactly like Chrome 

Firefox 37.0a1 build 20141215 displays both orange squares only when 
borders are rendered around the div#vert-rl-wrapper and then computed 
width jumps from 100px to 300px.

Received on Sunday, 21 December 2014 05:29:19 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:49 UTC