CSS Test: Image Fit - contain with height/width auto


Tom Clancy, 2008/09/26 08:35

Hope I got this right. There are two more combinations I could have added, .skinny+.short and .fat+.tall, but I wasn't sure if those were useful. Wanted to see if this was the right approach first anyway.

Melinda Grant, 2008/11/05 19:09

I think the approach I outlined for -c was better. Your sub-assertions are missing that the aspect ratio must be retained; so for each assertion, not only is the height (width) determined by max-height (max-width), but the width is also thereby determined by the aspect ratio. That needs to be proved as well. That's why I put the image with its border in a div that I calculated the width for and put a border on it – to ensure that the borders juxtaposed, showing both the height and the width were right-sized. Also I think it gets too long this way.

I suggest going back to -c and creating a similar version for max-width. Then we can add two more tests, one like -c but with aspect ratios wider-than-tall, and one for max-width with aspect ratios taller-than-wide.

But -c needed some improvements too: the lime border isn't visible enough next to the green, so change to orange or blue. We need to prove that the boxes are 200px tall. (Maybe create a ruler image (or use an existing one) and float it left next to the image containers…) And the assertion would be better as “When 'image-fit' is 'contain' and 'height' and 'width' are 'auto' and 'max-width' is 'none' and 'max-height' is not 'none', the image height becomes 'max-height' and its aspect ratio is retained.”

Tom Clancy, 2008/12/03 10:39

Ok, I've revised this test based on all the feedback I could assemble. I haven't broken it into 3 tests yet because I wanted to make sure my approach looked correct and confirm that it should still be 3 separate tests. I changed the borders to orange, thickened them, added black rulers and created a new image that has an inherent height:width of 3:2.

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