409304 - using userContent.css to remove BODY margin around image request messes up image autoresize

Status: UNCONFIRMED

(Core :: Layout: Images, Video, and HTML Frames, defect)

Description

[Stewart]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.8) Gecko/20071029 SeaMonkey/1.1.5
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.8) Gecko/20071029 SeaMonkey/1.1.5

I've gotten tired of having image windows (i.e. the result of a window with the location set to "http://www.mozilla.org/images/feature-logos1.png" or similar) having a white margin around the image, so I searched for (and found) a way to remove them: adding a line to my chrome/userContent.css file.

Although this works fine for smaller images (those that don't exceed the display area), it has caused some interesting effects for images that are larger than the window, or that are now barely within the window's available space (due to the reclamation of about 16 pixels horizontally and vertically).

In short, "Fit Image to Window" clearly believes that the margin is still there.  Images that need no scroll bars now can be "Fit" anyway, and larger images are resized to leave at least a 16 pixel space on the right and bottom.

(BTW, if someone can find a better way to have the same desired effect [i.e. removal of the margin space around an image window, but ONLY for image windows] without the undesired results, I'd like to hear about it. :) )


Reproducible: Always

Steps to Reproduce:
1. Add the following line to your chrome/userContent.css file (under your profile directory):
   html body:only-child img:only-child { margin: -8px; }
This assumes that your layout/style/html.css file in your source sets
   body { margin: 8px; }

Going the other direction also causes trouble:
   html body:only-child img:only-child { margin: 30px; }
It's also not only a problem with margin.  "padding" and "border" also break it.

2. Restart the browser, or otherwise cause the change to take effect.

3. Load a large image into the browser.  Your desktop's image might be big enough, or an appropriately-big image could be generated with GIMP fairly quickly.

4. Click on the image to switch between "Fit Image to Window" and not.

Actual Results:  
On my system, the image was placed squarely against the upper-left corner of the browsing display area (as desired), but the image wasn't the right size to fill either dimension when "Fit Image to Window" was active.

(When I tried setting the margin, padding, and border sizes to positive numbers, the browser presented scroll bars when "Fit Image to Window" was active.)


Expected Results:  
The image was should have filled the window as much as possible either horizontally or vertically, taking into account the current style rules in effect.

(In my case, with the image's margin set to -8px, the image should have been touching both the top and left side of the window, and either or both of the bottom and left sides.)


It does work properly if I set
   body { margin: 0px; }
so it's clearly taking the BODY tag's styles into account, but setting the margin for the BODY tag like this sets it for _all_ HTML documents, not just what I'm calling "image windows".

So I suppose it "just" needs to be changed to also take the IMG tag's styles into account as well.

Comment 1

[Stewart]

Unfortunately, it seems that my "solution":
  html body:only-child img:only-child { margin: -8px; }
also affects FRAMEs with their "src" set to an image file with their margin set to 0 (putting part of the picture outside of the display area) as well as IFRAMEs similarly set up.  Even such refined "solutions" as:
  html > body:only-child > img:only-child { margin: -8px; }
  html html > body:only-child > img:only-child { margin: 0px; }
don't help with this one.

However, I did find another construction that works better:
  html > body:only-child > img-only:child {
   position: absolute; top: 0px; left: 0px;
  }

This still has the same "Fit Image to Window" problem noted, but at least it's no longer dependent on the margin size of the BODY tag, and the results appear identical to the original solution in the original case.

Comment 2

[Stewart]

Attachment: Modifies the Image Fit to Window functionality to check the image's style

I don't know how to get the "left:", "top:", "right:", or "bottom:" style properties, so this patch isn't complete.  It does catch that an absolute position has been selected, and it handles margin (and related) adjustments, though; so it's good enough for me. :)

Comment 3

[Boris Zbarsky [:bzbarsky]]

Wouldn't the right fix be to do the sizing based on the position of the image frame, and on its parent?  That seems like it would better handle things like the positioning case (because you know the computed offsets at that point)...

Or is all this happening before we've laid out the image for the first time?