CSS Test: Image Fit - Laying out image when image-fit is 'contain' and max-width is set


Melinda Grant, 2008/07/30 18:49

I got a 404 on this…

Tom Clancy, 2008/07/31 05:23

Sorry, all the img-fit tests should be “image-fit”. Will correct all.

Melinda Grant, 2008/08/04 16:45

Let's shorten up the title: I suggest 'Image Fit - contain, max-width less than intrinsic'

We need to use a distinctly non-square image here, to prove that the intrinsic ratio is maintained.

We also need to assert/prove that the image width becomes (in this case) the intrinsic width. I'd probably use another copy of the image, setting both width and height to 'auto' to ensure the intrinsic size is used and giving it the same border; then assert that they must appear identical.

We also need a version of this test where the intrinsic image width is greater than max-width, to show that in that case, the image is shrunk down to max-width. (Maybe it already exists, but not easy to check via the wiki…)

Tom Clancy, 2008/08/07 08:59

I'm pretty well confused now, for a number of reasons:

1. I messed this test up and had the max-width greater than the intrinsic of the image I was using. 2. It's been a while since I worked on these tests, so I can't remember if 'contain' is still a vlaid property name. It's not listed at http://www.w3.org/TR/css3-page/#the-fit

Do you think it would be ok to change the title to just be CSS Test: Image Fit - contain, max-width' and have both cases (intrinsic image width greater than and less than max-width)? I'll apply all of the changes to -c as well, which is max-height. I did tweak this test somewhat and re-upload it; please check to ensure I haven't made things worse. Thanks.

Melinda Grant, 2008/08/07 17:55

Yes, 'contain' is still a valid value. See http://dev.w3.org/csswg/css3-page/ for the latest and greatest… Yes, I agree that combining the two cases into one test (and changing the title to match) would be preferable. Actually (more about this below), I think we should add 'height' and make the test title “CSS Test: Image Fit - contain with height/width auto”.

My third statement above, upon a bit of thought ;-), is incorrect. As the spec reads, both images whose intrinsic dimension is less than the max-dimension and those whose intrinsic dimension is greater than the max-dimension will be snapped to the max-dimension. My bad.

So I see three sub-assertions, all of which must preserve the image aspect ratio: 1. If 'width' and 'height' are 'auto', and 'max-width' is set but 'max-height' is not set ('none'), then the image width will become 'max-width'. (Two sub-cases, one with the intrinsic width less than max-width and one with it greater.) 2. If 'width' and 'height' are 'auto', and 'max-height' is set but 'max-width' is 'none', then the image height will become 'max-height'. (Analogous two sub-cases.) 3. If 'width' and 'height' are 'auto', and neither 'max-width' nor 'max-height' is 'none' (both are set), then the resultant image size will be no wider than max-width and no taller than max-height.

I favor bundling these cases all into one test, using three separate pages, one for each sub-assertion. But if you'd prefer to split them out, that's fine.

Tom Clancy, 2008/09/26 08:33

Done and added as 007.xht at http://wiki.csswg.org/test/css2.1/submit/152

You could leave a comment if you were logged in.
test/css2.1/submit/105.txt · Last modified: 2014/12/09 15:48 (external edit)
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki