Re: Image % sizing interoperability

Le 2014-06-25 17:22, Robert Hogan a écrit :
> The spec says: "The percentage is calculated with respect to the height 
> of
> the generated box's containing block. If the height of the containing 
> block
> is not specified explicitly (i.e., it depends on content height), and 
> this
> element is not absolutely positioned, the value computes to 'auto'. "
> 
> In this case if we give an element 'height:100%' you could argue that 
> we
> are 'specifying' the height 'explicitly' and it doesn't depend on the
> content height. So even though the element's computed value of the 
> height
> is auto, we are not allowed to treat any elements with percentage 
> height it
> contains as having an auto height.
> 
> I don't agree with this way of reading it but I think the use of the 
> words
> 'specified explicitly' (especially in the context of special-meaning 
> terms
> like 'specified value') makes the spec more ambiguous than this thread 
> is
> admitting.

Robert,

I agree that the wording could be improved or made more constraining 
(more restrictive-meaning).

How about:

Current:
"
If the height of the containing block is not specified explicitly (i.e., 
it depends on content height), (...)
"
10.5 Content height: the 'height' property
http://www.w3.org/TR/CSS21/visudet.html#the-height-property

Proposed:
"
If the height of the containing block is specified as 'auto' or resolved 
as 'auto' (i.e., it depends on content height), (...)
"


Gérard

> 
> Hoping I can be corrected on this point  so my change to Blink can sail
> through.
> 
> 
> 
> On 10 June 2014 02:51, Robert O'Callahan <robert@ocallahan.org> wrote:
> 
>> On Tue, Jun 10, 2014 at 11:59 AM, Bogdan Brinza 
>> <bbrinza@microsoft.com>
>> wrote:
>> 
>>>  Another class of issues we’ve encountered while investigating bugs 
>>> is
>>> image sizing.
>>> 
>>> 
>>> 
>>> Consider the following two examples:
>>> http://jsfiddle.net/boggydigital/6D5Nc/
>>> 
>> 
>>> 
>>> 1)      Image has max-height: 100% and 50px on one of the 
>>> grandparents.
>>> IE and Firefox resolve size using image intrinsic size, Chrome uses 
>>> 50px.
>>> 
>>> 2)      Is similar to 1, but uses height: 100% and 50px on one of the
>>> grandparents. Again, IE and Firefox do same thing and Chrome uses 
>>> 50px for
>>> height.
>>> 
>>> 
>>> 
>>> In our investigations this was root cause for many interoperability
>>> issues on mobile sites such as Amazon.com, HM.com, SI.com and few 
>>> others.
>>> 
>>> 
>>> 
>>> As with earlier textarea overflow question – we’d like to clarify the
>>> expected behavior here and ultimately achieve better 
>>> interoperability.
>>> 
>> 
>> As far as I can tell this is just a strange Blink bug. Slightly 
>> altered
>> testcase:
>> <!DOCTYPE HTML>
>> <div style="height:600px;">
>>   <div>
>>     <div style="height:100%; border:2px solid black;">
>>       <img style="height:100%"
>> src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAHklEQVQ4jWP4z8Dwn5qYYdTAUQNHDRw1cNTAkWogAPbLHQ5b76wSAAAAAElFTkSuQmCC">
>>       <div style="height:100px; background:cyan"></div>
>>     </div>
>>   </div>
>> </div>
>> 
>> It's clear the black-border <div> is being laid out with height:auto 
>> (per
>> spec), but somehow the <img> is seeing the <div>'s containing block 
>> height
>> as if we were in quirks mode and the height:100% was honored.
>> 
>> Rob
>> --
>> Jtehsauts  tshaei dS,o n" Wohfy  Mdaon  yhoaus  eanuttehrotraiitny  
>> eovni
>> le atrhtohu gthot sf oirng iyvoeu rs ihnesa.r"t sS?o  Whhei csha iids  
>> teoa
>> stiheer :p atroa lsyazye,d  'mYaonu,r  "sGients  uapr,e  tfaokreg 
>> iyvoeunr,
>> 'm aotr  atnod  sgaoy ,h o'mGee.t"  uTph eann dt hwea lmka'n?  gBoutt  
>> uIp
>> waanndt  wyeonut  thoo mken.o w
>>

Received on Thursday, 26 June 2014 15:10:31 UTC