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

Re: Image % sizing interoperability

From: Gérard Talbot <www-style@gtalbot.org>
Date: Thu, 26 Jun 2014 11:32:27 -0400
To: Robert Hogan <robhogan@gmail.com>
Cc: Robert O'Callahan <robert@ocallahan.org>, Bogdan Brinza <bbrinza@microsoft.com>, W3C www-style mailing list <www-style@w3.org>
Message-ID: <d19c0de62f8d15a0c81983996897089a@gtalbot.org>
Le 2014-06-26 11:09, Gérard Talbot a écrit :
> 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


There is actually a bug report on this and it is proposing something 
more complete, thorough:

Bug 15392: % height inside of auto-height container should result in % 
computed value but used value is determined as if computed value were 
'auto'
https://www.w3.org/Bugs/Public/show_bug.cgi?id=15392

"
% height inside of auto-height container should result in % computed 
value but used value is determined as if computed value were 'auto'.
"
https://www.w3.org/Bugs/Public/show_bug.cgi?id=15392#c1

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:33:28 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:22 UTC