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

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
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout

"
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
http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows

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
http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#collapsing-margins


Additional test
---------------
http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/child-margins-orthogonal-flow-collapsing-2.xht

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

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.

Gérard

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