CSS Test: Image Fit - Overflow determines how to render content outside a replaced element's box

Discussion

Melinda Grant, 2008/08/04 18:20

Shorten up the title. How about: 'Image fit and overflow'

The 'none' value is going away, so use 'cover' for this.

Lose the 'paged' flag, as image-fit applies to visual media.

Need one image per possible value for 'overflow', to show the different effects. (Well, I'm not sure what you'd prove with 'auto', so maybe just 'visible', 'hidden', and 'scroll'.)

Melinda Grant, 2008/08/04 18:27

Oh, also, please use jpg images for all print tests.

Tom Clancy, 2008/08/05 09:31

I created jpg versions of all png and gif images I had and updated all of the image-fit tests. If I can be newsy, I know gif has copyright issues, but why no png?

Tom Clancy, 2008/08/05 10:09

Ok, I've added images for the other two cases. I'm flying blind on these as Prince doesn't know about the property. Are there any nightly browser builds (or some other user agent) I can use to test these?

Melinda Grant, 2008/08/05 19:00

The only implementation I know of currently is HP's embedded one. The reason we do jpg's for print tests is that XHTML-Print only mandates support for jpg images. (My understanding is that gif no longer has copyright issues, btw.)

The blue border doesn't show up that well against the green in this image, so if we stay with this image, I'd change the border color to orange or fuchsia.

OK, let's see if we can simplify the descriptions. How about:

   (first image style)  Leave off the border, so it's clear that the reference image doesn't include the border.  (I'd also make it a bit heavier on the other images, say 3pt.)
   (first image text)  "This is the reference image.  All other images on the page have the same height as this one."
   (second image text) "The orange box above should be half as wide as the reference image and be filled with the middle portion of the reference image."
   (third image text)  "The image above should match the reference image, except that it has orange bars centered along its top and bottom edges."
   (fourth image text) "The orange box above should be half as wide as the reference image.  If the UA is interactive, the middle portion of the image should be initially displayed, and scroll bars should provide access to the hidden parts of the image.  When printed, it should appear the same as either of the two preceding images." 

Since the default position for image-position is centered, the 'hidden' and 'scroll' instances will display the middle 50% of the image. It would be best to create an image that clearly delineates the middle 50% – say with vertical bars. Make the middle 50% minus 1 px on each side green, then a 1px vertical black line on each side (to delineate the 50% boundary), then blue vertical bars on each side. Then we could assert for the second image that the orange box should be filled with the green and black portions of the reference image, and there should be no blue visible.

We also need to test vertical overflow, but probably best to do that in another test. In which case, need to change this title to 'Image fit and overflow hz' or some such.

Tom Clancy, 2008/08/07 09:35

Created new image per your instructions and updated language and styles.

Melinda Grant, 2008/08/13 16:15

In the description, s/on the page/in this test/. (Prints on multiple pages at 4×6.)

Change the image so that the green extends all the way to the top and bottom (blue stripe, green stripe, blue stripe); add to the description of the 'hidden' testcase that no blue shows.

In the 'visible' testcase, remove the second sentence.

Tom Clancy, 2008/11/17 13:34

Think I got everything (I updated this in pieces so let me know if I missed anything).

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