1112454 - background-size:contain failed to render in specific condition

Status: UNCONFIRMED

(Core :: Graphics: ImageLib, defect)

Description

[yeurus]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:34.0) Gecko/20100101 Firefox/34.0
Build ID: 20141126041045

Steps to reproduce:

set a div element to fills its container size with background:
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background-image: url("1px-width.png");
    background-color: #F3E2D3;
    background-size: contain;
 


Actual results:

The background image failed to render(it seem to be depends on its container height).
see in action: http://jsfiddle.net/qhbzf47a/2/



Expected results:

image should be rendered

Comment 1

[yeurus]

updated example: http://jsfiddle.net/qhbzf47a/3/
changes: added new difference way to fill container size(width:100%;height:100%)

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: reporter's testcase, with jsFiddle gunk removed

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: reporter's updated testcase, with jsFiddle gunk removed

Comment 4

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Maybe related to bug 762832?

Can the problem be observed with explicit sizes rather than 'contain'?

If so, is the problem related to the background-size shrinking the image width to some small fraction of a pixel?  If so, at what width does the problem start happening?

Or is something else the trigger?

Comment 5

[yeurus]

1.Can the problem be observed with explicit sizes rather than 'contain'?

A: I think can't, it act like webkit when I tried so, I assumed that it acted as standard behaviour if I didt use contain.

2.If so, is the problem related to the background-size shrinking the image width to some small fraction of a pixel?  If so, at what width does the problem start happening?

A: although is not so, I found that it may have connection between image width <-> container height, like 1px width image <-> 500px/7NN~8NNpx container height, 2px width image <-> 300px container height(please reference to my updated example, maybe is more there but sorry I could't test all of them)