- From: Robert Hogan <robhogan@gmail.com>
- Date: Wed, 25 Jun 2014 22:22:22 +0100
- To: robert@ocallahan.org
- Cc: Bogdan Brinza <bbrinza@microsoft.com>, "www-style@w3.org" <www-style@w3.org>
- Message-ID: <CAD1xn+OT_87XfX3sfH-J=7E1ZLDVxW99tEGPcPJF+2ga2Fv3kQ@mail.gmail.com>
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. 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 Wednesday, 25 June 2014 21:22:50 UTC